@extends('agency.layouts.app')

@section('title', $term !== '' ? "\"{$term}\" araması" : 'Arama')
@section('page_title', 'Global Arama')

@push('styles')
<style>
.srch-page { max-width: 880px; margin: 0 auto; }

/* Büyük arama çubuğu */
.srch-hero { margin-bottom: 1.25rem; }
.srch-bar {
    display: flex; align-items: center; gap: .9rem;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px;
    padding: .35rem .6rem .35rem 1.15rem;
    box-shadow: 0 2px 16px rgba(15,23,42,.05);
    transition: border-color .2s, box-shadow .2s;
}
.srch-bar:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1), 0 2px 16px rgba(99,102,241,.08); }
.srch-bar .srch-ico { color: #6366f1; font-size: 1.05rem; }
.srch-bar input {
    flex: 1; border: none; outline: none; background: none;
    font-size: 1.05rem; font-weight: 500; color: #0f172a; height: 52px;
}
.srch-bar input::placeholder { color: #94a3b8; font-weight: 400; }
.srch-bar button {
    border: none; background: #6366f1; color: #fff; border-radius: 11px;
    padding: .6rem 1.3rem; font-size: .875rem; font-weight: 700; cursor: pointer;
    transition: background .15s;
}
.srch-bar button:hover { background: #4f46e5; }

/* Modül filtre çipleri */
.srch-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; }
.srch-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1.5px solid #e2e8f0; background: #fff; border-radius: 99px;
    padding: .38rem .85rem; font-size: .8rem; font-weight: 700; color: #475569;
    text-decoration: none; transition: all .15s;
}
.srch-chip:hover { border-color: #c7d2fe; color: #4338ca; }
.srch-chip.active { border-color: #6366f1; background: #6366f1; color: #fff; }
.srch-chip .cnt {
    font-size: .68rem; font-weight: 800; background: #f1f5f9; color: #64748b;
    border-radius: 99px; padding: .08rem .42rem;
}
.srch-chip.active .cnt { background: rgba(255,255,255,.22); color: #fff; }

/* Sonuç grubu kartı */
.srch-group {
    background: #fff; border: 1px solid #f1f5f9; border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04); overflow: hidden; margin-bottom: 1.15rem;
    animation: srchIn .35s cubic-bezier(.22,.9,.36,1) both;
}
@keyframes srchIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.srch-group-h {
    display: flex; align-items: center; gap: .7rem;
    padding: .9rem 1.25rem; border-bottom: 1px solid #f1f5f9; background: #fafbff;
}
.srch-group-h .gico {
    width: 32px; height: 32px; border-radius: 10px; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.srch-group-h .glabel { font-size: .9rem; font-weight: 800; color: #0f172a; }
.srch-group-h .gcount { font-size: .7rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 99px; padding: .15rem .55rem; }
.srch-group-h .gmore { margin-left: auto; font-size: .76rem; font-weight: 700; color: #6366f1; text-decoration: none; }
.srch-group-h .gmore:hover { text-decoration: underline; }

.srch-row {
    display: flex; align-items: center; gap: .85rem; width: 100%;
    padding: .75rem 1.25rem; border: none; background: none; cursor: pointer;
    text-align: left; border-bottom: 1px solid #f8fafc; transition: background .13s;
}
.srch-row:last-child { border-bottom: none; }
.srch-row:hover { background: #f8fafc; }
.srch-row .rico {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.srch-row .rmeta { flex: 1; min-width: 0; }
.srch-row .rtitle { font-size: .9rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-row .rtitle mark { background: #e0e7ff; color: #4338ca; border-radius: 3px; padding: 0 1px; }
.srch-row .rsub { font-size: .75rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-row .rsub mark { background: #fef3c7; color: #92400e; border-radius: 3px; padding: 0 1px; }
.srch-row .rbadge {
    flex-shrink: 0; font-size: .64rem; font-weight: 700; color: #64748b;
    background: #f1f5f9; border-radius: 6px; padding: .2rem .5rem;
}
.srch-row .rgo { flex-shrink: 0; color: #cbd5e1; font-size: .75rem; transition: all .15s; }
.srch-row:hover .rgo { color: #6366f1; transform: translateX(2px); }

/* Boş durumlar */
.srch-empty { text-align: center; padding: 3.5rem 1rem; color: #94a3b8; }
.srch-empty .eico {
    width: 72px; height: 72px; margin: 0 auto 1.1rem; border-radius: 22px;
    background: #fff; border: 1px solid #f1f5f9; box-shadow: 0 2px 12px rgba(0,0,0,.04);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #cbd5e1;
}
.srch-empty .etitle { font-size: 1rem; font-weight: 800; color: #334155; margin-bottom: .3rem; }
.srch-empty .edesc { font-size: .84rem; }
</style>
@endpush

@section('content')
<div class="container-fluid">
<div class="srch-page">

    {{-- Arama çubuğu --}}
    <form class="srch-hero" method="GET" action="{{ route('agency.search.index') }}">
        @if($module) <input type="hidden" name="m" value="{{ $module }}"> @endif
        <div class="srch-bar">
            <i class="fas fa-magnifying-glass srch-ico"></i>
            <input type="text" name="q" value="{{ $term }}" placeholder="Müşteri, tur, tarih, tedarikçi, kaynak, ürün, kullanıcı, sayfa ara…" autofocus autocomplete="off">
            <button type="submit">Ara</button>
        </div>
    </form>

    @if($term !== '' && mb_strlen($term) >= 2)
        {{-- Modül filtreleri --}}
        <div class="srch-chips">
            <a href="{{ route('agency.search.index', ['q' => $term]) }}" class="srch-chip {{ !$module ? 'active' : '' }}">
                <i class="fas fa-layer-group"></i> Tümü
                @if(!$module) <span class="cnt">{{ $total }}</span> @endif
            </a>
            @foreach($modules as $key => $meta)
                @php $g = collect($groups)->firstWhere('key', $key); @endphp
                <a href="{{ route('agency.search.index', ['q' => $term, 'm' => $key]) }}"
                   class="srch-chip {{ $module === $key ? 'active' : '' }}">
                    <i class="fas {{ $meta['icon'] }}"></i> {{ $meta['label'] }}
                    @if($g) <span class="cnt">{{ $g['count'] }}</span> @endif
                </a>
            @endforeach
        </div>

        {{-- Sonuç grupları --}}
        @forelse($groups as $gi => $g)
            <div class="srch-group" style="animation-delay: {{ min($gi * 70, 350) }}ms">
                <div class="srch-group-h">
                    <span class="gico" style="background: {{ $g['color'] }}"><i class="fas {{ $g['icon'] }}"></i></span>
                    <span class="glabel">{{ $g['label'] }}</span>
                    <span class="gcount">{{ $g['count'] }} sonuç</span>
                    @if(!$module && $g['count'] > count($g['items']))
                        <a class="gmore" href="{{ route('agency.search.index', ['q' => $term, 'm' => $g['key']]) }}">
                            +{{ $g['count'] - count($g['items']) }} sonuç daha →
                        </a>
                    @endif
                </div>
                @foreach($g['items'] as $it)
                    <button type="button" class="srch-row"
                            data-url="{{ $it['url'] }}" @if($it['qv']) data-qv="{{ $it['qv'] }}" @endif
                            @if($it['blank'] ?? false) data-blank="1" @endif>
                        <span class="rico" style="background: {{ $g['bg'] }}; color: {{ $g['color'] }}"><i class="fas {{ $g['icon'] }}"></i></span>
                        <span class="rmeta">
                            <span class="rtitle d-block srch-hl">{{ $it['title'] }}</span>
                            @if($it['sub']) <span class="rsub d-block srch-hl">{{ $it['sub'] }}</span> @endif
                        </span>
                        @if($it['badge']) <span class="rbadge">{{ $it['badge'] }}</span> @endif
                        <i class="fas fa-arrow-right rgo"></i>
                    </button>
                @endforeach
            </div>
        @empty
            <div class="srch-empty">
                <div class="eico"><i class="fas fa-magnifying-glass-minus"></i></div>
                <div class="etitle">"{{ $term }}" için sonuç bulunamadı</div>
                <div class="edesc">Farklı bir kelime deneyin — Türkçe karakter ve büyük/küçük harf fark etmez.</div>
            </div>
        @endforelse
    @else
        <div class="srch-empty">
            <div class="eico"><i class="fas fa-wand-magic-sparkles"></i></div>
            <div class="etitle">Her şeyi tek yerden arayın</div>
            <div class="edesc">Müşteri, tur, tur tarihi, satış, ürün, tedarikçi, kaynak, kullanıcı ve sistem sayfaları içinde arayın.<br>En az 2 karakter yazın; Türkçe karakter ve büyük/küçük harf fark etmez.</div>
        </div>
    @endif

</div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const TERM = @json($term);

    // Satır tıklaması: quick-view varsa drawer, tam ekran modül ise yeni sekme, yoksa sayfaya git
    document.querySelectorAll('.srch-row').forEach(r => {
        r.addEventListener('click', () => {
            if (r.dataset.qv && typeof openQuickView === 'function') openQuickView(r.dataset.qv);
            else if (r.dataset.url && r.dataset.blank) window.open(r.dataset.url, '_blank', 'noopener');
            else if (r.dataset.url) window.location.href = r.dataset.url;
        });
    });

    // Türkçe karaktere duyarsız eşleşme vurgusu (1:1 uzunluk korunur)
    if (!TERM) return;
    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 || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    const tokens = norm(TERM).split(/\s+/).filter(Boolean);

    document.querySelectorAll('.srch-hl').forEach(el => {
        const text = el.textContent;
        const ntext = norm(text);
        // Eşleşen aralıkları topla
        const ranges = [];
        tokens.forEach(t => {
            let from = 0;
            for (let guard = 0; guard < 30; guard++) {
                const idx = ntext.indexOf(t, from);
                if (idx < 0) break;
                ranges.push([idx, idx + t.length]);
                from = idx + t.length;
            }
        });
        if (!ranges.length) return;
        // Aralıkları birleştir
        ranges.sort((a, b) => a[0] - b[0]);
        const merged = [ranges[0]];
        for (let i = 1; i < ranges.length; i++) {
            const last = merged[merged.length - 1];
            if (ranges[i][0] <= last[1]) last[1] = Math.max(last[1], ranges[i][1]);
            else merged.push(ranges[i]);
        }
        let html = '', pos = 0;
        merged.forEach(([s, e]) => {
            html += esc(text.slice(pos, s)) + '<mark>' + esc(text.slice(s, e)) + '</mark>';
            pos = e;
        });
        html += esc(text.slice(pos));
        el.innerHTML = html;
    });
})();
</script>
@endpush