@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-16 -left-10 w-40 h-40 rounded-full bg-cyan-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-52 h-52 rounded-full bg-indigo-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-2">
                    <h1 class="text-xl sm:text-2xl lg:text-3xl font-black tracking-tight text-slate-900 dark:text-white 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-list-check"></i>
                        </span>
                        إدارة الإجابات النموذجية للاختبارات
                    </h1>
                    <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300">
                        استعرض كل الاختبارات، عدد الأسئلة، عدد المحاولات، وافتح لوحة الإجابات النموذجية لكل اختبار بتفاصيل كاملة.
                    </p>
                </div>

                <div class="flex flex-col items-start sm:items-end gap-2 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>
                        إجمالي الاختبارات: {{ $tests->total() }}
                    </span>
                    <span class="text-[11px] text-slate-500 dark:text-slate-400">
                        آخر تحديث — {{ now()->locale('ar')->isoFormat('dddd D MMMM YYYY — h:mm A') }}
                    </span>
                </div>
            </div>
        </div>

        {{-- في حال لا يوجد اختبارات --}}
        @if($tests->isEmpty())
            <div class="rounded-3xl border border-dashed border-slate-300/70 dark:border-slate-700/80 bg-white/80 dark:bg-slate-900/80 px-5 sm:px-8 py-10 text-center shadow-sm">
                <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-3xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-300">
                    <i class="fa-solid fa-circle-question text-xl"></i>
                </div>
                <p class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-100">
                    لا توجد اختبارات حالياً
                </p>
                <p class="mt-1 text-xs sm:text-sm text-slate-500 dark:text-slate-400">
                    عند إنشاء اختبارات جديدة ستظهر هنا تلقائياً لإدارة الإجابات النموذجية الخاصة بها.
                </p>
            </div>
        @else

            {{-- قائمة الاختبارات على شكل كروت --}}
            <div class="space-y-3 sm:space-y-4">
                @foreach ($tests as $index => $test)
                    @php
                        $startLabel = '—';
                        if (!empty($test->start_at)) {
                            try {
                                $startLabel = \Carbon\Carbon::parse($test->start_at)->format('Y/m/d H:i');
                            } catch (\Throwable $e) {
                                $startLabel = (string) $test->start_at;
                            }
                        }
                    @endphp

                    <div class="group relative overflow-hidden rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-800 shadow-sm hover:shadow-xl hover:border-cyan-400/70 transition-all duration-200">
                        <div class="pointer-events-none absolute -top-10 -left-10 w-32 h-32 rounded-full bg-cyan-400/10 blur-2xl group-hover:bg-cyan-400/20"></div>
                        <div class="pointer-events-none absolute -bottom-14 -right-10 w-40 h-40 rounded-full bg-indigo-500/10 blur-2xl group-hover:bg-indigo-500/20"></div>

                        <div class="relative p-4 sm:p-5 flex flex-col gap-3">
                            <div class="flex items-start justify-between gap-3">
                                <div class="space-y-1">
                                    <div class="flex items-center gap-2 text-[11px] text-slate-400 dark:text-slate-500">
                                        <span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-slate-100 dark:bg-slate-800 text-[10px] text-slate-600 dark:text-slate-200">
                                            {{ $index + 1 + ($tests->currentPage() - 1) * $tests->perPage() }}
                                        </span>
                                        <span>اختبار أسبوعي</span>
                                    </div>
                                    <h2 class="text-sm sm:text-base lg:text-lg font-bold text-slate-900 dark:text-slate-50 line-clamp-2">
                                        {{ $test->title }}
                                    </h2>
                                    @if($test->description ?? false)
                                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 line-clamp-2">
                                            {{ $test->description }}
                                        </p>
                                    @endif
                                </div>

                                <div class="flex flex-col items-end gap-2">
                                    {{-- عدد الأسئلة والمحاولات --}}
                                    <div class="flex flex-wrap justify-end gap-1.5">
                                        <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-200 dark:border-indigo-700/60">
                                            <i class="fa-regular fa-circle-question text-[10px]"></i>
                                            <span>{{ $test->questions_count }} سؤال</span>
                                        </span>
                                        <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-200 dark:border-emerald-700/60">
                                            <i class="fa-solid fa-users-viewfinder text-[10px]"></i>
                                            <span>{{ $test->submissions_count }} محاولة</span>
                                        </span>
                                    </div>

                                    {{-- وقت البدء --}}
                                    <span class="inline-flex items-center gap-1 text-[10px] text-slate-500 dark:text-slate-400">
                                        <i class="fa-regular fa-clock text-[10px]"></i>
                                        <span>تاريخ البدء: {{ $startLabel }}</span>
                                    </span>
                                </div>
                            </div>

                            <div class="flex items-center justify-between gap-3 pt-2 border-t border-slate-100 dark:border-slate-800">
                                <div class="flex flex-wrap items-center gap-2 text-[11px] text-slate-500 dark:text-slate-400">
                                    <span class="inline-flex items-center gap-1">
                                        <i class="fa-solid fa-hashtag text-[10px]"></i>
                                        <span>معرّف: {{ $test->id }}</span>
                                    </span>
                                </div>

                                <a href="{{ route('tests.answers.show', $test) }}"
                                   class="inline-flex items-center gap-1.5 rounded-xl px-3.5 py-1.5 text-[11px] sm:text-xs font-semibold
                                          bg-gradient-to-r from-cyan-500 to-indigo-500 text-white shadow-sm
                                          hover:shadow-md hover:from-cyan-600 hover:to-indigo-600">
                                    <span>عرض الإجابات النموذجية</span>
                                    <i class="fa-solid fa-arrow-left text-[10px]"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- الباجيناشن --}}
            <div class="mt-6">
                <div class="rounded-2xl bg-white/80 dark:bg-slate-900/80 border border-slate-200/70 dark:border-slate-800/80 px-4 py-3 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
                    <div>
                        عرض
                        <span class="font-semibold text-slate-700 dark:text-slate-200">
                            {{ $tests->firstItem() }}–{{ $tests->lastItem() }}
                        </span>
                        من
                        <span class="font-semibold text-slate-700 dark:text-slate-200">
                            {{ $tests->total() }}
                        </span>
                        اختبار
                    </div>
                    <div class="rtl">
                        {{ $tests->onEachSide(1)->links() }}
                    </div>
                </div>
            </div>

        @endif

    </div>
</div>
@endsection