{{-- Combobox searchable v3 — label SERVER-side (paling stabil)
    Tampilan: tombol berisi label (dari server) + dropdown pencarian utk memilih.
    Tidak ada inisialisasi label via JS -> nilai selalu tampil (aman utk edit).

    @props:
      options  : ['value' => id, 'label' => teks]
      value    : nilai saat ini
      label    : label saat ini (dari server — wajib diisi pemanggil)
      name     : path Livewire persis (mis. items.0.pay_type_id)
      placeholder / disabled / required
--}}
@props([
    'options' => [],
    'value' => null,
    'label' => '',
    'name' => '',
    'placeholder' => 'Cari…',
    'disabled' => false,
    'required' => false,
])
<div
    x-data="{
        open: false,
        q: '',
        style: {},
        options: JSON.parse($el.dataset.options || '[]'),
        get filtered() {
            return this.options.filter(o => String(o.label).toLowerCase().includes(this.q.toLowerCase())).slice(0, 20);
        },
        openDropdown() {
            if ({{ $disabled ? 'true' : 'false' }}) return;
            const r = $refs.btn.getBoundingClientRect();
            this.style = { position: 'fixed', top: (r.bottom + 4) + 'px', left: r.left + 'px', width: r.width + 'px' };
            this.open = true;
            this.q = '';
            this.$nextTick(() => this.$refs.search && this.$refs.search.focus());
        },
        select(o) {
            this.open = false;
            $wire.set('{{ $name }}', o.value);
            window.dispatchEvent(new CustomEvent('combobox-selected', { detail: { name: '{{ $name }}' } }));
        },
        clear() {
            this.open = false;
            $wire.set('{{ $name }}', null);
            window.dispatchEvent(new CustomEvent('combobox-selected', { detail: { name: '{{ $name }}' } }));
        },
    }"
    data-options="{{ json_encode(array_values($options), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP) }}"
    class="relative w-full"
    @keydown.escape.window="open = false"
    @scroll.window="open = false"
    @resize.window="open = false"
>
    <button
        type="button"
        x-ref="btn"
        @click="open ? (open = false) : openDropdown()"
        @click.outside="open = false"
        :disabled="{{ $disabled ? 'true' : 'false' }}"
        class="flex w-full items-center gap-1 rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-left text-sm transition focus:border-brand-500 focus:ring-2 focus:ring-brand-200 disabled:bg-slate-100"
    >
        <span class="min-w-0 flex-1 truncate {{ $label ? 'text-slate-700' : 'text-slate-400' }}">{{ $label ?: $placeholder }}</span>
        @if ($label)
            <svg @click.stop="clear()" class="h-3.5 w-3.5 shrink-0 text-slate-400 hover:text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><use href="#mi-x-mark"></use></svg>
        @endif
        <svg class="h-3.5 w-3.5 shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><use href="#mi-chevrons-up-down"></use></svg>
    </button>

    <div x-show="open" x-cloak x-transition.opacity.duration.100ms :style="style"
        class="z-50 rounded-lg border border-slate-200 bg-white shadow-lg">
        <div class="border-b border-slate-100 p-1.5">
            <input x-ref="search" x-model="q" type="text"
                placeholder="Cari {{ $placeholder }}…"
                class="w-full rounded-md border border-slate-200 px-2.5 py-1.5 text-sm outline-none focus:border-brand-500">
        </div>
        <div class="max-h-56 overflow-auto py-1">
            <template x-for="o in filtered" :key="o.value">
                <button type="button" @click="select(o)"
                    class="block w-full truncate px-3 py-1.5 text-left text-sm text-slate-700 transition hover:bg-brand-50 hover:text-brand-700"
                    x-text="o.label"></button>
            </template>
            <p x-show="!filtered.length" class="px-3 py-2 text-sm text-slate-400">Tidak ada hasil</p>
        </div>
    </div>
</div>