@extends('layouts.vitrine')

@section('titre', 'Devoirs maison')

@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 · Devoirs</p><h1 class="mt-2 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Devoirs maison</h1><p class="mt-3 max-w-2xl text-lg font-semibold">Donnez un TP, un QCM, un TD ou un exercice de code à faire à la maison. Programmez l’ouverture et la date limite, suivez les rendus, corrigez et notez.</p></div>
            <a href="#nouveau" 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] hover:bg-[#ec3013]">+ Nouveau devoir</a>
        </div>
    </section>
    <div class="mx-auto grid max-w-7xl gap-10 px-5 py-12 lg:grid-cols-12 lg:px-10">
        <section class="lg:col-span-7" aria-labelledby="t-liste">
            <h2 id="t-liste" class="text-3xl font-black">Devoirs programmés</h2>
            <ul id="liste-devoirs" class="mt-6 grid gap-5">
                <li class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]"><div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#7CF2C0] px-2">TP sur VM</span><span class="border-2 border-black px-2">BTS SIO 1 · A</span><span class="ml-auto font-mono">⏰ Ven. 3 oct. · 23:59</span></div><p class="mt-3 text-xl font-black">TP Routage inter-VLAN</p><div class="mt-3 h-4 border-2 border-black bg-white"><div class="h-full border-r-2 border-black bg-black" style="width:75%"></div></div><p class="mt-2 font-mono text-sm font-semibold">18 / 24 rendus · <span class="bg-[#ec3013] px-1 text-white">2 en retard</span></p></li>
                <li class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]"><div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FFD23F] px-2">QCM</span><span class="border-2 border-black px-2">BTS SIO 1 · A</span><span class="ml-auto font-mono">⏰ Lun. 6 oct. · 08:00</span></div><p class="mt-3 text-xl font-black">QCM Adressage IPv4 · 2ᵉ essai</p><div class="mt-3 h-4 border-2 border-black bg-white"><div class="h-full border-r-2 border-black bg-black" style="width:46%"></div></div><p class="mt-2 font-mono text-sm font-semibold">11 / 24 rendus</p></li>
                <li class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]"><div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#FF6FB5] px-2">IDE</span><span class="border-2 border-black px-2">2nde NSI · B</span><span class="ml-auto font-mono">⏰ Mer. 8 oct. · 18:00</span></div><p class="mt-3 text-xl font-black">Défi Python : somme d’une liste</p><div class="mt-3 h-4 border-2 border-black bg-white"><div class="h-full border-r-2 border-black bg-black" style="width:18%"></div></div><p class="mt-2 font-mono text-sm font-semibold">5 / 28 rendus</p></li>
                <li class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]"><div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#C4B5FD] px-2">TD</span><span class="border-2 border-black px-2">BTS SIO 1 · A</span><span class="ml-auto font-mono">⏰ Clos · 29 sept.</span></div><p class="mt-3 text-xl font-black">TD Découpage en sous-réseaux</p><div class="mt-3 h-4 border-2 border-black bg-white"><div class="h-full border-r-2 border-black bg-black" style="width:100%"></div></div><p class="mt-2 font-mono text-sm font-semibold">24 / 24 rendus · <span class="bg-[#ec3013] px-1 text-white">3 en retard</span></p></li>
            </ul>
        </section>
        <section class="lg:col-span-5" aria-labelledby="t-rendus">
            <div class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000]">
                <h2 id="t-rendus" class="text-2xl font-black">Rendus · TD Découpage en sous-réseaux</h2>
                <table class="mt-4 w-full border-4 border-black bg-white text-left text-sm"><thead class="bg-black text-white"><tr><th class="px-3 py-2">Élève</th><th class="px-3 py-2">État</th><th class="px-3 py-2">Note</th></tr></thead><tbody class="divide-y-2 divide-black">
                    <tr><td class="px-3 py-2"><span class="block font-extrabold">Léa Martin</span><span class="font-mono text-xs">30 sept. · 17:42</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#7CF2C0]">Rendu</span></td><td class="px-3 py-2 font-mono font-semibold">18/20</td></tr>
                    <tr><td class="px-3 py-2"><span class="block font-extrabold">Yanis Benali</span><span class="font-mono text-xs">1 oct. · 22:10</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#7CF2C0]">Rendu</span></td><td class="px-3 py-2 font-mono font-semibold">14/20</td></tr>
                    <tr><td class="px-3 py-2"><span class="block font-extrabold">Nora Kaci</span><span class="font-mono text-xs">2 oct. · 09:05</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#FFD23F]">En retard</span></td><td class="px-3 py-2 font-mono font-semibold">—</td></tr>
                    <tr><td class="px-3 py-2"><span class="block font-extrabold">Sami Lefèvre</span><span class="font-mono text-xs">—</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#ec3013] text-white">Non rendu</span></td><td class="px-3 py-2 font-mono font-semibold">—</td></tr>
                    <tr><td class="px-3 py-2"><span class="block font-extrabold">Chloé Petit</span><span class="font-mono text-xs">29 sept. · 20:31</span></td><td class="px-3 py-2"><span class="border-2 border-black px-1.5 text-xs font-extrabold bg-[#7CF2C0]">Rendu</span></td><td class="px-3 py-2 font-mono font-semibold">19/20</td></tr>
                </tbody></table>
                <div class="mt-4 flex flex-wrap gap-3"><button type="button" class="border-4 border-black bg-black px-4 py-2 font-extrabold text-white">Relancer les non-rendus</button><button type="button" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Exporter les notes</button></div>
            </div>
        </section>
    </div>
    <section id="nouveau" class="scroll-mt-6 border-t-4 border-black bg-[#FFD23F]" aria-labelledby="t-nouveau">
        <div class="mx-auto max-w-7xl px-5 py-14 lg:px-10">
            <h2 id="t-nouveau" class="text-4xl font-black tracking-tighter">Programmer un devoir</h2>
            <form id="f-devoir" class="mt-8 grid gap-5 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] md:grid-cols-2">
                <label class="grid gap-2 font-extrabold md:col-span-2">Titre<input id="d-titre" required value="TP Serveur web Apache" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
                <label class="grid gap-2 font-extrabold">Activité<select id="d-type" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>TP sur VM</option><option>Lab web (terminal + navigateur)</option><option>QCM</option><option>TD</option><option>IDE</option><option>Générateur de TD</option><option>Rendu de fichier</option></select></label>
                <label class="grid gap-2 font-extrabold">Classe<select id="d-classe" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>BTS SIO 1 · A</option><option>2nde NSI · B</option><option>BUT R&amp;T 1</option></select></label>
                <label class="grid gap-2 font-extrabold">Ouverture<input type="datetime-local" value="2026-10-01T08:00" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono"></label>
                <label class="grid gap-2 font-extrabold">Date limite<input id="d-lim" type="datetime-local" value="2026-10-10T23:59" class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none font-mono"></label>
                <fieldset class="grid gap-2 font-semibold md:col-span-2"><legend class="font-extrabold">Options</legend>
                    <label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Accepter les rendus en retard (signalés)</label>
                    <label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Correction automatique, visible après la date limite</label>
                    <label class="flex items-center gap-3"><input type="checkbox" class="h-5 w-5 accent-black"> Rappel aux élèves la veille</label>
                </fieldset>
                <div class="flex flex-wrap items-center gap-4 md: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] hover:bg-[#ec3013]">Programmer le devoir</button><a href="{{ route('bibliotheque') }}" class="font-extrabold underline underline-offset-4">Choisir dans la bibliothèque</a><p id="d-ok" hidden class="border-4 border-black bg-[#7CF2C0] px-4 py-2 font-extrabold">Devoir programmé ✓</p></div>
            </form>
        </div>
    </section>
    <script>
        document.getElementById('f-devoir').addEventListener('submit', function (e) {
            e.preventDefault();
            var li = document.createElement('li'), lim = new Date(document.getElementById('d-lim').value);
            li.className = 'border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] outline outline-4 outline-[#7CF2C0]';
            li.innerHTML = '<div class="flex flex-wrap items-center gap-2 text-xs font-extrabold"><span class="border-2 border-black bg-[#7CF2C0] px-2">' + document.getElementById('d-type').value + '</span><span class="border-2 border-black px-2">' + document.getElementById('d-classe').value + '</span><span class="ml-auto font-mono">⏰ ' + lim.toLocaleString('fr-FR', { dateStyle: 'short', timeStyle: 'short' }) + '</span></div><p class="mt-3 text-xl font-black"></p><p class="mt-2 font-mono text-sm font-semibold">0 rendu · ouverture programmée</p>';
            li.querySelector('p').textContent = document.getElementById('d-titre').value;
            document.getElementById('liste-devoirs').prepend(li); document.getElementById('d-ok').hidden = false;
        });
    </script>
@endsection