@extends('layouts.app')
@section('title','نتائج البحث')
@section('content')
<div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-purple-900/20 dark:to-blue-900/20">
    <div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
        <!-- Enhanced Header -->
        <header class="mb-10 relative overflow-hidden bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 rounded-3xl p-8 shadow-2xl">
            <div class="absolute inset-0 bg-black opacity-10"></div>
            <div class="relative z-10 text-center">
                <h1 class="text-5xl font-black text-white mb-4 animate-fade-in">🔍 البحث عن شريك الحياة</h1>
                <p class="text-xl text-white/90">ابحث عن الشريك المناسب باستخدام معايير متقدمة</p>
            </div>
        </header>

        <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-8 border border-gray-100 dark:border-gray-700">
            <!-- Search Tabs -->
            <div class="mb-6 sticky top-0 z-30 bg-white/70 dark:bg-gray-900/70 backdrop-blur flex items-center gap-2 border-b-2 border-gray-200 dark:border-gray-700 text-sm rounded-t-xl p-2" role="tablist">
                <div class="relative flex">
                    <button type="button" id="tab-basic" role="tab" aria-selected="true" class="peer px-6 py-3 font-bold relative data-[active=true]:text-purple-600 dark:data-[active=true]:text-purple-400 rounded-xl transition-colors">
                        <span class="inline-flex items-center gap-2">🔍 البحث الأساسي</span>
                        <span class="absolute left-0 right-0 -bottom-px h-1 bg-gradient-to-r from-purple-500 to-pink-500 scale-x-0 origin-right transition-transform data-[active=true]:scale-x-100 data-[active=true]:origin-left rounded-full"></span>
                    </button>
                    <button type="button" id="tab-advanced" role="tab" aria-selected="false" class="peer px-6 py-3 font-bold text-gray-600 dark:text-gray-300 relative data-[active=true]:text-purple-600 dark:data-[active=true]:text-purple-400 rounded-xl transition-colors">
                        <span class="inline-flex items-center gap-2">⚙️ البحث المتقدم <span id="active-filters-count" class="hidden text-[10px] font-semibold bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300 px-2 py-1 rounded-full"></span></span>
                        <span class="absolute left-0 right-0 -bottom-px h-1 bg-gradient-to-r from-purple-500 to-pink-500 scale-x-0 origin-right transition-transform data-[active=true]:scale-x-100 data-[active=true]:origin-left rounded-full"></span>
                    </button>
                </div>
                <div class="ml-auto flex items-center gap-3 pr-2">
                    <button type="button" id="save-current-search" class="text-xs bg-gradient-to-r from-emerald-500 to-teal-500 text-white px-4 py-2 rounded-xl hover:from-emerald-600 hover:to-teal-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">💾 حفظ هذا البحث</button>
                    <button type="button" id="toggle-view" class="text-xs text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-semibold" data-mode="grid">عرض: شبكة</button>
                    <button type="button" id="reset-filters" class="text-xs text-red-600 dark:text-red-400 hover:underline font-semibold" title="إعادة تعيين الفلاتر">تصفير</button>
                </div>
            </div>

            <!-- Saved Search Toolbar -->
            <div id="saved-search-toolbar" class="mb-6 flex flex-wrap gap-3 items-center text-xs relative bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-4 border border-blue-100 dark:border-blue-900/50">
                <button type="button" id="saved-toggle" class="px-4 py-2 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-500 text-white font-semibold hover:from-indigo-600 hover:to-purple-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">📚 عملياتي المحفوظة ▾</button>
                <button type="button" onclick="openSaveDialog()" class="px-4 py-2 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 text-white font-semibold hover:from-emerald-600 hover:to-teal-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">💾 حفظ هذا البحث</button>
                <span class="text-gray-400 hidden md:inline">|</span>
                <span class="text-[11px] text-gray-600 dark:text-gray-400">حدد حتى 4 مستخدمين ثم زر المقارنة العائم سيظهر تلقائياً</span>
                <span class="ml-auto inline-flex items-center gap-2">
                    <span id="alerts-status" class="text-[10px] px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300">&nbsp;</span>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input id="alerts-toggle" type="checkbox" class="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <span class="text-gray-700 dark:text-gray-300">🔔 تنبيهات البحث</span>
                    </label>
                </span>
                <div id="saved-pop" class="hidden absolute mt-1 z-40 bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700 rounded-2xl shadow-2xl min-w-[200px]">
                    <ul id="saved-searches-menu" class="py-2 max-h-64 overflow-auto"></ul>
                </div>
            </div>

            <!-- Active Filter Chips -->
            <div id="active-filter-chips" class="hidden mb-4 flex flex-wrap gap-2 text-[11px]" aria-label="الفلاتر المفعلة"></div>

            <!-- Basic Search Section -->
            <div id="basic-section">
                <form method="GET" action="{{ route('search.index') }}" class="mb-6 grid md:grid-cols-12 gap-4 text-sm bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 p-6 rounded-2xl border-2 border-purple-100 dark:border-purple-900/50" id="search-basic-form">
                    @include('frontend.search.partials.basic-filters')
                </form>
            </div>

            <!-- Advanced Search Section -->
            <div id="advanced-section" class="hidden">
                <form method="GET" action="{{ route('search.index') }}" class="mb-6 text-sm bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 p-6 rounded-2xl border-2 border-blue-100 dark:border-blue-900/50" id="search-advanced-form">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-blue-700 dark:text-blue-300 text-sm">الفلاتر المتقدمة</h3>
                        <button type="button" id="collapse-advanced" class="text-[11px] text-blue-600 dark:text-blue-400 hover:underline" data-state="open">إخفاء</button>
                    </div>
                    <div id="advanced-filters-wrapper" class="space-y-6">
                        @include('frontend.search.partials.advanced-filters')
                        @include('frontend.search.partials.advanced-filters-extended')
                    </div>
                    <div class="mt-6 flex flex-wrap items-center gap-3">
                        <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all duration-300 shadow-lg hover:shadow-xl text-sm">🔍 تطبيق</button>
                        <button type="button" id="close-advanced" class="text-[11px] text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">إغلاق</button>
                    </div>
                </form>
            </div>

            <!-- Results Section -->
            <div id="results-section" class="mt-8">
                @include('frontend.search._results')
            </div>
        </div>
    </div>
