{{-- resources/views/tests/marks/missing.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-rose-400/18 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-60 h-60 rounded-full bg-amber-500/18 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-user-clock text-rose-400"></i>
                            الأعضاء الذين لم يتقدّموا للاختبارات
                        </h1>
                        <p class="text-slate-600 dark:text-slate-300 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="font-bold text-emerald-300">
                                {{ $global->tests_count }}
                            </span>
                        </span>
                        <span class="text-slate-500 dark:text-slate-400">
                            عدد الأعضاء الفعّالين الذين نراقبهم: {{ $global->expected }} عضو
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- كروت سريعة صغيرة --}}
        <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 shadow">
                <div class="flex items-center justify-between gap-2">
                    <span class="text-xs text-slate-300">الأعضاء المتوقَّع مشاركتهم في كل اختبار</span>
                    <i class="fa-solid fa-users-line text-slate-400 text-sm"></i>
                </div>
                <div class="mt-2 text-2xl font-extrabold">
                    {{ number_format($global->expected) }}
                    <span class="text-xs font-normal text-slate-400">عضو</span>
                </div>
            </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-user-xmark"></i>
                </div>
                <div class="mt-2 text-2xl font-extrabold">
                    {{ number_format($global->total_missing) }}
                    <span class="text-xs font-normal opacity-80">غياب (اختبار × عضو)</span>
                </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-info"></i>
                </div>
                <div class="mt-2 text-xs sm:text-sm leading-relaxed">
                    إذا شفت اختبار فيه عدد غياب كبير، هذا يعني إنه محتاج متابعة خاصة من
                    <span class="font-semibold">القيادة / الصقر / المستشارين</span> مع الأسماء الظاهرة في البانيل.
                </div>
            </div>
        </div>

        {{-- جدول ملخّص لكل اختبار --}}
        <div class="relative 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-xl sm:text-2xl 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($tests->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>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach($tests as $i => $test)
                                @php
                                    $m = $test->missing_meta;
                                    $missingRate = $m->expected > 0
                                        ? round(($m->missing_count / $m->expected) * 100, 1)
                                        : 0;
                                    $badgeCls = $missingRate >= 70
                                        ? 'bg-rose-500/15 text-rose-500 border-rose-400/40'
                                        : ($missingRate >= 40
                                            ? 'bg-amber-400/15 text-amber-500 border-amber-400/40'
                                            : 'bg-emerald-500/15 text-emerald-500 border-emerald-400/40');
                                @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">
                                                {{ $test->title }}
                                            </span>
                                            <span class="text-[10px] text-slate-500 dark:text-slate-400">
                                                ID: #{{ $test->id }}
                                            </span>
                                        </div>
                                    </td>
                                    <td class="px-3 py-2 text-slate-900 dark:text-slate-50">
                                        {{ $m->expected }}
                                    </td>
                                    <td class="px-3 py-2 text-emerald-600 dark:text-emerald-300">
                                        {{ $m->attempted }}
                                    </td>
                                    <td class="px-3 py-2">
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[11px] {{ $badgeCls }}">
                                            <i class="fa-solid fa-user-xmark text-[10px]"></i>
                                            {{ $m->missing_count }} عضو
                                            <span class="text-[10px] opacity-80">({{ $missingRate }}%)</span>
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

        {{-- بانيل: لكل اختبار قائمة الأعضاء اللي ما قدّموا --}}
        <div class="space-y-4">
            @foreach($tests as $test)
                @php
                    $m       = $test->missing_meta;
                    $missing = $test->missing_users;
                    $groups  = $missing->groupBy('membership_status');
                    $roleNames = [
                        'super-admin' => 'سوبر أدمن',
                        'advisor'     => 'مستشار',
                        'admin'       => 'إداري',
                        'moderator'   => 'مشرف',
                        'official'    => 'عضو رسمي',
                        'beta'        => 'عضو بيتا',
                        'member'      => 'عضو',
                    ];
                @endphp

                <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm overflow-hidden">
                    <button type="button"
                            class="w-full px-4 py-3 sm:px-5 sm:py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 text-right"
                            onclick="document.getElementById('panel-test-{{ $test->id }}').classList.toggle('hidden')">
                        <div>
                            <div class="flex items-center gap-2">
                                <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-sky-500/10 text-sky-500 text-xs font-extrabold">
                                    #{{ $test->id }}
                                </span>
                                <span class="font-bold text-slate-900 dark:text-white text-sm sm:text-base">
                                    {{ $test->title }}
                                </span>
                            </div>
                            <p class="mt-1 text-[11px] text-slate-500 dark:text-slate-400">
                                متوقَّعين: {{ $m->expected }} • قدّموا: {{ $m->attempted }} • لم يقدّموا: {{ $m->missing_count }}
                            </p>
                        </div>
                        <div class="flex items-center gap-2 text-xs">
                            <span class="px-2.5 py-1 rounded-full bg-rose-500/10 text-rose-600 dark:text-rose-300 border border-rose-500/30">
                                عرض قائمة الغائبين
                            </span>
                            <i class="fa-solid fa-chevron-down text-slate-400 text-xs"></i>
                        </div>
                    </button>

                    <div id="panel-test-{{ $test->id }}" class="border-t border-slate-200/80 dark:border-slate-700 px-4 sm:px-5 py-4 sm:py-5 space-y-4 hidden">
                        @if($missing->isEmpty())
                            <p class="text-sm text-emerald-600 dark:text-emerald-300">
                                جميع الأعضاء الفعّالين قدّموا على هذا الاختبار، لا يوجد غياب 👏
                            </p>
                        @else
                            <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300">
                                القائمة التالية تظهر <span class="font-semibold text-rose-500">{{ $m->missing_count }}</span>
                                حالة غياب لهذا الاختبار، مقسّمة حسب الرُتبة (أعضاء، مشرفين، مستشارين، إداريين…).
                            </p>

                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                                @foreach($groups as $status => $users)
                                    @php
                                        $label = $roleNames[$status] ?? ($status ?: 'عضو');
                                    @endphp
                                    <div class="rounded-2xl bg-slate-50/90 dark:bg-slate-900/60 border border-slate-200/80 dark:border-slate-700 p-3 space-y-2">
                                        <div class="flex items-center justify-between gap-2">
                                            <span class="text-xs font-semibold text-slate-800 dark:text-slate-100">
                                                {{ $label }}
                                            </span>
                                            <span class="px-2 py-0.5 rounded-full bg-slate-900 text-slate-50 text-[10px]">
                                                {{ $users->count() }} غياب
                                            </span>
                                        </div>

                                        <div class="flex flex-wrap gap-1.5">
                                            @foreach($users->take(15) as $u)
                                                <span class="px-2 py-0.5 rounded-full bg-white dark:bg-slate-800 border border-slate-200/70 dark:border-slate-700 text-[11px] text-slate-700 dark:text-slate-100">
                                                    {{ $u->name ?? ('ID #'.$u->id) }}
                                                </span>
                                            @endforeach

                                            @if($users->count() > 15)
                                                <span class="px-2 py-0.5 rounded-full bg-rose-500/15 text-rose-500 border border-rose-400/40 text-[11px]">
                                                    +{{ $users->count() - 15 }} آخرين
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </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-question text-amber-300"></i>
                كيف نستخدم هذه الصفحة؟
            </h2>
            <ul class="list-disc pr-5 space-y-1 text-slate-200">
                <li>كل اختبار يظهر عدد الأعضاء الفعّالين المتوقع مشاركتهم فيه، وعدد من قدّموا، وعدد من لم يقدّموا.</li>
                <li>الـ <b>بانيل</b> لكل اختبار تقسم الغياب حسب الرُتبة (سوبر، مستشار، مشرف، أعضاء...) لسهولة المتابعة.</li>
                <li>ممكن تستخدم الأسماء هنا لإرسال تنبيهات خاصة من القيادة أو الصقر أو المستشارين للأعضاء المقصرين.</li>
            </ul>
        </div>

    </div>
</div>
@endsection