@extends('layouts.teacher')
@section('title', 'Quiz Kursus')
@section('header', 'Quiz Kursus')

@section('content')
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5">
    <div>
        <h2 class="text-lg font-semibold text-gray-700">{{ $course->title }}</h2>
        <p class="text-sm text-gray-500">Kelola quiz pilihan ganda untuk kursus ini.</p>
    </div>
    <a href="{{ route('teacher.courses.quizzes.create', $course) }}"
       class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
        + Buat Quiz Baru
    </a>
</div>

@if($quizzes->isEmpty())
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
        <p class="text-4xl mb-4">🧠</p>
        <p class="text-gray-500 font-medium">Belum ada quiz.</p>
        <p class="text-gray-400 text-sm mt-1">Tambahkan soal pilihan ganda untuk siswa.</p>
        <a href="{{ route('teacher.courses.quizzes.create', $course) }}"
           class="inline-block mt-4 bg-blue-600 text-white px-5 py-2 rounded-lg text-sm">
            Buat Quiz
        </a>
    </div>
@else
    <div class="grid grid-cols-1 gap-4">
        @foreach($quizzes as $quiz)
        <a href="{{ route('teacher.courses.quizzes.show', [$course, $quiz]) }}"
           class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="font-semibold text-gray-800">{{ $quiz->title }}</h3>
                    <p class="text-xs text-gray-500">{{ $quiz->questions_count }} soal</p>
                </div>
                <span class="text-xs text-gray-500">{{ $quiz->max_attempts }} percobaan</span>
            </div>
        </a>
        @endforeach
    </div>
@endif
@endsection