@extends('layouts.superadmin')

@section('title', 'Global Smart Search')
@section('page-title', 'منظومة الذكاء (EES) - البحث الذكي الموحّد')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
    <div class="max-w-6xl mx-auto px-4 rtl text-white">

        {{-- هيدر --}}
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-violet-500/70 shadow-lg shadow-violet-500/40">
                    <i class="fa-solid fa-magnifying-glass-chart text-violet-300 text-xl"></i>
                </div>
                <div class="text-center sm:text-right">
                    <h1 class="text-xl sm:text-2xl font-bold">البحث الذكي الموحّد (Smart Search)</h1>
                    <p class="text-sm text-slate-300/80">
                        بحث واحد على الأعضاء، Member Care، المخالفات، الاجتماعات، المسابقات، وتقارير الـ ProActive.
                    </p>
                </div>
            </div>
        </div>

        {{-- كروت ملخّص --}}
        <div class="grid grid-cols-1 sm:grid-cols-6 gap-3 mb-5">
            <div class="rounded-2xl border border-slate-800 bg-slate-900/70 p-3">
                <div class="text-[11px] text-slate-400">إجمالي النتائج</div>
                <div class="text-xl font-bold text-white mt-1">{{ (int)($summary['total'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-cyan-500/25 bg-cyan-500/5 p-3">
                <div class="text-[11px] text-cyan-100/80">أعضاء</div>
                <div class="text-lg font-bold text-cyan-100 mt-1">{{ (int)($summary['users'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-amber-500/25 bg-amber-500/5 p-3">
                <div class="text-[11px] text-amber-100/80">Member Care</div>
                <div class="text-lg font-bold text-amber-100 mt-1">{{ (int)($summary['care'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-rose-500/25 bg-rose-500/5 p-3">
                <div class="text-[11px] text-rose-100/80">مخالفات / تحذيرات</div>
                <div class="text-lg font-bold text-rose-100 mt-1">{{ (int)($summary['violations'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-sky-500/25 bg-sky-500/5 p-3">
                <div class="text-[11px] text-sky-100/80">اجتماعات</div>
                <div class="text-lg font-bold text-sky-100 mt-1">{{ (int)($summary['meetings'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-emerald-500/25 bg-emerald-500/5 p-3">
                <div class="text-[11px] text-emerald-100/80">مسابقات / ProActive</div>
                <div class="text-lg font-bold text-emerald-100 mt-1">
                    {{ (int)($summary['competitions'] ?? 0) + (int)($summary['proactive'] ?? 0) }}
                </div>
            </div>
        </div>

        {{-- فلاتر --}}
        <form method="GET" action="{{ route('superadmin.falcon-room.ees.smart-search') }}"
              class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">
            <div class="grid gap-4 md:grid-cols-4 grid-cols-1">
                <div class="flex flex-col gap-1 md:col-span-2">
                    <label class="text-xs text-slate-300 mb-1">كلمة البحث</label>
                    <input type="text" name="q" value="{{ $q }}"
                           placeholder="اسم عضو / عنوان مخالفة / موضوع اجتماع / وصف مسابقة / نص من ProActive..."
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm
                                  text-white placeholder:text-slate-500 focus:outline-none focus:ring-2
                                  focus:ring-violet-500 focus:border-violet-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">من</label>
                    <input type="date" name="from" value="{{ $from }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">إلى</label>
                    <input type="date" name="to" value="{{ $to }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500">
                </div>
            </div>

            <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">نوع النتيجة</label>
                    <select name="type"
                            class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                   focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500">
                        <option value="">الكل</option>
                        <option value="user"        @selected($type === 'user')>أعضاء</option>
                        <option value="care"        @selected($type === 'care')>Member Care</option>
                        <option value="violation"   @selected($type === 'violation')>مخالفات</option>
                        <option value="meeting"     @selected($type === 'meeting')>اجتماعات</option>
                        <option value="competition" @selected($type === 'competition')>مسابقات</option>
                        <option value="proactive"   @selected($type === 'proactive')>تقارير ProActive</option>
                    </select>
                    <span class="text-[11px] text-slate-400">
                        يمكنك تضييق البحث على نوع واحد إذا أردت.
                    </span>
                </div>

                <div class="flex items-end gap-2 flex-wrap">
                    <button class="inline-flex items-center justify-center rounded-xl bg-violet-500 px-4 py-2 text-sm font-semibold
                                   text-slate-950 hover:bg-violet-400 transition">
                        <i class="fa-solid fa-filter ml-2 text-xs"></i>
                        تطبيق الفلاتر
                    </button>

                    <a href="{{ route('superadmin.falcon-room.ees.smart-search') }}"
                       class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm
                              font-medium text-slate-200 hover:bg-slate-800/80 transition">
                        إعادة ضبط
                    </a>

                    {{-- كبسة تبديل بين الجدول والكروت --}}
                    <div class="inline-flex items-center rounded-xl border border-slate-700 bg-slate-900/80 overflow-hidden ml-auto">
                        <button type="button" id="btnViewTable"
                                class="px-3 py-1.5 text-xs font-semibold border-l border-slate-700
                                       bg-slate-800 text-slate-100">
                            <i class="fa-solid fa-table ml-1"></i>
                            جدول
                        </button>
                        <button type="button" id="btnViewCards"
                                class="px-3 py-1.5 text-xs font-semibold text-slate-300 hover:bg-slate-800/80">
                            <i class="fa-solid fa-border-all ml-1"></i>
                            كروت
                        </button>
                    </div>
                </div>
            </div>
        </form>

        {{-- عرض النتائج --}}
        @php
            $totalRows = method_exists($rows, 'total') ? $rows->total() : $rows->count();
        @endphp

        @if($totalRows === 0)
            <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl p-6 text-center text-slate-400 text-sm">
                لا توجد نتائج مطابقة للبحث أو الفلاتر الحالية.
            </div>
        @else
            {{-- عرض كجدول --}}
            <div id="view-table" class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden mb-4">
                <div class="border-b border-slate-800 px-4 py-3 flex items-center justify-between">
                    <div>
                        <h2 class="text-sm sm:text-base font-semibold">نتائج البحث (وضع الجدول)</h2>
                        <p class="text-[11px] text-slate-400">
                            كل صف يمثل عنصراً واحداً (عضو، Case، مخالفة، اجتماع، مسابقة، أو تقرير ProActive).
                        </p>
                    </div>
                    <span class="text-[11px] text-slate-400">
                        النتائج: {{ $totalRows }}
                    </span>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full text-xs sm:text-sm text-slate-200">
                        <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] uppercase tracking-wide">
                        <tr>
                            <th class="px-3 py-2 text-right">النوع</th>
                            <th class="px-3 py-2 text-right">العنوان</th>
                            <th class="px-3 py-2 text-right">تفاصيل مختصرة</th>
                            <th class="px-3 py-2 text-right">معلومات إضافية</th>
                            <th class="px-3 py-2 text-right">تاريخ / آخر تحديث</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-800">
                        @foreach($rows as $row)
                            @php
                                $typeLabel = match($row->result_type) {
                                    'user'        => 'عضو',
                                    'care'        => 'Member Care',
                                    'violation'   => 'مخالفة',
                                    'meeting'     => 'اجتماع',
                                    'competition' => 'مسابقة',
                                    'proactive'   => 'ProActive',
                                    default       => $row->result_type,
                                };

                                $typeColor = match($row->result_type) {
                                    'user'        => 'bg-cyan-500/15 text-cyan-200 border-cyan-500/40',
                                    'care'        => 'bg-amber-500/15 text-amber-200 border-amber-500/40',
                                    'violation'   => 'bg-rose-500/15 text-rose-200 border-rose-500/40',
                                    'meeting'     => 'bg-sky-500/15 text-sky-200 border-sky-500/40',
                                    'competition' => 'bg-emerald-500/15 text-emerald-200 border-emerald-500/40',
                                    'proactive'   => 'bg-violet-500/15 text-violet-200 border-violet-500/40',
                                    default       => 'bg-slate-500/15 text-slate-200 border-slate-500/40',
                                };

                                $sortDate = $row->sort_date
                                    ? \Carbon\Carbon::parse($row->sort_date)->format('Y-m-d H:i')
                                    : '—';
                            @endphp
                            <tr class="hover:bg-slate-800/50">
                                <td class="px-3 py-2 align-top">
                                    <span class="inline-flex items-center justify-center rounded-xl px-2 py-1 text-[11px] border {{ $typeColor }}">
                                        {{ $typeLabel }}
                                    </span>
                                </td>
                                <td class="px-3 py-2 align-top">
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-slate-100">{{ $row->title }}</span>
                                        @if(!empty($row->tag))
                                            <span class="text-[11px] text-slate-400 mt-0.5">
                                                التصنيف: {{ $row->tag }}
                                            </span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-3 py-2 align-top text-[12px] text-slate-200">
                                    {{ $row->subtitle }}
                                </td>
                                <td class="px-3 py-2 align-top text-[11px] text-slate-300">
                                    {{ $row->meta }}
                                </td>
                                <td class="px-3 py-2 align-top text-[11px] text-slate-300 whitespace-nowrap">
                                    {{ $sortDate }}
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>

                @if(method_exists($rows, 'hasPages') && $rows->hasPages())
                    <div class="px-4 py-3 border-t border-slate-800">
                        {{ $rows->links() }}
                    </div>
                @endif
            </div>

            {{-- عرض كروت --}}
            <div id="view-cards" class="hidden rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden mb-4">
                <div class="border-b border-slate-800 px-4 py-3 flex items-center justify-between">
                    <div>
                        <h2 class="text-sm sm:text-base font-semibold">نتائج البحث (وضع الكروت)</h2>
                        <p class="text-[11px] text-slate-400">
                            عرض بصري سريع: كل نتيجة داخل Card مع نوعها وتفاصيلها الأساسية.
                        </p>
                    </div>
                    <span class="text-[11px] text-slate-400">
                        النتائج: {{ $totalRows }}
                    </span>
                </div>

                <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
                    @foreach($rows as $row)
                        @php
                            $typeLabel = match($row->result_type) {
                                'user'        => 'عضو',
                                'care'        => 'Member Care',
                                'violation'   => 'مخالفة',
                                'meeting'     => 'اجتماع',
                                'competition' => 'مسابقة',
                                'proactive'   => 'ProActive',
                                default       => $row->result_type,
                            };

                            $typeColor = match($row->result_type) {
                                'user'        => 'from-cyan-500/80 to-sky-500/80',
                                'care'        => 'from-amber-500/80 to-orange-500/80',
                                'violation'   => 'from-rose-500/80 to-red-500/80',
                                'meeting'     => 'from-sky-500/80 to-blue-500/80',
                                'competition' => 'from-emerald-500/80 to-teal-500/80',
                                'proactive'   => 'from-violet-500/80 to-fuchsia-500/80',
                                default       => 'from-slate-500/80 to-slate-600/80',
                            };

                            $sortDate = $row->sort_date
                                ? \Carbon\Carbon::parse($row->sort_date)->format('Y-m-d H:i')
                                : '—';
                        @endphp

                        <div class="relative rounded-2xl border border-slate-700 bg-slate-900/80 p-4 overflow-hidden">
                            <div class="pointer-events-none absolute -inset-16 opacity-30 blur-3xl
                                        bg-gradient-to-br {{ $typeColor }}"></div>

                            <div class="relative flex items-start justify-between gap-2 mb-2">
                                <div class="flex flex-col gap-0.5">
                                    <span class="inline-flex items-center gap-1 rounded-full bg-slate-950/80
                                                 border border-white/10 px-2 py-0.5 text-[10px] text-slate-100">
                                        <i class="fa-solid fa-circle-dot text-[8px]"></i>
                                        {{ $typeLabel }}
                                    </span>
                                    <div class="mt-1 font-semibold text-sm text-white">
                                        {{ $row->title }}
                                    </div>
                                    @if(!empty($row->subtitle))
                                        <div class="text-[11px] text-slate-200 mt-0.5 line-clamp-2">
                                            {{ $row->subtitle }}
                                        </div>
                                    @endif
                                </div>

                                @if(!empty($row->tag))
                                    <span class="relative inline-flex items-center justify-center rounded-xl px-2 py-1
                                                 text-[10px] bg-slate-950/80 border border-slate-600/60 text-slate-100">
                                        {{ $row->tag }}
                                    </span>
                                @endif
                            </div>

                            @if(!empty($row->meta))
                                <div class="relative mt-2 text-[11px] text-slate-200 leading-relaxed">
                                    {{ $row->meta }}
                                </div>
                            @endif

                            <div class="relative mt-3 flex items-center justify-between text-[10px] text-slate-400">
                                <span>
                                    آخر نشاط: {{ $sortDate }}
                                </span>
                                <span class="italic opacity-80">
                                    #{{ $row->result_type }}-{{ $row->main_id }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if(method_exists($rows, 'hasPages') && $rows->hasPages())
                    <div class="px-4 py-3 border-t border-slate-800">
                        {{ $rows->links() }}
                    </div>
                @endif
            </div>
        @endif

        {{-- فوتر --}}
        <div class="mt-5 text-[11px] text-slate-500 text-center">
            البحث الذكي هنا يساعدك تلتقط الصورة الكبيرة: من هو العضو، ما هي قصته، وما الذي حصل حوله من قرارات ومخالفات وأنشطة.
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const btnTable = document.getElementById('btnViewTable');
    const btnCards = document.getElementById('btnViewCards');
    const viewTable = document.getElementById('view-table');
    const viewCards = document.getElementById('view-cards');

    if (!btnTable || !btnCards || !viewTable || !viewCards) return;

    function setView(mode) {
        const isTable = mode === 'table';

        viewTable.classList.toggle('hidden', !isTable);
        viewCards.classList.toggle('hidden', isTable);

        if (isTable) {
            btnTable.classList.add('bg-slate-800', 'text-slate-100');
            btnTable.classList.remove('text-slate-300');
            btnCards.classList.remove('bg-slate-800', 'text-slate-100');
            btnCards.classList.add('text-slate-300');
        } else {
            btnCards.classList.add('bg-slate-800', 'text-slate-100');
            btnCards.classList.remove('text-slate-300');
            btnTable.classList.remove('bg-slate-800', 'text-slate-100');
            btnTable.classList.add('text-slate-300');
        }

        try {
            localStorage.setItem('ees-smart-search-view', mode);
        } catch (e) {}
    }

    btnTable.addEventListener('click', () => setView('table'));
    btnCards.addEventListener('click', () => setView('cards'));

    // استعادة آخر وضع من localStorage
    let mode = 'table';
    try {
        const saved = localStorage.getItem('ees-smart-search-view');
        if (saved === 'cards') mode = 'cards';
    } catch (e) {}

    setView(mode);
});
</script>
@endsection