{{-- ═══ GLOBAL ARAMA — command palette (Ctrl+K) ═══════════════════════════ --}}
<style>
/* Header yerleşimi: ortadaki arama gerçek merkezde dursun */
.main-header .header-left, .main-header .header-right { flex: 1 1 0; min-width: 0; }
.main-header .header-right { justify-content: flex-end; }
.header-search { flex: 0 1 460px; display: flex; justify-content: center; padding: 0 1rem; }

/* Tetikleyici pill */
.gs-trigger {
    display: flex; align-items: center; gap: .6rem; width: 100%; max-width: 460px;
    height: 40px; padding: 0 .55rem 0 .95rem; cursor: pointer;
    background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px;
    color: #94a3b8; font-size: .855rem; transition: all .2s;
}
.gs-trigger:hover { border-color: #c7d2fe; background: #fff; box-shadow: 0 2px 12px rgba(99,102,241,.08); }
.gs-trigger:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.gs-trigger .gs-tr-txt { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.gs-kbd {
    display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
    font-size: .66rem; font-weight: 700; color: #64748b;
    background: #fff; border: 1px solid #e2e8f0; border-bottom-width: 2px;
    border-radius: 6px; padding: .18rem .4rem; letter-spacing: .3px;
}
.gs-trigger-mobile {
    display: none; width: 38px; height: 38px; border: none; border-radius: 10px;
    background: #f8fafc; color: #64748b; font-size: .9rem; cursor: pointer;
}
@media (max-width: 767.98px) {
    .header-search { flex: 0 0 auto; padding: 0 .25rem; }
    .gs-trigger { display: none; }
    .gs-trigger-mobile { display: flex; align-items: center; justify-content: center; }
}

/* Katman */
.gs-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15,23,42,.42); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: flex-start;
    opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s;
}
.gs-overlay.open { opacity: 1; visibility: visible; }
.gs-palette {
    width: min(640px, 94vw); margin-top: clamp(48px, 11vh, 130px);
    background: #fff; border-radius: 20px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 24px 80px rgba(15,23,42,.3), 0 4px 24px rgba(15,23,42,.12);
    transform: scale(.96) translateY(-14px); opacity: 0;
    transition: transform .26s cubic-bezier(.34,1.4,.64,1), opacity .2s;
    display: flex; flex-direction: column; max-height: min(560px, 78vh);
}
.gs-overlay.open .gs-palette { transform: none; opacity: 1; }

