@include('garage.partials.ledger-label-helpers')
@php
    $searchId = $searchId ?? 'customerSearch';
    $selectId = $selectId ?? 'gsCustomer';
    $emptyOption = $emptyOption ?? '— Select customer —';
    $searchUrl = $searchUrl ?? route('garage.api.ledgers.customers.search');
@endphp
@push('scripts')
<script>
(function () {
    var searchEl = document.getElementById(@json($searchId));
    var selEl = document.getElementById(@json($selectId));
    if (!searchEl || !selEl || !window.GarageLedgerLabel) return;

    function debounce(fn, wait) {
        var t;
        return function () {
            var ctx = this, args = arguments;
            clearTimeout(t);
            t = setTimeout(function () { fn.apply(ctx, args); }, wait);
        };
    }
    function escapeHtml(s) {
        return String(s || '').replace(/[&<>"']/g, function (c) {
            return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
        });
    }

    searchEl.addEventListener('input', debounce(async function () {
        var term = String(searchEl.value || '').trim();
        if (term.length < 3) return;
        try {
            var res = await fetch(@json($searchUrl) + '?term=' + encodeURIComponent(term), { headers: { Accept: 'application/json' } });
            if (!res.ok) return;
            var list = await res.json();
            var cur = selEl.value;
            selEl.innerHTML = '<option value="">' + @json($emptyOption) + '</option>' + (list || []).map(function (c) {
                var label = c.label || (window.GarageLedgerLabel ? window.GarageLedgerLabel.customer(c) : (c.name || ''));
                return '<option value="' + c.id + '">' + escapeHtml(label) + '</option>';
            }).join('');
            if (cur) selEl.value = cur;
            if (window.jQuery && window.jQuery.fn && window.jQuery.fn.chosen) {
                jQuery(selEl).trigger('chosen:updated');
            }
        } catch (e) {}
    }, 250));
})();
</script>
@endpush