@extends('layouts.app')

@section('title', 'Mulai Ujian')

@section('content')
<div class="max-w-xl mx-auto px-4">
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 md:p-10 text-center">
        <div class="w-16 h-16 md:w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-2xl flex items-center justify-center text-blue-600 text-3xl md:text-4xl mx-auto mb-6">
            <i class="fas fa-clipboard-check"></i>
        </div>
        <h1 class="text-xl md:text-2xl font-bold text-gray-800 mb-2">{{ $exam->title }}</h1>
        <p class="text-gray-500 mb-6 text-sm md:text-base">{{ $exam->course->name }}</p>

        <div class="grid grid-cols-2 gap-3 md:gap-4 text-left mb-6 md:mb-8">
            <div class="p-3 md:p-4 bg-gray-50 rounded-xl">
                <p class="text-xs text-gray-500">Durasi</p>
                <p class="font-semibold text-sm md:text-base">{{ $exam->duration }} menit</p>
            </div>
            <div class="p-3 md:p-4 bg-gray-50 rounded-xl">
                <p class="text-xs text-gray-500">Jumlah Soal</p>
                <p class="font-semibold text-sm md:text-base">{{ $exam->question_count ?? $exam->questions->count() }}</p>
            </div>
            <div class="p-3 md:p-4 bg-gray-50 rounded-xl">
                <p class="text-xs text-gray-500">Waktu Mulai</p>
                <p class="font-semibold text-sm md:text-base">{{ $exam->start_time->format('d M Y H:i') }} WITA</p>
            </div>
            <div class="p-3 md:p-4 bg-gray-50 rounded-xl">
                <p class="text-xs text-gray-500">Waktu Selesai</p>
                <p class="font-semibold text-sm md:text-base">{{ $exam->end_time->format('d M Y H:i') }} WITA</p>
            </div>
        </div>

        <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 md:p-5 text-left mb-6 md:mb-8 text-xs md:text-sm text-amber-800">
            <p class="font-semibold mb-2 flex items-center gap-2"><i class="fas fa-exclamation-triangle text-amber-500"></i> Peraturan Ujian:</p>
            <ul class="list-disc list-inside space-y-1">
                <li>Jangan meninggalkan halaman ujian (tab switch akan terdeteksi).</li>
                <li>Jawaban akan tersimpan secara otomatis.</li>
                <li>Pastikan koneksi internet stabil.</li>
                <li>Setelah waktu habis, ujian akan disubmit otomatis.</li>
            </ul>
        </div>

        <a href="{{ route('exam.take', $exam) }}" class="inline-flex items-center justify-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-8 py-3 rounded-xl font-medium hover:from-blue-700 hover:to-indigo-700 transition shadow-lg shadow-blue-200 active:scale-[0.98] w-full sm:w-auto" onclick="return confirm('Yakin ingin memulai ujian?')">
            <i class="fas fa-play"></i> Mulai Ujian
        </a>
    </div>
</div>
@endsection