@extends('layouts.app')

@section('titre', 'Banque de quiz')

@section('contenu')
    <div class="mx-auto max-w-5xl px-5 py-14 lg:px-10">
        <p class="font-mono text-sm font-semibold"><a href="{{ route('mes-classes.index') }}" class="underline underline-offset-4">Mes classes</a></p>
        <h1 class="mt-1 text-4xl font-extrabold tracking-tight">Banque de quiz</h1>
        <p class="mt-2 font-semibold">Les quiz officiels, rangés par thème du référentiel, et ceux que d'autres profs ont partagés. Dupliquer en fait une copie indépendante dans une de tes classes : tu peux ensuite la modifier sans toucher à l'original.</p>

        @if (session('quiz_duplique'))
            <p class="mt-4 rounded-2xl border border-[#e3e5e8] bg-[#e6f4ea] p-4 font-semibold">Quiz dupliqué dans ta classe.</p>
        @endif

        @if ($groupes->isEmpty())
            <p class="mt-8 font-semibold">Aucun quiz partagé pour l'instant.</p>
        @elseif ($mesClasses->isEmpty())
            <p class="mt-8 font-semibold">Crée d'abord une classe pour pouvoir y dupliquer un quiz.</p>
        @else
            @foreach ($groupes as $theme => $quizzes)
                <section class="mt-12">
                    <h2 class="flex flex-wrap items-baseline gap-3 text-2xl font-extrabold tracking-tight">
                        @if ($theme !== '')
                            <span class="rounded-2xl border border-[#e3e5e8] bg-[#eef0fd] px-2 font-mono text-xl">{{ $theme }}</span>
                            {{ config('contenus.noms_themes.'.$theme, $theme) }}
                        @else
                            <span class="rounded-2xl border border-[#e3e5e8] bg-white px-2 font-mono text-xl">—</span>
                            Partagés par des profs
                        @endif
                        <span class="font-mono text-base font-semibold">{{ $quizzes->count() }} quiz</span>
                    </h2>
                    <ul class="mt-5 grid gap-4">
                        @foreach ($quizzes as $quiz)
                            <li class="rounded-2xl border border-[#e3e5e8] bg-white p-5">
                                <div class="flex flex-wrap items-center justify-between gap-3">
                                    <div>
                                        <p class="text-lg font-extrabold">{{ $quiz->titre }}</p>
                                        <p class="font-mono text-sm font-semibold text-[#5f6368]">{{ $quiz->questions_count }} question(s) · partagé par {{ $quiz->classe->etablissement->nom }}</p>
                                    </div>
                                    <form action="{{ route('banque-quiz.dupliquer', $quiz) }}" method="post" class="flex flex-wrap items-center gap-2">
                                        @csrf
                                        <select name="classe_id" required class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">
                                            @foreach ($mesClasses as $classe)
                                                <option value="{{ $classe->id }}">{{ $classe->nom }}</option>
                                            @endforeach
                                        </select>
                                        <button type="submit" class="inline-flex h-11 items-center rounded-full bg-[#0b57d0] px-5 font-bold text-white">Dupliquer</button>
                                    </form>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </section>
            @endforeach
        @endif
    </div>
@endsection