@props([
    'label' => $label,
    'plugins' => false,
])

<div>
    <label for="{{ $attributes->whereStartsWith('wire:model')->first() }}"
        class="font-medium text-sm text-gray-600 dark:text-gray-500">
        {{ $label }}
    </label>

    <div class="mt-1 relative rounded-md shadow-sm w-full" wire:ignore>
        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
            <x-icon name="calendar-days" class="w-5 h-5 text-gray-400 dark:text-white" />
        </div>

        <input type="date" x-ref="input" id="{{ $attributes->whereStartsWith('wire:model')->first() }}"
            x-data="{
                value: @entangle($attributes->wire('model')),
                instance: undefined,
                init() {
                    $watch('value', value => this.instance.setDate(value, false));
                    this.instance = flatpickr(this.$refs.input, {
                        altInput: true,
                        altFormat: 'j F Y',
                        dateFormat: 'Y-m-d',
                        locale: 'id',
                        @if($plugins)
                        plugins: [
                            new monthSelectPlugin({
                                shorthand: true,
                                dateFormat: 'Y-m',
                                altFormat: 'F Y'
                            })
                        ],
                        @endif
                    });
                }
            }"
            {{ $attributes->class([
                'block w-full text-sm rounded-md dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:ring-gray-600 dark:placeholder-gray-400 border-0 py-2.5 pl-12 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary',
            ]) }}>
    </div>

    @error($attributes->whereStartsWith('wire:model')->first())
        <p class="mt-2 text-sm text-red-600">
            {{ $message }}
        </p>
    @enderror
</div>