@props([
    'nameCheckin',
    'nameCheckout',
    'valueCheckin' => '',
    'valueCheckout' => ''
])

<div
    x-data="{
        init() {
            this.$nextTick(() => {
                flatpickr(this.$refs.picker, {
                    mode: 'range',
                    showMonths: 2,
                    dateFormat: 'Y-m-d',
                    minDate: 'today',
                    locale: 'es',
                    defaultDate: [
                        '{{ $valueCheckin }}',
                        '{{ $valueCheckout }}'
                    ].filter(Boolean),
                    onChange: (selectedDates) => {
                        if (selectedDates.length === 2) {
                            this.$refs.checkin.value = this.formatDate(selectedDates[0]);
                            this.$refs.checkout.value = this.formatDate(selectedDates[1]);
                        }
                    }
                });
            });
        },
        formatDate(date) {
            return date.toISOString().split('T')[0];
        }
    }"
    x-init="init()"
    class="input-primary"
>
    <div class="relative">
        <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none z-10">
            <x-icons.calendar />
        </div>
        <input
            x-ref="picker"
            type="text"
            readonly
            placeholder="Selecciona el rango de fechas"
            class="pl-12!"
        >
        <input type="hidden" name="{{ $nameCheckin }}" x-ref="checkin" value="{{ $valueCheckin }}">
        <input type="hidden" name="{{ $nameCheckout }}" x-ref="checkout" value="{{ $valueCheckout }}">
    </div>
    @error($nameCheckin)
        <p class="error-text">{{ $message }}</p>
    @enderror
    @error($nameCheckout)
        <p class="error-text">{{ $message }}</p>
    @enderror
</div>