{{--
    Yeniden kullanılabilir özel (aranabilir) select — operasyon yönetimindeki ile aynı görünüm.
    Kullanım: <select class="js-cselect" data-icon="fa-route" data-search="1|0" ...>...</select>
    ardından bu partial'ı @include('agency.partials.custom-select') ile ekleyin.
    Seçim yapılınca native select'e bubbling 'change' event'i gönderir (form submit / JS listener uyumlu).
--}}
@once
@push('styles')
<style>
    .jcs { position:relative; display:block; width:100%; }
    .jcs-btn { display:inline-flex; align-items:center; gap:9px; width:100%; height:42px; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:11px; padding:0 12px; font-size:.85rem; font-weight:600; color:#334155; cursor:pointer; transition:.18s; }
    .jcs-btn:hover { border-color:#cbd5e1; }
    .jcs.on .jcs-btn { background:#eef2f6; border-color:#94a3b8; }
    .jcs.open .jcs-btn { border-color:#334155; background:#fff; box-shadow:0 0 0 4px rgba(51,65,85,.06); }
    .jcs-btn .jcs-ic { color:#94a3b8; font-size:.82rem; }
    .jcs.on .jcs-btn .jcs-ic { color:#334155; }
    .jcs-btn .jcs-lbl { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .jcs-btn .jcs-caret { color:#94a3b8; font-size:.68rem; transition:transform .2s; }
    .jcs.open .jcs-btn .jcs-caret { transform:rotate(180deg); }
    .jcs-panel { position:fixed; z-index:9999; min-width:230px; max-width:340px; width:max-content; background:#fff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 18px 44px rgba(15,23,42,.18); padding:8px; animation:jcsPop .15s ease; }
    .jcs-panel[hidden] { display:none; }
    @keyframes jcsPop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
    .jcs-search { display:flex; align-items:center; gap:8px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:8px 11px; margin-bottom:6px; color:#94a3b8; }
    .jcs-search input { border:none; outline:none; background:transparent; width:100%; font-size:.85rem; color:#0f172a; }
    .jcs-list { max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; padding-right:2px; }
    .jcs-list::-webkit-scrollbar { width:6px; }
    .jcs-list::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:6px; }
    .jcs-opt { flex:0 0 auto; padding:9px 11px; border-radius:9px; font-size:.85rem; font-weight:600; color:#334155; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.12s; }
    .jcs-opt:hover { background:#f1f5f9; }
    .jcs-opt.sel { background:#334155; color:#fff; }
    .jcs-empty { padding:14px; text-align:center; color:#94a3b8; font-size:.82rem; }
</style>
@endpush

@push('scripts')
<script>
(function () {
    function enhance(sel) {
        if (sel.dataset.jcs) return;
        sel.dataset.jcs = '1';

        const icon = sel.getAttribute('data-icon') || 'fa-filter';
        const forceSearch = sel.getAttribute('data-search');
        const withSearch = forceSearch === '1' || (forceSearch !== '0' && sel.options.length > 6);

        const wrap = document.createElement('div');
        wrap.className = 'jcs' + (sel.value ? ' on' : '');
        // native select'in genişlik/akış sınıfını koru
        if (sel.classList.contains('w-100') || sel.style.width === '100%') wrap.style.width = '100%';
        sel.parentNode.insertBefore(wrap, sel);
        wrap.appendChild(sel);
        sel.style.display = 'none';

        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'jcs-btn';

        const panel = document.createElement('div');
        panel.className = 'jcs-panel';
        panel.hidden = true;

        let search = null;
        if (withSearch) {
            const sw = document.createElement('div');
            sw.className = 'jcs-search';
            sw.innerHTML = '<i class="fas fa-search"></i>';
            search = document.createElement('input');
            search.type = 'text';
            search.placeholder = 'Ara…';
            sw.appendChild(search);
            panel.appendChild(sw);
        }
        const list = document.createElement('div');
        list.className = 'jcs-list';
        panel.appendChild(list);

        wrap.appendChild(btn);
        wrap.appendChild(panel);

        function curText() { const o = sel.options[sel.selectedIndex]; return o ? o.text : ''; }
        function renderBtn() {
            btn.innerHTML = '<span class="jcs-ic"><i class="fas ' + icon + '"></i></span>'
                + '<span class="jcs-lbl">' + curText() + '</span>'
                + '<i class="fas fa-chevron-down jcs-caret"></i>';
            wrap.classList.toggle('on', !!sel.value);
        }
        function buildList(q) {
            q = (q || '').toLowerCase();
            list.innerHTML = '';
            let n = 0;
            Array.from(sel.options).forEach(o => {
                if (q && !o.text.toLowerCase().includes(q)) return;
                n++;
                const it = document.createElement('div');
                it.className = 'jcs-opt' + (o.selected ? ' sel' : '');
                it.textContent = o.text;
                it.addEventListener('click', () => {
                    sel.value = o.value;
                    renderBtn();
                    close();
                    sel.dispatchEvent(new Event('change', { bubbles: true }));
                });
                list.appendChild(it);
            });
            if (!n) { const e = document.createElement('div'); e.className = 'jcs-empty'; e.textContent = 'Sonuç bulunamadı'; list.appendChild(e); }
        }
        function positionPanel() {
            const r = btn.getBoundingClientRect();
            panel.style.minWidth = r.width + 'px';
            panel.style.top = (r.bottom + 6) + 'px';
            let left = r.left;
            const pw = panel.offsetWidth || r.width;
            if (left + pw > window.innerWidth - 8) left = Math.max(8, window.innerWidth - pw - 8);
            panel.style.left = left + 'px';
        }
        function open() {
            document.querySelectorAll('.jcs.open').forEach(x => { if (x !== wrap) { x.classList.remove('open'); x.querySelector('.jcs-panel').hidden = true; } });
            wrap.classList.add('open'); panel.hidden = false;
            if (search) search.value = '';
            buildList('');
            positionPanel();
            window.addEventListener('scroll', positionPanel, true);
            window.addEventListener('resize', positionPanel);
            if (search) setTimeout(() => search.focus(), 20);
        }
        function close() {
            wrap.classList.remove('open'); panel.hidden = true;
            window.removeEventListener('scroll', positionPanel, true);
            window.removeEventListener('resize', positionPanel);
        }

        btn.addEventListener('click', e => { e.stopPropagation(); wrap.classList.contains('open') ? close() : open(); });
        if (search) { search.addEventListener('input', () => buildList(search.value)); search.addEventListener('click', e => e.stopPropagation()); }
        document.addEventListener('click', e => { if (!wrap.contains(e.target)) close(); });

        // Dışarıdan value değişirse (ör. temizle) butonu güncelle
        sel.addEventListener('jcs:refresh', renderBtn);

        renderBtn();
    }

    function initAll() { document.querySelectorAll('select.js-cselect').forEach(enhance); }

    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initAll);
    else initAll();

    window.jcsRefresh = function (sel) { if (sel) sel.dispatchEvent(new Event('jcs:refresh')); };
})();
</script>
@endpush
@endonce