{{-- resources/views/tests/marks/gender.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-20 -left-10 w-44 h-44 rounded-full bg-sky-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-60 h-60 rounded-full bg-fuchsia-500/20 blur-3xl"></div>

            <div class="relative px-6 py-7 space-y-4">
                <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-venus-mars text-pink-400"></i>
                            معدلات العلامات حسب الجنس
                        </h1>
                        <p class="text-slate-600 dark:text-slate-300 text-sm mt-1">
                            هنا بنشوف أداء الشباب والبنات في الاختبارات: المعدّل العام لكل طرف، والفروق بينهم، وكمان لكل اختبار لوحده.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {{-- كروت سريعة: الشباب / البنات / الفرق --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            @php
                $male  = $globalStats->male_avg;
                $fem   = $globalStats->female_avg;
                $diff  = $globalStats->diff;
                $lead  = $globalStats->leader;

                $maleCls = $male  !== null ? ($male >= 85 ? 'text-emerald-400' : ($male >= 60 ? 'text-amber-400' : 'text-rose-300')) : 'text-slate-400';
                $femCls  = $fem   !== null ? ($fem  >= 85 ? 'text-emerald-400' : ($fem  >= 60 ? 'text-amber-400' : 'text-rose-300')) : 'text-slate-400';
            @endphp

            <div class="rounded-2xl bg-sky-900 text-sky-50 px-4 py-4 shadow">
                <div class="flex items-center justify-between gap-2">
                    <span class="text-xs text-sky-200">معدل الشباب</span>
                    <i class="fa-solid fa-person text-sky-200"></i>
                </div>
                <div class="mt-2 text-3xl font-extrabold {{ $maleCls }}">
                    {{ $male !== null ? $male.'%' : '—' }}
                </div>
                <p class="mt-1 text-[11px] text-sky-200/80">
                    يُحسب من كل محاولات الأعضاء الشباب في الاختبارات.
                </p>
            </div>

            <div class="rounded-2xl bg-fuchsia-900 text-fuchsia-50 px-4 py-4 shadow">
                <div class="flex items-center justify-between gap-2">
                    <span class="text-xs text-fuchsia-200">معدل البنات</span>
                    <i class="fa-solid fa-person-dress text-fuchsia-200"></i>
                </div>
                <div class="mt-2 text-3xl font-extrabold {{ $femCls }}">
                    {{ $fem !== null ? $fem.'%' : '—' }}
                </div>
                <p class="mt-1 text-[11px] text-fuchsia-200/80">
                    يُحسب من كل محاولات العضوات البنات في الاختبارات.
                </p>
            </div>

            <div class="rounded-2xl bg-slate-900 text-slate-50 px-4 py-4 shadow flex flex-col justify-between">
                <div class="flex items-center justify-between gap-2">
                    <span class="text-xs text-slate-300">الفرق بين الشباب والبنات</span>
                    <i class="fa-solid fa-scale-balanced text-slate-300"></i>
                </div>
                <div class="mt-2">
                    <div class="text-3xl font-extrabold">
                        {{ $diff !== null ? ($diff > 0 ? '+'.$diff.'%' : $diff.'%') : '—' }}
                    </div>
                    <p class="mt-1 text-[11px] text-slate-300/80">
                        @if($lead === 'male')
                            الشباب متفوّقين حالياً على البنات بهامش {{ abs($diff) }}%.
                        @elseif($lead === 'female')
                            البنات متفوّقات حالياً على الشباب بهامش {{ abs($diff) }}%.
                        @elseif($lead === 'equal')
                            أداء الشباب والبنات متقارب جداً، ما في فرق يُذكر. 💫
                        @else
                            نحتاج مزيد من البيانات من الطرفين لعرض الفرق بدقّة.
                        @endif
                    </p>
                </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-6">
            <div class="flex items-center justify-between gap-2 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-list-check text-indigo-400"></i>
                    أداء الشباب والبنات في كل اختبار
                </h2>
                <span class="text-xs text-slate-500 dark:text-slate-400">
                    الأرقام هنا محسوبة كنسبة مئوية صحيحة لكل محاولة (عدد الإجابات الصحيحة ÷ عدد الأسئلة).
                </span>
            </div>

            @if($perTestStats->isEmpty())
                <div class="rounded-2xl border border-dashed border-slate-300/70 dark:border-slate-600/70 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>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach($perTestStats as $i => $row)
                                @php
                                    $mAvg = $row->male_avg;
                                    $fAvg = $row->female_avg;

                                    $mCls = $mAvg !== null ? ($mAvg >= 85 ? 'text-emerald-400' : ($mAvg >= 60 ? 'text-amber-400' : 'text-rose-300')) : 'text-slate-400';
                                    $fCls = $fAvg !== null ? ($fAvg >= 85 ? 'text-emerald-400' : ($fAvg >= 60 ? 'text-amber-400' : 'text-rose-300')) : 'text-slate-400';

                                    $who = '—';
                                    if ($mAvg !== null && $fAvg !== null) {
                                        if ($mAvg > $fAvg) $who = 'الشباب';
                                        elseif ($fAvg > $mAvg) $who = 'البنات';
                                        else $who = 'متقارب';
                                    }
                                @endphp
                                <tr class="hover:bg-slate-50/90 dark:hover:bg-slate-800/60 transition">
                                    <td class="px-3 py-2 text-slate-400">{{ $i + 1 }}</td>
                                    <td class="px-3 py-2">
                                        <div class="flex flex-col">
                                            <span class="font-semibold text-slate-900 dark:text-slate-50">
                                                {{ $row->test->title }}
                                            </span>
                                            <span class="text-[10px] text-slate-500 dark:text-slate-400">
                                                ID: #{{ $row->test->id }}
                                            </span>
                                        </div>
                                    </td>
                                    <td class="px-3 py-2 text-slate-600 dark:text-slate-200">
                                        {{ $row->male_attempts }}
                                    </td>
                                    <td class="px-3 py-2 font-bold {{ $mCls }}">
                                        {{ $mAvg !== null ? $mAvg.'%' : '—' }}
                                    </td>
                                    <td class="px-3 py-2 text-slate-600 dark:text-slate-200">
                                        {{ $row->female_attempts }}
                                    </td>
                                    <td class="px-3 py-2 font-bold {{ $fCls }}">
                                        {{ $fAvg !== null ? $fAvg.'%' : '—' }}
                                    </td>
                                    <td class="px-3 py-2">
                                        <span class="px-2 py-0.5 rounded-full border text-[11px]
                                            @if($who === 'الشباب')
                                                border-sky-400/50 text-sky-500 bg-sky-50/80 dark:bg-sky-500/10
                                            @elseif($who === 'البنات')
                                                border-fuchsia-400/50 text-fuchsia-500 bg-fuchsia-50/80 dark:bg-fuchsia-500/10
                                            @elseif($who === 'متقارب')
                                                border-emerald-400/50 text-emerald-500 bg-emerald-50/80 dark:bg-emerald-500/10
                                            @else
                                                border-slate-400/50 text-slate-500 bg-slate-50/80 dark:bg-slate-700/40
                                            @endif
                                        ">
                                            {{ $who }}
                                        </span>
                                    </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 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-info text-indigo-300"></i>
                ملاحظات على قراءة هذه الصفحة
            </h2>
            <ul class="list-disc pr-5 space-y-1 text-slate-200/90">
                <li>كل الأرقام هنا محسوبة على شكل نسبة مئوية صحيحة لكل محاولة (عدد الإجابات الصحيحة ÷ عدد الأسئلة × 100).</li>
                <li>معدل الشباب/البنات العام هو متوسط نسب كل المحاولات، وليس اختبار واحد فقط.</li>
                <li>قائمة «أداء الشباب والبنات في كل اختبار» تساعدك تشوف أي اختبار الشباب متفوقين فيه وأي واحد البنات متفوقات.</li>
                <li>الفكرة من الصفحة هي المتابعة والتحفيز، مش المقارنة السلبية؛ الهدف نعرف مين محتاج دعم أكتر بالمذاكرة.</li>
            </ul>
        </div>

    </div>
</div>
@endsection