@php
    $selectedId = old('pegawai_id', $selectedId ?? '');
    $selectedPegawai = $pegawai->firstWhere('id', $selectedId);
    $pickerId = $pickerId ?? ('pegawai_picker_' . uniqid());
@endphp
<div class="pegawai-picker position-relative" id="{{ $pickerId }}">
    <label class="form-label">Pegawai</label>
    <input type="text"
           class="form-control pegawai-picker-input"
           id="{{ $pickerId }}_input"
           value="{{ $selectedPegawai ? $selectedPegawai->nip.' - '.$selectedPegawai->nama : '' }}"
           placeholder="Ketik NIP atau Nama pegawai..."
           autocomplete="off"
           aria-label="Cari pegawai berdasarkan NIP atau Nama">
    <input type="hidden" name="pegawai_id" id="{{ $pickerId }}_value" value="{{ $selectedId }}">
    <div class="pegawai-picker-list list-group position-absolute w-100 shadow-sm bg-white"
         id="{{ $pickerId }}_list"
         style="display:none;z-index:1080;max-height:260px;overflow-y:auto;">
        @foreach($pegawai as $p)
            <button type="button"
                    class="list-group-item list-group-item-action text-start pegawai-picker-option"
                    data-id="{{ $p->id }}"
                    data-text="{{ strtolower($p->nip.' '.$p->nama) }}"
                    data-label="{{ $p->nip.' - '.$p->nama }}">
                <strong>{{ $p->nip }}</strong> - {{ $p->nama }}
            </button>
        @endforeach
    </div>
    <div class="form-text">Ketik NIP atau Nama, lalu pilih pegawai dari hasil pencarian.</div>
</div>
@once
<style>
.pegawai-picker-list{border:1px solid #dee2e6;border-radius:.375rem}
.pegawai-picker-input:focus{box-shadow:0 0 0 .2rem rgba(13,110,253,.12)}
.pegawai-picker-option{white-space:normal}
</style>
@endonce
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const root = document.getElementById(@json($pickerId));
    if (!root || root.dataset.ready === '1') return;
    root.dataset.ready = '1';

    const input = root.querySelector('.pegawai-picker-input');
    const hidden = root.querySelector('input[name="pegawai_id"]');
    const list = root.querySelector('.pegawai-picker-list');
    const options = Array.from(root.querySelectorAll('.pegawai-picker-option'));

    function filterOptions() {
        const q = (input.value || '').trim().toLowerCase();
        let visible = 0;
        options.forEach(function (opt) {
            const match = !q || opt.dataset.text.includes(q);
            opt.style.display = match ? '' : 'none';
            if (match) visible++;
        });
        list.style.display = visible ? 'block' : 'none';
    }

    function choose(opt) {
        hidden.value = opt.dataset.id;
        input.value = opt.dataset.label;
        list.style.display = 'none';
        input.classList.remove('is-invalid');
    }

    input.addEventListener('focus', filterOptions);
    input.addEventListener('input', function () {
        hidden.value = '';
        filterOptions();
    });

    options.forEach(function (opt) {
        opt.addEventListener('mousedown', function (e) {
            e.preventDefault();
            choose(opt);
        });
    });

    document.addEventListener('click', function (e) {
        if (!root.contains(e.target)) list.style.display = 'none';
    });

    const form = root.closest('form');
    form?.addEventListener('submit', function (e) {
        if (hidden.value) return;

        const q = (input.value || '').trim().toLowerCase();
        const exact = options.find(function (opt) {
            return opt.dataset.text === q || opt.dataset.label.toLowerCase() === q;
        });

        if (exact) {
            choose(exact);
            return;
        }

        e.preventDefault();
        input.classList.add('is-invalid');
        input.focus();
        list.style.display = 'block';
        alert('Silakan pilih pegawai berdasarkan NIP atau Nama dari hasil pencarian.');
    });
});
</script>
@endpush