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

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

function affichepersonne(personne) {
    personne++;
    if (personne > 6 ) {
        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-3][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 id="personne_`+ personne +`_transport_arret_call" class="input_box input_text input_box_bleu">
                    <label for="personne_`+ personne +`_transport_mode">Moyen de transport * <span onclick="document.querySelector('#savoirplus_car_content`+ personne +`').classList.toggle('ouvrir')"><img class='savoirplus_icone' src="/public/images/icones/icone_infos.png" alt="icone information à cliquer"></span></label>
                    <select id="personne_`+ personne +`_transport_mode" name="personne_`+ personne +`_transport_mode" required onchange="select_personne_transport_mode(this,`+ personne +`)">
                        <option value="" selected></option>
                        <option value="car">car</option>
                        <option value="independant">independant</option>
                    </select>
                </div>
            </div>

            <section class="savoirplus_stage">
                <div id="savoirplus_car_content`+ personne +`" class="savoirplus_content displaynone">
                    <span onclick="document.querySelector('#savoirplus_car_content`+ personne +`').classList.toggle('ouvrir')"><img class='close_icone' src="/public/images/icones/icone_close.png" alt="icone information à cliquer"></span>
                    <p>Informations sur le car.</p>
                    <br>
                    <p>Aller/Retour Lyon ⇔ Carroz d’Arâches</p>
                    <br>
                    <p>DÉPART 17 août, xxh pour l'arrêt du 7 quai Lassagne, Lyon 1er</p>
                    <p>ou xx pour l'arrêt Gare de la Part Dieu, sortie Porte des Alpes</p>
                    <br>
                    <p class="rouge">PRÉVOIR UN PIQUE-NIQUE POUR LE 17 AOÛT</p>
                    <br>

                    <p>RETOUR 28 août, xxh - Arrivée à Gare de la Part Dieu vers xxh</p>
                    <p>Il est possible de prévoir un train en partance de Lyon à partir de xxh.</p>
                </div>
            </section>

            <div id="personne_`+ personne +`_instrument_activite_call" class="grid_2inputs">
                <div id="personne_`+ personne +`_profil_call" class="input_box input_text input_box_bleu">
                    <label for="personne_`+ personne +`_role">Rôle de la personne ? * <span onclick="document.querySelector('#savoirplus_profil_content`+ personne +`').classList.toggle('ouvrir')"><img class='savoirplus_icone' src="/public/images/icones/icone_infos.png" alt="icone information à cliquer"></span></label>
                    <select id="personne_`+ personne +`_role" name="personne_`+ personne +`_role" autocomplete="off" required onchange="select_personne_profil(this,`+ personne +`)">
                        <option value="" selected></option>
                        <option value="instrumentiste">Élève instrumentiste</option>
                        <option value="instrumentiste_camp">Élève instrumentiste Camp Ado (Les Flocons Verts)</option>
                        <option value="accompagnant">Accompagnant sans activité (adulte ou enfant)</option>
                        <option value="accompagnant_activite_adulte">Accompagnant adulte avec activité (18 ans et plus)</option>
                        <option value="accompagnant_activite_enfant">Accompagnant enfant avec activité (< 18 ans)</option>
                        <option value="observateur">Observateur spécifique (adulte ou professeur)</option>
                        <option value="prof_invite">Professeur invité</option>
                    </select>
                </div>
            </div>

            <section class="savoirplus_stage">
            <div id="savoirplus_profil_content`+ personne +`" class="savoirplus_content displaynone">
                <div>
                    <div onclick="document.querySelector('#savoirplus_profil_content`+ personne +`').classList.toggle('ouvrir')"><img class='close_icone' src="/public/images/icones/icone_close.png" alt="icone information à cliquer"></div>
                    <div>
                        <p>Informations sur le PROFIL</p>
                        <br>
                        <p><strong>INSTRUMENTISTE</strong> : tous les enfants qui suivent le programme du stage en violon, alto, violoncelle, piano, flûte traversière, trompette.</p>
                        <br>
                        <p><strong>INSTRUMENTISTE Camp Ado</strong> : tous les enfants de 14 à 17 ans, non accompagnés, admis au camp ado au centre des Flocons Verts, qui suivent le programme du stage en violon, alto, violoncelle, piano, flûte traversière, trompette.</p>
                        <br>
                        <p>ACCOMPAGNANT SANS ACTIVITÉ : personne qui accompagne les enfants et qui logent au Flocons Verts</p>
                        <br>
                        <p>ACCOMPAGNANT AVEC ACTIVITÉ : personne qui accompagne les enfants, qui logent au Flocons Verts ou non, et qui fait une activité.</p>
                        <br>
                        <p>OBSERVATEUR : Toute personne extérieure à la pédagogie Suzuki peut observer les leçons et assister aux
                        concerts des élèves. Ce stage constitue une source d’informations importantes pour toute personne
                        qui désire mieux connaître la pédagogie Suzuki.
                        <br>
                        L’observation des cours est gratuite pour tous les professeurs Suzuki, et stagiaires en formation Suzuki adhérents à l’AFPS.</p>
                        <p>PROFESSEUR INVITÉ : Pour les professeurs qui vont être enseignant au stage</p>
                    </div>
                </div>
            </div>
        </section>  
            
            `;

        

        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);
        
        personne++;

        return personne;
    }

}

function select_personne_transport_mode(select, personne) {
    if (select.value == "car"){
        let transport_arret_call = '#personne_'+ personne +'_transport_arret_call';
        document.querySelector(transport_arret_call).insertAdjacentHTML("afterend",
            `<div id="personne_`+ personne +`_transport_arret_display" class="input_box input_text input_box_gris">
                <label for="personne_`+ personne +`_transport_arret">Quel arrêt de car ? *</label>
                <select id="personne_`+ personne +`_transport_arret" name="personne_`+ personne +`_transport_arret" required>
                    <option value="" selected></option>
                    <option value="arret_7_quai_lassagne_lyon">7 quai Lassagne Lyon</option>
                    <option value="arret_partdieu_lyon">Gare Part Dieu Lyon</option>
                </select>
            </div>`
        );
    };
    if (select.value == "independant"){
        if (document.querySelector("#personne_"+ personne +"_transport_arret_display")){
            document.querySelector("#personne_"+ personne +"_transport_arret_display").remove();
        }
    };

};


function select_personne_profil(select, personne) { 
    if (select.value == "observateur"){

        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
        }
        if (document.querySelector(`#personne_${personne}_prise_charge_display`)) {
            document.querySelector(`#personne_${personne}_prise_charge_display`).remove();
        }
        if (document.querySelector("#personne_"+ personne +"_activite_display")){
            document.querySelector("#personne_"+ personne +"_activite_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_piece_display")){
            document.querySelector("#personne_"+ personne +"_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_prof_display")){
            document.querySelector("#personne_"+ personne +"_prof_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
        }
        
        document.querySelector('#personne_'+ personne +'_instrument_activite_call').insertAdjacentHTML("afterend",
            `<div id="personne_`+ personne +`_profil_display">
                <div class="grid_2inputs">
                    <div class="input_box input_text input_box_gris">
                        <label for="personne_`+ personne +`_profil">Profil ? *</label>
                        <select id="personne_`+ personne +`_profil" name="personne_`+ personne +`_profil" required>
                            <option value="" selected></option>
                            <option value="professeur">Vous êtes professeur Suzuki</option>
                            <option value="non_professeur">Autre</option>
                        </select>
                    </div>
                </div>
            </div>`
        );
    };
    if (select.value == "prof_invite"){
        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
        }
        if (document.querySelector(`#personne_${personne}_prise_charge_display`)) {
            document.querySelector(`#personne_${personne}_prise_charge_display`).remove();
        }
        if (document.querySelector("#personne_"+ personne +"_activite_display")){
            document.querySelector("#personne_"+ personne +"_activite_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_profil_display")){
            document.querySelector("#personne_"+ personne +"_profil_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_piece_display")){
            document.querySelector("#personne_"+ personne +"_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_prof_display")){
            document.querySelector("#personne_"+ personne +"_prof_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_decouvrealto_display")){
            document.querySelector("#personne_"+ personne +"_decouvrealto_display").remove();
        }
    };

    if (select.value == "instrumentiste"){

        if (document.querySelector("#personne_"+ personne +"_profil_display")){
            document.querySelector("#personne_"+ personne +"_profil_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_activite_display")){
            document.querySelector("#personne_"+ personne +"_activite_display").remove();
        }

        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_piece_display")){
            document.querySelector("#personne_"+ personne +"_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_prof_display")){
            document.querySelector("#personne_"+ personne +"_prof_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_decouvrealto_display")){
            document.querySelector("#personne_"+ personne +"_decouvrealto_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
        }

        document.querySelector('#personne_'+ personne +'_instrument_activite_call').insertAdjacentHTML("afterend",
            `<div id="personne_`+ personne +`_instrument_display">
                <div class="grid_2inputs">
                    <div id="personne_`+ personne +`_cahier_display" class="input_box input_text input_box_gris">
                        <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="piano">Piano</option>
                            <option value="violon">Violon</option>
                            <option value="violoncelle">Violoncelle</option>
                        </select>
                    </div>`
        );

        document.querySelector('#personne_'+ personne +'_instrument_display').insertAdjacentHTML("afterend",
                `<div id="personne_`+ personne +`_piece_display" class="grid_2inputs">
                    <div class="input_box input_text input_box_gris">
                            <label for="personne_`+ personne +`_piece">Nom de la dernière pièce jouée *</label>
                            <input type="text" name="personne_`+ personne +`_piece" id="personne_`+ personne +`_piece" required>
                        </div>
                    </div>
                </div>

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



                <div id="personne_`+ personne +`_option_concertsolo_piece_call" class="grid_2inputs">
                    <div class="input_box input_text input_box_bleu">
                        <label for="personne_`+ personne +`_option_concertsolo">Option concert solo *</label>
                        <select id="personne_`+ personne +`_option_concertsolo" name="personne_`+ personne +`_option_concertsolo" required onchange="select_personne_option_concertsolo(this,`+ personne +`)">
                            <option value="" selected></option>
                            <option value="concert solo">oui</option>
                            <option value="non">non</option>
                        </select>
                    </div>
                    
                </div>

            </div>`
        );

        document.querySelector('#personne_'+ personne +'_instrument_display').insertAdjacentHTML("beforebegin",
        `<!-- Checkbox pour la prise en charge par une autre famille -->
        <div id="personne_`+ personne +`_prise_charge_display" class="input_checkbox input_checkbox_green">
                <input type="checkbox" class="" id="personne_`+ personne +`_prise_charge" name="personne_`+ personne +`_prise_charge" onchange="togglePriseEnCharge(`+ personne +`)">
                <label for="personne_`+ personne +`_prise_charge" class="color_green">Mon enfant sera pris en charge par une <strong>autre famille</strong> participant au stage</label>
        </div>

        <!-- Champ caché pour entrer le nom de la famille -->
        <div id="personne_`+ personne +`_nom_famille_display" class="grid_2inputs" style="display: none;">
            <div class="input_box input_text input_box_green">
                <label for="personne_`+ personne +`_prise_charge_nom">Famille d'accueil *</label>
                <input type="text" id="personne_`+ personne +`_prise_charge_nom" 
                    name="personne_`+ personne +`_prise_charge_nom" 
                    placeholder="Nom et prénom de l'adhérent accueillant">
            </div>
        </div>`);
    };

    if (select.value == "instrumentiste_camp"){

        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
        }
        if (document.querySelector(`#personne_${personne}_prise_charge_display`)) {
            document.querySelector(`#personne_${personne}_prise_charge_display`).remove();
        }
        if (document.querySelector("#personne_"+ personne +"_piece_display")){
            document.querySelector("#personne_"+ personne +"_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_prof_display")){
            document.querySelector("#personne_"+ personne +"_prof_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_decouvrealto_display")){
            document.querySelector("#personne_"+ personne +"_decouvrealto_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_activite_display")){
            document.querySelector("#personne_"+ personne +"_activite_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_profil_display")){
            document.querySelector("#personne_"+ personne +"_profil_display").remove();
        }

        document.querySelector('#personne_'+ personne +'_instrument_activite_call').insertAdjacentHTML("afterend",
            `<div id="personne_`+ personne +`_instrument_display">
                <div class="grid_2inputs">
                    <div id="personne_`+ personne +`_cahier_display" class="input_box input_text input_box_gris">
                        <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="piano">Piano</option>
                            <option value="violon">Violon</option>
                            <option value="violoncelle">Violoncelle</option>
                        </select>
                    </div>`
        );

        document.querySelector('#personne_'+ personne +'_instrument_display').insertAdjacentHTML("afterend",
                `<div id="personne_`+ personne +`_piece_display" class="grid_2inputs">
                    <div class="input_box input_text input_box_gris">
                            <label for="personne_`+ personne +`_piece">Nom de la dernière pièce jouée *</label>
                            <input type="text" name="personne_`+ personne +`_piece" id="personne_`+ personne +`_piece" required>
                        </div>
                    </div>
                </div>

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



                <div id="personne_`+ personne +`_option_concertsolo_piece_call" class="grid_2inputs">
                    <div class="input_box input_text input_box_bleu">
                        <label for="personne_`+ personne +`_option_concertsolo">Option concert solo *</label>
                        <select id="personne_`+ personne +`_option_concertsolo" name="personne_`+ personne +`_option_concertsolo" required onchange="select_personne_option_concertsolo(this,`+ personne +`)">
                            <option value="" selected></option>
                            <option value="concert solo">oui</option>
                            <option value="non">non</option>
                        </select>
                    </div>
                    
                </div>
            </div>`
        );
    };

    if (select.value == "accompagnant_activite_adulte"){
    
        if (document.querySelector(`#personne_${personne}_instrument_display`)) {
            document.querySelector(`#personne_${personne}_instrument_display`).remove();
        }
        if (document.querySelector(`#personne_${personne}_prise_charge_display`)) {
            document.querySelector(`#personne_${personne}_prise_charge_display`).remove();
        }
        if (document.querySelector(`#personne_${personne}_piece_display`)) {
            document.querySelector(`#personne_${personne}_piece_display`).remove();
        }
        if (document.querySelector(`#personne_${personne}_prof_display`)) {
            document.querySelector(`#personne_${personne}_prof_display`).remove();
        }
        if (document.querySelector(`#personne_${personne}_option_concertsolo_piece_display`)) {
            document.querySelector(`#personne_${personne}_option_concertsolo_piece_display`).remove();
        }
        if (document.querySelector(`#personne_${personne}_coursindividuel_display`)) {
            document.querySelector(`#personne_${personne}_coursindividuel_display`).remove();
        }
        if (document.querySelector(`#personne_${personne}_decouvrealto_display`)) {
            document.querySelector(`#personne_${personne}_decouvrealto_display`).remove();
        }
        if (document.querySelector(`#personne_${personne}_option_concertsolo_piece_call`)) {
            document.querySelector(`#personne_${personne}_option_concertsolo_piece_call`).remove();
        }
        if (document.querySelector(`#personne_${personne}_activite_display`)) {
            document.querySelector(`#personne_${personne}_activite_display`).remove();
        }
        if (document.querySelector(`#personne_${personne}_profil_display`)) {
            document.querySelector(`#personne_${personne}_profil_display`).remove();
        }
    
        let selectHTML = `<div id="personne_`+ personne +`_activite_display">`;
        for (let i = 1; i <= 4; i++) {
            selectHTML += `
                <div class="grid_2inputs">
                    <div id="personne_${personne}_activite_${i}_display" class="input_box input_text input_box_bleu">
                        <label for="personne_${personne}_activite_${i}">Option activité ${i}</label>
                        <select id="personne_${personne}_activite_${i}" name="personne_${personne}_activite_${i}" onchange="handleActivitySelection(this, ${personne}, ${i})">
                            <option value="" selected></option>
                            <option value="chant">Chant choral offert</option>
                            <option value="dalcroze">Rythmique Dalcroze</option>
                            <option value="cours_collectif_suzuki_acc">Cours collectif Suzuki</option>
                            <option value="cours_particulier">Cours particuliers</option>
                        </select>
                    </div>
                </div>
            `;
        }
        selectHTML += `</div>`;
        document.querySelector('#personne_'+ personne +'_instrument_activite_call').insertAdjacentHTML("afterend",
            selectHTML
        );
    };

    

    

    if (select.value == "accompagnant_activite_enfant"){

        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
        }
        if (document.querySelector(`#personne_${personne}_prise_charge_display`)) {
            document.querySelector(`#personne_${personne}_prise_charge_display`).remove();
        }
        if (document.querySelector("#personne_"+ personne +"_piece_display")){
            document.querySelector("#personne_"+ personne +"_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_prof_display")){
            document.querySelector("#personne_"+ personne +"_prof_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_decouvrealto_display")){
            document.querySelector("#personne_"+ personne +"_decouvrealto_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_activite_display")){
            document.querySelector("#personne_"+ personne +"_activite_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_profil_display")){
            document.querySelector("#personne_"+ personne +"_profil_display").remove();
        }

        let selectHTML = `<div id="personne_`+ personne +`_activite_display">`;
        for (let i = 1; i <= 5; i++) {
            selectHTML += `
                <div class="grid_2inputs">
                    <div id="personne_${personne}_activite_${i}_display" class="input_box input_text input_box_bleu">
                        <label for="personne_${personne}_activite_${i}">Option activité ${i}</label>
                        <select id="personne_${personne}_activite_${i}" name="personne_${personne}_activite_${i}" onchange="handleActivitySelection(this, ${personne}, ${i})">
                            <option value="" selected></option>
                            <option value="eveil">Éveil musical Suzuki (0 - 3 ans)</option>
                            <option value="chant">Chant choral (4 - 11 ans)</option>
                            <option value="chant">Chant choral offert (12 ans et plus)</option>
                            <option value="dalcroze">Rythmique Dalcroze (4 - 17 ans)</option>
                            <option value="atelier_mus_ens_acc">Atelier musique d'ensemble</option>
                        </select>
                    </div>
                </div>
            `;
        }
        selectHTML += `</div>`;

        document.querySelector('#personne_'+ personne +'_instrument_activite_call').insertAdjacentHTML("afterend",
            selectHTML
        );
    };

    if (select.value == "accompagnant"){
        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
        }
        if (document.querySelector(`#personne_${personne}_prise_charge_display`)) {
            document.querySelector(`#personne_${personne}_prise_charge_display`).remove();
        }
        if (document.querySelector("#personne_"+ personne +"_activite_display")){
            document.querySelector("#personne_"+ personne +"_activite_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_profil_display")){
            document.querySelector("#personne_"+ personne +"_profil_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_piece_display")){
            document.querySelector("#personne_"+ personne +"_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_prof_display")){
            document.querySelector("#personne_"+ personne +"_prof_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_decouvrealto_display")){
            document.querySelector("#personne_"+ personne +"_decouvrealto_display").remove();
        }
    };

    if (!select.value){
        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
        }
        if (document.querySelector(`#personne_${personne}_prise_charge_display`)) {
            document.querySelector(`#personne_${personne}_prise_charge_display`).remove();
        }
        if (document.querySelector("#personne_"+ personne +"_activite_display")){
            document.querySelector("#personne_"+ personne +"_activite_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_profil_display")){
            document.querySelector("#personne_"+ personne +"_profil_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_piece_display")){
            document.querySelector("#personne_"+ personne +"_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_prof_display")){
            document.querySelector("#personne_"+ personne +"_prof_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_decouvrealto_display")){
            document.querySelector("#personne_"+ personne +"_decouvrealto_display").remove();
        }
    };


};