</div>
@push('body-end')
<script>
// country->city handler moved to consolidated version later in the file
// Lazy avatars fade-in
function initLazyAvatars(scope){
    if(!scope) scope = document;
    scope.querySelectorAll('img.lazy-avatar').forEach(img=>{
        if(img.complete){ img.classList.remove('opacity-0'); img.nextElementSibling?.remove(); return; }
        img.addEventListener('load',()=>{ img.classList.remove('opacity-0'); img.nextElementSibling?.remove(); });
    });
}
initLazyAvatars();

// Observe appended content
const mo = new MutationObserver(muts=>{
    muts.forEach(m=>{ m.addedNodes.forEach(n=>{ if(n.nodeType===1){ initLazyAvatars(n); } }); });
});
const rwEarly = document.getElementById('results-wrapper');
if(rwEarly){ mo.observe(rwEarly,{childList:true,subtree:true}); }

// Compare feature
const compareState = new Set();
function updateCompareBar(){
    let bar = document.getElementById('compare-bar');
    if(compareState.size===0){ bar?.remove(); return; }
    if(!bar){
        bar = document.createElement('div');
        bar.id='compare-bar';
        bar.className='fixed bottom-4 right-4 left-4 md:left-auto md:w-auto md:max-w-md bg-white dark:bg-gray-800 shadow-lg rounded-xl p-3 flex flex-wrap items-center gap-2 z-40 border border-gray-200 dark:border-gray-700';
        document.body.appendChild(bar);
    }
    bar.innerHTML = '<span class="text-xs font-semibold">مقارنة: '+[...compareState].join(', ')+'</span>'+
        '<button id="compare-run" class="ml-auto text-xs bg-brand-primary text-white px-3 py-1 rounded">عرض</button>'+
        '<button id="compare-clear" class="text-[10px] text-red-500">مسح</button>';
    bar.querySelector('#compare-clear').onclick=()=>{ compareState.clear(); document.querySelectorAll('.compare-toggle').forEach(c=> c.checked=false); updateCompareBar(); };
    bar.querySelector('#compare-run').onclick=runCompare;
}
document.addEventListener('change',e=>{
    if(e.target.classList?.contains('compare-toggle')){
        if(e.target.checked){ if(compareState.size>=4){ e.target.checked=false; return alert('الحد الأقصى 4'); } compareState.add(e.target.value); } else { compareState.delete(e.target.value); }
        updateCompareBar();
    }
});
function runCompare(){
    if(compareState.size<2) return alert('اختر 2 على الأقل');
    fetch("{{ route('search.compare') }}?ids=" + [...compareState].join(','), {headers:{'Accept':'application/json'}})
        .then(r=>r.json())
        .then(showCompareModal)
        .catch(()=>alert('خطأ في المقارنة'));
}
function showCompareModal(payload){
    const existing = document.getElementById('compare-modal'); if(existing) existing.remove();
    const wrap = document.createElement('div');
    wrap.id='compare-modal';
    wrap.className='fixed inset-0 z-50 flex items-center justify-center';
    wrap.innerHTML=`<div class="absolute inset-0 bg-black/40" data-close></div>
        <div class="relative bg-white dark:bg-gray-900 max-w-5xl w-full mx-4 rounded-xl shadow-xl p-6 overflow-auto max-h-[90vh]">
            <button class="absolute top-2 left-2 text-xs text-gray-500" data-close>✕</button>
            <h2 class="text-lg font-semibold mb-4">مقارنة المستخدمين</h2>
            ${renderCompareTable(payload.data || [])}
            <div class="mt-4 flex items-center gap-2">
                <button id="compare-print" class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-3 py-1 rounded">طباعة</button>
                <a id="compare-open-print" target="_blank" class="text-xs text-brand-primary underline">فتح في صفحة للطباعة</a>
            </div>
        </div>`;
    document.body.appendChild(wrap);
    wrap.addEventListener('click',e=>{ if(e.target.dataset.close!==undefined){ wrap.remove(); } });
    wrap.querySelector('#compare-print')?.addEventListener('click', ()=>{ window.print(); });
    const ids = (payload.data||[]).map(r=>r.id).join(',');
    const link = wrap.querySelector('#compare-open-print'); if(link){ link.href = `{{ url('/search/compare/print') }}?ids=${ids}`; }
}
function renderCompareTable(rows){
    if(!rows.length) return '<p class="text-sm">لا بيانات</p>';
    const fieldsOrder = ['avatar','name','age','gender','country','city','marital_status','education_level','height','weight','body_type','occupation_sector','religiosity','pray_frequency','want_children','family_values','lifestyle','smoking','drinking','profile_completeness'];
    const labels = {avatar:'',name:'الاسم',age:'العمر',gender:'الجنس',country:'الدولة',city:'المدينة',marital_status:'الحالة',education_level:'التعليم',height:'الطول',weight:'الوزن',body_type:'الجسم',occupation_sector:'العمل',religiosity:'التدين',pray_frequency:'الصلاة',want_children:'الأطفال',family_values:'قيم العائلة',lifestyle:'نمط الحياة',smoking:'التدخين',drinking:'الشرب',profile_completeness:'اكتمال'};
    let html = '<div class="overflow-auto"><table class="min-w-full text-[11px] md:text-xs border-collapse"><thead><tr>'; 
    html += '<th class="p-2 text-right"></th>' + rows.map(r=>`<th class="p-2 text-center font-semibold">${r.name}</th>`).join('');
    html += '</tr></thead><tbody>';
    fieldsOrder.forEach(f=>{
        html += '<tr class="border-t border-gray-200 dark:border-gray-700">';
        html += `<td class="p-2 font-medium whitespace-nowrap">${labels[f]||f}</td>`;
        rows.forEach(r=>{
            let val = r[f] ?? '';
            if(f==='avatar'){ val = `<img src="${r.avatar}" class="w-10 h-10 rounded-full object-cover" />`; }
            if(f==='profile_completeness'){ val = `<div class='w-16 h-2 bg-gray-200 dark:bg-gray-700 rounded'><div class="h-2 ${r[f]>=80?'bg-emerald-500':r[f]>=50?'bg-amber-500':'bg-rose-500'}" style="width:${r[f]}%"></div></div>`; }
            html += `<td class="p-2 text-center align-middle">${val ?? ''}</td>`;
        });
        html += '</tr>';
    });
    html += '</tbody></table></div>';
    return html;
}

