@extends('layouts.vitrine')

@section('titre', 'Créer une classe')

@section('contenu')
    <section class="relative overflow-hidden">
        <div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="flotte absolute left-[40%] bottom-10 h-9 w-9 rounded-full border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] [animation-delay:1.5s]"></span></div>
        <div class="relative mx-auto grid max-w-7xl gap-12 px-5 pb-24 pt-16 lg:grid-cols-12 lg:px-10">
            <div class="lg:col-span-5">
                <p class="inline-block border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-3 py-1 text-sm font-bold">Enseignants</p>
                <h1 class="mt-8 text-6xl font-extrabold leading-[1.05] tracking-tight sm:text-7xl">Créer une classe.</h1>
                <p class="mt-6 inline-block border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-4 py-2 text-2xl font-extrabold">Gratuit · sans CB</p>
                <p class="mt-8 text-xl font-medium">Ensuite, ajoutez vos élèves par code de classe, import CSV ou saisie rapide. Pour les mineurs, on ne demande que le nom, le prénom et le groupe.</p>
            </div>
            <form action="{{ route('inscription.store') }}" method="post" class="grid gap-5 border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-7 sm:grid-cols-2 lg:col-span-7">
                @csrf
                @if ($errors->any())
                    <div class="sm:col-span-2 font-bold text-[#A63D2A]">
                        <ul>@foreach ($errors->all() as $erreur)<li>{{ $erreur }}</li>@endforeach</ul>
                    </div>
                @endif
                <label class="grid gap-2 font-extrabold">Prénom<input name="prenom" value="{{ old('prenom') }}" autocomplete="given-name" required class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
                <label class="grid gap-2 font-extrabold">Nom<input name="nom" value="{{ old('nom') }}" autocomplete="family-name" required class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
                <label class="grid gap-2 font-extrabold sm:col-span-2">E-mail professionnel<input type="email" name="email" value="{{ old('email') }}" autocomplete="email" required class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
                <label class="grid gap-2 font-extrabold">Mot de passe<input type="password" name="password" autocomplete="new-password" required minlength="8" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
                <label class="grid gap-2 font-extrabold">Confirme le mot de passe<input type="password" name="password_confirmation" autocomplete="new-password" required minlength="8" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
                <div class="sm:col-span-2"><div class="grid gap-4">
                        <label class="grid gap-2 font-extrabold" for="etab-inscription">Établissement</label>
                        <select id="etab-inscription" name="etablissement_nom_liste" required data-etab class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30 -mt-2">
                            <option value="">Choisir dans la liste</option>
                            <optgroup label="Lycées"><option value="Lycée Jean-Jaurès · Montreuil">Lycée Jean-Jaurès · Montreuil</option><option value="Lycée Louis-Armand · Paris 15e">Lycée Louis-Armand · Paris 15e</option><option value="Lycée Gustave-Eiffel · Bordeaux">Lycée Gustave-Eiffel · Bordeaux</option><option value="Lycée La Martinière Monplaisir · Lyon">Lycée La Martinière Monplaisir · Lyon</option></optgroup>
                            <optgroup label="BTS et IUT"><option value="Lycée Saint-Exupéry · Marseille">Lycée Saint-Exupéry · Marseille</option><option value="IUT de Villetaneuse · R&amp;T">IUT de Villetaneuse · R&amp;T</option><option value="IUT de Lannion · R&amp;T">IUT de Lannion · R&amp;T</option></optgroup>
                            <optgroup label="Organismes de formation"><option value="Télécom Saint-Étienne · école d’ingénieurs">Télécom Saint-Étienne · école d’ingénieurs</option><option value="AFPA · Centre de Rennes">AFPA · Centre de Rennes</option></optgroup>
                            <option value="autre">Mon établissement n’est pas dans la liste</option>
                        </select>
                        <div data-etab-autre hidden class="relative grid gap-4 border border-[#e3e5e8] rounded-2xl bg-white p-5">
                            <span class="absolute -right-3 -top-4 border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-3 py-1 text-sm font-extrabold">Gratuit · sans CB</span>
                            <p class="font-semibold">C’est avec grand plaisir qu’on vous laisse l’accès, sans carte bancaire. En échange, donnez-nous un coup de pouce : aidez-nous à faire souscrire une offre à votre établissement, ou envoyez-nous vos critiques et remarques pour rendre l’outil plus utile.</p>
                            <label class="grid gap-2 font-extrabold">Nom de l’établissement<input name="etablissement_nom" data-req class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30" placeholder="Lycée Marie-Curie"></label>
                            <div class="grid gap-4 sm:grid-cols-2">
                                <label class="grid gap-2 font-extrabold">Ville<input name="etablissement_ville" data-req class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
                                <label class="grid gap-2 font-extrabold">Code UAI <span class="font-semibold">(facultatif)</span><input name="etablissement_uai" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30 font-mono" placeholder="0931234A"></label>
                            </div>
                            <fieldset class="grid gap-2 font-semibold">
                                <legend class="font-extrabold">Mon coup de pouce</legend>
                                <label class="flex items-center gap-3"><input type="checkbox" name="aide[]" value="offre" class="h-5 w-5 accent-black"> Aider à faire souscrire une offre</label>
                                <label class="flex items-center gap-3"><input type="checkbox" name="aide[]" value="avis" class="h-5 w-5 accent-black"> Envoyer mes critiques et remarques</label>
                            </fieldset>
                        </div>
                    </div></div>
                <label class="grid gap-2 font-extrabold">Formation<select name="formation" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"><option>Lycée NSI</option><option>BTS SIO SISR</option><option>BTS CIEL</option><option>BUT R&amp;T</option><option>Titre pro TSSR</option></select></label>
                <label class="grid gap-2 font-extrabold">Nom de la classe<input name="classe" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30" placeholder="2nde NSI · Groupe B"></label>
                <div class="sm:col-span-2"><button type="submit" style="display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border:0;border-radius:999px;background:#0b57d0;color:#fff;font-size:16px;font-weight:700;cursor:pointer">Créer la classe <span class="font-mono" aria-hidden="true">→</span></button>
                    <p class="mt-3 font-semibold">Aucune carte bancaire demandée.</p></div>
            </form>
        </div>
    </section>
    <script>
        document.querySelectorAll('[data-etab]').forEach(function (s) {
            var box = s.parentNode.querySelector('[data-etab-autre]');
            function maj() {
                box.hidden = s.value !== 'autre';
                box.querySelectorAll('[data-req]').forEach(function (i) { i.required = !box.hidden; });
            }
            s.addEventListener('change', maj); maj();
        });
    </script>
@endsection