@props([
    'placeholder' => 'Pilih Tanggal',
    'label',
    'description',
    'error',
    'disabled' => false,
])

@php
    $isError = isset($error) && strlen($error) > 1;

    $defaultClass =
        'Input-Date w-full bg-gray-100 border rounded px-3 pr-10 py-2 my-1 text-black focus:outline-primary-100 focus:border-transparent focus:bg-white focus:text-black cursor-pointer border-gray-300 ' .
        ($isError ? 'border-red-400/80 text-red-500/80 focus:ring-red-400' : ' ');
@endphp

<x-stack
    class="w-full"
    x-data="{ focus: false }"
>
    @isset($label)
        <label
            class="font-semibold"
            x-bind:class="focus ? 'text-primary-100' : 'text-black/70'"
            for="{{ $attributes->get('id') }}"
        >
            {{ $label }}

            @if ($attributes->get('required'))
                <span class="text-red-400">*</span>
            @endif

        </label>
    @endisset

    @isset($description)
        <span class="text-xs text-black/50">{{ $description }}</span>
    @endisset

    <span
        class="w-full relative"
        x-data="{
            icon: false,
            inputDate(e) {
                new AirDatepicker(e, {
                    locale: localeEn,
                    autoClose: false,
                    multipleDates: false,
                    onSelect: function(fd, date) {
                        e.dispatchEvent(new Event('input', { bubbles: true }))
                    },
                })
            }
        }"
    >
        <input
            {{ $attributes->twMerge($defaultClass)->merge([
                'placeholder' => $placeholder,
                'type' => 'text',
                'data-type' => 'date',
                'autocomplete' => 'one-time-code',
            ]) }}
            x-on:focus="() => {
                focus = true
                if (typeof modalInputPicker !== 'undefined') {
                    modalInputPicker = true
                }
            }"
            x-on:blur="() => {
                focus = false
                if (typeof modalInputPicker !== 'undefined') {
                    modalInputPicker = false
                }
            }"
            x-ref="dateInput"
            x-data="inputDate($refs.dateInput)"
        />

        <button
            class="absolute inset-y-1/2 my-auto right-0 flex rounded-lg p-1 items-center mx-3 text-xl h-fit hover:bg-primary-100 hover:text-white pointer-events-none
            {{ $disabled ? 'text-gray-100/80' : 'text-primary-100/90' }}
            {{ $isError ? 'text-red-400/80' : '' }}"
            type="button"
        >
            <i class="ph ph-calendar-blank"></i>
        </button>
    </span>

    @if ($isError)
        <span class="text-xs text-red-400/80 my-1">{{ $error }}</span>
    @endif

</x-stack>