@extends('layouts.teacher')
@section('title', 'Quiz — ' . $course->title)
@section('header', 'Quiz Kursus')

@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; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
    .quiz-card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.25rem 1.5rem; transition:all .2s; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-decoration:none; }
    .quiz-card:hover { border-color:#c7bfb0; box-shadow:0 8px 24px rgba(15,30,56,.09); transform:translateY(-1px); }
    .btn-primary { display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:white; font-size:13px; font-weight:600; padding:.625rem 1.25rem; border-radius:14px; border:none; cursor:pointer; transition:opacity .2s; text-decoration:none; }
    .btn-primary:hover { opacity:.87; }
    .stat-pill { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; padding:.25rem .75rem; border-radius:100px; background:var(--cream); color:var(--text-muted); }
</style>

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

    {{-- Header --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:1.75rem 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">{{ $course->title }}</span>
                <h1 class="edu-font-display text-3xl font-bold mt-1" style="color:var(--navy);">Quiz Kursus</h1>
                <p class="text-sm mt-1" style="color:var(--text-muted);">Kelola soal pilihan ganda untuk siswa.</p>
            </div>
            <a href="{{ route('teacher.courses.quizzes.create', $course) }}" class="btn-primary self-start">
                <i class="fa fa-plus" style="font-size:11px;"></i> Buat Quiz Baru
            </a>
        </div>
    </div>

    {{-- Quiz List --}}
    @if($quizzes->isEmpty())
        <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:4rem 2rem; text-align:center; box-shadow:0 1px 12px rgba(0,0,0,.04);">
            <div class="w-20 h-20 mx-auto mb-5 rounded-full flex items-center justify-center" style="background:var(--cream);">
                <i class="fa fa-question-circle text-3xl" style="color:var(--gold);"></i>
            </div>
            <h3 class="edu-font-display text-xl font-semibold" style="color:var(--navy);">Belum ada quiz</h3>
            <p class="text-sm mt-2" style="color:var(--text-muted);">Tambahkan quiz pilihan ganda untuk siswa.</p>
            <a href="{{ route('teacher.courses.quizzes.create', $course) }}" class="btn-primary mt-5 mx-auto" style="width:fit-content;">
                <i class="fa fa-plus" style="font-size:11px;"></i> Buat Quiz
            </a>
        </div>
    @else
        <div class="space-y-3">
            @foreach($quizzes as $quiz)
            <a href="{{ route('teacher.courses.quizzes.show', [$course, $quiz]) }}" class="quiz-card">
                <div class="flex items-center gap-3 min-w-0">
                    <div class="w-11 h-11 rounded-2xl flex items-center justify-center flex-shrink-0" style="background:var(--gold-light);">
                        <i class="fa fa-question-circle" style="color:var(--gold); font-size:16px;"></i>
                    </div>
                    <div class="min-w-0">
                        <h3 class="text-sm font-semibold" style="color:var(--navy);">{{ $quiz->title }}</h3>
                        <div class="flex flex-wrap gap-2 mt-1.5">
                            <span class="stat-pill"><i class="fa fa-list" style="font-size:9px;"></i> {{ $quiz->questions_count }} soal</span>
                            <span class="stat-pill"><i class="fa fa-clock" style="font-size:9px;"></i> {{ $quiz->duration_minutes ? $quiz->duration_minutes . ' menit' : 'Tanpa batas' }}</span>
                            <span class="stat-pill"><i class="fa fa-redo" style="font-size:9px;"></i> {{ $quiz->max_attempts }} percobaan</span>
                            <span class="stat-pill"><i class="fa fa-check-circle" style="font-size:9px;"></i> Min. {{ $quiz->passing_score }}%</span>
                        </div>
                    </div>
                </div>
                <i class="fa fa-arrow-right flex-shrink-0" style="color:var(--gold); font-size:13px;"></i>
            </a>
            @endforeach
        </div>
    @endif

</div>
@endsection