@extends('layouts.app')

@section('content')

    <script src="{{ asset('js/choix_inscription.js') }}" defer></script>
    <link rel="stylesheet" href="{{ asset('css/form.css') }}">

    <div class="container centered">

        <div id="website_closed" style="display: none;">
            <h2>Le délai de réservation de créneau horaire pour la saison est maintenant dépassé,</h2>
            <h2>le site de réservation de rendez-vous d'achat et vente de manuels scolaires de la FCPE est par conséquent actuellement fermé.</h2>
            <br/>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRn11z2FSSZrjaJUIbPvukQzzE3cKqL1JCujeobwVRoiQ&s" alt="logo de la FCPE">
        </div>

        <div id="regular_content">

            @php
                $year = date('Y') - 15;
                $lycees = \App\Models\Lycee::all();
            @endphp

            <h1>Formulaire d'inscription à la FCPE</h1>

            @if ($errors->any())
                <div style="color: red; text-align: center;">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li><p>{{ $error }}</p></li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if(request()->has('error'))
                <div style="color: red; text-align: center;">
                    <strong>{{ request()->get('error') }}</strong>
                </div>
            @endif

            <form method="POST" action="/inscriptionChoixResults">
                @csrf

                <input type="radio" id="un" name="cmb_enfant" value="un" required>
                <label for="un">Un seul de mes enfants bénéficiera du service des manuels scolaires cette année</label>
                <br>

                <div id="options_un" style="display: none;">
                    <select name="type_inscription" id="type_inscription">
                        <option value="" disabled selected>Choisissez un type d'inscription</option>
                        <option value="1">C'est ma première inscription à la FCPE</option>
                        <option value="2">Je bénéficie déjà du service de la FCPE et je souhaite me réinscrire pour l'année prochaine</option>
                        <option value="3">Je bénéficie déjà du service de la FCPE et je ne souhaite pas me réinscrire, élève en terminale ou changement d’établissement</option>
                    </select>
                </div>

                <br>

                <input type="radio" id="plusieurs" name="cmb_enfant" value="plusieurs">
                <label for="plusieurs">Plusieurs de mes enfants bénéficieront du service des manuels scolaires cette année</label>
                <br>

                <div id="options_plusieurs" style="display: none;">
                    <select name="nombre_enfant" id="nombre_enfant">
                        <option value="" disabled selected>Nombre d'enfants bénéficiant du service cette année</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                    <br/>
                </div>

                <div id="attention_plusieurs_enfants" style="display: none;">
                    <p><strong>Attention</strong></p>
                    <p>Ayant plusieurs enfants, vous devrez vous déplacer dans chaque lycée où ils sont inscrits pour récupérer les manuels scolaires.</p>
                </div>

                <div id="form_parent" style="display: none;">
                    <h3>Formulaire parent</h3>

                    <p class="centered">Tout champ marqué d'une * doit être rempli.</p>

                    <select name="civilite" id="civilite" required>
                        <option value="" disabled selected>Civilité *</option>
                        <option value="M">Monsieur</option>
                        <option value="Mme">Madame</option>
                    </select>

                    <br/>

                    <input type="text" id="nom_parent" name="nom_parent" placeholder="Nom *" required>
                    <br/>

                    <input type="text" id="prenom_parent" name="prenom_parent" placeholder="Prénom *" required>
                    <br/>

                    <input type="text" id="adresse_parent" name="adresse_parent" placeholder="Adresse *" required>
                    <br/>

                    <input type="text" id="code_postal_parent" name="code_postal_parent" placeholder="Code postal *" required>
                    <br/>

                    <input type="text" id="ville_parent" name="ville_parent" placeholder="Ville *" required>
                    <br/>

                    <input
                        type="text"
                        id="tel_parent"
                        name="tel_parent"
                        placeholder="Téléphone"
                        pattern="^0\d{9}$"
                        title="Veuillez entrer un numéro de téléphone valide commençant par un 0 et suivi de 9 chiffres"
                    >
                    <br/>
                </div>

                <div id="formulaires_enfant">

                    <div id="form_enfant_template" style="display: none;">
                        <br/>

                        <h3 class="titre_enfant">Formulaire Enfant</h3>

                        <input type="text" id="nom_enfant" name="nom_enfant" placeholder="Nom *" disabled required>
                        <br/>

                        <input type="text" id="prenom_enfant" name="prenom_enfant" placeholder="Prénom *" disabled required>
                        <br/>

                        <input
                            placeholder="Date de naissance *"
                            class="textbox-n"
                            type="text"
                            onfocus="this.type='date'; if (!this.value) this.value='{{ $year }}-01-01';"
                            onblur="if (!this.value) this.type='text';"
                            id="date_naissance_enfant"
                            name="date_naissance_enfant"
                            disabled
                            required
                        >
                        <br/>

                        <select name="lycee" id="lycee_enfant" disabled required>
                            <option value="" disabled selected>Lycée *</option>
                            @foreach($lycees as $lycee)
                                <option value="{{ $lycee->id }}">{{ $lycee->nom }}</option>
                            @endforeach
                        </select>

                        <br/>

                        <div class="div_classe">
                            <select name="classe" id="classe_enfant" disabled required>
                                <option value="" disabled selected>Classe à la prochaine rentrée *</option>
                                <option value="2">Seconde</option>
                                <option value="1">Première</option>
                                <option value="0">Terminale</option>
                                <option value="3">Sortant</option>
                            </select>
                        </div>
                    </div>

                    <div id="bouton_continuer" style="display: none;">
                        <br/>
                        <button type="submit">Continuer</button>
                    </div>

                </div>

            </form>

        </div>

    </div>

@endsection