@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">

    <div class="max-w-5xl mx-auto px-4 space-y-6">

        {{-- هيدر --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-xl p-6 relative overflow-hidden">
            <div class="absolute -top-10 -left-10 w-40 h-40 bg-indigo-400/20 blur-3xl rounded-full"></div>
            <div class="absolute -bottom-12 -right-10 w-48 h-48 bg-emerald-400/20 blur-3xl rounded-full"></div>

            <h1 class="text-2xl font-black text-slate-900 dark:text-white flex items-center gap-2">
                <i class="fa-solid fa-chart-line text-indigo-400"></i>
                المتوسّطات العامة للاختبارات
            </h1>
            <p class="text-slate-600 dark:text-slate-300 mt-2 text-sm">
                هنا بنشوف الأداء العام للفريق: المعدل العام، نسب النجاح، ومتوسط الشباب والبنات.
            </p>
        </div>

        {{-- الكروت --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="rounded-3xl bg-slate-900 text-white p-6 text-center">
    <div class="text-lg font-bold">المعدل العام</div>
    <div class="text-4xl font-black mt-2">{{ $global->avg }}%</div>
    <div class="text-xs mt-1 opacity-70">{{ $global->attempts }} محاولة</div>
</div>

<div class="rounded-3xl bg-emerald-100 text-emerald-900 p-6 text-center">
    <div class="text-lg font-bold">نسبة النجاح</div>
    <div class="text-4xl font-black mt-2">{{ $global->pass_rate }}%</div>
    <div class="text-xs mt-1 opacity-70">{{ $global->pass_rate > 0 ? $global->pass_rate : 0 }} محاولة ناجحة</div>
</div>

<div class="rounded-3xl bg-rose-100 text-rose-900 p-6 text-center">
    <div class="text-lg font-bold">نسبة الفشل</div>
    <div class="text-4xl font-black mt-2">{{ $global->fail_rate }}%</div>
    <div class="text-xs mt-1 opacity-70">{{ $global->fail_rate }} محاولة راسبة</div>
</div>

<div class="rounded-3xl bg-indigo-100 text-indigo-900 p-6 text-center">
    <div class="text-lg font-bold">معدلات الجنس</div>
    <div class="text-sm mt-2">
        الشباب: <span class="font-black">{{ $gender->male }}%</span><br>
        البنات: <span class="font-black">{{ $gender->female }}%</span>
    </div>
</div>

        </div>

        {{-- ملاحظة --}}
        <div class="rounded-2xl bg-slate-900 text-slate-50 border border-slate-700 p-4 text-xs leading-relaxed">
            <p>يتم حساب المعدل العام بناءً على (score) الخام، وليس نسبة مئوية من عدد الأسئلة.</p>
            <p class="mt-1">نسبة النجاح تعتمد على حد النجاح <span class="font-bold">{{ $passScore }}%</span></p>
        </div>

    </div>

</div>
@endsection