@props([
    'id' => 'date',
    'name' => 'date',
    'model' => null,
    'options' => [],
])

@php
    $options = array_merge([
        'dateFormat' => 'd-m-Y',
        'enableTime' => false,
        'altFormat' => 'j F Y',
        'altInput' => true,
    ], $options);
@endphp

<div 
    x-data="{
        value: @entangle($model),
        init() {
            flatpickr(this.$refs.input, {
                ...{{ json_encode($options) }},
                defaultDate: this.value,
                onChange: (selectedDates, dateStr) => {
                    this.value = dateStr;
                }
            });
        }
    }"
    x-init="init()"
>
    <x-label :for="$id" :value="__('Датум и година на раѓање')" class="mb-1 md:mb-2.5" />
    <input 
        type="text"
        x-ref="input"
        x-model="value"
        class="border w-full bg-white py-4 px-5 min-h-[40px] md:min-h-[53px] placeholder:text-neutral-400 placeholder:text-base text-black text-base leading-tight disabled:text-[#9A9AB0] disabled:bg-neutral-200"
        id="{{ $id }}"
        name="{{ $name }}"
        autocomplete="off"
    />
</div>