@props(['options' => []])
@php
	$options = [
		'mode' => 'range',
		'static' => true,
		'monthSelectorType' => 'static',
        'dateFormat' => 'M j, Y',
		'maxDate' => 'today',
		'prevArrow' => '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
		'nextArrow' => '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
	] + $options;
@endphp

<div class="relative" wire:ignore>
    <input
			x-data="{
				value: $wire.entangle('{{ $attributes->wire('model')->value() }}'),
				instance: undefined,
				init() {
					this.instance = flatpickr(this.$refs.input, {...{{ json_encode($options) }}, ...{
						defaultDate: this.value.split(' - '),
						onReady: (selectedDates, dateStr, instance) => {
							instance.element.value = dateStr.replace('to', '-');
							const customClass = instance.element.getAttribute('data-class');
							instance.calendarContainer.classList.add(customClass);
						},
						onChange: (selectedDates, dateStr, instance) => {
							instance.element.value = dateStr.replace('to', '-');
						},
						onClose: (selectedDates, dateStr, instance) => {
							instance.element.value = dateStr.replace('to', '-');
							@this.call('$refresh');
						},
					}});
				}}"
			x-ref="input"
			x-bind:value="value"
			{{ $attributes->merge(['class' => 'form-input pl-9 dark:bg-slate-800 text-slate-500 hover:text-slate-600 dark:text-slate-300 dark:hover:text-slate-200 font-medium w-[15.5rem]']) }}
			placeholder="Select dates"
			data-class="flatpickr-right"
	/>
    <div class="absolute inset-0 right-auto flex items-center pointer-events-none">
        <svg class="w-4 h-4 fill-current text-slate-500 dark:text-slate-400 ml-3" viewBox="0 0 16 16">
            <path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
        </svg>
    </div>
</div>