// Saved Searches toolbar (visible)
const savedToolbar = document.getElementById('saved-search-toolbar');
window.runSaved = async function(id){
    try {
        const r = await fetch(`{{ url('/search/saved') }}/${id}?ajax=1`, {headers:{'Accept':'application/json'}});
        if(!r.ok) throw new Error('HTTP '+r.status);
        const json = await r.json();
        resultsWrapper.innerHTML = json.html; initLazyAvatars(); enableAjaxPagination(); setupInfiniteScroll(); document.getElementById('results-total').textContent = json.meta.total; closeSavedMenu();
        // مزامنة الحقول مع الفلاتر المُعادة (إن وُجدت)
        if(json.filters){
            const forms = [document.getElementById('search-basic-form'), document.getElementById('search-advanced-form')];
            forms.forEach(f=>{ if(!f) return; Object.entries(json.filters).forEach(([k,v])=>{
                const el = f.querySelector(`[name="${k}"]`); if(!el) return;
                if(el.type==='checkbox'){ el.checked = v==1 || v==='1' || v===true; }
                else { el.value = v; }
            }); });
            countActiveFilters();
        }
    } catch(e){ alert('تعذر تشغيل البحث المحفوظ'); }
}
window.openSaveDialog = async function(){
    const name = prompt('اسم البحث'); if(!name) return;
    const isAdvancedActive = !document.getElementById('advanced-section')?.classList.contains('hidden');
    const sourceForm = isAdvancedActive ? document.getElementById('search-advanced-form') : document.getElementById('search-basic-form');
    const q = new URLSearchParams(new FormData(sourceForm)); q.append('name', name);
    try {
        const r = await fetch("{{ route('search.save') }}", {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}, body: q});
        if(r.status===401){ alert('يلزم تسجيل الدخول'); return; }
        const j = await r.json();
        if(j.status==='ok'){ loadSavedSearches(); alert('تم الحفظ'); }
        else { alert('خطأ في الحفظ'); }
    } catch(e){ alert('فشل الاتصال بالسيرفر'); }
}
async function loadSavedSearches(){
    try {
        const r = await fetch("{{ route('search.saved.list') }}", {headers:{'Accept':'application/json'}});
        if(!r.ok) throw 0; const list = await r.json();
        const menu = document.getElementById('saved-searches-menu'); if(!menu) return;
        menu.innerHTML = list.map(i=>`<li><button type='button' data-id='${i.id}' class='w-full text-right px-3 py-1 hover:bg-brand-primary/10 text-xs'>${i.name}</button></li>`).join('') || '<li class="px-3 py-2 text-[11px] text-gray-400">لا توجد عمليات محفوظة</li>';
        menu.querySelectorAll('button[data-id]').forEach(b=> b.onclick=()=>runSaved(b.dataset.id));
    } catch(e){ /* تجاهل */ }
}
function toggleSavedMenu(){ const pop = document.getElementById('saved-pop'); if(!pop) return; pop.classList.toggle('hidden'); if(!pop.classList.contains('hidden')){ loadSavedSearches(); } }
function closeSavedMenu(){ document.getElementById('saved-pop')?.classList.add('hidden'); }
document.getElementById('saved-toggle')?.addEventListener('click', (e)=>{ e.preventDefault(); e.stopPropagation(); toggleSavedMenu(); });
// احتياط: ربط زر الحفظ إن لم يعمل الـ inline
document.querySelectorAll('[onclick*="openSaveDialog"]').forEach(btn=>{
    btn.addEventListener('click', (e)=>{ e.preventDefault(); openSaveDialog(); });
});
// زر الحفظ في الهيدر اللاصق
document.getElementById('save-current-search')?.addEventListener('click', (e)=>{ e.preventDefault(); openSaveDialog(); });
document.addEventListener('click',e=>{ if(!e.target.closest('#saved-pop') && !e.target.closest('#saved-toggle')){ closeSavedMenu(); }});
// تحميل أولي للقائمة (اختياري لتقليل تأخير الفتح)
loadSavedSearches();
</script>
@endpush

    <div class="flex items-center gap-2 mb-3 text-xs text-gray-600 dark:text-gray-300" id="results-meta" aria-live="polite">
        <span>النتائج:</span>
        <span id="results-total" class="inline-flex items-center justify-center px-2 py-0.5 rounded-full bg-brand-primary/10 text-brand-primary text-[11px] font-semibold">{{ $users->total() }}</span>
    </div>
    <div id="aria-status" class="sr-only" aria-live="polite"></div>
    <div id="results-wrapper">
        @include('frontend.search._results',['users'=>$users])
    </div>
    <div id="loading" class="hidden mt-4 text-center text-sm text-gray-500">جارِ التحميل...</div>
    <template id="skeleton-template">
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @for($i=0;$i<8;$i++)
            <div class="animate-pulse bg-white dark:bg-gray-800 rounded-xl p-4 shadow flex flex-col items-center text-center">
                <div class="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-3"></div>
                <div class="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
                <div class="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded mb-1"></div>
                <div class="h-2 w-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
            </div>
            @endfor
        </div>
    </template>
