<div x-data="{
        fp: null,
        @if ($hasWireModel())
            value: @entangle($attributes->wire('model')),
        @elseif ($hasXModel())
            value: {{ $attributes->first('x-model') }},
        @else
            value: {{ $value ? "'{$value}'" : 'null' }},
        @endif
        updateValue(newValue) {
            this.value = newValue;
            $dispatch('input', newValue);

            try {
                this.fp.setDate(newValue);
            } catch {}

            @if ($hasXModel())
                {{ $attributes->first('x-model') }} = newValue;
            @endif
        },
     }"
     x-init="fp = flatpickr($refs.input, {
        defaultDate: value,
        onOpen: [
            function (selectedDates, dateStr, instance) {
                instance.setDate(value);
            },
            {{ $onOpen ?? '' }}
        ],
        {{ $jsonOptions() }}
        {{ $optionsSlot ?? '' }}
     })"
     x-on:change="updateValue($event.target.value)"
     class="input-group {{ $getContainerClass() }}"
     {{ $extraAttributes }}
>
    @if ($toggleIcon !== false)
        <span x-on:click="fp.open()"
            class="input-group-text"
            role="button"
            title="{{ __('components.messages.date_picker_toggle_icon_title') }}"
        >
            <span class="h-5 w-5 text-slate-400">
                <x-icon name="calendar" class="icon" />
            </span>
            <i class="tf-icons bx bx-{{$toggleIcon}}"></i>
        </span>
    @else
        @include('partials.leading-addons')
    @endif

    <input
        {{ $attributes->merge(['class' => $inputClass()])->except('type')->whereDoesntStartWith('wire:model') }}

        wire:ignore
        @if ($name) name="{{ $name }}" @endif
        @if ($id) id="{{ $id }}" @endif
        x-ref="input"

        @unless ($hasXModel())
            x-bind:value="value"
        @endunless

        placeholder="{{ $placeholder }}"

        @if ($value && ! $hasBoundModel()) value="{{ $value }}" @endif

        {!! $ariaDescribedBy() !!}
        @if ($hasErrorsAndShow($name))
            aria-invalid="true"
        @endif
    />

    @if ($clearable)
        <div class="trailing-icon pr-3 flex items-center absolute inset-y-0 right-0">
            <button x-show="Boolean(value)"
                    x-transition
                    x-cloak
                    x-on:click="updateValue(null)"
                    class=""
                    type="button"
            >
                <span class="sr-only">{{ __('components.messages.date_picker_clear_button') }}</span>
                <span class="input-group-text"><x-icon :name="$clearIcon" class="icon" />{{--<x-dynamic-component :component="$clearIcon" />--}}</span>
            </button>
        </div>
    @else
        @include('partials.trailing-addons')
    @endif
</div>
