@props(
[
'name',
'model' => null ,
'options' => [],
'placeholder' => ' ',
'selected' => null,
'searchable' => true,
'disabled' => false
]
)

<div x-data="combobox({
    options: @js($options),
    selected: @js($selected),
    placeholder: @js($placeholder),
    searchable: @js($searchable),
    disabled: @js($disabled),
    name: @js($name),
    model: @js($model)
})"
     x-id="['combobox']"
     wire:ignore>
    <div class="relative">
        <!-- Hidden select for form submission -->
        <select x-ref="select" :name="name" :id="$id('combobox')" class="hidden">
            <option x-text="selected ? selected.name : ''" :value="selected ? selected.id : ''"></option>
        </select>

        <!-- Combobox input -->
        <div class="flex items-center input-text p-0" :class="{ 'bg-gray-100': disabled }">
            <input
                x-ref="input"
                x-model="query"
                @click="!disabled && (open = true)"
                @keydown.escape="open = false"
                @keydown.enter.prevent="!disabled && filteredOptions.length && selectOption(filteredOptions[0])"
                @input="!disabled && handleInput()"
                type="text"
                class="flex-grow p-2 border-0 focus:ring-0 bg-transparent"
                :placeholder="placeholder"
                :disabled="disabled"
                :readonly="!searchable"
                @focus="!disabled && searchable && (open = true)"
                :aria-expanded="open"
                :aria-controls="$id('combobox-options')"
                :id="$id('combobox-input')"
                autocomplete="off">

            <!-- Clear button -->
            <button
                x-show="selected && !disabled"
                @click="clearSelection()"
                type="button"
                class="p-2 text-gray-500 hover:text-gray-700"
                aria-label="Clear selection">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                          clip-rule="evenodd"/>
                </svg>
            </button>

            <!-- Toggle button -->
            <button
                @click="toggleDropdown()"
                type="button"
                class="p-2 text-gray-500 hover:text-gray-700 border-r border-gray-300"
                :disabled="disabled"
                aria-label="Toggle dropdown">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                          clip-rule="evenodd"/>
                </svg>
            </button>
        </div>

        <!-- Options dropdown -->
        <div
            x-show="open && !disabled"
            @click.away="open = false"
            x-transition:enter="transition ease-out duration-100"
            x-transition:enter-start="transform opacity-0 scale-95"
            x-transition:enter-end="transform opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-75"
            x-transition:leave-start="transform opacity-100 scale-100"
            x-transition:leave-end="transform opacity-0 scale-95"
            class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-60"
            :id="$id('combobox-options')"
            role="listbox">
            <template x-if="filteredOptions.length === 0 && query !== ''">
                <div class="px-4 py-2 text-gray-700">{{ __('No results found') }}</div>
            </template>

            <template x-for="(option, index) in filteredOptions" :key="option.id">
                <div
                    @click="selectOption(option); open = false"
                    class="cursor-pointer px-4 py-2 hover:bg-gray-100"
                    :class="{ 'bg-gray-100': selected && selected.id == option.id }"
                    role="option"
                    :aria-selected="selected && selected.id == option.id"
                    :id="$id('combobox-option-' + index)">
                    <span x-text="option.name"></span>
                </div>
            </template>
        </div>
    </div>
</div>