@extends('student.layouts.app')
@section('title', app()->getLocale() === 'ar' ? 'الاختبارات' : 'Exams')
@section('content')
@php $isArabic = app()->getLocale() === 'ar'; @endphp

<div class="flex flex-col gap-6">
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <h1 class="text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الاختبارات' : 'Exams' }}</h1>
        <p class="mt-1 text-sm text-zinc-500">{{ $isArabic ? 'الاختبارات المتاحة لهذا المقرر' : 'Available exams for this course' }}</p>
    </div>

    @forelse($exams as $exam)
    @php $attempt = $attempts[$exam->id] ?? null; @endphp
    <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="flex items-start justify-between gap-4">
            <div class="flex-1">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $exam->title }}</h2>
                @if($exam->description)
                    <p class="mt-1 text-sm text-zinc-500">{{ $exam->description }}</p>
                @endif
                <div class="mt-3 flex flex-wrap gap-3 text-xs text-zinc-400">
                    @if($exam->duration_minutes)
                        <span><i class="fa-solid fa-clock me-1"></i>{{ $exam->duration_minutes }} {{ $isArabic ? 'دقيقة' : 'min' }}</span>
                    @endif
                    @if($exam->available_from)
                        <span><i class="fa-solid fa-calendar me-1"></i>{{ $exam->available_from->format('Y-m-d H:i') }}</span>
                    @endif
                    @if($exam->available_until)
                        <span><i class="fa-solid fa-calendar-xmark me-1"></i>{{ $exam->available_until->format('Y-m-d H:i') }}</span>
                    @endif
                </div>
            </div>
            <div class="shrink-0">
                @if($attempt && in_array($attempt->status, ['submitted','auto_graded','graded']))
                    <a href="{{ route('student.exams_v2.result', $attempt->id) }}"
                       class="inline-flex items-center gap-2 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-bold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400">
                        <i class="fa-solid fa-chart-bar text-xs"></i>
                        {{ $isArabic ? 'عرض النتيجة' : 'View Result' }}
                    </a>
                @elseif($attempt && $attempt->status === 'started')
                    <a href="{{ route('student.exams_v2.start', $exam->id) }}"
                       class="inline-flex items-center gap-2 rounded-2xl bg-amber-500 px-4 py-2 text-sm font-bold text-white transition hover:bg-amber-600">
                        <i class="fa-solid fa-play text-xs"></i>
                        {{ $isArabic ? 'متابعة' : 'Continue' }}
                    </a>
                @else
                    <a href="{{ route('student.exams_v2.start', $exam->id) }}"
                       class="inline-flex items-center gap-2 rounded-2xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                        <i class="fa-solid fa-play text-xs"></i>
                        {{ $isArabic ? 'ابدأ الاختبار' : 'Start Exam' }}
                    </a>
                @endif
            </div>
        </div>
    </article>
    @empty
    <div class="rounded-[2rem] border border-dashed border-zinc-300 bg-white p-12 text-center dark:border-zinc-700 dark:bg-zinc-900">
        <p class="text-zinc-500">{{ $isArabic ? 'لا توجد اختبارات متاحة حالياً.' : 'No exams available right now.' }}</p>
    </div>
    @endforelse
</div>
@endsection