@extends('layouts.vitrine')

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

@section('contenu')
    <section class="relative overflow-hidden border-b border-[#e3e5e8] bg-white">
        <div aria-hidden="true" class="pointer-events-none absolute inset-0"></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 · {{ $eleve->identifiant }}</p>
                <div class="min-w-0 flex-1"><p data-public="E" 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-[#0b5e3c]">Pour les élèves</p>
<h1 class="mt-2 text-6xl font-extrabold leading-[1.05] tracking-tight sm:text-7xl">Salut {{ $eleve->prenom }}.</h1></div>
                <p class="mt-4 text-xl font-semibold">{{ $eleve->classe->nom }}@if($eleve->classe->formation) · {{ $eleve->classe->formation }}@endif</p>
            </div>
            <a href="{{ route('labs.essai') }}" 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].5.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-extrabold tracking-tight">À faire</h2>
            <ul class="mt-8 grid gap-6">
                <li><a href="{{ route('ide') }}" class="relative flex flex-wrap items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-white p-5"><span class="absolute -right-3 -top-4 border border-[#dadce0] rounded-lg bg-[#ec3013] px-2 py-0.5 text-sm font-extrabold text-white">Devoir maison</span><span class="border border-[#dadce0] rounded-lg bg-[#13233A] px-2 font-mono text-sm font-semibold text-white">IDE</span><span class="flex-1"><span class="block text-xl font-extrabold">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 border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-5 transition-transform">
                    <span class="absolute -right-3 -top-4 border border-[#dadce0] rounded-lg bg-white px-2 py-0.5 text-sm font-extrabold">En cours</span>
                    <span class="border border-[#dadce0] rounded-lg bg-white px-2 font-mono text-sm font-semibold">TP</span>
                    <span class="flex-1"><span class="block text-xl font-extrabold">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 border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-5 transition-transform md:ml-8">
                    <span class="border border-[#dadce0] rounded-lg bg-white px-2 font-mono text-sm font-semibold">QCM</span>
                    <span class="flex-1"><span class="block text-xl font-extrabold">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 border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-5 transition-transform">
                    <span class="border border-[#dadce0] rounded-lg bg-white px-2 font-mono text-sm font-semibold">TD</span>
                    <span class="flex-1"><span class="block text-xl font-extrabold">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 border-[#e3e5e8] rounded-2xl bg-black p-5 text-white transition-transform 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-extrabold">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 border-[#e3e5e8] rounded-2xl bg-white p-6" aria-labelledby="t-prog">
                <h2 id="t-prog" class="text-2xl font-extrabold">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 border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-[#e6f4ea] border-r border-[#e3e5e8]" 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 border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-[#e6f4ea] border-r border-[#e3e5e8]" 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 border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-[#fef7e0] border-r border-[#e3e5e8]" 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 border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-[#fef7e0] border-r border-[#e3e5e8]" 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 border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-white border-r border-[#e3e5e8]" style="width:0%"></div></div></li>
                </ul>
            </section>
            <section class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] p-6" aria-labelledby="t-notes">
                <h2 id="t-notes" class="text-2xl font-extrabold">Mes QCM</h2>
                <ul class="mt-4 divide-y divide-[#e3e5e8] border border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-white px-4 py-2 font-extrabold hover:bg-[#fef7e0]">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