{{-- Alpine-only searchable select (hidden until click) --}}
<div x-data="searchSelect({
    options: @js($options),
    value: $wire.entangle('value'),
    placeholder: @js($placeholder)
})" class="position-relative">
    {{-- page-scoped: prevents dropdown flash before Alpine starts --}}
    <style>
        [x-cloak] {
            display: none !important
        }
    </style>

    {{-- INPUT (click to open; still allows typing-to-search if you want) --}}
    <div class="input-group" @click="toggle()" @keydown.enter.prevent="toggle()" @keydown.space.prevent="toggle()">
        <input :id="`{{ $inputId }}` || null" x-ref="input" type="text" class="form-control"
            :placeholder="placeholder" :value="displayText" @focus="open = true"
            @input="query = $event.target.value; open = true" autocomplete="off">
        <button class="btn btn-outline-secondary" type="button" x-show="selected !== null"
            @click.stop="clear()">Clear</button>
    </div>

    {{-- DROPDOWN (stays hidden until open=true) --}}
    <div class="dropdown-menu show w-100 mt-1 shadow position-absolute top-100 start-0" x-show="open" x-cloak
        x-transition @click.outside="open = false" style="max-height:240px; overflow:auto; z-index:1060;">
        <template x-if="filtered.length === 0">
            <div class="dropdown-item text-muted">No results</div>
        </template>

        <template x-for="(opt, i) in filtered" :key="opt.id">
            <button type="button" class="dropdown-item d-flex justify-content-between"
                :class="{ 'active': i === highlighted }" @mouseenter="highlighted = i" @click="choose(opt)">
                <span x-text="opt.label"></span>
                <span x-show="opt.id === selected">✓</span>
            </button>
        </template>
    </div>

    {{-- Alpine helper (defined once per page) --}}
    <script>
        if (!window.__searchSelectDefined) {
            window.__searchSelectDefined = true;
            window.searchSelect = function({
                options,
                value,
                placeholder
            }) {
                return {
                    open: false,
                    options,
                    placeholder,
                    query: '',
                    highlighted: 0,

                    // two-way bound selected id
                    get selected() {
                        return value
                    },
                    set selected(v) {
                        value = v
                    },

                    // input shows current label if no query; otherwise shows the query
                    get displayText() {
                        if (this.query) return this.query;
                        const o = this.options.find(o => o.id === this.selected);
                        return o ? o.label : '';
                    },

                    labelOf(id) {
                        return this.options.find(o => o.id === id)?.label ?? ''
                    },

                    get filtered() {
                        const q = this.query.toLowerCase().trim();
                        if (!q) return this.options;
                        return this.options.filter(o => o.label.toLowerCase().includes(q));
                    },

                    toggle() {
                        this.open = !this.open;
                        if (this.open) this.$nextTick(() => this.$refs.input?.focus());
                    },

                    clear() {
                        this.selected = null;
                        this.query = '';
                        this.open = false;
                    },

                    choose(opt) {
                        this.selected = opt.id;
                        this.query = '';
                        this.open = false;
                    }
                }
            }
        }
    </script>
</div>