@extends('layouts.vitrine')

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

@section('contenu')
    <section class="border-b-4 border-black bg-white">
        <div class="mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-10 pt-10 lg:px-10">
            <div class="flex-1">
                <p class="font-mono text-sm font-semibold">Espace enseignant · Banque</p>
                <h1 class="mt-2 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Banque de sujets et de questions</h1>
                <p class="mt-3 max-w-2xl text-lg font-semibold">1 240 questions classées par cursus et par notion. Modifiez-les, ajoutez les vôtres, composez vos sujets.</p><div class="mt-4 flex flex-wrap gap-3"><a href="{{ route('bibliotheque') }}" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Bibliothèque du référentiel →</a><a href="{{ route('generateur') }}" class="border-4 border-black bg-[#FF6FB5] px-4 py-2 font-extrabold">Générateur de TD →</a></div>
            </div>
            <a href="#editeur" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">+ Nouvelle question</a>
        </div>
    </section>

    <section id="flash" class="scroll-mt-6 border-b-4 border-black bg-[#FFD23F]" aria-labelledby="t-flash">
        <div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 lg:grid-cols-12 lg:px-10">
            <div class="lg:col-span-4">
                <p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Début d’heure</p>
                <h2 id="t-flash" class="mt-5 text-4xl font-black leading-tight tracking-tighter">Un quiz flash pour lancer le cours.</h2>
                <p class="mt-4 text-lg font-semibold">Choisissez les outils à réviser. Paillasse tire les questions dans la banque. Un diaporama s’ouvre au tableau. Les élèves se connectent avec leur identifiant depuis leur téléphone ou leur PC, et vous voyez tout de suite qui manque.</p>
                <span class="mt-4 flex flex-wrap gap-4"><a href="{{ route('quiz.projection') }}" class="font-extrabold underline underline-offset-4">Voir le diaporama →</a><a href="{{ route('quiz.eleve') }}" class="font-extrabold underline underline-offset-4">Voir la vue élève →</a></span>
            </div>
            <div class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000] lg:col-span-8">
                <p class="font-extrabold">Outils à réviser</p>
                <div class="mt-3 flex flex-wrap gap-2" role="group" aria-label="Outils">
                    <button type="button" data-outil aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ls</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">cd</button>
                    <button type="button" data-outil aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">chmod</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">chown</button>
                    <button type="button" data-outil aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">grep</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">find</button>
                    <button type="button" data-outil aria-pressed="true" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ip</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ping</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ss</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">dig</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ssh</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">systemctl</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">apt</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">journalctl</button>
                    <button type="button" data-outil aria-pressed="false" class="border-2 border-black bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">tar</button>
                </div>
                <div class="mt-5 grid gap-4 sm:grid-cols-3">
                    <label class="grid gap-2 font-extrabold">Questions<select id="flash-n" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>5</option><option>8</option><option>10</option></select></label>
                    <label class="grid gap-2 font-extrabold">Durée<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>5 min</option><option>8 min</option><option>10 min</option></select></label>
                    <label class="grid gap-2 font-extrabold">Classe<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>BTS SIO 1 · Groupe A</option><option>2nde NSI · Groupe B</option></select></label>
                </div>
                <div class="mt-6 flex flex-wrap items-center gap-5">
                    <button type="button" id="flash-go" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Lancer le diaporama →</button>
                    <p id="flash-res" hidden class="border-4 border-black bg-[#7CF2C0] px-4 py-2 font-extrabold" aria-live="polite"></p>
                </div>
            </div>
        </div>
    </section>

    <div class="mx-auto grid max-w-7xl gap-10 px-5 py-12 lg:grid-cols-12 lg:px-10">
        <aside class="grid content-start gap-5 lg:col-span-3" aria-label="Filtres">
            <label class="grid gap-2 font-extrabold">Rechercher<input id="recherche" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="masque, VLAN…"></label>
            <label class="grid gap-2 font-extrabold">Cursus<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Tous</option><option>NSI</option><option>BTS SIO</option><option>BTS CIEL</option><option>BUT R&amp;T</option><option>TSSR</option></select></label>
            <label class="grid gap-2 font-extrabold">Type<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Tous</option><option>Choix unique</option><option>Choix multiple</option><option>Vrai / faux</option><option>Réponse numérique</option><option>Réponse courte</option><option>Texte à trous</option></select></label>
            <label class="grid gap-2 font-extrabold">Difficulté<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Toutes</option><option>Facile</option><option>Moyen</option><option>Difficile</option></select></label>
            <div class="border-4 border-black bg-[#C4B5FD] p-4">
                <p class="font-extrabold">Sujets prêts</p>
                <ul class="mt-3 grid gap-2"><li class="border-2 border-black bg-[#FFD23F] p-2"><p class="font-bold leading-tight">E6 blanc SISR · Adressage et VLAN</p><p class="font-mono text-xs font-semibold">12 questions + TP · 1 h</p></li><li class="border-2 border-black bg-[#7CF2C0] p-2"><p class="font-bold leading-tight">QCM Bloc 2 · fin de trimestre</p><p class="font-mono text-xs font-semibold">20 questions · 40 min</p></li><li class="border-2 border-black bg-[#C4B5FD] p-2"><p class="font-bold leading-tight">Contrôle NSI · Architectures</p><p class="font-mono text-xs font-semibold">10 questions · 30 min</p></li></ul>
            </div>
        </aside>

        <section class="lg:col-span-5" aria-labelledby="t-questions">
            <h2 id="t-questions" class="text-2xl font-black">Questions <span class="font-mono text-base font-semibold">· 7 affichées sur 1 240</span></h2>
            <ul id="liste-questions" class="mt-5 grid gap-5">
                <li data-question data-pts="2" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Choix unique</span><span class="border-2 border-black px-2">BTS SIO · Bloc 2</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Adressage IPv4</span><span class="border-2 border-black bg-[#C4B5FD] px-2">Moyen</span></div>
                    <p data-enonce class="mt-3 text-lg font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</p>
                    <p class="mt-2 font-mono text-xs font-semibold">2 pts · utilisée 34 fois · réussite 38 %</p>
                    <div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="1" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Choix unique</span><span class="border-2 border-black px-2">BTS CIEL · Réseaux</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Adressage IPv4</span><span class="border-2 border-black bg-white px-2">Facile</span></div>
                    <p data-enonce class="mt-3 text-lg font-extrabold">Combien d’hôtes utilisables dans un /27 ?</p>
                    <p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 51 fois · réussite 71 %</p>
                    <div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="1" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Choix multiple</span><span class="border-2 border-black px-2">NSI · Première</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Commandes Linux</span><span class="border-2 border-black bg-white px-2">Facile</span></div>
                    <p data-enonce class="mt-3 text-lg font-extrabold">Quelles commandes affichent les interfaces réseau sous Debian ?</p>
                    <p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 22 fois · réussite 64 %</p>
                    <div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="1" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Vrai / faux</span><span class="border-2 border-black px-2">BTS SIO · Bloc 2</span><span class="border-2 border-black bg-[#7CF2C0] px-2">VLAN</span><span class="border-2 border-black bg-white px-2">Facile</span></div>
                    <p data-enonce class="mt-3 text-lg font-extrabold">Un VLAN isole le trafic au niveau 2 du modèle OSI.</p>
                    <p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 40 fois · réussite 82 %</p>
                    <div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="2" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Réponse courte</span><span class="border-2 border-black px-2">BTS SIO · Bloc 1</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Droits Linux</span><span class="border-2 border-black bg-[#C4B5FD] px-2">Moyen</span></div>
                    <p data-enonce class="mt-3 text-lg font-extrabold">Écrivez la commande qui donne les droits rwxr-x--- au fichier notes.txt.</p>
                    <p class="mt-2 font-mono text-xs font-semibold">2 pts · utilisée 18 fois · réussite 47 %</p>
                    <div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="1" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Réponse numérique</span><span class="border-2 border-black px-2">BUT R&amp;T · S1</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Services réseau</span><span class="border-2 border-black bg-white px-2">Facile</span></div>
                    <p data-enonce class="mt-3 text-lg font-extrabold">Quel port utilise par défaut le protocole SSH ?</p>
                    <p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 29 fois · réussite 88 %</p>
                    <div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="3" class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">Texte à trous</span><span class="border-2 border-black px-2">BTS CIEL · Réseaux</span><span class="border-2 border-black bg-[#7CF2C0] px-2">Routage</span><span class="border-2 border-black bg-[#ec3013] text-white px-2">Difficile</span></div>
                    <p data-enonce class="mt-3 text-lg font-extrabold">Complétez : la route par défaut s’écrit ___ via 192.168.1.1.</p>
                    <p class="mt-2 font-mono text-xs font-semibold">3 pts · utilisée 9 fois · réussite 29 %</p>
                    <div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Modifier</a><button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Dupliquer</button></div>
                </li>
            </ul>
        </section>

        <aside class="grid content-start gap-8 lg:col-span-4">
            <section class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] lg:sticky lg:top-6" aria-labelledby="t-sujet">
                <h2 id="t-sujet" class="text-2xl font-black">Sujet en cours</h2>
                <label class="mt-4 grid gap-2 font-extrabold">Titre<input value="Examen · Adressage IPv4" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
                <ol id="sujet" class="mt-4 grid gap-2 font-semibold"><li data-vide class="border-2 border-dashed border-black bg-white p-3">Ajoutez des questions depuis la liste.</li></ol>
                <p class="mt-4 font-mono font-semibold"><span id="nb-q">0</span> question(s) · <span id="nb-pts">0</span> point(s)</p>
                <fieldset class="mt-4 grid gap-2 font-semibold"><legend class="font-extrabold">Options</legend>
                    <label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Mélanger les questions</label>
                    <label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Ajouter une partie TP</label>
                    <label class="flex items-center gap-3"><input type="checkbox" class="h-5 w-5 accent-black"> Corrections visibles après l’épreuve</label>
                </fieldset>
                <a href="{{ route('examen') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none mt-6">Programmer l’examen</a>
            </section>
        </aside>
    </div>

    <section id="editeur" class="scroll-mt-6 border-t-4 border-black bg-[#C4B5FD]" aria-labelledby="t-editeur">
        <div class="mx-auto max-w-7xl px-5 py-14 lg:px-10">
            <h2 id="t-editeur" class="text-4xl font-black tracking-tighter">Créer ou modifier une question</h2>
            <form class="mt-8 grid gap-5 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] lg:grid-cols-2" onsubmit="event.preventDefault(); this.querySelector('[data-ok]').hidden = false;">
                <label class="grid gap-2 font-extrabold lg:col-span-2">Énoncé<textarea rows="2" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none">Quel masque correspond à /26 ?</textarea></label>
                <label class="grid gap-2 font-extrabold">Type<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Choix unique</option><option>Choix multiple</option><option>Vrai / faux</option><option>Réponse numérique</option><option>Réponse courte</option><option>Texte à trous</option></select></label>
                <div class="grid grid-cols-2 gap-4"><label class="grid gap-2 font-extrabold">Points<input type="number" value="1" min="0" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label><label class="grid gap-2 font-extrabold">Difficulté<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Facile</option><option selected>Moyen</option><option>Difficile</option></select></label></div>
                <fieldset class="grid gap-3 lg:col-span-2"><legend class="font-extrabold">Réponses <span class="font-semibold">(cochez la bonne)</span></legend>
                    <label class="flex items-center gap-3"><input type="radio" name="bonne"  class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.128" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" aria-label="Réponse 1"></label>
                    <label class="flex items-center gap-3"><input type="radio" name="bonne" checked class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.192" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" aria-label="Réponse 2"></label>
                    <label class="flex items-center gap-3"><input type="radio" name="bonne"  class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.224" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" aria-label="Réponse 3"></label>
                    <label class="flex items-center gap-3"><input type="radio" name="bonne"  class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.240" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono" aria-label="Réponse 4"></label>
                </fieldset>
                <label class="grid gap-2 font-extrabold lg:col-span-2">Explication montrée à l’élève<textarea rows="2" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none">26 bits = 24 bits (255.255.255) + 2 bits dans le dernier octet : 128 + 64 = 192.</textarea></label>
                <label class="grid gap-2 font-extrabold">Cursus<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>BTS SIO · Bloc 2</option><option>BTS CIEL · Réseaux</option><option>NSI · Terminale</option><option>BUT R&amp;T · S1</option><option>TSSR · CCP 2</option></select></label>
                <label class="grid gap-2 font-extrabold">Notion<input value="Adressage IPv4" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
                <div class="flex flex-wrap items-center gap-4 lg:col-span-2"><button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Enregistrer dans ma banque</button><label class="flex items-center gap-3 font-semibold"><input type="checkbox" class="h-5 w-5 accent-black"> Partager avec mon établissement</label><p data-ok hidden class="border-4 border-black bg-[#7CF2C0] px-4 py-2 font-extrabold">Question enregistrée ✓</p></div>
            </form>
        </div>
    </section>
    <script>
        (function () {
            var sujet = document.getElementById('sujet'), nbq = document.getElementById('nb-q'), nbp = document.getElementById('nb-pts'), q = 0, p = 0;
            document.querySelectorAll('[data-ajouter]').forEach(function (b) {
                b.addEventListener('click', function () {
                    var li = b.closest('[data-question]');
                    if (b.disabled) return;
                    var vide = sujet.querySelector('[data-vide]'); if (vide) vide.remove();
                    q++; p += Number(li.dataset.pts);
                    var it = document.createElement('li');
                    it.className = 'flex gap-3 border-2 border-black bg-white p-3';
                    it.innerHTML = '<span class="font-mono font-semibold">' + q + '</span><span>' + li.querySelector('[data-enonce]').textContent + '</span>';
                    sujet.appendChild(it);
                    nbq.textContent = q; nbp.textContent = p;
                    b.disabled = true; b.textContent = 'Ajoutée ✓'; b.classList.remove('bg-black', 'text-white'); b.classList.add('bg-[#7CF2C0]');
                });
            });
            document.querySelectorAll('[data-outil]').forEach(function (b) { b.addEventListener('click', function () { b.setAttribute('aria-pressed', b.getAttribute('aria-pressed') !== 'true'); }); });
            document.getElementById('flash-go').addEventListener('click', function () {
                var sel = Array.prototype.filter.call(document.querySelectorAll('[data-outil]'), function (b) { return b.getAttribute('aria-pressed') === 'true'; }).map(function (b) { return b.textContent; });
                var r = document.getElementById('flash-res'); r.hidden = false;
                if (!sel.length) { r.textContent = 'Choisissez au moins un outil.'; return; }
                r.textContent = 'Ouverture du diaporama…'; location.href = '{{ route('quiz.projection') }}';
            });
            var rech = document.getElementById('recherche');
            rech.addEventListener('input', function () {
                var v = rech.value.toLowerCase();
                document.querySelectorAll('[data-question]').forEach(function (li) { li.hidden = v && li.textContent.toLowerCase().indexOf(v) === -1; });
            });
        })();
    </script>
@endsection