@props([
    'type' => 'single',
    'name' => 'date',
    'placeholder' => 'Pilih tanggal',
    'min' => null,
    'max' => null,
    'disablePast' => false,
])

@php
    $isRange = $type === 'range';
@endphp

<div 
    class="fluent-input-date {{ $isRange ? 'is-range' : 'is-single' }}" 
    data-fluent-input-date 
    data-type="{{ $type }}" 
    data-min="{{ $min }}" 
    data-max="{{ $max }}" 
    data-disable-past="{{ $disablePast ? 'true' : 'false' }}"
>

    <div class="fluent-input-date__control">
        <input type="text" class="fluent-input-date__input" readonly placeholder="{{ $placeholder }}">
        <span class="fluent-input-date__icon">
            <x-fluent-icon name="calendar" />
        </span>
    </div>

    {{-- HIDDEN --}}
    @if($isRange)
        <input type="hidden" name="{{ $name }}[start]" data-input-start>
        <input type="hidden" name="{{ $name }}[end]" data-input-end>
    @else
        <input type="hidden" name="{{ $name }}" data-input-single>
    @endif

    <div class="fluent-input-date__dropdown">

        <div class="fluent-input-date__calendar">

            {{-- MONTH 1 --}}
            <div class="fluent-input-date__month" data-month="0"></div>

            {{-- MONTH 2 --}}
            @if($isRange)
                <div class="fluent-input-date__month" data-month="1"></div>
            @endif

        </div>

    </div>

</div>