@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'اختبارات المادة' : 'Course Quizzes')

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
@endphp

<div class="space-y-6">
    @include('student.courses.inc.overview', ['course' => $course])
    @include('student.courses.inc.tabs', ['course' => $course])

    <section class="student-card overflow-hidden">
        <div class="flex flex-col gap-4 border-b border-zinc-200 px-6 py-5 dark:border-zinc-800 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'اختبارات المادة' : 'Course quizzes' }}</h2>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'كل اختبار مع حالة التقديم والنتيجة وعدد الأسئلة.' : 'Each quiz with submission status, score, and question count.' }}</p>
            </div>
            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-center dark:border-zinc-800 dark:bg-zinc-950">
                <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'إجمالي الاختبارات' : 'Total quizzes' }}</div>
                <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $quizzes->count() }}</div>
            </div>
        </div>

        <div class="grid gap-4 p-6 md:grid-cols-2 xl:grid-cols-3">
            @foreach($quizzes as $quiz)
                @php
                    $attempt = $quiz->answers->first();
                    $isSubmitted = $attempt && ! $attempt->status;
                    $isActive = $attempt && $attempt->status;
                    $statusLabel = $isSubmitted
                        ? ($attempt->corrected_manually ? ($isArabic ? 'بانتظار التصحيح' : 'Pending review') : ($isArabic ? 'تم التسليم' : 'Submitted'))
                        : ($isActive ? ($isArabic ? 'قيد الحل' : 'In progress') : ($isArabic ? 'جاهز للبدء' : 'Ready to start'));
                @endphp
                <article class="rounded-[1.75rem] border border-zinc-200 bg-zinc-50/70 p-5 dark:border-zinc-800 dark:bg-zinc-950/60">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-light text-primary dark:bg-primary/10 dark:text-primary-container">
                            <i class="fa-solid fa-clipboard-question text-lg"></i>
                        </div>
                        <span class="rounded-full bg-white px-3 py-1 text-xs font-black text-zinc-600 dark:bg-zinc-900 dark:text-zinc-300">{{ $statusLabel }}</span>
                    </div>

                    <h3 class="mt-4 text-lg font-black text-zinc-900 dark:text-white">{{ $quiz->title }}</h3>
                    @if ($quiz->description)
                        <p class="mt-2 text-sm leading-7 text-zinc-600 dark:text-zinc-300">{{ $quiz->description }}</p>
                    @endif

                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="rounded-full bg-white px-3 py-1 text-xs font-black text-zinc-600 dark:bg-zinc-900 dark:text-zinc-300">{{ $quiz->questions_count }} {{ $isArabic ? 'سؤال' : 'questions' }}</span>
                        <span class="rounded-full bg-white px-3 py-1 text-xs font-black text-zinc-600 dark:bg-zinc-900 dark:text-zinc-300">{{ $quiz->duration }} {{ $isArabic ? 'دقيقة' : 'min' }}</span>
                        <span class="rounded-full bg-white px-3 py-1 text-xs font-black text-zinc-600 dark:bg-zinc-900 dark:text-zinc-300">{{ $quiz->total_marks }} {{ $isArabic ? 'درجة' : 'marks' }}</span>
                    </div>

                    <div class="mt-5 grid gap-3 rounded-2xl bg-white p-4 dark:bg-zinc-900">
                        <div class="flex items-center justify-between gap-3 text-sm">
                            <span class="text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'موعد البداية' : 'Starts' }}</span>
                            <span class="font-black text-zinc-900 dark:text-white">{{ optional($quiz->start_time)->format('Y-m-d h:i A') }}</span>
                        </div>
                        @if ($attempt)
                            <div class="flex items-center justify-between gap-3 text-sm">
                                <span class="text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'النتيجة الحالية' : 'Current result' }}</span>
                                <span class="font-black text-zinc-900 dark:text-white font-numbers">{{ (int) $attempt->student_score }}/{{ (int) $quiz->total_marks }}</span>
                            </div>
                        @endif
                    </div>

                    <div class="mt-5 flex gap-3">
                        <a href="{{ route('student.courses.quizzes.show', $quiz->id) }}" class="inline-flex flex-1 items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-black text-white text-decoration-none">
                            <i class="fa-solid {{ $isSubmitted ? 'fa-chart-column' : 'fa-play' }} text-xs"></i>
                            {{ $isSubmitted ? ($isArabic ? 'عرض النتيجة' : 'View result') : ($isArabic ? 'فتح الاختبار' : 'Open quiz') }}
                        </a>
                        @if ($isSubmitted)
                            <a href="{{ route('student.courses.quizzes.result', $quiz->id) }}" class="inline-flex items-center justify-center rounded-2xl border border-zinc-200 px-4 py-3 text-sm font-black text-zinc-700 text-decoration-none dark:border-zinc-800 dark:text-zinc-200">
                                <i class="fa-solid fa-receipt"></i>
                            </a>
                        @endif
                    </div>
                </article>
            @endforeach
@if(($quizzes)->isEmpty())
                <div class="col-span-full rounded-[1.75rem] border border-dashed border-zinc-300 p-10 text-center dark:border-zinc-700">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
                        <i class="fa-solid fa-clipboard-question text-2xl"></i>
                    </div>
                    <h3 class="mt-4 text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'لا توجد اختبارات مضافة بعد' : 'No quizzes added yet' }}</h3>
                    <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'ستظهر هنا الاختبارات المنشورة لهذه المادة.' : 'Published quizzes for this course will appear here.' }}</p>
                </div>
            @endif
        </div>
    </section>
</div>
@endsection