</div>
@endsection
@push('body-end')
<script>
const adv = document.getElementById('search-advanced-form');
const basicSection = document.getElementById('basic-section');
const advSection = document.getElementById('advanced-section');
const tabBasic = document.getElementById('tab-basic');
const tabAdvanced = document.getElementById('tab-advanced');
const activeFilterChips = document.getElementById('active-filter-chips');
const resetBtn = document.getElementById('reset-filters');
const collapseAdvancedBtn = document.getElementById('collapse-advanced');
const closeAdvancedBtn = document.getElementById('close-advanced');
const TAB_KEY = 'search.active.tab';
const VIEW_KEY = 'search.view.mode';
const SORT_KEY = 'search.sort';
const SERVER_PREFS = @json(auth()->user()?->preferences ?? []);
const viewBtn = document.getElementById('toggle-view');
function activateTab(which){
    if(which==='advanced'){
        basicSection.classList.add('hidden'); advSection.classList.remove('hidden');
    tabBasic.dataset.active = 'false';
        tabBasic.setAttribute('aria-selected','false');
    tabAdvanced.dataset.active = 'true';
        tabAdvanced.setAttribute('aria-selected','true');
        localStorage.setItem(TAB_KEY,'advanced');
    } else {
        advSection.classList.add('hidden'); basicSection.classList.remove('hidden');
    tabAdvanced.dataset.active = 'false';
        tabAdvanced.setAttribute('aria-selected','false');
    tabBasic.dataset.active = 'true';
        tabBasic.setAttribute('aria-selected','true');
        localStorage.setItem(TAB_KEY,'basic');
    }
}
// Collapse advanced filters wrapper
collapseAdvancedBtn?.addEventListener('click', ()=>{
    const wrap = document.getElementById('advanced-filters-wrapper'); if(!wrap) return;
    const state = collapseAdvancedBtn.getAttribute('data-state');
    if(state==='open'){
        wrap.classList.add('hidden');
        collapseAdvancedBtn.textContent='إظهار';
        collapseAdvancedBtn.setAttribute('data-state','closed');
    } else {
        wrap.classList.remove('hidden');
        collapseAdvancedBtn.textContent='إخفاء';
        collapseAdvancedBtn.setAttribute('data-state','open');
    }
});
closeAdvancedBtn?.addEventListener('click', ()=> activateTab('basic'));

