@props([
    'name',
    'label' => null,
    'placeholder' => 'Pilih opsi',
    'value' => '',
    'required' => false,
    'disabled' => false,
    'options' => [],
    'hint' => null,
    'searchable' => false, // New prop to enable search
])

<div>
    @if($label)
        <label for="{{ $name }}" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
            {{ $label }}
            @if($required)
                <span class="text-error-500">*</span>
            @endif
        </label>
    @endif

    @if(!$searchable)
        <!-- Regular Select -->
        <div x-data="{ isOptionSelected: {{ old($name, $value) ? 'true' : 'false' }} }" class="relative">
            <select
                name="{{ $name }}"
                id="{{ $name }}"
                @if($required) required @endif
                @if($disabled) disabled @endif
                @change="isOptionSelected = true"
                {{ $attributes->merge([
                    'class' => 'h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm placeholder:text-gray-400 focus:outline-hidden focus:ring-3 dark:bg-gray-900 dark:placeholder:text-white/30 shadow-theme-xs ' .
                        ($errors->has($name)
                            ? 'border-error-500 focus:border-error-300 focus:ring-error-500/20 dark:border-error-500 text-gray-800 dark:text-white/90'
                            : 'border-gray-300 focus:border-brand-300 focus:ring-brand-500/20 dark:border-gray-700 dark:focus:border-brand-800')
                ]) }}
                :class="isOptionSelected ? 'text-gray-800 dark:text-white/90' : 'text-gray-400 dark:text-gray-500'"
            >
                <option value="" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400">{{ $placeholder }}</option>
                @foreach($options as $optionValue => $optionLabel)
                    <option
                        value="{{ $optionValue }}"
                        class="text-gray-700 dark:bg-gray-900 dark:text-gray-300"
                        {{ old($name, $value) == $optionValue ? 'selected' : '' }}
                    >
                        {{ $optionLabel }}
                    </option>
                @endforeach
                {{ $slot }}
            </select>
            <span class="pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </span>
        </div>
    @else
        <!-- Searchable Select -->
        <div x-data="{
                options: @js($options),
                value: @js(old($name, $value)),
                open: false,
                search: '',
                get filteredOptions() {
                    if (this.search === '') {
                        return this.options;
                    }
                    return Object.fromEntries(
                        Object.entries(this.options).filter(([key, label]) => 
                            label.toLowerCase().includes(this.search.toLowerCase())
                        )
                    );
                },
                get selectedLabel() {
                    if (!this.value) return '{{ $placeholder }}';
                    return this.options[this.value] || '{{ $placeholder }}';
                },
                select(key) {
                    this.value = key;
                    this.open = false;
                    this.search = '';
                    this.$dispatch('change', key); // Emit change event
                },
                toggle() {
                    if (!this.disabled) {
                        this.open = !this.open;
                        if(this.open) {
                             this.$nextTick(() => this.$refs.searchInput.focus());
                        }
                    }
                }
            }"
            {{ $attributes->except(['name', 'required', 'disabled'])->merge(['class' => 'relative']) }}
            @click.away="open = false"
        >
            <!-- Hidden input for form submission -->
            <input type="hidden" name="{{ $name }}" :value="value">

            <!-- Trigger Button -->
            <button 
                type="button" 
                @click="toggle()"
                class="relative h-11 w-full text-left appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm shadow-theme-xs focus:outline-hidden focus:ring-3 
                {{ $errors->has($name) 
                    ? 'border-error-500 focus:border-error-300 focus:ring-error-500/20 dark:border-error-500' 
                    : 'border-gray-300 focus:border-brand-300 focus:ring-brand-500/20 dark:border-gray-700 dark:focus:border-brand-800' }}
                dark:bg-gray-900"
                :class="value ? 'text-gray-800 dark:text-white/90' : 'text-gray-400 dark:text-gray-500'"
            >
                <span x-text="selectedLabel" class="block truncate"></span>
                <span class="pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                    <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </span>
            </button>

            <!-- Dropdown -->
            <div 
                x-show="open" 
                x-transition
                class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-800 dark:bg-gray-900"
                style="display: none;"
            >
                <div class="px-2 py-1 sticky top-0 bg-white dark:bg-gray-900">
                    <input 
                        x-ref="searchInput"
                        x-model="search"
                        type="text" 
                        class="w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-1.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-hidden focus:ring-1 focus:ring-brand-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
                        placeholder="Search..."
                    >
                </div>
                
                <template x-for="(label, key) in filteredOptions" :key="key">
                    <div 
                        @click="select(key)"
                        class="cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800"
                        :class="value == key ? 'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400 font-medium' : 'text-gray-700 dark:text-gray-300'"
                    >
                        <span x-text="label"></span>
                    </div>
                </template>
                
                <div x-show="Object.keys(filteredOptions).length === 0" class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
                    Tidak ada opsi ditemukan.
                </div>
            </div>
        </div>
    @endif

    @if($hint && !$errors->has($name))
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ $hint }}</p>
    @endif

    @error($name)
        <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
    @enderror
</div>