@extends('layouts.vitrine')

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

@section('contenu')
    <section class="relative overflow-hidden border-b-4 border-black bg-white">
        <div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[10%] top-10 h-12 w-12 bg-[#7CF2C0] [--r:12deg]"></span></div>
        <div class="relative mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-12 pt-12 lg:px-10">
            <div class="flex-1">
                <p class="font-mono text-sm font-semibold">Espace élève · lea.m.sio1-a</p>
                <h1 class="mt-2 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Salut Léa.</h1>
                <p class="mt-4 text-xl font-semibold">BTS SIO 1 · Groupe A · Bloc 2</p>
            </div>
            <a href="{{ route('labs.essai') }}" 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] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Reprendre mon TP <span class="font-mono" aria-hidden="true">→</span></a>
        </div>
    </section>
    <div class="mx-auto grid max-w-7xl gap-12 px-5 py-14 lg:grid-cols-12 lg:px-10">
        <section class="lg:col-span-7" aria-labelledby="t-afaire">
            <h2 id="t-afaire" class="text-4xl font-black tracking-tighter">À faire</h2>
            <ul class="mt-8 grid gap-6">
                <li><a href="{{ route('ide') }}" class="relative flex flex-wrap items-center gap-4 border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] hover:-translate-y-1"><span class="absolute -right-3 -top-4 rotate-3 border-2 border-black bg-[#ec3013] px-2 py-0.5 text-sm font-extrabold text-white">Devoir maison</span><span class="border-2 border-black bg-[#13233A] px-2 font-mono text-sm font-semibold text-white">IDE</span><span class="flex-1"><span class="block text-xl font-black">Défi Python : somme d’une liste</span><span class="block font-semibold">À rendre mer. 8 oct. · 18:00</span></span><span class="font-mono font-semibold">Rendre →</span></a></li>
                <li><a href="{{ route('labs.essai') }}" class="relative flex flex-wrap items-center gap-4 border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1">
                    <span class="absolute -right-3 -top-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 text-sm font-extrabold">En cours</span>
                    <span class="border-2 border-black bg-white px-2 font-mono text-sm font-semibold">TP</span>
                    <span class="flex-1"><span class="block text-xl font-black">Routage inter-VLAN</span><span class="block font-semibold">Étape 3 sur 4 · VM prête</span></span>
                    <span class="font-mono font-semibold">Continuer →</span></a></li>
                <li><a href="{{ route('cours.show') }}#qcm" class="flex flex-wrap items-center gap-4 border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1 md:ml-8">
                    <span class="border-2 border-black bg-white px-2 font-mono text-sm font-semibold">QCM</span>
                    <span class="flex-1"><span class="block text-xl font-black">Adressage IPv4 · 2ᵉ essai</span><span class="block font-semibold">Pour vendredi · 5 questions</span></span>
                    <span class="font-mono font-semibold">Commencer →</span></a></li>
                <li><a href="{{ route('cours.show') }}#td" class="flex flex-wrap items-center gap-4 border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1">
                    <span class="border-2 border-black bg-white px-2 font-mono text-sm font-semibold">TD</span>
                    <span class="flex-1"><span class="block text-xl font-black">Découpage en sous-réseaux</span><span class="block font-semibold">Assigné par Mme Roux · 3 exercices</span></span>
                    <span class="font-mono font-semibold">Ouvrir →</span></a></li>
                <li><a href="{{ route('examen') }}" class="flex flex-wrap items-center gap-4 border-4 border-black bg-black p-5 text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-y-1 md:ml-8">
                    <span class="border-2 border-white bg-[#ec3013] px-2 font-mono text-sm font-semibold">EXAMEN</span>
                    <span class="flex-1"><span class="block text-xl font-black">E6 blanc SISR · Adressage et VLAN</span><span class="block font-semibold">Lundi 10:00 · 1 h</span></span>
                    <span class="font-mono font-semibold">Voir →</span></a></li>
            </ul>
        </section>
        <aside class="grid content-start gap-10 lg:col-span-5">
            <section class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-prog">
                <h2 id="t-prog" class="text-2xl font-black">Ma progression</h2>
                <ul class="mt-5 grid gap-4">
                    <li><p class="flex justify-between font-bold"><span>Adressage IPv4</span><span class="font-mono">100 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-[#7CF2C0] border-r-2 border-black" style="width:100%"></div></div></li>
                    <li><p class="flex justify-between font-bold"><span>VLAN et commutation</span><span class="font-mono">100 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-[#7CF2C0] border-r-2 border-black" style="width:100%"></div></div></li>
                    <li><p class="flex justify-between font-bold"><span>Routage inter-VLAN</span><span class="font-mono">75 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-[#FFD23F] border-r-2 border-black" style="width:75%"></div></div></li>
                    <li><p class="flex justify-between font-bold"><span>Serveur DHCP</span><span class="font-mono">25 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-[#FFD23F] border-r-2 border-black" style="width:25%"></div></div></li>
                    <li><p class="flex justify-between font-bold"><span>Serveur DNS avec BIND 9</span><span class="font-mono">0 %</span></p><div class="mt-1 h-4 border-2 border-black bg-white"><div class="h-full bg-white border-r-2 border-black" style="width:0%"></div></div></li>
                </ul>
            </section>
            <section class="border-4 border-black bg-[#FF6FB5] p-6 shadow-[8px_8px_0px_#000000] lg:-rotate-1" aria-labelledby="t-notes">
                <h2 id="t-notes" class="text-2xl font-black">Mes QCM</h2>
                <ul class="mt-4 divide-y-2 divide-black border-2 border-black bg-white font-semibold">
                    <li class="flex justify-between px-4 py-2"><span>VLAN et commutation</span><span class="font-mono">17/20</span></li>
                    <li class="flex justify-between px-4 py-2"><span>Adressage IPv4</span><span class="font-mono">14/20</span></li>
                    <li class="flex justify-between px-4 py-2"><span>Modèle OSI</span><span class="font-mono">18/20</span></li>
                </ul>
                <a href="{{ route('cours.index') }}" class="mt-5 inline-block border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Réviser dans les cours</a>
                <a href="{{ route('maison') }}" class="mt-3 block font-extrabold underline underline-offset-4">Aller plus loin à la maison →</a>
            </section>
        </aside>
    </div>
@endsection