// Reset filters
resetBtn?.addEventListener('click', ()=>{
    const forms = [document.getElementById('search-basic-form'), document.getElementById('search-advanced-form')];
    forms.forEach(f=>{
        if(!f) return;
        [...f.elements].forEach(el=>{
            if(!el.name) return;
            if(['min_age','max_age','min_height','max_height','min_weight','max_weight'].includes(el.name)) { el.value=''; }
            else if(el.type==='checkbox' || el.type==='radio'){ el.checked=false; }
            else if(el.tagName==='SELECT'){ el.selectedIndex=0; }
            else if(el.type!=='hidden'){ el.value=''; }
        });
    });
    history.replaceState({},'', '{{ route('search.index') }}');
    fetchResults('{{ route('search.index') }}');
    renderActiveFilterChips();
});

function serializeActiveFilters(){
    const data = {};
    const forms = [document.getElementById('search-basic-form'), document.getElementById('search-advanced-form')];
    forms.forEach(f=>{ if(!f) return; [...f.elements].forEach(el=>{
        if(!el.name) return; if(['','null',null,undefined].includes(el.value)) return; if(el.type==='checkbox' && !el.checked) return; if(el.type==='radio' && !el.checked) return;
        data[el.name] = el.value;
    }); });
    return data;
}
function labelForFilter(key, value){
    const map = {gender:'الجنس',country_id:'الدولة',city_id:'المدينة',min_age:'العمر من',max_age:'العمر إلى'};
    return (map[key]||key)+': '+value;
}
function renderActiveFilterChips(){
    const filters = serializeActiveFilters();
    const ign = new Set(['page','ajax','_token','sort']);
    const entries = Object.entries(filters).filter(([k,v])=>!ign.has(k));
    if(!entries.length){ activeFilterChips.classList.add('hidden'); activeFilterChips.innerHTML=''; return; }
    activeFilterChips.classList.remove('hidden');
    activeFilterChips.innerHTML = entries.map(([k,v])=>`<button type="button" data-key="${k}" class="chip bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-200 px-2 py-1 rounded-full flex items-center gap-1">${labelForFilter(k,v)} <span class="text-[10px]" aria-label="إزالة" title="إزالة">✕</span></button>`).join('');
    activeFilterChips.querySelectorAll('button[data-key]').forEach(btn=>{
        btn.addEventListener('click', ()=>{
            const key = btn.getAttribute('data-key');
            const forms = [document.getElementById('search-basic-form'), document.getElementById('search-advanced-form')];
            forms.forEach(f=>{ if(!f) return; const el = f.querySelector(`[name="${key}"]`); if(!el) return; if(el.type==='checkbox'||el.type==='radio'){ el.checked=false; } else { el.value=''; } });
            submitBasic();
            renderActiveFilterChips();
        });
    });
}
document.addEventListener('change', (e)=>{
    if(e.target.closest('#search-basic-form') || e.target.closest('#search-advanced-form')){ renderActiveFilterChips(); }
});
renderActiveFilterChips();
tabBasic?.addEventListener('click',()=>activateTab('basic'));
tabAdvanced?.addEventListener('click',()=>activateTab('advanced'));
const urlParams = new URLSearchParams(window.location.search);
const initialTab = urlParams.get('advanced')==='1' ? 'advanced' : (localStorage.getItem(TAB_KEY) || 'basic');
activateTab(initialTab);

// عند إرسال نموذج البحث المتقدم: انسخ الحقول ذات القيم من الأساسي ثم نفّذ نفس مسار البحث الموحد
document.getElementById('search-advanced-form')?.addEventListener('submit', (e)=>{
    const basic = document.getElementById('search-basic-form');
    const advForm = document.getElementById('search-advanced-form');
    if(!basic || !advForm) return;
    [...basic.elements].forEach(el=>{
        if(!el.name) return;
        if(el.type==='checkbox' && !el.checked) return;
        if(!el.value && el.type!=='checkbox') return;
        if(advForm.querySelector(`[name="${el.name}"]`)) return;
        const hidden = document.createElement('input');
        hidden.type='hidden'; hidden.name=el.name; hidden.value=el.value;
        advForm.appendChild(hidden);
    });
    submitBasic(e, advForm);
});

