{{-- resources/views/tests/marks/special-one.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'خريطة التزام الأعضاء بالاختبارات')
@section('page-title', '🧭 خريطة التزام الأعضاء بالاختبارات')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-50 via-slate-100 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 py-6 sm:py-8">
    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

        {{-- هيدر ملحمي --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-24 -left-10 w-44 h-44 rounded-full bg-emerald-400/16 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-10 w-60 h-60 rounded-full bg-sky-500/18 blur-3xl"></div>

            <div class="relative px-6 py-7 space-y-3">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                    <div>
                        <h1 class="text-2xl lg:text-3xl font-black tracking-tight text-slate-900 dark:text-white flex items-center gap-2">
                            <i class="fa-solid fa-users-between-lines text-indigo-400"></i>
                            خريطة التزام الأعضاء بالاختبارات
                        </h1>
                        <p class="text-slate-600 dark:text-slate-300 text-xs sm:text-sm mt-1">
                            صفحة خاصة لمراقبة <span class="font-semibold">التزام كل عضو</span> بالاختبارات:
                            عدد المحاولات، نسبة النجاح، أفضل وأسوأ نتيجة. مثالية لاختيار من يستحق
                            المتابعة أو التحفيز من القائد سيف الوفاء والصقر.
                        </p>
                    </div>

                    <div class="flex flex-col items-start sm:items-end gap-1 text-xs sm:text-sm">
                        <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-900 text-slate-100">
                            حدّ النجاح المعتمد:
                            <span class="px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-300 border border-emerald-500/40">
                                {{ $passScore }}%
                            </span>
                        </span>
                        <span class="text-slate-500 dark:text-slate-400">
                            تم حساب النسب بناءً على نسبة الأسئلة الصحيحة في كل اختبار، وليس العلامة الخام.
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- كروت عامة عن حالة الأعضاء --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            <div class="rounded-2xl bg-slate-900 text-slate-50 px-4 py-4 shadow">
                <div class="flex items-center justify-between gap-2">
                    <span class="text-xs text-slate-300">عدد الأعضاء الذين لديهم محاولات</span>
                    <i class="fa-solid fa-user-group text-slate-400 text-sm"></i>
                </div>
                <div class="mt-2 text-2xl font-extrabold">
                    {{ $totalMembers }}
                </div>
            </div>

            <div class="rounded-2xl bg-emerald-500/10 text-emerald-900 dark:text-emerald-200 px-4 py-4">
                <div class="flex items-center justify-between gap-2">
                    <span class="text-xs">المعدل العام للأعضاء</span>
                    <i class="fa-solid fa-gauge-high"></i>
                </div>
                <div class="mt-2 text-2xl font-extrabold">
                    {{ $teamAvg !== null ? $teamAvg.'%' : '—' }}
                </div>
            </div>

            <div class="rounded-2xl bg-indigo-500/10 text-indigo-900 dark:text-indigo-200 px-4 py-4">
                <div class="flex items-center justify-between gap-2">
                    <span class="text-xs">نخبة الملتزمين (≥ 85%)</span>
                    <i class="fa-solid fa-star"></i>
                </div>
                <div class="mt-2 text-2xl font-extrabold">
                    {{ $eliteCount }}
                </div>
            </div>

            <div class="rounded-2xl bg-rose-500/10 text-rose-900 dark:text-rose-200 px-4 py-4">
                <div class="flex items-center justify-between gap-2">
                    <span class="text-xs">أعضاء بحاجة متابعة (< 60%)</span>
                    <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
                <div class="mt-2 text-2xl font-extrabold">
                    {{ $weakCount }}
                </div>
            </div>
        </div>

        {{-- جدول خريطة الأعضاء --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm p-5 sm:p-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
                <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
                    <i class="fa-solid fa-table-list text-indigo-400"></i>
                    قائمة الأعضاء وأداءهم في الاختبارات
                </h2>
                <p class="text-xs text-slate-500 dark:text-slate-400">
                    يمكنك استخدام هذه الخريطة لاختيار من يحتاج متابعة خاصة أو يستحق تكريمًا وتحفيزًا.
                </p>
            </div>

            @if($members->isEmpty())
                <div class="rounded-2xl border border-dashed border-slate-300/80 dark:border-slate-700/80 bg-slate-50/80 dark:bg-slate-800/40 px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-300">
                    لا توجد محاولات اختبارات حتى الآن لعرضها في هذه الصفحة.
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full text-xs sm:text-sm">
                        <thead class="bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
                            <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>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach($members as $index => $m)
                                @php
                                    $avg   = $m['avg'] ?? 0;
                                    $best  = $m['best'] ?? 0;
                                    $worst = $m['worst'] ?? 0;
                                    $clsAvg = $avg >= 85 ? 'text-emerald-400'
                                              : ($avg >= 60 ? 'text-amber-400' : 'text-rose-300');

                                    $roleMap = [
                                        'super-admin' => 'سوبر أدمن',
                                        'moderator'   => 'مشرف',
                                        'advisor'     => 'مستشار',
                                        'beta'        => 'عضو بيتا',
                                        'official'    => 'عضو رسمي',
                                    ];
                                    $role = $roleMap[$m['membership_status'] ?? ''] ?? 'عضو';
                                @endphp
                                <tr class="hover:bg-slate-50/90 dark:hover:bg-slate-800/60 transition">
                                    <td class="px-3 py-2 text-slate-400">
                                        {{ $index + 1 }}
                                    </td>
                                    <td class="px-3 py-2 text-slate-900 dark:text-slate-50 font-semibold">
                                        {{ $m['name'] ?? '—' }}
                                    </td>
                                    <td class="px-3 py-2 text-slate-500 dark:text-slate-300">
                                        {{ $role }}
                                    </td>
                                    <td class="px-3 py-2 text-slate-700 dark:text-slate-200">
                                        {{ $m['attempts'] ?? 0 }}
                                    </td>
                                    <td class="px-3 py-2 text-slate-700 dark:text-slate-200">
                                        {{ $m['passed'] ?? 0 }}
                                    </td>
                                    <td class="px-3 py-2">
                                        <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-300 border border-emerald-500/30 text-[11px] sm:text-xs">
                                            {{ $m['pass_rate'] ?? 0 }}%
                                        </span>
                                    </td>
                                    <td class="px-3 py-2 font-bold {{ $clsAvg }}">
                                        {{ $avg }}%
                                    </td>
                                    <td class="px-3 py-2 text-slate-700 dark:text-slate-200">
                                        {{ $best }}%
                                    </td>
                                    <td class="px-3 py-2 text-slate-700 dark:text-slate-200">
                                        {{ $worst }}%
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

        {{-- شرح مبسّط لكيفية قراءة الخريطة --}}
        <div class="rounded-3xl bg-slate-900 text-slate-50 border border-slate-700 shadow-sm p-5 sm:p-6 text-xs sm:text-sm leading-relaxed">
            <h2 class="text-sm sm:text-base font-bold flex items-center gap-2 mb-2">
                <i class="fa-solid fa-circle-question text-indigo-300"></i>
                كيف نستخدم خريطة التزام الأعضاء؟
            </h2>
            <ul class="list-disc pr-5 space-y-1 text-slate-200">
                <li>المعدل العام لكل عضو محسوب كنسبة مئوية من عدد الأسئلة الصحيحة في كل اختبار شارك به.</li>
                <li>نسبة النجاح هي عدد المحاولات التي تجاوزت {{ $passScore }}% ÷ عدد المحاولات الكلي للعضو.</li>
                <li>أعضاء النخبة (≥ 85%) مرشّحون دائمًا لهدايا خاصة وتحفيز من القيادة.</li>
                <li>الأعضاء تحت 60% يُفضّل متابعتهم، فهم إمّا لا يركّزون في الحل أو يحتاجون دعمًا إضافيًا.</li>
            </ul>
        </div>

    </div>
</div>
@endsection