@extends('layouts.superadmin')

@section('title', 'مؤشرات الأعضاء')
@section('page-title', 'لوحة مؤشرات الأعضاء')

@section('content')
@php
    $initialView = request('view', 'table');
    if (!in_array($initialView, ['table', 'cards'])) {
        $initialView = 'table';
    }
@endphp

<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-3">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-emerald-500/60 shadow-lg shadow-emerald-500/30">
                    <i class="fa-solid fa-users-line text-emerald-400 text-xl"></i>
                </div>
                <div>
                    <h1 class="text-xl sm:text-2xl font-bold">لوحة مؤشرات الأعضاء</h1>
                    <p class="text-sm text-slate-300/80">
                        تجميع ذكي لساعات اللايفات والقستات، مع نتائج التقييم اليومي، المخالفات والبونص،
                        لإخراج نسبة نهائية عادلة لكل عضو في الفترة المحددة.
                    </p>
                </div>
            </div>

            <div class="grid gap-3 text-xs sm:text-sm text-slate-300 sm:grid-cols-3 grid-cols-1">
                <div class="flex flex-col">
                    <span class="text-slate-400">الفترة الحالية</span>
                    <span class="font-medium">{{ $from }} → {{ $to }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-slate-400">إجمالي ساعات اللايفات</span>
                    <span class="font-medium">{{ $totals['live_hours'] }} ساعة</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-slate-400">إجمالي ساعات القستات</span>
                    <span class="font-medium">{{ $totals['guest_hours'] }} ساعة</span>
                </div>
            </div>
        </div>

        {{-- فلاتر البحث --}}
        <form method="GET" action="{{ route('reports.members.kpi') }}"
              class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">

            {{-- ✅ مهم: عشان لما تعمل تطبيق فلاتر ما يرجع العرض افتراضي --}}
            <input type="hidden" name="view" id="input-view" value="{{ $initialView }}">

            <div class="grid gap-4 md:grid-cols-4 grid-cols-1">

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">من تاريخ</label>
                    <input type="date" name="date_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-emerald-500 focus:border-emerald-500">
                    <span class="text-[11px] text-slate-400">تاريخ بداية احتساب الفترة.</span>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">إلى تاريخ</label>
                    <input type="date" name="date_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-emerald-500 focus:border-emerald-500">
                    <span class="text-[11px] text-slate-400">تاريخ نهاية احتساب الفترة.</span>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">نوع اللايف (اختياري)</label>
                    <input type="text" name="live_type" value="{{ $liveType }}"
                           placeholder="مثال: lecture / free"
                           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-emerald-500 focus:border-emerald-500">
                    <span class="text-[11px] text-slate-400">
                        لفلترة النتائج على نوع معيّن من اللايفات فقط.
                    </span>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">وضع السهرة</label>
                    <select name="sahra_mode"
                            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-emerald-500 focus:border-emerald-500">
                        <option value="" @selected($sahraMode==='')>كل اللايفات (مع السهرات)</option>
                        <option value="exclude" @selected($sahraMode==='exclude')>استبعاد لايفات السهرة</option>
                        <option value="only" @selected($sahraMode==='only')>لايفات السهرة فقط</option>
                    </select>
                    <span class="text-[11px] text-slate-400">
                        تحكم في احتساب لايفات &quot;سهرة ألف ليلة وليلة&quot; داخل النسبة أو خارجها.
                    </span>
                </div>
            </div>

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

                <a href="{{ route('reports.members.kpi') }}"
                   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>

                <span class="text-[11px] text-slate-400">
                    يتم إعادة حساب النسب فوريًا بناءً على الفترة والفلاتر المختارة.
                </span>
            </div>
        </form>

        {{-- كروت الـ KPI العامة --}}
        <div class="grid gap-4 md:grid-cols-4 mb-6">
            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                        from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <p class="text-xs text-slate-400 mb-1">إجمالي ساعات اللايفات (مؤكدة)</p>
                <p class="text-2xl font-semibold text-emerald-300">{{ $totals['live_hours'] }}</p>
                <p class="mt-1 text-[11px] text-slate-400">
                    عدد اللايفات المؤكدة:
                    <span class="font-medium text-slate-200">{{ $liveKpis['confirmed_lives'] ?? 0 }}</span>
                </p>
            </div>

            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                        from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <p class="text-xs text-slate-400 mb-1">إجمالي ساعات القستات</p>
                <p class="text-2xl font-semibold text-sky-300">{{ $totals['guest_hours'] }}</p>
                <p class="mt-1 text-[11px] text-slate-400">
                    عدد مشاركات القست:
                    <span class="font-medium text-slate-200">{{ $guestKpis['records'] ?? 0 }}</span>
                </p>
            </div>

            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                        from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <p class="text-xs text-slate-400 mb-1">مجموع الساعات (لايف + قست)</p>
                <p class="text-2xl font-semibold text-amber-300">{{ $totals['total_hours'] }}</p>
                <p class="mt-1 text-[11px] text-slate-400">
                    يعطي صورة عامة عن حجم جهد الأعضاء في الفترة.
                </p>
            </div>

            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                        from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <p class="text-xs text-slate-400 mb-1">متوسط نقاط التقييم (المقبولة)</p>
                <p class="text-2xl font-semibold text-violet-300">{{ $evalKpis['avg_points'] ?? 0 }}</p>
                <p class="mt-1 text-[11px] text-slate-400">
                    من 0 إلى 4 – بناءً على تقييمات الحضور والانضباط اليومية.
                </p>
            </div>
        </div>

        {{-- ✅ Wrapper: جدول / كروت --}}
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
            <div class="border-b border-slate-800 px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                    <h2 class="text-sm sm:text-base font-semibold">عرض مؤشرات الأعضاء والنسبة النهائية</h2>
                    <p class="text-[11px] text-slate-400">
                        النسبة النهائية = (تقييم يومي 60٪) + (نشاط لايف/قست 30٪) + (بونص مسابقات وتشريف 10٪) − خصم المخالفات.
                    </p>
                </div>

                <div class="flex items-center gap-2">
                    <span class="text-[11px] text-slate-400 hidden sm:inline">
                        إجمالي الأعضاء: {{ $rows->count() }}
                    </span>

                    <div class="inline-flex rounded-xl overflow-hidden border border-slate-700">
                        <button type="button" id="btn-view-table"
                                class="px-3 py-2 text-xs font-semibold bg-slate-800 text-slate-200">
                            <i class="fa-solid fa-table ml-1"></i> جدول
                        </button>
                        <button type="button" id="btn-view-cards"
                                class="px-3 py-2 text-xs font-semibold bg-slate-800 text-slate-200 border-r border-slate-700">
                            <i class="fa-solid fa-grip ml-1"></i> كروت
                        </button>
                    </div>
                </div>
            </div>

            {{-- ✅ عرض الجدول --}}
            <div id="view-table" class="{{ $initialView === 'cards' ? 'hidden' : '' }}">
                <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>
                                <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>
                                <th class="px-3 py-2 text-right">النسبة النهائية</th>
                            </tr>
                        </thead>

                        <tbody class="divide-y divide-slate-800">
                        @foreach($rows as $r)
                            <tr class="hover:bg-slate-800/50">
                                <td class="px-3 py-2 align-top">
                                    <span class="font-semibold text-emerald-300">{{ $r['rank'] }}</span>
                                </td>

                                <td class="px-3 py-2 align-top">
                                    <div class="flex flex-col">
                                        <span class="font-medium">{{ $r['name'] }}</span>
                                        <span class="text-[11px] text-slate-400">
                                            ساعات: لايف {{ $r['live_hours'] }} / قست {{ $r['guest_hours'] }}
                                        </span>
                                    </div>
                                </td>

                                <td class="px-3 py-2 align-top">
                                    <div class="flex flex-col gap-0.5">
                                        <span>{{ $r['live_hours'] }} س</span>
                                        @if(($r['sahra_hours'] ?? 0) > 0)
                                            <span class="text-[11px] text-slate-400">
                                                منها سهرات: {{ $r['sahra_hours'] }} س
                                            </span>
                                        @endif
                                    </div>
                                </td>

                                <td class="px-3 py-2 align-top">
                                    {{ $r['guest_hours'] }} س
                                </td>

                                <td class="px-3 py-2 align-top">
                                    <span class="font-medium text-amber-200">{{ $r['total_hours'] }} س</span>
                                </td>

                                <td class="px-3 py-2 align-top">
                                    <div class="flex flex-col gap-1">
                                        <span>{{ $r['activity_score'] }}%</span>
                                        <span class="text-[10px] text-slate-400">
                                            حصة العضو من إجمالي ساعات (لايف + قست).
                                        </span>
                                    </div>
                                </td>

                                <td class="px-3 py-2 align-top">
                                    <div class="flex flex-col gap-1">
                                        <span>{{ $r['eval_percent'] }}%</span>
                                        <span class="text-[10px] text-slate-400">
                                            مبني على التقييم اليومي، الحضور والغياب.
                                        </span>
                                    </div>
                                </td>

                                <td class="px-3 py-2 align-top">
                                    <div class="flex flex-col gap-0.5">
                                        <span>{{ $r['bonus_points'] }} نقطة</span>
                                        <span class="text-[10px] text-slate-400">
                                            تشريف: {{ $r['honor_points'] }} • مسابقات: {{ $r['competition_points'] }}
                                        </span>
                                    </div>
                                </td>

                                <td class="px-3 py-2 align-top">
                                    <span class="text-amber-200 font-semibold">{{ $r['warnings_total'] }}</span>
                                </td>

                                <td class="px-3 py-2 align-top">
                                    <span class="text-red-300 font-semibold">{{ $r['violations_total'] }}</span>
                                </td>

                                <td class="px-3 py-2 align-top min-w-[170px]">
                                    <div class="flex flex-col gap-1">
                                        <div class="flex items-center justify-between">
                                            <span class="font-semibold text-emerald-300">{{ $r['final_percent'] }}%</span>
                                            <span class="text-[10px] text-slate-400">خصم: {{ $r['penalty'] }} نقطة</span>
                                        </div>
                                        <div class="w-full h-2 rounded-full bg-slate-800 overflow-hidden">
                                            <div class="h-full rounded-full bg-gradient-to-r from-emerald-400 via-sky-400 to-violet-400"
                                                 style="width: {{ $r['final_percent'] }}%;"></div>
                                        </div>
                                        <span class="text-[10px] text-slate-400">
                                            هذه النسبة هي المرجع الأساسي لترتيب الأعضاء للفترة المحددة.
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>

                    </table>
                </div>
            </div>

            {{-- ✅ عرض الكروت --}}
            <div id="view-cards" class="{{ $initialView === 'cards' ? '' : 'hidden' }}">
                <div class="p-4 grid gap-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1">
                    @foreach($rows as $r)
                        <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                                    from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">

                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <p class="text-[11px] text-slate-400">الترتيب</p>
                                    <p class="text-lg font-semibold text-emerald-300">#{{ $r['rank'] }}</p>
                                </div>

                                <div class="text-left">
                                    <p class="text-[11px] text-slate-400">النسبة النهائية</p>
                                    <p class="text-2xl font-bold text-emerald-300">{{ $r['final_percent'] }}%</p>
                                </div>
                            </div>

                            <div class="w-full h-2 mt-2 rounded-full bg-slate-800 overflow-hidden">
                                <div class="h-full rounded-full bg-gradient-to-r from-emerald-400 via-sky-400 to-violet-400"
                                     style="width: {{ $r['final_percent'] }}%;"></div>
                            </div>

                            <div class="mt-3 flex items-center gap-2">
                                <div class="h-9 w-9 rounded-xl bg-slate-800 flex items-center justify-center ring-1 ring-slate-700">
                                    <i class="fa-solid fa-user text-slate-200 text-sm"></i>
                                </div>
                                <div class="flex flex-col">
                                    <span class="font-semibold">{{ $r['name'] }}</span>
                                    <span class="text-[11px] text-slate-400">
                                        Live {{ $r['live_hours'] }}س • Guest {{ $r['guest_hours'] }}س • Total {{ $r['total_hours'] }}س
                                    </span>
                                </div>
                            </div>

                            <div class="mt-3 grid grid-cols-2 gap-2 text-[11px] text-slate-300">
                                <div class="rounded-xl bg-slate-950/50 border border-slate-800 p-2">
                                    <div class="text-slate-400">نسبة التقييم</div>
                                    <div class="font-semibold">{{ $r['eval_percent'] }}%</div>
                                </div>
                                <div class="rounded-xl bg-slate-950/50 border border-slate-800 p-2">
                                    <div class="text-slate-400">نسبة النشاط</div>
                                    <div class="font-semibold">{{ $r['activity_score'] }}%</div>
                                </div>
                                <div class="rounded-xl bg-slate-950/50 border border-slate-800 p-2">
                                    <div class="text-slate-400">نقاط البونص</div>
                                    <div class="font-semibold">{{ $r['bonus_points'] }}</div>
                                </div>
                                <div class="rounded-xl bg-slate-950/50 border border-slate-800 p-2">
                                    <div class="text-slate-400">الخصم</div>
                                    <div class="font-semibold">{{ $r['penalty'] }}</div>
                                </div>
                            </div>

                            <div class="mt-3 text-[10px] text-slate-400 flex flex-wrap gap-2">
                                <span>تحذيرات: <span class="text-amber-200 font-semibold">{{ $r['warnings_total'] }}</span></span>
                                <span>مخالفات: <span class="text-red-300 font-semibold">{{ $r['violations_total'] }}</span></span>
                                @if(($r['sahra_hours'] ?? 0) > 0)
                                    <span>سهرات: <span class="text-slate-200 font-semibold">{{ $r['sahra_hours'] }}س</span></span>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>

    </div>
</div>

{{-- ✅ سكربت تبديل العرض (جدول/كروت) + حفظ الاختيار --}}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const tableWrap = document.getElementById('view-table');
    const cardsWrap = document.getElementById('view-cards');
    const btnTable  = document.getElementById('btn-view-table');
    const btnCards  = document.getElementById('btn-view-cards');
    const inputView = document.getElementById('input-view');

    function setActive(btn, active) {
        if (!btn) return;
        btn.classList.toggle('bg-emerald-500', active);
        btn.classList.toggle('text-slate-950', active);
        btn.classList.toggle('bg-slate-800', !active);
        btn.classList.toggle('text-slate-200', !active);
    }

    function setView(view, persist = true) {
        const isCards = view === 'cards';

        if (tableWrap) tableWrap.classList.toggle('hidden', isCards);
        if (cardsWrap) cardsWrap.classList.toggle('hidden', !isCards);

        setActive(btnTable, !isCards);
        setActive(btnCards, isCards);

        if (inputView) inputView.value = isCards ? 'cards' : 'table';

        if (persist) {
            try { localStorage.setItem('members_kpi_view', isCards ? 'cards' : 'table'); } catch (e) {}
        }

        // تثبيت العرض في الرابط بدون Refresh
        try {
            const url = new URL(window.location.href);
            url.searchParams.set('view', isCards ? 'cards' : 'table');
            window.history.replaceState({}, '', url);
        } catch (e) {}
    }

    // أولاً: لو في view بالـ URL خذه، وإلا localStorage، وإلا Blade default
    const qsView = new URLSearchParams(window.location.search).get('view');
    let saved = null;
    try { saved = localStorage.getItem('members_kpi_view'); } catch (e) {}

    const initial = (qsView === 'cards' || qsView === 'table')
        ? qsView
        : (saved || @json($initialView));

    setView(initial, false);

    if (btnTable) btnTable.addEventListener('click', () => setView('table'));
    if (btnCards) btnCards.addEventListener('click', () => setView('cards'));
});
</script>
@endsection