// AJAX submit & pagination
const resultsWrapper = document.getElementById('results-wrapper');
const loadingEl = document.getElementById('loading');
const skeletonTpl = document.getElementById('skeleton-template');
const cityCache = new Map();
function buildQuery(form){
    const data = new FormData(form);
    return new URLSearchParams([...data.entries()]).toString();
}
let fetchingMore = false;
let activeController = null;
let lastMeta = { last_page: {{ $users->lastPage() }}, current_page: {{ $users->currentPage() }} };
async function fetchResults(url, append=false){
    try{
        if(activeController){ activeController.abort(); }
        activeController = new AbortController();
        loadingEl.classList.remove('hidden');
    if(!append && skeletonTpl){ resultsWrapper.innerHTML = skeletonTpl.innerHTML; }
    const res = await fetch(url + (url.includes('?')?'&':'?') + 'ajax=1', {
        headers:{'Accept':'application/json'},
        signal: activeController.signal,
        credentials: 'same-origin'
    });
        if(res.status === 401){ window.location.href = '{{ route('login') }}'; return; }
        const json = await res.json();
    if(append){
        const temp = document.createElement('div');
        temp.innerHTML = json.html;
        const newGrid = temp.querySelector('.grid');
        const existingGrid = resultsWrapper.querySelector('.grid');
        if(newGrid && existingGrid){
            newGrid.querySelectorAll('> *').forEach(card=> existingGrid.appendChild(card));
            // استبدل التصفح الجديد (للاستمرار) لكن أخفِه
            const newPager = temp.querySelector('.mt-6');
            const oldPager = resultsWrapper.querySelector('.mt-6');
            if(oldPager) oldPager.remove();
            if(newPager) { newPager.style.display='none'; existingGrid.after(newPager); }
        } else {
            resultsWrapper.innerHTML = json.html; // fallback
        }
    } else {
        resultsWrapper.innerHTML = json.html;
    }
    // تحديث الميتا
    lastMeta.current_page = json.meta.current_page;
    lastMeta.last_page = json.meta.last_page;
    document.getElementById('results-total').textContent = json.meta.total;
        const ariaStatus = document.getElementById('aria-status');
        if(ariaStatus){ ariaStatus.textContent = `تم تحميل ${json.meta.count} من ${json.meta.total} نتائج (صفحة ${json.meta.current_page} / ${json.meta.last_page})`; }
        // إعادة تفعيل روابط التصفح
        enableAjaxPagination();
    }catch(e){
        if(e.name === 'AbortError'){ return; }
        resultsWrapper.innerHTML = '<p class="text-red-500 text-sm">حدث خطأ أثناء الجلب.</p>';
    }finally{
        loadingEl.classList.add('hidden');
    fetchingMore = false;
    }
}
function submitBasic(e, formOverride){
    e?.preventDefault();
    const form = formOverride || document.getElementById('search-basic-form');
    const q = buildQuery(form);
    const url = (form.getAttribute('action') || form.action) + '?' + q;
    history.replaceState({},'',url);
    fetchResults(url).then(()=>{ try { emitAnalytics('filter_applied', collectActiveFilters()); } catch(e){} });
}
document.getElementById('search-basic-form')?.addEventListener('submit', submitBasic);
function enableAjaxPagination(){
    resultsWrapper.querySelectorAll('a[href*="page="]').forEach(a=>{
        a.addEventListener('click', function(ev){
            ev.preventDefault();
            const url = this.href;
            history.replaceState({},'',url);
            fetchResults(url);
        });
    });
}
enableAjaxPagination();
// Infinite scroll باستخدام IntersectionObserver على الديف الخاص بالتصفح (إن وجد)
function setupInfiniteScroll(){
    const pager = resultsWrapper.querySelector('.mt-6');
    if(!pager) return;
    const nextLink = pager.querySelector('a[rel="next"], a[href*="page="]');
    if(!nextLink) return;
    pager.style.display='none';
    const sentinel = document.createElement('div');
    sentinel.id='infinite-sentinel';
    sentinel.className='h-8';
    resultsWrapper.appendChild(sentinel);
    const io = new IntersectionObserver(entries=>{
        entries.forEach(entry=>{
            if(entry.isIntersecting && !fetchingMore && lastMeta.current_page < lastMeta.last_page){
                 fetchingMore = true;
                 const url = nextLink.href;
                 fetchResults(url, true);
            }
        });
    }, {rootMargin:'200px'});
    io.observe(sentinel);
}
setupInfiniteScroll();

// Debounce for inputs/selects (basic form)
function debounce(fn,delay=400){ let t; return (...args)=>{ clearTimeout(t); t=setTimeout(()=>fn(...args),delay); }; }
const debouncedSubmit = debounce(()=>submitBasic());
function postPreference(payload){
    fetch("{{ route('preferences.store') }}", {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}, body: new URLSearchParams(payload)})
        .catch(()=>{});
}
// Alerts toggle for saved searches (simple flag)
if(!SERVER_PREFS.search_alerts){ SERVER_PREFS.search_alerts = 'off'; }
function toggleSearchAlerts(on){
    const v = on ? 'on' : 'off';
    localStorage.setItem('search_alerts', v);
    postPreference({search_alerts: v});
    const badge = document.getElementById('alerts-status'); if(badge){ badge.textContent = v==='on'?'مفعّل':'معطل'; badge.className = 'text-[10px] px-2 py-0.5 rounded '+(v==='on'?'bg-emerald-100 text-emerald-700':'bg-gray-100 text-gray-500'); }
}
document.querySelectorAll('#search-basic-form input:not([type=checkbox]),#search-basic-form select').forEach(el=>{
    el.addEventListener('change',()=>debouncedSubmit());
    if(el.name==='sort'){
        const serverSort = SERVER_PREFS.sort;
        const storedSort = localStorage.getItem(SORT_KEY);
        if(!@json((bool)request('sort'))){
            if(serverSort){ el.value = serverSort; }
            else if(storedSort){ el.value = storedSort; }
        }
        el.addEventListener('change',()=> { localStorage.setItem(SORT_KEY, el.value||''); postPreference({sort: el.value||''}); });
    }
});
document.querySelectorAll('#search-basic-form input[type=checkbox]').forEach(el=>{
    el.addEventListener('change',()=>submitBasic());
});

