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

                    <div class="flex flex-wrap gap-2 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 text-[11px]">
                            <i class="fa-solid fa-circle-info text-[11px] text-emerald-400"></i>
                            كل الأرقام محسوبة كنسبة مئوية من 100% حسب عدد أسئلة كل اختبار.
                        </span>
                    </div>
                </div>

                {{-- بطاقات إحصاءات عامة --}}
                <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-6 gap-3 pt-1 text-xs">
                    @php
                        $cards = [
                            [
                                'label' => 'المعدل العام لكل المحاولات',
                                'value' => $stats['total_avg'] ?? null,
                                'icon'  => 'fa-globe',
                                'color' => 'emerald',
                            ],
                            [
                                'label' => 'معدل الأعضاء (بدون مشرف/سوبر/مستشار)',
                                'value' => $stats['members_avg'] ?? null,
                                'icon'  => 'fa-users',
                                'color' => 'sky',
                            ],
                            [
                                'label' => 'معدل الشباب',
                                'value' => $stats['male_avg'] ?? null,
                                'icon'  => 'fa-person',
                                'color' => 'blue',
                            ],
                            [
                                'label' => 'معدل الصبايا',
                                'value' => $stats['female_avg'] ?? null,
                                'icon'  => 'fa-person-dress',
                                'color' => 'pink',
                            ],
                            [
                                'label' => 'معدل المشرفين',
                                'value' => $stats['moderators_avg'] ?? null,
                                'icon'  => 'fa-user-shield',
                                'color' => 'amber',
                            ],
                            [
                                'label' => 'معدل السوبر أدمن',
                                'value' => $stats['super_admins_avg'] ?? null,
                                'icon'  => 'fa-crown',
                                'color' => 'violet',
                            ],
                        ];

                        $colorMap = [
                            'emerald' => 'from-emerald-500/15 to-emerald-500/5 text-emerald-700 dark:text-emerald-200',
                            'sky'     => 'from-sky-500/15 to-sky-500/5 text-sky-700 dark:text-sky-200',
                            'blue'    => 'from-blue-500/15 to-blue-500/5 text-blue-700 dark:text-blue-200',
                            'pink'    => 'from-pink-500/15 to-pink-500/5 text-pink-700 dark:text-pink-200',
                            'amber'   => 'from-amber-500/15 to-amber-500/5 text-amber-700 dark:text-amber-200',
                            'violet'  => 'from-violet-500/15 to-violet-500/5 text-violet-700 dark:text-violet-200',
                        ];
                    @endphp

                    @foreach($cards as $card)
                        <div class="rounded-2xl bg-gradient-to-br {{ $colorMap[$card['color']] ?? 'from-slate-200/40 to-slate-100/20 text-slate-700 dark:text-slate-200' }} border border-white/40 dark:border-white/10 px-3 py-3 flex flex-col justify-between">
                            <div class="flex items-center justify-between gap-2">
                                <span class="text-[11px] leading-snug">
                                    {{ $card['label'] }}
                                </span>
                                <i class="fa-solid {{ $card['icon'] }} text-[13px] opacity-80"></i>
                            </div>
                            <div class="mt-1 text-lg font-extrabold">
                                @if($card['value'] !== null)
                                    {{ number_format($card['value'], 2) }}%
                                @else
                                    <span class="text-xs font-normal opacity-70">لا يوجد بيانات</span>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>

        {{-- جدول تفصيلي لكل عضو --}}
        <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-sm">
            <div class="px-4 sm:px-6 py-4 border-b border-slate-200/70 dark:border-slate-700 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                <div class="flex items-center gap-2">
                    <span class="inline-flex h-9 w-9 items-center justify-center rounded-2xl bg-indigo-500/10 text-indigo-500">
                        <i class="fa-solid fa-users-line text-base"></i>
                    </span>
                    <div>
                        <h2 class="text-base sm:text-lg font-bold text-slate-900 dark:text-white">
                            معدّل كل مستخدم في الاختبارات
                        </h2>
                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                            قائمة بكل من حلّ أي اختبار، مع عدد المحاولات، والمعدل النهائي، وآخر وقت حل.
                        </p>
                    </div>
                </div>
            </div>

            @if($perUsers->isEmpty())
                <div class="px-4 py-8 text-center text-sm text-slate-500 dark:text-slate-300">
                    لا توجد محاولات اختبارات حتى الآن.
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
                            <tr>
                                <th class="px-3 sm:px-4 py-3 text-right text-xs font-semibold">#</th>
                                <th class="px-3 sm:px-4 py-3 text-right text-xs font-semibold">المستخدم</th>
                                <th class="px-3 sm:px-4 py-3 text-right text-xs font-semibold">الجنس</th>
                                <th class="px-3 sm:px-4 py-3 text-right text-xs font-semibold">الرتبة</th>
                                <th class="px-3 sm:px-4 py-3 text-right text-xs font-semibold">المعدل النهائي</th>
                                <th class="px-3 sm:px-4 py-3 text-right text-xs font-semibold">عدد المحاولات</th>
                                <th class="px-3 sm:px-4 py-3 text-right text-xs font-semibold">آخر محاولة</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach($perUsers as $i => $row)
                                @php
                                    // ندعم الشكل array أو object
                                    $user      = is_array($row) ? ($row['user'] ?? null) : ($row->user ?? null);
                                    $avgScore  = is_array($row) ? ($row['avg_score'] ?? 0) : ($row->avg_score ?? 0);
                                    $attempts  = is_array($row) ? ($row['attempts'] ?? 0)   : ($row->attempts ?? 0);
                                    $lastAt    = is_array($row) ? ($row['last_at'] ?? null) : ($row->last_at ?? null);

                                    $gender = $user->gender ?? null;
                                    $role   = $user->membership_status ?? null;

                                    $avgClass =
                                        $avgScore >= 85 ? 'text-emerald-400' :
                                        ($avgScore >= 60 ? 'text-yellow-300' : 'text-rose-300');

                                    $roleMap = [
                                        'super-admin' => 'سوبر أدمن',
                                        'moderator'   => 'مشرف',
                                        'advisor'     => 'مستشار',
                                        'official'    => 'عضو رسمي',
                                        'beta'        => 'عضو بيتا',
                                    ];
                                    $roleText = $roleMap[$role] ?? 'عضو';
                                @endphp
                                <tr class="hover:bg-slate-50/90 dark:hover:bg-slate-800/60 transition">
                                    <td class="px-3 sm:px-4 py-3 text-slate-400 text-xs">
                                        {{ $i + 1 }}
                                    </td>

                                    <td class="px-3 sm:px-4 py-3">
                                        <div class="flex flex-col">
                                            <span class="text-slate-900 dark:text-slate-50 font-semibold text-sm">
                                                {{ $user->name ?? '—' }}
                                            </span>
                                            <span class="text-[11px] text-slate-400">
                                                ID: {{ $user->id ?? '—' }}
                                            </span>
                                        </div>
                                    </td>

                                    <td class="px-3 sm:px-4 py-3 text-xs">
                                        @if($gender === 'male')
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-sky-500/10 text-sky-500 border border-sky-500/30">
                                                <i class="fa-solid fa-person text-[11px]"></i>
                                                شاب
                                            </span>
                                        @elseif($gender === 'female')
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-pink-500/10 text-pink-500 border border-pink-500/30">
                                                <i class="fa-solid fa-person-dress text-[11px]"></i>
                                                صبية
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-slate-500/10 text-slate-500 border border-slate-500/30 text-[11px]">
                                                غير محدد
                                            </span>
                                        @endif
                                    </td>

                                    <td class="px-3 sm:px-4 py-3 text-xs">
                                        @if($role === 'super-admin')
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-violet-500/10 text-violet-300 border border-violet-500/40">
                                                <i class="fa-solid fa-crown text-[11px]"></i>
                                                {{ $roleText }}
                                            </span>
                                        @elseif($role === 'moderator')
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-300 border border-amber-500/40">
                                                <i class="fa-solid fa-user-shield text-[11px]"></i>
                                                {{ $roleText }}
                                            </span>
                                        @elseif($role === 'advisor')
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-300 border border-emerald-500/40">
                                                <i class="fa-solid fa-user-tie text-[11px]"></i>
                                                {{ $roleText }}
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-slate-500/10 text-slate-200 border border-slate-500/40">
                                                <i class="fa-solid fa-user text-[11px]"></i>
                                                {{ $roleText }}
                                            </span>
                                        @endif
                                    </td>

                                    <td class="px-3 sm:px-4 py-3">
                                        <span class="font-bold {{ $avgClass }}">
                                            {{ number_format($avgScore, 2) }}%
                                        </span>
                                    </td>

                                    <td class="px-3 sm:px-4 py-3 text-slate-700 dark:text-slate-200 text-sm">
                                        {{ $attempts }}
                                    </td>

                                    <td class="px-3 sm:px-4 py-3 text-slate-500 dark:text-slate-300 text-xs">
                                        @if($lastAt)
                                            {{ \Illuminate\Support\Carbon::parse($lastAt)->format('Y/m/d H:i') }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

    </div>
</div>
@endsection