/* Giriş satırı */
.gs-inputrow { display: flex; align-items: center; gap: .8rem; padding: .95rem 1.15rem; border-bottom: 1px solid #f1f5f9; }
.gs-inputrow .gs-ico { color: #6366f1; font-size: 1rem; width: 20px; text-align: center; }
.gs-input {
    flex: 1; border: none; outline: none; background: none;
    font-size: 1.02rem; font-weight: 500; color: #0f172a;
}
.gs-input::placeholder { color: #94a3b8; font-weight: 400; }
.gs-esc { cursor: pointer; }

/* Gövde */
.gs-body { overflow-y: auto; overscroll-behavior: contain; padding: .5rem .6rem .6rem; flex: 1; }
.gs-body::-webkit-scrollbar { width: 7px; }
.gs-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }

.gs-group { margin-bottom: .35rem; }
.gs-group-h {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .6rem .35rem;
}
.gs-group-h .gs-gico {
    width: 20px; height: 20px; border-radius: 6px; font-size: .6rem;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.gs-group-h .gs-glabel { font-size: .68rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #64748b; }
.gs-group-h .gs-gcount { font-size: .64rem; font-weight: 700; color: #94a3b8; background: #f1f5f9; border-radius: 99px; padding: .1rem .45rem; }
.gs-group-h .gs-gmore {
    margin-left: auto; font-size: .68rem; font-weight: 700; color: #6366f1;
    text-decoration: none; padding: .15rem .45rem; border-radius: 6px; transition: background .15s;
}
.gs-group-h .gs-gmore:hover { background: #eef2ff; }

.gs-row {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    padding: .55rem .6rem; border: none; border-radius: 11px; background: none;
    cursor: pointer; text-align: left; position: relative;
    animation: gsRowIn .22s both;
}
@keyframes gsRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.gs-row:hover { background: #f8fafc; }
.gs-row.active { background: linear-gradient(90deg, #eef2ff, #f8faff); }
.gs-row.active::before {
    content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 3px; border-radius: 99px; background: #6366f1;
}
.gs-row .gs-rico {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.gs-row .gs-rmeta { flex: 1; min-width: 0; }
.gs-row .gs-rtitle {
    font-size: .875rem; font-weight: 600; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-row .gs-rtitle mark { background: #e0e7ff; color: #4338ca; border-radius: 3px; padding: 0 1px; }
.gs-row .gs-rsub { font-size: .72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row .gs-rbadge {
    flex-shrink: 0; font-size: .62rem; font-weight: 700; color: #64748b;
    background: #f1f5f9; border-radius: 6px; padding: .18rem .45rem;
}
.gs-row .gs-renter { flex-shrink: 0; color: #cbd5e1; font-size: .7rem; opacity: 0; transition: opacity .15s; }
.gs-row.active .gs-renter { opacity: 1; color: #6366f1; }

/* Durumlar */
.gs-state { padding: 2.2rem 1rem; text-align: center; color: #94a3b8; }
.gs-state .gs-sico {
    width: 52px; height: 52px; margin: 0 auto .8rem; border-radius: 16px;
    background: #f8fafc; border: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: #cbd5e1;
}
.gs-state .gs-stitle { font-size: .875rem; font-weight: 700; color: #475569; margin-bottom: .2rem; }
.gs-state .gs-sdesc { font-size: .76rem; }
.gs-recent-h { font-size: .68rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #94a3b8; padding: .6rem .6rem .4rem; }
.gs-recent-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 .6rem .6rem; }
.gs-recent-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 99px;
    padding: .3rem .75rem; font-size: .78rem; font-weight: 600; color: #475569;
    cursor: pointer; transition: all .15s;
}
.gs-recent-chip:hover { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
.gs-recent-chip i { font-size: .62rem; color: #94a3b8; }

/* Yükleniyor iskeleti */
.gs-skel { padding: .5rem .6rem; }
.gs-skel-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; }
.gs-skel-ico, .gs-skel-l1, .gs-skel-l2 {
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e9eef5 50%, #f1f5f9 75%);
    background-size: 200% 100%; animation: gsShimmer 1.1s infinite linear;
}
.gs-skel-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.gs-skel-l1 { height: 11px; width: 45%; margin-bottom: 6px; }
.gs-skel-l2 { height: 9px; width: 28%; }
@keyframes gsShimmer { to { background-position: -200% 0; } }

/* Alt bar */
.gs-foot {
    display: flex; align-items: center; gap: 1rem;
    padding: .6rem 1rem; border-top: 1px solid #f1f5f9; background: #fafbff;
}
.gs-foot .gs-hint { display: flex; align-items: center; gap: .35rem; font-size: .68rem; color: #94a3b8; font-weight: 600; }
.gs-foot .gs-kbd { font-size: .6rem; padding: .12rem .32rem; }
.gs-foot .gs-all {
    margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
    border: none; background: #eef2ff; color: #4f46e5; border-radius: 8px;
    padding: .35rem .7rem; font-size: .74rem; font-weight: 700; cursor: pointer;
    transition: all .15s; text-decoration: none;
}
.gs-foot .gs-all:hover { background: #6366f1; color: #fff; }
@media (max-width: 575.98px) { .gs-foot .gs-hint { display: none; } }

/* ═══ Header responsive: dar masaüstü (13" laptop / yan panelli tarayıcı) ═══
   Geniş görünüm (>1500px) piksel piksel aynı kalır; aşağısı kademeli daralır.
   Kural: flex-wrap yok, üst üste binme yok — shrink + gizleme ile çözülür. */
@media (min-width: 768px) and (max-width: 1500.98px) {
    .header-search { flex: 0 1 360px; padding: 0 .6rem; min-width: 0; }
    .gs-trigger { min-width: 0; }
    .gs-trigger .gs-kbd { display: none; }          /* Ctrl K kısayol rozeti */
    .hdr-tasks-brand span { display: none; }        /* "Görevler" metni — ikon kalır */
    .main-header .header-right { gap: .5rem; }
    .gqa-btn { margin: 0 .35rem; }
}
@media (min-width: 768px) and (max-width: 1280.98px) {
    .header-search { flex: 0 1 300px; min-width: 170px; padding: 0 .4rem; }
    .page-title { min-width: 0; overflow: hidden; }
    .page-title h4 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .main-header .header-right { gap: .4rem; }
    .hdr-tasks { gap: .25rem; padding: 0 .25rem; }
    .hdr-tasks-brand, .hdr-tk-chip { padding: 0 .4rem; }
}
@media (min-width: 768px) and (max-width: 1200.98px) {
    .hdr-tk-chip.green { display: none; }           /* "bugün tamamlanan" sayacı */
    /* Kullanıcı menüsünde ad gizlenir, avatar + ok kalır */
    .main-header .header-right .dropdown > .btn > .d-md-inline { display: none !important; }
    .main-header { padding-left: 1rem; padding-right: 1rem; }
}
</style>

<div class="header-search">
    <button type="button" class="gs-trigger" id="gsTrigger" aria-label="Global arama">
        <i class="fas fa-magnifying-glass"></i>
        <span class="gs-tr-txt">Müşteri, tur, tedarikçi ara…</span>
        <span class="gs-kbd">Ctrl&nbsp;K</span>
    </button>
    <button type="button" class="gs-trigger-mobile" id="gsTriggerMobile" aria-label="Ara">
        <i class="fas fa-magnifying-glass"></i>
    </button>
</div>

<template id="gsPaletteTpl">
<div class="gs-overlay" id="gsOverlay" role="dialog" aria-modal="true" aria-label="Global arama">
    <div class="gs-palette">
        <div class="gs-inputrow">
            <i class="fas fa-magnifying-glass gs-ico" id="gsInputIco"></i>
            <input type="text" class="gs-input" id="gsInput" placeholder="Müşteri, tur, tarih, tedarikçi, sayfa ara…" autocomplete="off" spellcheck="false">
            <span class="gs-kbd gs-esc" id="gsEsc">ESC</span>
        </div>
        <div class="gs-body" id="gsBody"></div>
        <div class="gs-foot">
            <span class="gs-hint"><span class="gs-kbd">↑↓</span> gezin</span>
            <span class="gs-hint"><span class="gs-kbd">↵</span> aç</span>
            <span class="gs-hint"><span class="gs-kbd">Esc</span> kapat</span>
            <a class="gs-all" id="gsAllBtn" href="{{ route('agency.search.index') }}">
                <i class="fas fa-layer-group"></i> Tüm sonuçlar
            </a>
        </div>
    </div>
</div>
</template>

<script>
(function () {
    const QUICK_URL = @json(route('agency.search.quick'));
    const PAGE_URL  = @json(route('agency.search.index'));
    const RECENT_KEY = 'gs-recent-searches';

    let overlay = null, input = null, body = null, allBtn = null, inputIco = null;
    let debT = null, ctrl = null, flat = [], activeIdx = -1, lastQ = '';

    // Türkçe karaktere/büyük-küçük harfe duyarsız normalizasyon (1:1 uzunluk korunur)
    const TR = {'İ':'i','I':'i','ı':'i','Ş':'s','ş':'s','Ğ':'g','ğ':'g','Ü':'u','ü':'u','Ö':'o','ö':'o','Ç':'c','ç':'c'};
    const norm = s => [...(s || '')].map(ch => TR[ch] || ch.toLowerCase()).join('');
    const esc = s => (s ?? '').toString().replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');

    function hl(text, q) {
        if (!q) return esc(text);
        let out = '', rest = text, nq = norm(q);
        for (let guard = 0; guard < 20 && rest; guard++) {
            const idx = norm(rest).indexOf(nq);
            if (idx < 0) { out += esc(rest); break; }
            out += esc(rest.slice(0, idx)) + '<mark>' + esc(rest.slice(idx, idx + q.length)) + '</mark>';
            rest = rest.slice(idx + q.length);
        }
        return out;
    }

    function mount() {
        if (overlay) return;
        document.body.appendChild(document.getElementById('gsPaletteTpl').content.cloneNode(true));
        overlay = document.getElementById('gsOverlay');
        input = document.getElementById('gsInput');
        body = document.getElementById('gsBody');
        allBtn = document.getElementById('gsAllBtn');
        inputIco = document.getElementById('gsInputIco');
        overlay.addEventListener('click', e => { if (e.target === overlay) close(); });
        document.getElementById('gsEsc').addEventListener('click', close);
        input.addEventListener('input', () => {
            clearTimeout(debT);
            debT = setTimeout(() => search(input.value.trim()), 260);
        });
        input.addEventListener('keydown', onKey);
    }

    function open() {
        mount();
        overlay.classList.add('open');
        document.body.style.overflow = 'hidden';
        input.value = ''; lastQ = '';
        renderIdle();
        setTimeout(() => input.focus(), 60);
    }
    function close() {
        if (!overlay) return;
        overlay.classList.remove('open');
        document.body.style.overflow = '';
        if (ctrl) ctrl.abort();
    }
    const isOpen = () => overlay && overlay.classList.contains('open');

    function recents() {
        try { return JSON.parse(localStorage.getItem(RECENT_KEY)) || []; } catch (e) { return []; }
    }
    function pushRecent(q) {
        if (!q || q.length < 2) return;
        const list = [q, ...recents().filter(x => x !== q)].slice(0, 6);
        localStorage.setItem(RECENT_KEY, JSON.stringify(list));
    }

    function renderIdle() {
        flat = []; activeIdx = -1;
        setAllHref('');
        const r = recents();
        body.innerHTML = `
            <div class="gs-state">
                <div class="gs-sico"><i class="fas fa-wand-magic-sparkles"></i></div>
                <div class="gs-stitle">Her şeyi tek yerden arayın</div>
                <div class="gs-sdesc">Müşteri, tur, tur tarihi, tedarikçi, kaynak, ürün, kullanıcı, sistem sayfaları…</div>
            </div>` + (r.length ? `
            <div class="gs-recent-h">Son aramalar</div>
            <div class="gs-recent-chips">${r.map(q =>
                `<button type="button" class="gs-recent-chip" data-q="${esc(q)}"><i class="fas fa-clock-rotate-left"></i>${esc(q)}</button>`).join('')}
            </div>` : '');
        body.querySelectorAll('.gs-recent-chip').forEach(c =>
            c.addEventListener('click', () => { input.value = c.dataset.q; input.focus(); search(c.dataset.q); }));
    }

    function renderLoading() {
        body.innerHTML = '<div class="gs-skel">' + Array.from({length: 4}, () => `
            <div class="gs-skel-row">
                <div class="gs-skel-ico"></div>
                <div style="flex:1"><div class="gs-skel-l1"></div><div class="gs-skel-l2"></div></div>
            </div>`).join('') + '</div>';
    }

    function setAllHref(q) {
        if (allBtn) allBtn.href = q ? PAGE_URL + '?q=' + encodeURIComponent(q) : PAGE_URL;
    }

    function search(q) {
        lastQ = q;
        setAllHref(q);
        if (q.length < 2) { renderIdle(); return; }
        if (ctrl) ctrl.abort();
        ctrl = new AbortController();
        renderLoading();
        inputIco.className = 'fas fa-spinner fa-spin gs-ico';
        fetch(QUICK_URL + '?q=' + encodeURIComponent(q), { headers: { 'Accept': 'application/json' }, signal: ctrl.signal })
            .then(r => r.json())
            .then(d => { if (lastQ === q) render(d, q); })
            .catch(err => { if (err.name !== 'AbortError') body.innerHTML = '<div class="gs-state"><div class="gs-stitle">Arama başarısız oldu</div><div class="gs-sdesc">Lütfen tekrar deneyin.</div></div>'; })
            .finally(() => { inputIco.className = 'fas fa-magnifying-glass gs-ico'; });
    }

    function render(d, q) {
        flat = []; activeIdx = -1;
        const groups = (d.groups || []).filter(g => g.items && g.items.length);
        if (!groups.length) {
            body.innerHTML = `
                <div class="gs-state">
                    <div class="gs-sico"><i class="fas fa-magnifying-glass-minus"></i></div>
                    <div class="gs-stitle">"${esc(q)}" için sonuç yok</div>
                    <div class="gs-sdesc">Farklı bir kelime deneyin veya tüm sonuçlar sayfasına bakın.</div>
                </div>`;
            return;
        }
        let rowNo = 0;
        body.innerHTML = groups.map(g => {
            const rows = g.items.map(it => {
                const fi = flat.length;
                flat.push(it);
                return `<button type="button" class="gs-row" data-fi="${fi}" style="animation-delay:${Math.min(rowNo++ * 22, 240)}ms">
                    <span class="gs-rico" style="background:${esc(g.bg)};color:${esc(g.color)}"><i class="fas ${esc(g.icon)}"></i></span>
                    <span class="gs-rmeta">
                        <span class="gs-rtitle d-block">${hl(it.title, q)}</span>
                        ${it.sub ? `<span class="gs-rsub d-block">${hl(it.sub, q)}</span>` : ''}
                    </span>
                    ${it.badge ? `<span class="gs-rbadge">${esc(it.badge)}</span>` : ''}
                    <i class="fas fa-arrow-turn-down fa-rotate-90 gs-renter"></i>
                </button>`;
            }).join('');
            return `<div class="gs-group">
                <div class="gs-group-h">
                    <span class="gs-gico" style="background:${esc(g.color)}"><i class="fas ${esc(g.icon)}"></i></span>
                    <span class="gs-glabel">${esc(g.label)}</span>
                    <span class="gs-gcount">${g.count}</span>
                    ${g.count > g.items.length ? `<a class="gs-gmore" href="${PAGE_URL}?q=${encodeURIComponent(q)}&m=${esc(g.key)}">+${g.count - g.items.length} daha →</a>` : ''}
                </div>${rows}</div>`;
        }).join('');
        body.querySelectorAll('.gs-row').forEach(r => {
            r.addEventListener('click', () => pick(parseInt(r.dataset.fi, 10)));
            r.addEventListener('mousemove', () => setActive(parseInt(r.dataset.fi, 10), false));
        });
    }

    function setActive(i, scroll = true) {
        activeIdx = i;
        body.querySelectorAll('.gs-row').forEach(r =>
            r.classList.toggle('active', parseInt(r.dataset.fi, 10) === i));
        if (scroll) body.querySelector(`.gs-row[data-fi="${i}"]`)?.scrollIntoView({ block: 'nearest' });
    }

    function pick(i) {
        const it = flat[i];
        if (!it) return;
        pushRecent(lastQ);
        if (it.qv && typeof openQuickView === 'function') { close(); openQuickView(it.qv); }
        else if (it.url && it.blank) { close(); window.open(it.url, '_blank', 'noopener'); }
        else if (it.url) window.location.href = it.url;
    }

    function onKey(e) {
        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
            e.preventDefault();
            if (!flat.length) return;
            setActive(e.key === 'ArrowDown'
                ? (activeIdx + 1) % flat.length
                : (activeIdx <= 0 ? flat.length - 1 : activeIdx - 1));
        } else if (e.key === 'Enter') {
            e.preventDefault();
            if (activeIdx >= 0) pick(activeIdx);
            else if (lastQ.length >= 2) { pushRecent(lastQ); window.location.href = PAGE_URL + '?q=' + encodeURIComponent(lastQ); }
        } else if (e.key === 'Escape') {
            e.preventDefault(); close();
        }
    }

    document.getElementById('gsTrigger')?.addEventListener('click', open);
    document.getElementById('gsTriggerMobile')?.addEventListener('click', open);
    document.addEventListener('keydown', e => {
        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); isOpen() ? close() : open(); }
        else if (e.key === 'Escape' && isOpen()) close();
    });
})();
</script>