@extends('layouts.app')

@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-5xl 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-16 -left-10 w-40 h-40 rounded-full bg-emerald-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-52 h-52 rounded-full bg-sky-500/25 blur-3xl"></div>

            <div class="relative px-4 sm:px-6 lg:px-8 py-6 sm:py-7 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="space-y-1">
                    <h1 class="text-xl sm:text-2xl lg:text-3xl font-black tracking-tight text-slate-900 dark:text-white">
                        اختبارات الكلية الخاصة بك
                    </h1>
                    <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300">
                        هنا تجد كل اختبارات الكلية التي شاركتَ فيها مع نتيجتك وتاريخ التقديم.
                    </p>
                </div>
                <div class="flex items-center gap-3">
                    <div class="hidden sm:flex flex-col items-end text-xs sm:text-sm">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 text-[11px] sm:text-xs dark:bg-emerald-900/20 dark:text-emerald-200 dark:border-emerald-700/60">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                            {{ $user->name }}
                        </span>
                        <span class="text-[11px] text-slate-500 dark:text-slate-400 mt-1">
                            {{ now()->locale('ar')->isoFormat('dddd D MMMM YYYY — h:mm A') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- كروت الإحصائيات --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm p-4 flex flex-col gap-1">
                <span class="text-xs text-slate-500 dark:text-slate-400">عدد الاختبارات</span>
                <span class="text-2xl font-extrabold text-slate-900 dark:text-white">
                    {{ $stats['tests_count'] }}
                </span>
            </div>

            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm p-4 flex flex-col gap-1">
                <span class="text-xs text-slate-500 dark:text-slate-400">المعدل العام</span>
                <span class="text-2xl font-extrabold text-sky-600 dark:text-sky-400">
                    {{ $stats['avg_score'] }}
                </span>
            </div>

            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm p-4 flex flex-col gap-1">
                <span class="text-xs text-slate-500 dark:text-slate-400">أعلى نتيجة</span>
                <span class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-400">
                    {{ $stats['best_score'] }}
                </span>
            </div>
        </div>

        {{-- جدول الاختبارات --}}
        <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm overflow-hidden">
            @if($submissions->isEmpty())
                <div class="px-4 sm:px-6 py-10 text-center">
                    <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-300">
                        <i class="fa-solid fa-graduation-cap text-lg"></i>
                    </div>
                    <p class="text-sm sm:text-base font-medium text-slate-700 dark:text-slate-200">
                        لا توجد لديك اختبارات كلية مسجّلة حتى الآن
                    </p>
                    <p class="mt-1 text-xs sm:text-sm text-slate-500 dark:text-slate-400">
                        عند مشاركتك في اختبارات الكلية ستظهر هنا تلقائياً.
                    </p>
                </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/80">
                            <tr>
                                <th class="px-3 sm:px-4 py-3 text-right font-semibold text-slate-600 dark:text-slate-300">الاختبار</th>
                                <th class="px-3 sm:px-4 py-3 text-right font-semibold text-slate-600 dark:text-slate-300">التاريخ</th>
                                <th class="px-3 sm:px-4 py-3 text-right font-semibold text-slate-600 dark:text-slate-300">النتيجة</th>
                                <th class="px-3 sm:px-4 py-3 text-left font-semibold text-slate-600 dark:text-slate-300"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach($submissions as $submission)
                                <tr class="hover:bg-slate-50/80 dark:hover:bg-slate-800/60 transition-colors">
                                    <td class="px-3 sm:px-4 py-3 align-top">
                                        <div class="flex flex-col gap-0.5">
                                            <span class="font-semibold text-slate-900 dark:text-slate-50">
                                                {{ $submission->test->title ?? 'اختبار غير معروف' }}
                                            </span>
                                            @if(!empty($submission->test->description))
                                                <span class="text-[11px] text-slate-500 dark:text-slate-400 line-clamp-2">
                                                    {{ $submission->test->description }}
                                                </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-3 sm:px-4 py-3 align-top text-[11px] sm:text-xs text-slate-600 dark:text-slate-300">
                                        {{ optional($submission->submitted_at)->format('Y/m/d H:i') ?? 'غير متوفر' }}
                                    </td>
                                    <td class="px-3 sm:px-4 py-3 align-top">
                                        <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[11px] sm:text-xs font-semibold
                                            @if($submission->score >= 90)
                                                bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-200 dark:border-emerald-700/50
                                            @elseif($submission->score >= 70)
                                                bg-sky-50 text-sky-700 border border-sky-200 dark:bg-sky-900/30 dark:text-sky-200 dark:border-sky-700/50
                                            @else
                                                bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-900/30 dark:text-amber-200 dark:border-amber-700/50
                                            @endif
                                        ">
                                            <i class="fa-solid fa-chart-line text-[10px]"></i>
                                            <span>{{ $submission->score }}</span>
                                            @if(!empty($submission->test->max_score))
                                                <span class="text-[10px] text-slate-500 dark:text-slate-300">
                                                    / {{ $submission->test->max_score }}
                                                </span>
                                            @endif
                                        </span>
                                    </td>
                                    <td class="px-3 sm:px-4 py-3 align-top text-left">
                                        <a href="{{ route('college.tests.my.show', $submission->id) }}"
                                           class="inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-[11px] sm:text-xs font-semibold
                                                  bg-gradient-to-r from-emerald-500 to-sky-500 text-white shadow-sm hover:shadow-md hover:from-emerald-600 hover:to-sky-600">
                                            <span>عرض التفاصيل</span>
                                            <i class="fa-solid fa-arrow-left text-[10px]"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

    </div>
</div>
@endsection