@extends('layouts.student')
@section('title', 'Kuis: ' . $quiz->title)

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
    .edu-font-display { font-family: 'Playfair Display', serif; }
    .edu-font-body { font-family: 'DM Sans', sans-serif; }
    :root { --navy:#0f1e38; --navy-mid:#1a3259; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }
    .card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.5rem; box-shadow:0 1px 12px rgba(0,0,0,.04); }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
    .stat-block { background:var(--cream); border:1px solid var(--border); border-radius:16px; padding:1.25rem; }
    .attempt-row { border:1px solid var(--border); border-radius:14px; padding:1rem 1.25rem; transition:border-color .15s; }
    .attempt-row:hover { border-color:#c7bfb0; }
</style>

<div class="edu-font-body space-y-6">

    {{-- Header --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:2rem; box-shadow:0 1px 12px rgba(0,0,0,.04);">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <span class="section-label">{{ $quiz->course->title }} · Kuis</span>
                <h1 class="edu-font-display text-3xl font-bold mt-1" style="color:var(--navy);">{{ $quiz->title }}</h1>
                <p class="text-sm mt-2" style="color:var(--text-muted);">{{ $quiz->questions->count() }} soal · {{ $quiz->duration_minutes ? $quiz->duration_minutes . ' menit' : 'Tanpa batas waktu' }}</p>
            </div>
            <a href="{{ route('student.courses.show', $quiz->course) }}" class="inline-flex items-center gap-2 text-sm font-medium px-4 py-2.5 rounded-xl hover:opacity-80 transition self-start" style="background:var(--cream); border:1px solid var(--border); color:var(--navy);">
                <i class="fa fa-arrow-left text-xs"></i> Kembali ke kursus
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-5">

            {{-- Ringkasan Kuis --}}
            <div class="card">
                <div class="flex items-start justify-between gap-4 mb-5">
                    <div>
                        <h2 class="edu-font-display text-xl font-semibold" style="color:var(--navy);">Ringkasan Kuis</h2>
                        <p class="text-sm mt-1" style="color:var(--text-muted);">Baca petunjuk sebelum memulai.</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
                    <div class="stat-block text-center">
                        <p class="section-label mb-2">Soal</p>
                        <p class="edu-font-display text-3xl font-bold" style="color:var(--navy);">{{ $quiz->questions->count() }}</p>
                    </div>
                    <div class="stat-block text-center">
                        <p class="section-label mb-2">Durasi</p>
                        <p class="edu-font-display text-3xl font-bold" style="color:var(--navy);">{{ $quiz->duration_minutes ? $quiz->duration_minutes . 'm' : '—' }}</p>
                    </div>
                    <div class="stat-block text-center">
                        <p class="section-label mb-2">Percobaan</p>
                        <p class="edu-font-display text-3xl font-bold" style="color:var(--navy);">{{ $quiz->max_attempts ?? '∞' }}</p>
                    </div>
                    <div class="stat-block text-center">
                        <p class="section-label mb-2">Nilai Min</p>
                        <p class="edu-font-display text-3xl font-bold" style="color:var(--navy);">{{ $quiz->passing_score ?? '—' }}</p>
                    </div>
                </div>

                <div class="rounded-2xl p-4 text-sm leading-relaxed space-y-2" style="background:var(--cream); border:1px solid var(--border); color:var(--text-muted);">
                    <p><strong style="color:var(--navy);">Petunjuk:</strong> Setelah klik tombol mulai, kamu akan masuk ke halaman soal. Pastikan koneksi internet stabil.</p>
                    @if($quiz->duration_minutes)
                    <p>Timer akan berjalan selama kuis berlangsung. Jika waktu habis, jawaban akan otomatis dikumpulkan.</p>
                    @endif
                    <p>Batas percobaan: <strong style="color:var(--navy);">{{ $quiz->max_attempts ?? 'Tanpa batas' }}</strong>.</p>
                </div>
            </div>

            {{-- Riwayat Percobaan --}}
            <div class="card">
                <div class="flex items-center justify-between mb-5">
                    <div>
                        <h2 class="edu-font-display text-xl font-semibold" style="color:var(--navy);">Riwayat Percobaan</h2>
                        <p class="text-sm mt-1" style="color:var(--text-muted);">{{ $attempts->count() }} percobaan</p>
                    </div>
                </div>

                @if($attempts->isEmpty())
                    <div class="text-center py-10" style="color:var(--text-muted);">
                        <i class="fa fa-history text-3xl mb-3 block opacity-30"></i>
                        <p class="text-sm">Belum ada percobaan.</p>
                    </div>
                @else
                    <div class="space-y-2">
                        @foreach($attempts as $attempt)
                        <div class="attempt-row">
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <p class="text-sm font-semibold" style="color:var(--navy);">Percobaan {{ $loop->iteration }}</p>
                                    <p class="text-xs mt-0.5" style="color:var(--text-muted);">{{ $attempt->started_at->format('d M Y, H:i') }}</p>
                                </div>
                                <div class="text-right">
                                    @if($attempt->score !== null)
                                    <span class="text-sm font-bold" style="color:{{ $attempt->score >= ($quiz->passing_score ?? 70) ? '#065f46' : '#dc2626' }};">
                                        {{ $attempt->score }} / 100
                                    </span>
                                    @else
                                    <span class="text-xs" style="color:var(--text-muted);">Belum selesai</span>
                                    @endif
                                </div>
                            </div>
                            @if($attempt->finished_at)
                            <p class="text-xs mt-1.5" style="color:var(--text-muted);">Selesai {{ $attempt->finished_at->format('d M Y, H:i') }}</p>
                            @endif
                        </div>
                        @endforeach
                    </div>
                @endif
            </div>

        </div>

        {{-- Sidebar --}}
        <aside class="space-y-5">
            <div class="card">
                <h3 class="text-sm font-semibold mb-4" style="color:var(--navy);">Status Kuis</h3>
                <div class="space-y-3">
                    <div class="flex justify-between text-sm">
                        <span style="color:var(--text-muted);">Percobaan dilakukan</span>
                        <span class="font-semibold" style="color:var(--navy);">{{ $attempts->count() }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span style="color:var(--text-muted);">Sisa percobaan</span>
                        <span class="font-semibold" style="color:var(--navy);">
                            @if($quiz->max_attempts) {{ max(0, $quiz->max_attempts - $attempts->count()) }}
                            @else Tak terbatas @endif
                        </span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span style="color:var(--text-muted);">Nilai lulus</span>
                        <span class="font-semibold" style="color:var(--navy);">{{ $quiz->passing_score ?? '—' }}</span>
                    </div>
                </div>
            </div>

            <div class="card">
                <h3 class="text-sm font-semibold mb-4" style="color:var(--navy);">Mulai Kuis</h3>
                @if($canAttempt)
                    <form method="POST" action="{{ route('student.quiz.start', $quiz) }}">
                        @csrf
                        <button type="submit" class="w-full flex items-center justify-center gap-2 py-3 rounded-2xl text-sm font-semibold text-white transition hover:opacity-90" style="background:var(--navy);">
                            <i class="fa fa-play text-xs"></i> Mulai Kuis
                        </button>
                    </form>
                    <p class="text-xs text-center mt-2" style="color:var(--text-muted);">Kamu tidak dapat kembali setelah mulai.</p>
                @else
                    <div class="text-center py-4">
                        <i class="fa fa-ban text-2xl mb-2 block opacity-40" style="color:var(--text-muted);"></i>
                        <p class="text-sm font-medium" style="color:var(--text-muted);">Percobaan mencapai batas</p>
                    </div>
                @endif
            </div>
        </aside>
    </div>

</div>
@endsection