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

@section('title','تحليل التزام الفريق 📊')
@section('page-title','📊 تحليل التزام الفريق بالاختبارات')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-emerald-50 via-slate-50 to-slate-100 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-emerald-200/70 dark:border-emerald-700 shadow-lg shadow-emerald-200/40 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-24 -left-10 w-52 h-52 rounded-full bg-emerald-400/18 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -right-20 w-64 h-64 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-chart-line text-emerald-400"></i>
                            تحليل التزام الفريق بالاختبارات
                        </h1>
                        <p class="text-slate-600 dark:text-slate-300 text-sm mt-1">
                            هنا بنشوف مين الأكثر التزاماً بحل الاختبارات، ومين محتاج متابعة وتحفيز أكثر من القيادة.
                        </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>

        @php
            $roleMap = [
                'super-admin' => 'سوبر أدمن',
                'moderator'   => 'مشرف',
                'advisor'     => 'مستشار',
                'beta'        => 'عضو بيتا',
                'official'    => 'عضو رسمي',
            ];
        @endphp

        {{-- أعلى مستويات الالتزام --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-emerald-200/60 dark:border-emerald-700/70 shadow-sm p-5 sm:p-6 space-y-4">
            <div class="flex items-center justify-between gap-2">
                <h2 class="text-lg sm:text-xl font-bold text-emerald-600 dark:text-emerald-300 flex items-center gap-2">
                    <i class="fa-solid fa-circle-check"></i>
                    أعلى مستويات الالتزام بالاختبارات
                </h2>
                <span class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                    الترتيب حسب نسبة الالتزام، ثم نسبة النجاح، ثم معدل العلامة.
                </span>
            </div>

            @if($topCommitted->isEmpty())
                <p class="text-sm text-slate-500 dark:text-slate-300">
                    لا توجد بيانات كافية بعد لعرض تحليل الالتزام.
                </p>
            @else
                <div class="space-y-3">
                    @foreach($topCommitted as $index => $row)
                        @php
                            $u   = $row->user;
                            $r   = $roleMap[$u->membership_status] ?? 'عضو';
                            $avg = $row->avg_percent;
                            $cls = $avg >= 85 ? 'text-emerald-400' : ($avg >= 60 ? 'text-amber-400' : 'text-rose-300');
                        @endphp
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 rounded-2xl border border-emerald-200/70 dark:border-emerald-700/60 bg-emerald-50/80 dark:bg-emerald-900/20 px-4 py-3">
                            <div class="flex items-center gap-3">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500 text-white text-sm font-bold">
                                    {{ $index + 1 }}
                                </div>
                                <div>
                                    <div class="flex items-center gap-2">
                                        <span class="font-semibold text-slate-900 dark:text-slate-50 text-sm sm:text-base">
                                            {{ $u->name }}
                                        </span>
                                        <span class="text-[11px] px-2 py-0.5 rounded-full bg-slate-900/90 text-slate-50">
                                            {{ $r }}
                                        </span>
                                    </div>
                                    <p class="mt-1 text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                                        التزام بالاختبارات:
                                        <span class="font-bold text-emerald-600 dark:text-emerald-300">{{ $row->commit_rate }}%</span>
                                        • نجاح في الاختبارات التي شارك بها:
                                        <span class="font-bold text-emerald-600 dark:text-emerald-300">{{ $row->success_rate }}%</span>
                                    </p>
                                </div>
                            </div>

                            <div class="flex flex-wrap items-center gap-2 text-[11px] sm:text-xs">
                                <span class="px-2.5 py-1 rounded-full bg-slate-900 text-slate-50">
                                    معدل العلامة: <span class="font-bold {{ $cls }}">{{ $avg }}%</span>
                                </span>
                                <span class="px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30">
                                    {{ $row->passed }} / {{ $row->attempted }} اختبارات ناجحة
                                </span>
                                <span class="px-2.5 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-200">
                                    لم يشارك في {{ $row->missing }} من أصل {{ $row->total_eligible }} اختبار مخصص له
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- أعضاء بحاجة متابعة --}}
        <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-rose-200/60 dark:border-rose-700/70 shadow-sm p-5 sm:p-6 space-y-4">
            <div class="flex items-center justify-between gap-2">
                <h2 class="text-lg sm:text-xl font-bold text-rose-500 flex items-center gap-2">
                    <i class="fa-solid fa-user-clock"></i>
                    أعضاء بحاجة متابعة في الالتزام
                </h2>
                <span class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                    يظهر هنا من نسبة التزامه أو نجاحه أقل من 60% في الاختبارات المخصصة له.
                </span>
            </div>

            @if($needAttention->isEmpty())
                <p class="text-sm text-slate-500 dark:text-slate-300">
                    حالياً لا يوجد أعضاء ضمن نطاق المتابعة، الوضع ممتاز 👌
                </p>
            @else
                <div class="space-y-3">
                    @foreach($needAttention as $index => $row)
                        @php
                            $u   = $row->user;
                            $r   = $roleMap[$u->membership_status] ?? 'عضو';
                            $avg = $row->avg_percent;
                            $cls = $avg >= 85 ? 'text-emerald-400' : ($avg >= 60 ? 'text-amber-400' : 'text-rose-300');
                        @endphp
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 rounded-2xl border border-rose-200/70 dark:border-rose-700/60 bg-rose-50/80 dark:bg-rose-900/15 px-4 py-3">
                            <div class="flex items-center gap-3">
                                <div class="flex items-center justify-center w-7 h-7 rounded-full bg-rose-500 text-white text-xs font-bold">
                                    {{ $index + 1 }}
                                </div>
                                <div>
                                    <div class="flex items-center gap-2">
                                        <span class="font-semibold text-slate-900 dark:text-slate-50 text-sm sm:text-base">
                                            {{ $u->name }}
                                        </span>
                                        <span class="text-[11px] px-2 py-0.5 rounded-full bg-slate-900/90 text-slate-50">
                                            {{ $r }}
                                        </span>
                                    </div>
                                    <p class="mt-1 text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                                        التزام: <span class="font-bold text-rose-500">{{ $row->commit_rate }}%</span>
                                        • نجاح: <span class="font-bold text-rose-500">{{ $row->success_rate }}%</span>
                                    </p>
                                </div>
                            </div>

                            <div class="flex flex-wrap items-center gap-2 text-[11px] sm:text-xs">
                                <span class="px-2.5 py-1 rounded-full bg-slate-900 text-slate-50">
                                    معدل العلامة: <span class="font-bold {{ $cls }}">{{ $avg }}%</span>
                                </span>
                                <span class="px-2.5 py-1 rounded-full bg-rose-500/10 text-rose-700 dark:text-rose-300 border border-rose-500/30">
                                    ناجح في {{ $row->passed }} / {{ $row->attempted }} من الاختبارات التي شارك فيها
                                </span>
                                <span class="px-2.5 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-200">
                                    لم يدخل حتى الآن {{ $row->missing }} من أصل {{ $row->total_eligible }} اختبار مطلوب
                                </span>
                            </div>
                        </div>
                    @endforeach
                </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">
            <h3 class="text-sm sm:text-base font-bold flex items-center gap-2 mb-2">
                <i class="fa-solid fa-circle-question text-emerald-300"></i>
                كيف يتم حساب التزام العضو؟
            </h3>
            <ul class="list-disc pr-5 space-y-1 text-slate-200">
                <li><span class="font-semibold">الاختبارات المخصّصة للعضو:</span> كل اختبار جمهوره يناسب رتبته/جنسه (الكل، مشرفين، بيتا، شباب، بنات...)</li>
                <li><span class="font-semibold">نسبة الالتزام:</span> (عدد الاختبارات التي شارك فيها ÷ عدد الاختبارات المخصّصة له) × 100.</li>
                <li><span class="font-semibold">نسبة النجاح:</span> (عدد الاختبارات التي نجح فيها من الاختبارات التي شارك فيها فعلياً) × 100.</li>
                <li><span class="font-semibold">معدل العلامة:</span> متوسط العلامة المئوية لكل اختبار شارك فيه العضو، اعتماداً على عدد الأسئلة الفعلي.</li>
                <li>الهدف من الصفحة هو <span class="font-semibold text-emerald-300">المتابعة والتحفيز</span> وليس العقاب؛ عشان نرفع مستوى التزام الفريق ككل.</li>
            </ul>
        </div>

    </div>
</div>
@endsection