@extends('layouts.app')

@section('content')

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

    <div class="container centered">

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

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

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

    <div id="options_un"  style="display: none;">
        <select name="type_inscription" id="type_inscription">
            <option value="" disabled="true" selected="true">Choississez 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>


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

<div id="options_plusieurs" style="display: none;">

<select name="nombre_enfant" id="nombre_enfant">
  <option value="" disabled="true" selected="true">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> Attention <p>
<p> Ayant plusieurs enfants, vous ne pourrez pas passer la commande ni effectuer le paiement en ligne.</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="true" selected="true">Civilité *</option>
        <option value="M">Monsieur</option>
        <option value="Mme">Madame</option>
    </select>

    <br/>

    <input type="text" id="nom" name="nom_parent" placeholder="Nom *" required>
    <br/>
    <input type="text" id="prenom" name="prenom_parent" placeholder="Prénom *" required>
    <br/>
    <input type="text" id="adresse" name="adresse_parent" placeholder="Adresse *" required>
    <br/>
    <input type="text" id="code_postal" name="code_postal_parent" placeholder="Code postal *" required>
    <br/>
    <input type="text" id="ville" name="ville_parent" placeholder="Ville *" required>
    <br/>
    <input type="text" id="tel" 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" style="display: none;">
    <br/>
    <h3>Formulaire Enfant</h3>
    <input type="text" id="nom" name="nom_enfant" placeholder="Nom *" >
    <br/>
    <input type="text" id="prenom" name="prenom_enfant" placeholder="Prénom *" >
    <br/>
    <input placeholder="Date de naissance *" class="textbox-n" type="text" onfocus="(this.type='date') (this.value='2009-01-01')" onblur="(this.type='text')" id="date_naissance_enfant" name="date_naissance_enfant" />
    <br/>
    @php
        use App\Models\Lycee;
        $lycees = Lycee::all();
    @endphp
    <select name="lycee" id="lycee" required>
        <option value="" disabled="true" selected="true">Lycée *</option>
        @foreach($lycees as $lycee)
        <option value="{{ $lycee->id }}">{{ $lycee->nom }}</option>
        @endforeach
    </select>
    <br/>

    <div id="div_classe">
    <select name="classe" id="classe">
        <option value="" disabled="true" selected="true">Classe à la prochaine rentrée *</option>
        <option value="2">Seconde</option>
        <option value="1">Première</option>
        <option value="0">Terminale</option>
    </select>
    </div>
    <br/>
    <input type="text" id="tel" name="tel_enfant" 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/>
    <input type="email" id="email" name="email_enfant" placeholder="Email" pattern='(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))' title="Veuillez entrer un email valide">
    <br/>
    <select name="LVA" id="LVA" >
    <option value="" disabled="true" selected="true">Langue Vivante A *</option>
    <!-- Options will be dynamically populated -->
</select>
<br/>

<select name="LVB" id="LVB" >
    <option value="" disabled="true" selected="true">Langue Vivante B *</option>
    <!-- Options will be dynamically populated -->
</select>
<br/>

<!-- Similar updates needed for specialities and options -->
<div name="specialites" id="specialites">
    <select name="spe1" id="spe1">
        <option value="" disabled="true" selected="true">Spécialité n°1 *</option>
    </select>
    <br/>
    <select name="spe2" id="spe2">
        <option value="" disabled="true" selected="true">Spécialité n°2 *</option>
    </select>
    <br/>
    <div name="specialite3" id="specialite3">
        <select name="spe3" id="spe3">
            <option value="" disabled="true" selected="true">Spécialité n°3 *</option>
        </select>
        <br/>
    </div>
</div>
    <h3>Options suivies :</h3>
    <div id="options_lycee">

    </div>
    <hr>
    </div>
    </div>

    <div id="paiement" style="display: none;">
    <h3>Paiement * : </h3>
    <input type="radio" id="en_ligne" name="payer" value="en_ligne">
    <label for="en_ligne" > <strong> Je souhaite régler le paiement des manuels en ligne <br>
        (Un seul rendez-vous est nécessaire, je n'aurai pas à me déplacer en juillet mais seulement en août) </strong></label><br>
    <input type="radio" id="sur_place" name="payer" value="sur_place">
    <label for="sur_place"><strong>Je souhaite régler le paiement des manuels sur place <br>(Deux rendez-vous sont nécessaires, un pour acheter les manuels en juillet et un pour les récupérer en août) </strong></label><br>
    </label><br>
    </div>

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

    </form>
@endsection