{{-- resources/views/tests/marks/overview.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-16 w-48 h-48 rounded-full bg-emerald-400/18 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-20 w-64 h-64 rounded-full bg-indigo-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-signal text-indigo-400"></i>
                            ملخص علامات الاختبارات
                        </h1>
                        <p class="text-slate-600 dark:text-slate-300 text-xs sm:text-sm mt-1">
                            هذه الصفحة تعطيك نظرة سريعة على مستوى علامات التيم بالكامل:
                            معدل عام، نسبة النجاح والفشل، ومعدل الشباب والبنات والأعضاء العاديين والمشرفين.
                        </p>
                    </div>

                    <div class="text-xs sm:text-sm flex flex-col items-start sm:items-end gap-1">
                        <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 class="font-semibold">{{ $testsCount }}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- كروت سريعة + جيج عام --}}
        @php
            $p = max(0, min(100, (float)($stats['avg_all'] ?? 0)));
        @endphp

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            {{-- الجيج العام لعلامات التيم --}}
            <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/70 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40 p-5 flex flex-col">
                <div class="text-sm font-semibold text-slate-800 dark:text-slate-100 mb-4 flex items-center gap-2">
                    <i class="fa-solid fa-gauge-high text-emerald-400"></i>
                    معدل علامات التيم (كل المحاولات)
                </div>

                <div class="flex justify-center mb-3">
                    <div class="relative w-40 h-24 sm:w-48 sm:h-28">
                        <svg viewBox="0 0 100 50" class="w-full h-full">
                            {{-- الخلفية --}}
                            <path
                                d="M10 50 A40 40 0 0 1 90 50"
                                fill="none"
                                stroke="#E5E7EB"
                                stroke-width="10"
                                stroke-linecap="round"
                                pathLength="100"
                            />
                            @php
                                $gauge = $p;
                            @endphp
                            <defs>
                                <linearGradient id="marksGaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%"   stop-color="#f97373" />
                                    <stop offset="50%"  stop-color="#facc15" />
                                    <stop offset="100%" stop-color="#22c55e" />
                                </linearGradient>
                            </defs>
                            <path
                                d="M10 50 A40 40 0 0 1 90 50"
                                fill="none"
                                stroke="url(#marksGaugeGradient)"
                                stroke-width="10"
                                stroke-linecap="round"
                                pathLength="100"
                                stroke-dasharray="{{ $gauge }} 100"
                            />
                        </svg>

                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <span class="text-[11px] text-slate-500 dark:text-slate-300">
                                المعدل العام
                            </span>
                            <span class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white">
                                {{ $p }}%
                            </span>
                            <span class="mt-1 text-[11px] text-slate-400 dark:text-slate-400">
                                من كل المحاولات المسجّلة
                            </span>
                        </div>
                    </div>
                </div>

                <p class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
                    هذه النسبة تمثل متوسط نسبة الإجابات الصحيحة في كل محاولات الاختبارات
                    (عدد الإجابات الصحيحة في كل محاولة ÷ عدد أسئلة الاختبار × 100 ثم المتوسط).
                </p>
            </div>

            {{-- كروت الأرقام العامة --}}
            <div class="space-y-3 lg:col-span-2">
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div class="rounded-2xl bg-slate-900 text-slate-50 px-4 py-3">
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-xs text-slate-300">إجمالي المحاولات</span>
                            <i class="fa-solid fa-rotate text-slate-400 text-sm"></i>
                        </div>
                        <div class="mt-2 text-2xl font-extrabold">
                            {{ number_format($stats['total_attempts']) }}
                        </div>
                    </div>

                    <div class="rounded-2xl bg-emerald-500/10 text-emerald-900 dark:text-emerald-200 px-4 py-3">
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-xs">نسبة النجاح الكلية</span>
                            <i class="fa-solid fa-circle-check"></i>
                        </div>
                        <div class="mt-2 text-2xl font-extrabold">
                            {{ $stats['pass_rate'] }}%
                        </div>
                        <p class="mt-1 text-[11px] text-emerald-800/80 dark:text-emerald-300/80">
                            ({{ $stats['pass_count'] }} محاولة ناجحة على الأقل {{ $passScore }}%)
                        </p>
                    </div>

                    <div class="rounded-2xl bg-rose-500/10 text-rose-900 dark:text-rose-200 px-4 py-3">
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-xs">نسبة الفشل الكلية</span>
                            <i class="fa-solid fa-triangle-exclamation"></i>
                        </div>
                        <div class="mt-2 text-2xl font-extrabold">
                            {{ $stats['fail_rate'] }}%
                        </div>
                        <p class="mt-1 text-[11px] text-rose-800/80 dark:text-rose-300/80">
                            ({{ $stats['fail_count'] }} محاولة أقل من {{ $passScore }}%)
                        </p>
                    </div>
                </div>

                {{-- كروت حسب الفئات --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 text-xs sm:text-sm">
                    <div class="rounded-2xl bg-white/90 dark:bg-slate-900/90 border border-slate-200/70 dark:border-slate-700 px-4 py-3">
                        <div class="flex items-center justify-between gap-2">
                            <span>معدل الأعضاء العاديين</span>
                            <i class="fa-solid fa-users"></i>
                        </div>
                        <div class="mt-2 text-xl font-bold">
                            {{ $stats['members_avg'] !== null ? $stats['members_avg'].'%' : '—' }}
                        </div>
                    </div>

                    <div class="rounded-2xl bg-white/90 dark:bg-slate-900/90 border border-slate-200/70 dark:border-slate-700 px-4 py-3">
                        <div class="flex items-center justify-between gap-2">
                            <span>معدل المشرفين</span>
                            <i class="fa-solid fa-user-shield"></i>
                        </div>
                        <div class="mt-2 text-xl font-bold">
                            {{ $stats['mods_avg'] !== null ? $stats['mods_avg'].'%' : '—' }}
                        </div>
                    </div>

                    <div class="rounded-2xl bg-white/90 dark:bg-slate-900/90 border border-slate-200/70 dark:border-slate-700 px-4 py-3">
                        <div class="flex items-center justify-between gap-2">
                            <span>معدل السوبر أدمنز</span>
                            <i class="fa-solid fa-crown"></i>
                        </div>
                        <div class="mt-2 text-xl font-bold">
                            {{ $stats['super_avg'] !== null ? $stats['super_avg'].'%' : '—' }}
                        </div>
                    </div>

                    <div class="rounded-2xl bg-white/90 dark:bg-slate-900/90 border border-slate-200/70 dark:border-slate-700 px-4 py-3">
                        <div class="flex items-center justify-between gap-2">
                            <span>معدل الشباب / البنات</span>
                            <i class="fa-solid fa-venus-mars"></i>
                        </div>
                        <div class="mt-2 text-sm font-semibold space-y-0.5">
                            <div>الشباب: <span class="font-bold">{{ $stats['male_avg'] !== null ? $stats['male_avg'].'%' : '—' }}</span></div>
                            <div>البنات: <span class="font-bold">{{ $stats['female_avg'] !== null ? $stats['female_avg'].'%' : '—' }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- شرح مبسّط للقيادة والمتابعة --}}
        <div class="rounded-3xl bg-slate-900 text-slate-50 border border-slate-700 shadow-sm p-6 text-xs sm:text-sm leading-relaxed">
            <h2 class="text-base sm:text-lg font-bold flex items-center gap-2 mb-3">
                <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>المعدل العام يعتمد على النسبة المئوية الصحيحة لكل محاولة (عدد الإجابات الصحيحة ÷ عدد أسئلة الاختبار × 100)، ثم نأخذ متوسط هذه النسب.</li>
                <li>نسبة النجاح والفشل تعطي صورة مباشرة عن صعوبة الاختبارات أو التزام التيم بالمذاكرة.</li>
                <li>معدل الأعضاء العاديين مهم لمعرفة مستوى التيم ككل، بينما معدل المشرفين والسوبر أدمنز يعكس قدوة القيادة.</li>
                <li>معدل الشباب مقابل البنات يساعدك تفهم أي جهة محتاجة دعم أو متابعة إضافية.</li>
            </ul>
        </div>

    </div>
</div>
@endsection