{{-- 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).

    Performa: jangan kirim opsi besar per baris.
    - `:options` (default) → JSON ikut di HTML (kecil saja: pemasok, gudang, unit).
    - `source="materials"` → opsi di-fetch SEKALI per sesi browser lewat
      route('api.material-options') lalu dibagi ke semua baris via Alpine.store;
      parse terjadi saat dropdown pertama dibuka (lazy), bukan saat halaman load.

    @props:
      options  : ['value' => id, 'label' => teks]  (dipakai bila tanpa `source`)
      source   : nama Alpine store bersama (mis. 'materials')
      sourceUrl: URL JSON sumber store (default: api.material-options)
      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' => [],
    'source' => null,
    'sourceUrl' => null,
    'value' => null,
    'label' => '',
    'name' => '',
    'placeholder' => 'Cari…',
    'disabled' => false,
    'required' => false,
])
<div
    x-data="{
        open: false,
        loading: false,
        q: '',
        style: {},
        /** Dropdown dibuka ke atas bila ruang di bawah tombol tidak cukup (baris form di bawah layar). */
        dropUp: false,
        listMax: 224,
        source: @js($source),
        sourceUrl: @js($sourceUrl ?: route('api.material-options')),
        options: null,
        /** Pastikan store bersama sudah ada + terisi (fetch sekali per sesi). */
        async ensureSource() {
            if (!this.source) {
                if (!this.options) this.options = JSON.parse($el.dataset.options || '[]');
                return;
            }
            let st = Alpine.store(this.source);
            if (!st) {
                st = {
                    items: null,
                    loading: false,
                    url: this.sourceUrl,
                    async load() {
                        if (this.items || this.loading) return;
                        this.loading = true;
                        try {
                            const r = await fetch(this.url, { headers: { Accept: 'application/json' } });
                            this.items = r.ok ? await r.json() : [];
                        } catch (e) { this.items = []; }
                        this.loading = false;
                    },
                };
                Alpine.store(this.source, st);
            }
            if (!st.items) { this.loading = true; await st.load(); this.loading = false; }
            this.options = st.items || [];
        },
        get filtered() {
            return (this.options || []).filter(o => String(o.label).toLowerCase().includes(this.q.toLowerCase())).slice(0, 20);
        },
        async openDropdown() {
            if ({{ $disabled ? 'true' : 'false' }}) return;
            await this.ensureSource();
            const r = $refs.btn.getBoundingClientRect();
            const gap = 4;
            const searchH = 45;   // input cari + border
            const listH = 224;    // setara max-h-56
            const margin = 8;
            const spaceBelow = window.innerHeight - r.bottom - gap - margin;
            const spaceAbove = r.top - gap - margin;
            // Bila sisa ruang bawah kurang dari tinggi dropdown ideal DAN atas lebih lega → buka ke atas.
            this.dropUp = spaceBelow < searchH + listH && spaceAbove > spaceBelow;
            const avail = this.dropUp ? spaceAbove : spaceBelow;
            this.listMax = Math.max(80, Math.min(listH, avail - searchH));
            this.style = this.dropUp
                ? { position: 'fixed', bottom: (window.innerHeight - r.top + gap) + 'px', left: r.left + 'px', width: r.width + 'px' }
                : { position: 'fixed', top: (r.bottom + gap) + '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 }}' } }));
        },
    }"
    @if (! $source) data-options="{{ json_encode(array_values($options), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP) }}" @endif
    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" :style="{ maxHeight: listMax + 'px' }">
            <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="loading" class="px-3 py-2 text-sm text-slate-400">Memuat daftar…</p>
            <p x-show="!loading && !filtered.length" class="px-3 py-2 text-sm text-slate-400">Tidak ada hasil</p>
        </div>
    </div>
</div>