// STAGE NATIONAL
// REMPLIR LE FORMULAIRE
// PARAGRAPHE PERSONNE
// POUR 6 Personnes

var personne = "0";
console.log("personne : ",personne);
window.onload = affichepersonne(personne);
function ajout_personne(personne) {
    
    console.log("personne : ",personne);
    affichepersonne(personne);
}

function affichepersonne(personne) {
    console.log("affichepersonne personne : ",personne);
    personne++;
    console.log("affiche personne personne incrémenté : ",personne);


    if (personne > 6 ) {
        console.log("6 personnes maximum");
        return;
    }



    // Ce if sert pour ne pas répéter plusieurs fois le même numéro de personne si l'internaute clique plusieurs fois sur le même "ajouter une personne"
    if (!document.querySelector('#personne'+ personne +'')) {

        let contenuhtml_personne = `<section id="personne`+ personne +`" class="personne">

            <h2><img class='icone_titre' src="/public/images/icones/icone_personne.png" alt="icone information à cliquer">PERSONNE <span class="rouge numero">`+ personne +`</span>`;
        
            if (personne > 1) {
                contenuhtml_personne += ` <span class="remove_personne"><input class="input_suppr" type="checkbox" name="check_personne_delete`+ personne +`" id="check_personne_delete`+ personne +`" onchange="supprimer_personne(`+ personne +`)"><label class="label_suppr" for="check_personne_delete`+ personne +`">Supprimer cette personne</label></span>`;
            };

            contenuhtml_personne += `</h2>

            <div class="grid_2inputs">
                <div class="input_box input_text input_box_gris">
                <label for="personne_`+ personne +`_nom">Nom de famille *</label>
                <input type="text" name="personne_`+ personne +`_nom" id="personne_`+ personne +`_nom" required>
                </div>

                <div class="input_box input_text input_box_gris">
                <label for="personne_`+ personne +`_prenom">Prénom *</label>
                <input type="text" name="personne_`+ personne +`_prenom" id="personne_`+ personne +`_prenom" required>
                </div>
            </div>

            <div class="grid_2inputs">
                <div class="input_box input_text input_box_gris">
                    <label for="personne_`+ personne +`_datenaissance">Date de naissance * (jj/mm/aaaa)</label>
                    <input type="text" name="personne_`+ personne +`_datenaissance" id="personne_`+ personne +`_datenaissance" placeholder="01/01/1999" pattern="[0-2][0-9]/[0-1][0-9]/[1-2][0-9][0-9][0-9]" minlength="10" maxlength="10" title="le format de date doit être jj/mm/aaaa" required>
                </div>
            </div>


            <div class="grid_2inputs">
                <div class="input_box input_text input_box_bleu">
                    <label for="personne_`+ personne +`_prof">Nom professeur *</label>
                    <input type="text" name="personne_`+ personne +`_prof" id="personne_`+ personne +`_prof" required>
                </div>
            </div>

            <div class="grid_2inputs">
                <div class="input_box input_text input_box_bleu">
                    <label for="personne_`+ personne +`_instrument">Instrument *</label>
                    <select id="personne_`+ personne +`_instrument" name="personne_`+ personne +`_instrument" required onchange="select_cahier(this,`+ personne +`)">
                        <option value="" selected></option>
                        <option value="alto">Alto</option>
                        <option value="harpe">Harpe</option>
                        <option value="violon">Violon</option>
                        <option value="violoncelle">Violoncelle</option>
                    </select>
                </div>
                <div class="input_box input_text input_box_bleu">
                    <label for="personne_`+ personne +`_cahier">Niveau Cahier *</label>
                    <select id="personne_`+ personne +`_cahier" name="personne_`+ personne +`_cahier" required>
                    <option value="" selected></option>
                    <option value="Cahier 1">Cahier 1</option>
                    <option value="Cahier 2">Cahier 2</option>
                    <option value="Cahier 3">Cahier 3</option>
                    <option value="Cahier 4">Cahier 4</option>
                    <option value="Cahier 5">Cahier 5</option>
                    <option value="Cahier 6">Cahier 6</option>
                    <option value="Cahier 7">Cahier 7</option>
                    <option value="Cahier 8">Cahier 8</option>
                    <option value="Cahier 9">Cahier 9</option>
                    <option value="Cahier 10">Cahier 10</option>
                    </select>
                </div>
            </div>


            <div class="grid_2inputs">
                <div class="input_box input_text input_box_bleu">
                    <label for="personne_`+ personne +`_piece">Pièces récentes*</label>
                    <input type="text" name="personne_`+ personne +`_piece" id="personne_`+ personne +`_piece" required>
                </div>
            </div>
            
            `;

        

        if (personne < 6) {
            contenuhtml_personne += "<!-- ---------------------------------- -->"+
            `<!-- Voulez-vous ajouter une autre personne ? -->`+
            `<!-- ---------------------------------- -->`+
            `<div class="input_checkbox">`+
            `<input type="checkbox" name="check_personne`+ personne +`" id="check_personne`+ personne +`" onchange="ajout_personne(`+ personne +`)">`+
            `<label for="check_personne`+ personne +`">Voulez-vous ajouter une autre personne au stage ?</label>`+
            `</div>`
        };

        contenuhtml_personne += `</section>`;
        
        
        personne--;
        document.querySelector('#personne'+ personne +'').insertAdjacentHTML("afterend",contenuhtml_personne);
        
        console.log("personne à la fin de la fonction : ",personne);
        personne++;

        return personne;
    }

}


function supprimer_personne(personne) {
    document.querySelector('#personne'+ personne +'').remove();
}