@extends('layouts.vitrine')

@section('titre', 'Générateur de TD')

@section('contenu')
    <section class="border-b-4 border-black bg-white">
        <div class="mx-auto max-w-7xl px-5 pb-12 pt-12 lg:px-10">
            <p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Générateur de TD</p>
            <h1 class="mt-6 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Des exercices à l’infini, corrigés tout de suite.</h1>
            <p class="mt-6 max-w-3xl text-xl font-medium leading-relaxed">Chaque clic tire un nouvel exercice au hasard. La correction montre le calcul, étape par étape. En mode examen : 10 questions, chronométrées, notées sur 20.</p>
        </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-4 lg:col-span-3">
            <p class="font-extrabold">Type d’exercice</p>
            <div class="grid gap-2" role="group" aria-label="Type d’exercice">
                <button type="button" data-type="reseau" aria-pressed="true" class="border-4 border-black bg-[#7CF2C0] px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Sous-réseaux</button>
                <button type="button" data-type="binaire" aria-pressed="false" class="border-4 border-black bg-[#FFD23F] px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Décimal → binaire</button>
                <button type="button" data-type="hexa" aria-pressed="false" class="border-4 border-black bg-[#C4B5FD] px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Décimal → hexadécimal</button>
                <button type="button" data-type="c2" aria-pressed="false" class="border-4 border-black bg-[#FF6FB5] px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Complément à 2</button>
                <button type="button" data-type="chmod" aria-pressed="false" class="border-4 border-black bg-white px-4 py-3 text-left font-extrabold shadow-[4px_4px_0px_#000000] aria-pressed:outline aria-pressed:outline-4 aria-pressed:outline-offset-2 aria-pressed:outline-black">Droits chmod</button>
            </div>
            <div class="mt-4 border-4 border-black bg-black p-4 text-white">
                <p class="font-extrabold">Mode examen</p>
                <p class="mt-1 text-sm font-semibold">10 questions du type choisi, chrono, note sur 20.</p>
                <button type="button" id="g-exam" class="mt-3 border-2 border-white bg-[#ec3013] px-3 py-1 font-extrabold">Lancer l’examen</button>
            </div>
            <p class="border-2 border-black bg-white p-3 font-mono text-sm font-semibold">Série : <span id="g-serie">0</span> · Réussis : <span id="g-ok">0</span> / <span id="g-tot">0</span></p>
        </aside>
        <section class="lg:col-span-9" aria-live="polite">
            <div id="g-barre" hidden class="mb-5 flex flex-wrap items-center gap-4 border-4 border-black bg-[#ec3013] px-5 py-3 font-extrabold text-white"><span>MODE EXAMEN</span><span>Question <span id="g-qn">1</span> / 10</span><span class="ml-auto font-mono text-xl" id="g-chrono">00:00</span></div>
            <form id="g-form" class="border-4 border-black bg-white p-7 shadow-[10px_10px_0px_#000000]">
                <p id="g-titre" class="font-mono text-sm font-semibold"></p>
                <p id="g-enonce" class="mt-3 text-3xl font-black leading-tight"></p>
                <div id="g-champs" class="mt-6 grid gap-4 sm:grid-cols-3"></div>
                <div class="mt-6 flex flex-wrap gap-4"><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]">Corriger</button><button type="button" id="g-new" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F]">Nouvel exercice</button></div>
                <div id="g-corr" hidden class="mt-6 border-4 border-black p-5"><p id="g-verdict" class="text-xl font-black"></p><pre id="g-etapes" class="mt-3 whitespace-pre-wrap font-mono text-sm font-semibold"></pre></div>
            </form>
            <div id="g-fin" hidden class="mt-8 border-4 border-black bg-[#FFD23F] p-7 shadow-[10px_10px_0px_#000000]"><p class="text-2xl font-black">Examen terminé</p><p class="mt-2 font-mono text-7xl font-semibold"><span id="g-note">0</span> / 20</p><p id="g-temps" class="mt-2 text-lg font-bold"></p></div>
        </section>
    </div>
    <script>
        (function () {
            var $ = function (id) { return document.getElementById(id); };
            var type = 'reseau', cur = null, serie = 0, ok = 0, tot = 0, exam = null;
            var r = function (a, b) { return a + Math.floor(Math.random() * (b - a + 1)); };
            var ip = function (n) { return [n >>> 24, (n >>> 16) & 255, (n >>> 8) & 255, n & 255].join('.'); };
            var b8 = function (n) { return (n & 255).toString(2).padStart(8, '0'); };
            var G = {
                reseau: function () {
                    var pref = [[10, r(0, 255)], [172, r(16, 31)], [192, 168]][r(0, 2)], a = ((pref[0] << 24) | (pref[1] << 16) | (r(0, 255) << 8) | r(1, 254)) >>> 0, c = r(20, 30);
                    var m = c === 0 ? 0 : (0xFFFFFFFF << (32 - c)) >>> 0, net = (a & m) >>> 0, bc = (net | (~m >>> 0)) >>> 0, h = Math.pow(2, 32 - c) - 2;
                    return { titre: 'Sous-réseaux · IPv4', enonce: ip(a) + '/' + c, champs: [['Adresse réseau', ip(net)], ['Diffusion', ip(bc)], ['Nombre d’hôtes', String(h)]],
                        etapes: 'Masque /' + c + ' = ' + ip(m) + '\nAdresse ET masque = ' + ip(net) + '\nBits d’hôte à 1 → diffusion ' + ip(bc) + '\nHôtes = 2^' + (32 - c) + ' − 2 = ' + h };
                },
                binaire: function () { var n = r(0, 255); return { titre: 'Conversion · décimal vers binaire (8 bits)', enonce: String(n), champs: [['En binaire', b8(n), function (v) { return /^[01]{1,8}$/.test(v) && parseInt(v, 2) === n; }]], etapes: [128, 64, 32, 16, 8, 4, 2, 1].map(function (p) { return p + ' → ' + ((n & p) ? '1' : '0'); }).join('   ') + '\n' + n + ' = ' + b8(n) }; },
                hexa: function () { var n = r(0, 255), hx = n.toString(16).toUpperCase().padStart(2, '0'); return { titre: 'Conversion · décimal vers hexadécimal', enonce: String(n), champs: [['En hexadécimal', hx, function (v) { return parseInt(v.replace(/^0x/i, ''), 16) === n && /^(0x)?[0-9a-f]{1,2}$/i.test(v); }]], etapes: n + ' = ' + Math.floor(n / 16) + ' × 16 + ' + (n % 16) + '\n' + Math.floor(n / 16) + ' → ' + (Math.floor(n / 16)).toString(16).toUpperCase() + ', ' + (n % 16) + ' → ' + (n % 16).toString(16).toUpperCase() + '\nRésultat : ' + hx }; },
                c2: function () { var n = r(-128, -1); return { titre: 'Complément à 2 · sur 8 bits', enonce: String(n), champs: [['Sur 8 bits', b8(n)]], etapes: '|' + n + '| = ' + (-n) + ' = ' + b8(-n) + '\nOn inverse les bits : ' + b8(~(-n)) + '\nOn ajoute 1 : ' + b8(n) }; },
                chmod: function () {
                    var d = [r(4, 7), r(0, 7), r(0, 7)], s = function (x) { return (x & 4 ? 'r' : '-') + (x & 2 ? 'w' : '-') + (x & 1 ? 'x' : '-'); }, sym = d.map(s).join(''), oct = d.join('');
                    return Math.random() < .5
                        ? { titre: 'Droits Linux · octal vers symbolique', enonce: 'chmod ' + oct, champs: [['Droits (ex. rwxr-x---)', sym]], etapes: d.map(function (x, i) { return ['propriétaire', 'groupe', 'autres'][i] + ' : ' + x + ' = ' + s(x); }).join('\n') + '\nr = 4, w = 2, x = 1' }
                        : { titre: 'Droits Linux · symbolique vers octal', enonce: sym, champs: [['En octal (ex. 750)', oct]], etapes: d.map(function (x, i) { return s(x) + ' = ' + x; }).join('\n') + '\nr = 4, w = 2, x = 1' };
                }
            };
            function tirer() {
                cur = G[type]();
                $('g-titre').textContent = cur.titre; $('g-enonce').textContent = cur.enonce; $('g-corr').hidden = true;
                $('g-champs').innerHTML = cur.champs.map(function (c, i) { return '<label class="grid gap-2 font-extrabold">' + c[0] + '<input data-i="' + i + '" autocomplete="off" 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"></label>'; }).join('');
                var f = $('g-champs').querySelector('input'); if (f) f.focus();
                if (exam) $('g-qn').textContent = exam.n + 1;
            }
            $('g-form').addEventListener('submit', function (e) {
                e.preventDefault();
                if (!$('g-corr').hidden) { if (exam) suivante(); return; }
                var bons = 0;
                cur.champs.forEach(function (c, i) {
                    var inp = $('g-champs').querySelector('[data-i="' + i + '"]'), v = inp.value.trim().replace(/\s/g, ''), juste = c[2] ? c[2](v) : v.toLowerCase() === c[1].toLowerCase();
                    if (juste) bons++; inp.classList.toggle('bg-[#7CF2C0]', juste); inp.classList.toggle('bg-[#FFD9E8]', !juste);
                });
                var tout = bons === cur.champs.length; tot++; if (tout) { ok++; serie++; } else serie = 0;
                if (exam) exam.pts += bons / cur.champs.length;
                $('g-serie').textContent = serie; $('g-ok').textContent = ok; $('g-tot').textContent = tot;
                var cr = $('g-corr'); cr.hidden = false; cr.className = 'mt-6 border-4 border-black p-5 ' + (tout ? 'bg-[#7CF2C0]' : 'bg-[#FFD9E8]');
                $('g-verdict').textContent = (tout ? 'Juste !' : 'Pas tout à fait.') + ' Réponse : ' + cur.champs.map(function (c) { return c[1]; }).join(' · ');
                $('g-etapes').textContent = cur.etapes;
                if (exam) $('g-new').textContent = exam.n === 9 ? 'Voir ma note' : 'Question suivante';
            });
            function suivante() { exam.n++; if (exam.n >= 10) return finir(); tirer(); }
            function finir() {
                clearInterval(exam.t); $('g-form').hidden = true; $('g-fin').hidden = false;
                $('g-note').textContent = (Math.round(exam.pts * 2 * 10) / 10).toString().replace('.', ',');
                $('g-temps').textContent = 'Temps : ' + $('g-chrono').textContent; exam = null; $('g-new').textContent = 'Nouvel exercice';
            }
            $('g-new').addEventListener('click', function () { if (exam) { if ($('g-corr').hidden) return; suivante(); } else tirer(); });
            document.querySelectorAll('[data-type]').forEach(function (b) { b.addEventListener('click', function () { if (exam) return; type = b.dataset.type; document.querySelectorAll('[data-type]').forEach(function (x) { x.setAttribute('aria-pressed', x === b); }); tirer(); }); });
            $('g-exam').addEventListener('click', function () {
                var d = Date.now(); exam = { n: 0, pts: 0, t: setInterval(function () { var s = Math.floor((Date.now() - d) / 1000); $('g-chrono').textContent = String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0'); }, 1000) };
                $('g-barre').hidden = false; $('g-fin').hidden = true; $('g-form').hidden = false; tirer();
            });
            tirer();
        })();
    </script>
@endsection