function handleActivitySelection(select, personne, activiteIndex) {
    let activiteValue = select.value;
    
    // Sélectionne le conteneur où ajouter les informations complémentaires
    let activiteContainer = document.querySelector(`#personne_${personne}_activite_${activiteIndex}_display`);
    
    
    // Supprime l'ancien complément d'information pour cette activité (évite doublons)
    let existingInfo = document.querySelector("#personne_" + personne + "_complement_" + activiteIndex);
    if (existingInfo) {
        existingInfo.remove();
    }

    // Vérifie si on doit afficher un complément d'information
    if (activiteValue === "cours_particulier") {
        activiteContainer.insertAdjacentHTML("afterend", `
            <div id="personne_${personne}_complement_${activiteIndex}" class="input_box input_text input_box_bleu">
                <label for="personne_${personne}_instrument">Instrument pour cours particuliers</label>
                <select id="personne_${personne}_instrument" name="personne_${personne}_instrument">
                    <option value="" selected></option>
                    <option value="alto">Alto</option>
                    <option value="piano">Piano</option>
                    <option value="violon">Violon</option>
                    <option value="violoncelle">Violoncelle</option>
                </select>
            </div>
        `);
    } else if (activiteValue === "atelier_mus_ens_acc") {
        activiteContainer.insertAdjacentHTML("afterend", `
            <div id="personne_${personne}_complement_${activiteIndex}" class="input_box input_text input_box_bleu">
                <label for="personne_${personne}_instrument_ensemble">Instrument pour musique d'ensemble</label>
                <input type="text" id="personne_${personne}_instrument_ensemble" 
                       name="personne_${personne}_instrument_ensemble">
            </div>
        `);
    } else if (activiteValue === "cours_collectif_suzuki_acc") {
        activiteContainer.insertAdjacentHTML("afterend", `
            <div id="personne_${personne}_complement_${activiteIndex}" class="input_box input_text input_box_bleu">
                <label for="personne_${personne}_instrument_collectif">Instrument pour cours collectif</label>
                <input type="text" id="personne_${personne}_instrument_collectif" 
                       name="personne_${personne}_instrument_collectif">
            </div>
        `);
    }
}

