@extends('layouts.vitrine')

@section('titre', 'Quiz · '.$classe->nom)

@section('contenu')
    <div class="mx-auto max-w-4xl px-5 py-14 lg:px-10">
        <p class="font-mono text-sm font-semibold"><a href="{{ route('mes-classes.show', $classe) }}" class="underline underline-offset-4">{{ $classe->nom }}</a></p>
        <h1 class="mt-1 text-4xl font-extrabold tracking-tight">Quiz</h1>
        <p class="mt-2 font-semibold">Un quiz se prépare une fois, puis se relance en direct autant de fois que tu veux : les élèves le voient apparaître sur leur tableau de bord, sans code à saisir.</p>

        <section class="mt-8 rounded-2xl border border-[#e3e5e8] bg-white p-6" aria-labelledby="t-nouveau">
            <h2 id="t-nouveau" class="text-xl font-extrabold">Nouveau quiz</h2>
            @error('titre')<p class="mt-2 font-bold text-[#A63D2A]">{{ $message }}</p>@enderror
            <form action="{{ route('mes-classes.quiz.store', $classe) }}" method="post" class="mt-4 flex flex-wrap gap-3">
                @csrf
                <input name="titre" required placeholder="Ex. Adressage IPv4" class="flex-1 rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">
                <button type="submit" class="inline-flex h-11 items-center rounded-full bg-[#0b57d0] px-5 font-bold text-white">Créer</button>
            </form>
        </section>

        <section class="mt-8" aria-labelledby="t-liste">
            <h2 id="t-liste" class="text-xl font-extrabold">Mes quiz ({{ $quizzes->count() }})</h2>
            @if ($quizzes->isEmpty())
                <p class="mt-2 font-semibold">Aucun quiz pour l'instant.</p>
            @else
                <ul class="mt-4 grid gap-3">
                    @foreach ($quizzes as $quiz)
                        <li>
                            <a href="{{ route('mes-classes.quiz.show', [$classe, $quiz]) }}" class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-[#e3e5e8] bg-white p-5 hover:bg-[#f8f9fa]">
                                <span class="text-lg font-extrabold">{{ $quiz->titre }}</span>
                                <span class="font-mono text-sm font-semibold">{{ $quiz->questions_count }} question(s)</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>
    </div>
@endsection