@props([
    'name',
    'label' => null,
    'value' => null,
    'mode' => 'single', // single|multiple|range
    'enableTime' => false,
    'dateFormat' => null,
    'minDate' => null,
    'maxDate' => null,
    'disable' => [],
    'placeholder' => 'Select date...',
    'help' => null,
    'error' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
@endphp

<x-forms.field :name="$name" :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="datePicker({
            value: @js($value), mode: @js($mode), enableTime: {{ $enableTime ? 'true' : 'false' }},
            dateFormat: @js($dateFormat), minDate: @js($minDate), maxDate: @js($maxDate), disable: @js($disable),
         })" class="relative">
        <i class="fa-solid fa-calendar-days pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400" aria-hidden="true"></i>
        <input type="text" id="{{ $name }}" name="{{ $name }}" x-ref="input" x-model="value"
               placeholder="{{ $placeholder }}" autocomplete="off"
               class="w-full rounded-xl border border-slate-300 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-900 shadow-sm transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15">
    </div>
</x-forms.field>