@extends('layouts.app')

@section('titre', 'Espace élève')

@section('contenu')
    <div class="mx-auto max-w-4xl px-5 py-10">
        <p class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">{{ $eleve->classe->nom }}</p>
        <h1 class="mt-1 text-4xl font-extrabold tracking-tight" style="color:var(--sy-ink)">Salut {{ $eleve->prenom }}.</h1>

        {{-- Chantier « vrai cockpit », étape 2 : Quiz flash, réel, pas de démo.
             Caché par défaut ; rempli et affiché par le sondage ci-dessous. --}}
        <section id="quiz-flash" hidden class="mt-8" aria-labelledby="t-quiz-flash">
            <div class="rounded-2xl border p-6" style="border-color:var(--sy-line);background:var(--sy-surface)">
                <h2 id="t-quiz-flash" class="text-2xl font-extrabold" style="color:var(--sy-ink)">Quiz flash</h2>
                <div data-quiz-contenu class="mt-4"></div>
            </div>
        </section>

        <ul class="mt-10 grid gap-4 sm:grid-cols-2">
            <li><a href="{{ route('ma-classe') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Ma classe</a></li>
            <li><a href="{{ route('emploi-du-temps') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Emploi du temps</a></li>
            <li><a href="{{ route('mes-devoirs') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Mes devoirs
                @if ($badgeMesDevoirs) <span class="app-sidebar__badge">{{ $badgeMesDevoirs }}</span> @endif
            </a></li>
            <li><a href="{{ route('mes-cours') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Mes cours</a></li>
            <li><a href="{{ route('mes-notes') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Mes notes</a></li>
        </ul>
    </div>

    <script nonce="{{ Vite::cspNonce() }}">
    (function () {
        var URL_ETAT = @json(route('quiz.eleve.etat'));
        var CSRF = @json(csrf_token());
        var section = document.getElementById('quiz-flash');
        var contenu = section.querySelector('[data-quiz-contenu]');
        var questionAffichee = null, repondu = false;

        function echapper(s) {
            return s.replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; });
        }

        function rendreQuestion(q) {
            var champs = q.type === 'vrai_faux'
                ? '<label class="flex items-center gap-2 font-semibold"><input type="radio" name="reponse" value="vrai"> Vrai</label>' +
                  '<label class="flex items-center gap-2 font-semibold"><input type="radio" name="reponse" value="faux"> Faux</label>'
                : q.choix.map(function (c) {
                    return '<label class="flex items-center gap-2 font-semibold"><input type="radio" name="reponse" value="' + c.id + '"> ' + echapper(c.texte) + '</label>';
                }).join('');

            contenu.innerHTML =
                '<p class="text-xl font-extrabold">' + echapper(q.enonce) + '</p>' +
                '<form data-form-reponse class="mt-4 grid gap-2">' + champs +
                '<button type="submit" class="mt-2 inline-flex h-11 w-fit items-center rounded-full bg-black px-5 font-bold text-white">Valider ma réponse</button></form>' +
                '<p data-resultat class="mt-3 hidden font-extrabold"></p>';

            contenu.querySelector('[data-form-reponse]').addEventListener('submit', function (e) {
                e.preventDefault();
                var choisi = contenu.querySelector('input[name="reponse"]:checked');
                if (!choisi) return;
                var corps = q.type === 'vrai_faux'
                    ? { reponse_vrai_faux: choisi.value === 'vrai' }
                    : { choix_id: parseInt(choisi.value, 10) };

                fetch('/sessions-quiz/' + sessionActuelle + '/repondre', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify(corps),
                }).then(function (r) { return r.json(); }).then(function (d) {
                    repondu = true;
                    var form = contenu.querySelector('[data-form-reponse]');
                    form.hidden = true;
                    var p = contenu.querySelector('[data-resultat]');
                    p.hidden = false;
                    p.textContent = d.correcte ? 'Bonne réponse !' : 'Réponse envoyée.';
                    p.className = 'mt-3 font-extrabold ' + (d.correcte ? 'text-[#3C8A5A]' : '');
                }).catch(function () {});
            });
        }

        var sessionActuelle = null;

        function sonder() {
            fetch(URL_ETAT, { headers: { Accept: 'application/json' } })
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    var s = d.session;
                    if (!s) { section.hidden = true; questionAffichee = null; sessionActuelle = null; return; }
                    sessionActuelle = s.id;
                    section.hidden = false;

                    if (s.statut === 'en_attente' || !s.question) {
                        questionAffichee = null;
                        contenu.innerHTML = '<p class="font-semibold">Un quiz va commencer. Garde cette page ouverte.</p>';
                        return;
                    }
                    if (s.deja_repondu) {
                        questionAffichee = s.question.id;
                        contenu.innerHTML = '<p class="font-extrabold">' + echapper(s.question.enonce) + '</p><p class="mt-3 font-extrabold">Réponse envoyée. En attente de la suite…</p>';
                        return;
                    }
                    if (s.question.id !== questionAffichee) {
                        questionAffichee = s.question.id;
                        repondu = false;
                        rendreQuestion(s.question);
                    }
                }).catch(function () {});
        }
        sonder();
        setInterval(sonder, 2000);
    })();
    </script>
@endsection