// Export CSV
document.getElementById('export-csv')?.addEventListener('click', function(e){
    e.preventDefault();
    const form = document.getElementById('search-basic-form');
    const q = buildQuery(form) + '&export=csv';
    window.open(form.action + '?' + q, '_blank');
    try { emitAnalytics('export_csv', {count: document.getElementById('results-total')?.textContent||null}); } catch(e){}
});

// City cache
const countrySel = document.getElementById('country');
countrySel?.addEventListener('change', async function(){
    const val = this.value; const citySel = document.getElementById('city');
    citySel.innerHTML = '<option value="">...</option>';
    if(!val) return;
    if(cityCache.has(val)){
        citySel.innerHTML = '<option value="">المدينة</option>' + cityCache.get(val);
        return;
    }
    try{
        const res = await fetch('/api/legacy/cities-by-country/' + val);
        const data = await res.json();
        const options = data.map(c=>`<option value="${c.id}">${c.name}</option>`).join('');
        cityCache.set(val, options);
        citySel.innerHTML = '<option value="">المدينة</option>' + options;
    }catch(e){ citySel.innerHTML='<option>خطأ</option>'; }
});

// View mode toggle
function applyViewMode(mode){
    const grid = document.querySelector('.results-grid');
    if(!grid) return;
    grid.dataset.viewMode = mode;
    if(mode==='list'){
        grid.classList.remove('sm:grid-cols-2','lg:grid-cols-3','xl:grid-cols-4');
        grid.classList.add('grid-cols-1');
        viewBtn.textContent = 'عرض: قائمة';
    } else {
        grid.classList.add('sm:grid-cols-2','lg:grid-cols-3','xl:grid-cols-4');
        grid.classList.remove('grid-cols-1');
        viewBtn.textContent = 'عرض: شبكة';
    }
}
let initialView = SERVER_PREFS.view_mode || localStorage.getItem(VIEW_KEY) || 'grid';
applyViewMode(initialView);
viewBtn?.addEventListener('click',()=>{
    const current = localStorage.getItem(VIEW_KEY) || initialView || 'grid';
    const next = current==='grid'?'list':'grid';
    localStorage.setItem(VIEW_KEY,next);
    applyViewMode(next);
    postPreference({view_mode: next});
});

// Initialize alerts UI
const alertsToggle = document.getElementById('alerts-toggle');
const storedAlerts = localStorage.getItem('search_alerts') || SERVER_PREFS.search_alerts || 'off';
if(alertsToggle){
    alertsToggle.checked = storedAlerts==='on';
    toggleSearchAlerts(alertsToggle.checked);
    alertsToggle.addEventListener('change', ()=> toggleSearchAlerts(alertsToggle.checked));
}

// Active filters count (basic + advanced)
function countActiveFilters(){
    const forms = [document.getElementById('search-basic-form'), document.getElementById('search-advanced-form')];
    let count=0; const ignore = new Set(['page','ajax','_token']);
    forms.forEach(f=>{ if(!f) return; [...f.elements].forEach(el=>{
            if(!el.name || ignore.has(el.name)) return;
            if(['','0',null,undefined].includes(el.value) && el.type!=='checkbox') return;
            if(el.type==='checkbox' && !el.checked) return;
            if(['gender','country_id','city_id','min_age','max_age','sort'].includes(el.name) && !el.value) return; // عد فقط إذا لها قيمة
            if(el.name==='sort' && !el.value) return;
            if(el.name==='with_photo' && !el.checked) return;
            if(el.name==='online_recent' && !el.checked) return;
            // استبعاد الحقول الأساسية من العداد كي يركز على المتقدمة
            if(['gender','country_id','city_id','min_age','max_age','with_photo','online_recent','sort'].includes(el.name)) return;
            count++;
    }); });
    const badge = document.getElementById('active-filters-count');
    if(!badge) return;
    if(count>0){ badge.textContent = count; badge.classList.remove('hidden'); }
    else { badge.classList.add('hidden'); }
}
countActiveFilters();
document.addEventListener('change', (e)=>{
    if(e.target.closest('#search-basic-form') || e.target.closest('#search-advanced-form')){
        countActiveFilters();
    }
});