function togglePriseEnCharge(personne) {
    let checkbox = document.querySelector("#personne_" + personne + "_prise_charge");
    let nomFamilleDiv = document.querySelector("#personne_" + personne + "_nom_famille_display");

    if (checkbox.checked) {
        nomFamilleDiv.style.display = "block"; // Affiche le champ si la checkbox est cochée
    } else {
        nomFamilleDiv.style.display = "none"; // Cache le champ si la checkbox est décochée
        document.querySelector("#personne_" + personne + "_prise_charge_nom").value = ""; // Réinitialise le champ
    }
}

function select_cahier(select, personne) {
    if (select.value == "alto") {
        if (document.querySelector("#select_personne_"+ personne +"cahier_display")){
            document.querySelector("#select_personne_"+ personne +"cahier_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_decouvrealto_display")){
            document.querySelector("#personne_"+ personne +"_decouvrealto_display").remove();
        }
        document.querySelector('#personne_'+ personne +'_cahier_display').insertAdjacentHTML("afterend",
            `<div id="select_personne_`+ personne +`cahier_display" class="input_box input_text input_box_gris">
                <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>
                </select>
            </div>`
        );
    } else {
        if (document.querySelector("#select_personne_"+ personne +"cahier_display")){
            document.querySelector("#select_personne_"+ personne +"cahier_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
        }
        if (document.querySelector("#personne_"+ personne +"_decouvrealto_display")){
            document.querySelector("#personne_"+ personne +"_decouvrealto_display").remove();
        }
        document.querySelector('#personne_'+ personne +'_cahier_display').insertAdjacentHTML("afterend",
            `<div id="select_personne_`+ personne +`cahier_display" class="input_box input_text input_box_gris">
                <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>`
        );
    }

    // OPTION COURS INDIVIDUEL POUR ALTO, VIOLON, VILONCELLE, Trompette et flûte traversière
    if (select.value == "alto" || select.value == "violon" ||select.value == "violoncelle" ||select.value == "flute traversière" ||select.value == "trompette" ) {
        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
        }
        document.querySelector('#personne_'+ personne +'_option_concertsolo_piece_call').insertAdjacentHTML("beforebegin",
            `<div id="personne_`+ personne +`_coursindividuel_display" class="grid_2inputs">
                <div class="input_box input_text input_box_bleu">
                    <label for="personne_`+ personne +`_option_coursindividuel">Option cours particulier *</label>
                    <select id="personne_`+ personne +`_option_coursindividuel" name="personne_`+ personne +`_option_coursindividuel" required>
                        <option value="" selected></option>
                        <option value="cours individuel">oui</option>
                        <option value="non">non</option>
                    </select>
                </div>
            </div>`
        );
    }

};


function select_personne_option_concertsolo (select, personne) {
    if (select.value == "concert solo"){
        document.querySelector('#personne_'+ personne +'_option_concertsolo_piece_call').insertAdjacentHTML("afterend",
            `<div id="personne_`+ personne +`_option_concertsolo_piece_display" class="grid_2inputs">
                <div class="input_box input_text input_box_gris">
                    <label for="personne_`+ personne +`_option_concertsolo_piece">Pièce choisie *</label>
                    <input type="text" name="personne_`+ personne +`_option_concertsolo_piece" id="personne_`+ personne +`_option_concertsolo_piece" required>
                </div>
                <div class="input_box input_text input_box_gris">
                    <label for="personne_`+ personne +`_option_concertsolo_cahier">Cahier *</label>
                    <select id="personne_`+ personne +`_option_concertsolo_cahier" name="personne_`+ personne +`_option_concertsolo_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>
                    <option value="Hors cahier">Hors cahier</option>
                    </select>
                    </div>    
            </div>`
        );
    };
    if (select.value == "non"){
        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
        }
    };
};


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