@extends('layouts.vitrine')

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

@section('contenu')
    @include('partials.apercu')
    <section class="border-b border-[#e3e5e8] 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>
                <div class="min-w-0 flex-1"><p data-public="P" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#1d3fa8]">Pour les profs</p>
<h1 class="mt-2 text-5xl font-extrabold leading-[0.95] tracking-tight sm:text-6xl">Banque de sujets et de questions</h1></div>
                <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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-2 font-extrabold hover:bg-[#fef7e0]">Bibliothèque du référentiel →</a><a href="{{ route('generateur') }}" class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] 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 border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">+ Nouvelle question</a>
        </div>
    </section>

    <section id="flash" class="scroll-mt-6 border-b border-[#e3e5e8] bg-[#fef7e0]" 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 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-bold">Début d’heure</p>
                <h2 id="t-flash" class="mt-5 text-4xl font-extrabold leading-tight tracking-tight">Un quiz flash pour lancer le cours.</h2>
                <p class="mt-4 text-lg font-semibold">Choisissez les outils à réviser. Syllabus 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 border-[#e3e5e8] rounded-2xl bg-white p-6 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Lancer le diaporama →</button>
                    <p id="flash-res" hidden class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none" placeholder="masque, VLAN…"></label>
            <label class="grid gap-2 font-extrabold">Cursus<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>Toutes</option><option>Facile</option><option>Moyen</option><option>Difficile</option></select></label>
            <div class="border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-4">
                <p class="font-extrabold">Sujets prêts</p>
                <ul class="mt-3 grid gap-2"><li class="border border-[#dadce0] rounded-lg bg-[#fef7e0] 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 border-[#dadce0] rounded-lg bg-[#e6f4ea] 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 border-[#dadce0] rounded-lg bg-[#eef0fd] 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-extrabold">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 border-[#e3e5e8] rounded-2xl bg-white p-5">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Choix unique</span><span class="border border-[#dadce0] rounded-lg px-2">BTS SIO · Bloc 2</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Adressage IPv4</span><span class="border border-[#dadce0] rounded-lg bg-[#eef0fd] 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 border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="1" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Choix unique</span><span class="border border-[#dadce0] rounded-lg px-2">BTS CIEL · Réseaux</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Adressage IPv4</span><span class="border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="1" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Choix multiple</span><span class="border border-[#dadce0] rounded-lg px-2">NSI · Première</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Commandes Linux</span><span class="border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="1" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Vrai / faux</span><span class="border border-[#dadce0] rounded-lg px-2">BTS SIO · Bloc 2</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">VLAN</span><span class="border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="2" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Réponse courte</span><span class="border border-[#dadce0] rounded-lg px-2">BTS SIO · Bloc 1</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Droits Linux</span><span class="border border-[#dadce0] rounded-lg bg-[#eef0fd] 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 border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="1" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Réponse numérique</span><span class="border border-[#dadce0] rounded-lg px-2">BUT R&amp;T · S1</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Services réseau</span><span class="border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
                </li>
                <li data-question data-pts="3" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
                    <div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Texte à trous</span><span class="border border-[#dadce0] rounded-lg px-2">BTS CIEL · Réseaux</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Routage</span><span class="border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
                </li>
            </ul>
        </section>

        <aside class="grid content-start gap-8 lg:col-span-4">
            <section class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-6 lg:sticky lg:top-6" aria-labelledby="t-sujet">
                <h2 id="t-sujet" class="text-2xl font-extrabold">Sujet en cours</h2>
                <label class="mt-4 grid gap-2 font-extrabold">Titre<input value="Examen · Adressage IPv4" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013] 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 border-[#e3e5e8] bg-[#eef0fd]" 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-extrabold tracking-tight">Créer ou modifier une question</h2>
            <form class="mt-8 grid gap-5 border border-[#e3e5e8] rounded-2xl bg-white p-7 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none">Quel masque correspond à /26 ?</textarea></label>
                <label class="grid gap-2 font-extrabold">Type<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"></label><label class="grid gap-2 font-extrabold">Difficulté<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013] 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 border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] 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 border-[#dadce0] rounded-lg 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-[#e6f4ea]');
                });
            });
            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