// Dual range (age)
function setupDualRange(minId,maxId,hMinId,hMaxId,displayId,minFallback,maxFallback){
    const r1=document.getElementById(minId); const r2=document.getElementById(maxId);
    const h1=document.getElementById(hMinId); const h2=document.getElementById(hMaxId); const disp=document.getElementById(displayId);
    if(!r1||!r2||!h1||!h2) return;
    const startMin = parseInt(h1.value || minFallback || r1.min,10);
    const startMax = parseInt(h2.value || maxFallback || r2.max,10);
    r1.value=startMin; r2.value=startMax;
    function sync(){ let v1=parseInt(r1.value,10), v2=parseInt(r2.value,10); if(v1>v2){ [v1,v2]=[v2,v1]; } h1.value=v1; h2.value=v2; if(disp) disp.textContent = v1 + ' - ' + v2; styleTrack(v1,v2); }
    function styleTrack(v1,v2){ const min = parseInt(r1.min,10), max=parseInt(r2.max,10); const p1=(v1-min)/(max-min)*100, p2=(v2-min)/(max-min)*100; const wrap=r1.closest('.range-wrapper'); if(!wrap) return; const colors=wrap.dataset.colors?.split(',')||['emerald','brand-primary']; const c1=colors[0], c2=colors[1]||colors[0]; const grad=`linear-gradient(to right, rgba(var(--twc-${c1}),0.35) ${p1}%, rgba(var(--twc-${c2}),0.9) ${p1}%, rgba(var(--twc-${c2}),0.9) ${p2}%, #d1d5db ${p2}%)`; [r1,r2].forEach(r=> r.style.background=grad); }
    // Tooltip on hover
    [r1,r2].forEach(r=>{ r.addEventListener('mousemove', e=>{ r.title = r.value; }); });
    ['input'].forEach(evt=>{ r1.addEventListener(evt,()=>{ sync(); }); r2.addEventListener(evt,()=>{ sync(); }); });
    ['change'].forEach(evt=>{ r1.addEventListener(evt,()=>{ sync(); debouncedSubmit(); }); r2.addEventListener(evt,()=>{ sync(); debouncedSubmit(); }); });
    sync();
}
setupDualRange('age_min_range','age_max_range','min_age_hidden','max_age_hidden','age_range_display',18,80);
setupDualRange('height_min_range','height_max_range','min_height_hidden','max_height_hidden','height_range_display',120,220);
setupDualRange('weight_min_range','weight_max_range','min_weight_hidden','max_weight_hidden','weight_range_display',35,160);

// تعزيز إدارة عمليات البحث المحفوظة (إعادة تسمية / حذف)
function attachSavedSearchActions(){
    const container = document.getElementById('saved-searches'); if(!container) return;
    container.querySelectorAll('button[data-id]').forEach(btn=>{
        if(btn.dataset.enhanced) return;
        btn.dataset.enhanced = '1';
        const wrap = document.createElement('span'); wrap.className='inline-flex items-center gap-1';
        btn.replaceWith(wrap); wrap.appendChild(btn);
        const rename=document.createElement('button'); rename.type='button'; rename.className='text-[10px] text-amber-600'; rename.textContent='تعديل';
        rename.onclick=()=>{ const newName=prompt('اسم جديد', btn.textContent.trim()); if(!newName) return; fetch(`{{ url('/search/saved') }}/${btn.dataset.id}`, {method:'PATCH', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}, body: new URLSearchParams({name:newName})}).then(r=>r.json()).then(j=>{ if(j.status==='ok'){ btn.textContent=newName; }}); };
        const del=document.createElement('button'); del.type='button'; del.className='text-[10px] text-red-500'; del.textContent='حذف';
        del.onclick=()=>{ if(!confirm('حذف هذا البحث؟')) return; fetch(`{{ url('/search/saved') }}/${btn.dataset.id}`, {method:'DELETE', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}}).then(r=>r.json()).then(j=>{ if(j.status==='ok'){ wrap.remove(); }}); };
        wrap.appendChild(rename); wrap.appendChild(del);
    });
}
const originalLoadSaved = typeof loadSavedSearches==='function'? loadSavedSearches : null;
if(originalLoadSaved){
    loadSavedSearches = function(){ originalLoadSaved(); setTimeout(attachSavedSearchActions, 300); };
}
// ---- Analytics helpers ----
function collectActiveFilters(){
    const data = {};
    const forms = [document.getElementById('search-basic-form'), document.getElementById('search-advanced-form')];
    forms.forEach(f=>{ if(!f) return; [...f.elements].forEach(el=>{
        if(!el.name) return; if(el.type==='checkbox' && !el.checked) return; if(el.type==='radio' && !el.checked) return;
        if(['','null',null,undefined].includes(el.value)) return;
        data[el.name] = el.value;
    }); });
    return data;
}
async function emitAnalytics(event, context){
    try { await fetch('/api/analytics', {method:'POST', headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'}, body: JSON.stringify({event, context})}); } catch(e){}
}
if(typeof openSaveDialog === 'function'){
    const __origOpenSaveDialog = openSaveDialog;
    openSaveDialog = async function(){
        const t0 = performance.now();
        await __origOpenSaveDialog();
        setTimeout(()=>{ emitAnalytics('saved_search_created', {elapsed_ms: Math.round(performance.now()-t0)}); }, 600);
    }
}
document.addEventListener('click', (e)=>{
    if(e.target && e.target.id==='compare-run'){
        try { emitAnalytics('compare_opened', {selected: [...compareState]}); } catch(err){}
    }
});
// end first script block
</script>
@endpush