@extends('layouts.vitrine')

@section('titre', $quiz->titre)

@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.quiz.index', $classe) }}" class="underline underline-offset-4">Quiz · {{ $classe->nom }}</a></p>
        <div class="mt-1 flex flex-wrap items-center justify-between gap-4">
            <h1 class="text-4xl font-extrabold tracking-tight">{{ $quiz->titre }}</h1>
            <form action="{{ route('mes-classes.quiz.lancer', [$classe, $quiz]) }}" method="post">
                @csrf
                <button type="submit" class="inline-flex h-11 items-center rounded-full bg-black px-5 font-bold text-white" @disabled($quiz->questions->isEmpty())>Lancer ce quiz</button>
            </form>
        </div>
        @error('questions')<p class="mt-2 font-bold text-[#A63D2A]">Ajoute au moins une question avant de lancer.</p>@enderror

        <section class="mt-8" aria-labelledby="t-questions">
            <h2 id="t-questions" class="text-xl font-extrabold">Questions ({{ $quiz->questions->count() }})</h2>
            @if ($quiz->questions->isEmpty())
                <p class="mt-2 font-semibold">Aucune question pour l'instant.</p>
            @else
                <ol class="mt-4 grid gap-3">
                    @foreach ($quiz->questions as $question)
                        <li class="rounded-2xl border border-[#e3e5e8] bg-white p-5">
                            <div class="flex flex-wrap items-start justify-between gap-3">
                                <p class="text-lg font-extrabold">{{ $loop->iteration }}. {{ $question->enonce }}</p>
                                <form action="{{ route('mes-classes.quiz.questions.destroy', [$classe, $quiz, $question]) }}" method="post" data-confirmer="Supprimer cette question ?">
                                    @csrf
                                    <button type="submit" class="font-bold text-[#A63D2A] underline underline-offset-4">Supprimer</button>
                                </form>
                            </div>
                            @if ($question->type === \App\Models\QuestionQuiz::VRAI_FAUX)
                                <p class="mt-2 font-mono text-sm font-semibold">Bonne réponse : {{ $question->reponse_vrai_faux ? 'Vrai' : 'Faux' }}</p>
                            @else
                                <ul class="mt-2 grid gap-1 font-semibold">
                                    @foreach ($question->choix as $choix)
                                        <li class="{{ $choix->est_correct ? 'text-[#3C8A5A]' : '' }}">{{ $choix->est_correct ? '✓' : '·' }} {{ $choix->texte }}</li>
                                    @endforeach
                                </ul>
                            @endif
                        </li>
                    @endforeach
                </ol>
            @endif
        </section>

        <section class="mt-8 rounded-2xl border border-[#e3e5e8] bg-white p-6" aria-labelledby="t-ajout">
            <h2 id="t-ajout" class="text-xl font-extrabold">Ajouter une question</h2>
            <form action="{{ route('mes-classes.quiz.questions.store', [$classe, $quiz]) }}" method="post" class="mt-4 grid gap-4" id="form-question">
                @csrf
                <label class="grid gap-1 font-bold">Énoncé
                    <textarea name="enonce" required rows="2" class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold"></textarea>
                </label>
                <fieldset class="grid gap-1 font-bold">
                    <legend>Type de question</legend>
                    <label class="inline-flex items-center gap-2 font-semibold"><input type="radio" name="type" value="qcm" data-type-radio checked> QCM (une bonne réponse)</label>
                    <label class="inline-flex items-center gap-2 font-semibold"><input type="radio" name="type" value="vrai_faux" data-type-radio> Vrai / Faux</label>
                </fieldset>

                <div data-bloc-qcm class="grid gap-2">
                    <p class="font-bold">Choix (coche la bonne réponse)</p>
                    @for ($i = 0; $i < 4; $i++)
                        <label class="flex items-center gap-2 font-semibold">
                            <input type="radio" name="bonne_reponse" value="{{ $i }}" @required($i === 0) aria-label="Choix {{ $i + 1 }} correct">
                            <input name="choix[]" placeholder="Choix {{ $i + 1 }}{{ $i < 2 ? '' : ' (facultatif)' }}" @required($i < 2) class="flex-1 rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">
                        </label>
                    @endfor
                </div>

                <div data-bloc-vrai-faux class="grid gap-1 font-bold">
                    <p>Bonne réponse</p>
                    <label class="inline-flex items-center gap-2 font-semibold"><input type="radio" name="reponse_vrai_faux" value="1"> Vrai</label>
                    <label class="inline-flex items-center gap-2 font-semibold"><input type="radio" name="reponse_vrai_faux" value="0"> Faux</label>
                </div>

                <button type="submit" class="inline-flex h-11 w-fit items-center rounded-full bg-[#0b57d0] px-5 font-bold text-white">Ajouter la question</button>
            </form>
        </section>
    </div>
    <script nonce="{{ Vite::cspNonce() }}">
        (function () {
            var form = document.getElementById('form-question');
            var blocQcm = form.querySelector('[data-bloc-qcm]');
            var blocVraiFaux = form.querySelector('[data-bloc-vrai-faux]');
            var champsQcm = blocQcm.querySelectorAll('input');
            function appliquer() {
                var qcm = form.querySelector('[data-type-radio]:checked').value === 'qcm';
                blocQcm.hidden = !qcm;
                blocVraiFaux.hidden = qcm;
                champsQcm.forEach(function (c) { c.disabled = !qcm; });
            }
            form.querySelectorAll('[data-type-radio]').forEach(function (r) { r.addEventListener('change', appliquer); });
            appliquer();
        })();
        document.querySelectorAll('form[data-confirmer]').forEach(function (f) {
            f.addEventListener('submit', function (e) { if (!window.confirm(f.dataset.confirmer)) e.preventDefault(); });
        });
    </script>
@endsection