// ADHESION AFPS
// REMPLIR LE FORMULAIRE POUR LES PROF (diplome ou formation)

console.log("On est dans le fichier adhesion_prof.js (de PUBLIC)");

/////////////////////////////////////////
// VARIABLE

const regionsEcolesProfOptions = `
                    <option value="" selected></option>
                    <option value="Auvergne-Rhône-Alpes">Auvergne-Rhône-Alpes</option>
                    <option value="Bourgogne-Franche-Comté">Bourgogne-Franche-Comté</option>
                    <option value="Bretagne">Bretagne</option>
                    <option value="Centre-Val de Loire">Centre-Val de Loire</option>
                    <option value="Corse">Corse</option>
                    <option value="Espagne">Espagne</option>
                    <option value="Grand Est">Grand Est</option>
                    <option value="Hauts-de-France">Hauts-de-France</option>
                    <option value="Île-de-France">Île-de-France</option>
                    <option value="Normandie">Normandie</option>
                    <option value="Nouvelle-Aquitaine">Nouvelle-Aquitaine</option>
                    <option value="Occitanie">Occitanie</option>
                    <option value="Pays de la Loire">Pays de la Loire</option>
                    <option value="Provence-Alpes-Côte d'Azur">Provence-Alpes-Côte d'Azur</option>
                    <option value="Guadeloupe">Guadeloupe</option>
                    <option value="Martinique">Martinique</option>
                    <option value="Guyane">Guyane</option>
                    <option value="La Réunion">La Réunion</option>
                    <option value="Luxembourg">Luxembourg</option>
                    <option value="Mayotte">Mayotte</option>
                    <option value="Polynésie française">Polynésie française</option>
                    <option value="Nouvelle-Calédonie">Nouvelle-Calédonie</option>
                    <option value="Saint-Pierre-et-Miquelon">Saint-Pierre-et-Miquelon</option>
                    <option value="Wallis-et-Futuna">Wallis-et-Futuna</option>
                    <option value="Saint-Martin">Saint-Martin</option>
                    <option value="Saint-Barthélemy">Saint-Barthélemy</option>
                    <option value="Suisse">Suisse</option>
`;


/////////////////////////////////////////
// SAISIE DES INFORMATIONS POUR UN DIPLOME
/////////////////////////////////////////
// quand le visiteur clique sur "ajouter un diplôme"

function ajout_prof_diplome(checkboxElem) {
    // si box diplome checked on affiche
    if (checkboxElem.checked) {
        affiche_prof_diplome();
    } else {
        // si box diplome unchecked on supprime
        remove_prof_diplome();
    }
}

// AFFICHER LA SAISIE DES INFORMATIONS POUR LE DIPLOME
function affiche_prof_diplome() {
    console.log("On est dans function affiche_prof_diplome");

    contenuhtml_diplome = `
    <div id="diplome1">
        <div class="grid_2inputs">
            <div class="input_box input_text input_box_bleu">
                <label for="adherent_prof_instrument1">Instrument*</label>
                <select id="adherent_prof_instrument1" name="adherent_prof_instrument1" required>
                    <option value="" selected></option>
                    <option value="Alto">Alto</option>
                    <option value="Contrebasse">Contrebasse</option>
                    <option value="Flûte traversière">Flûte traversière</option>
                    <option value="Guitare">Guitare</option>
                    <option value="Harpe">Harpe</option>
                    <option value="Orgue">Orgue</option>
                    <option value="Piano">Piano</option>
                    <option value="Trompette">Trompette</option>
                    <option value="Violon">Violon</option>
                    <option value="Violoncelle">Violoncelle</option>
                </select>
            </div>

            <div class="input_box input_text input_box_bleu">
                <label for="adherent_prof_instrument1_esa">Niveau ESA Obtenu*</label>
                <select id="adherent_prof_instrument1_esa" name="adherent_prof_instrument1_esa" required>
                    <option value="" selected></option>
                    <option value="Niveau 1">Niveau 1</option>
                    <option value="Niveau 2">Niveau 2</option>
                    <option value="Niveau 3">Niveau 3</option>
                    <option value="Niveau 4">Niveau 4</option>
                    <option value="Niveau 5">Niveau 5</option>
                    <option value="Instructeur 1">Instructeur (année 1)</option>
                    <option value="Instructeur 2">Instructeur (année 2)</option>
                    <option value="Formateur">Formateur</option>
                </select>
            </div>

            <div class="input_box input_text input_box_bleu">
                <label for="adherent_prof_instrument2">Deuxième instrument</label>
                <select id="adherent_prof_instrument2" name="adherent_prof_instrument2">
                    <option value="" selected></option>
                    <option value="Alto">Alto</option>
                    <option value="Contrebasse">Contrebasse</option>
                    <option value="Flûte traversière">Flûte traversière</option>
                    <option value="Guitare">Guitare</option>
                    <option value="Harpe">Harpe</option>
                    <option value="Orgue">Orgue</option>
                    <option value="Piano">Piano</option>
                    <option value="Trompette">Trompette</option>
                    <option value="Violon">Violon</option>
                    <option value="Violoncelle">Violoncelle</option>
                </select>
            </div>

            <div class="input_box input_text input_box_bleu">
                <label for="adherent_prof_instrument2_esa">Niveau ESA Obtenu</label>
                <select id="adherent_prof_instrument2_esa" name="adherent_prof_instrument2_esa">
                    <option value="" selected></option>
                    <option value="Niveau 1">Niveau 1</option>
                    <option value="Niveau 2">Niveau 2</option>
                    <option value="Niveau 3">Niveau 3</option>
                    <option value="Niveau 4">Niveau 4</option>
                    <option value="Niveau 5">Niveau 5</option>
                    <option value="Instructeur 1">Instructeur (année 1)</option>
                    <option value="Instructeur 2">Instructeur (année 2)</option>
                    <option value="Formateur">Formateur</option>
                </select>
            </div>

            <div class="input_box input_text input_box_bleu">
                <label for="adherent_prof_sece">Diplômé SECE (Early Childhood)* <span onclick="document.querySelector('#savoirplus_SECE').classList.toggle('ouvrir')"><img class='savoirplus_icone' src="/public/images/icones/icone_infos.png" alt="icone information à cliquer"></span></label>
                <select id="adherent_prof_sece" name="adherent_prof_sece" required>
                    <option value="" selected></option>
                    <option value="oui">Oui</option>
                    <option value="non">Non</option>
                </select>
            </div>
        </div>
        <section class="savoirplus_stage">
        <div id="savoirplus_SECE" class="savoirplus_content displaynone">
            <span onclick="document.querySelector('#savoirplus_SECE').classList.toggle('ouvrir')"><img class='close_icone' src="/public/images/icones/icone_close.png" alt="icone information à cliquer"></span>
            <p class="rouge">SECE = Suzuki Early Childhood Education</p>
            <br>
            <p>Etes-vous diplômé de SECE ?</p>
            <br>
            <p>Sélectionner "oui" si vous avez le diplôme SECE.</p>
            <p></p>
            <br>
        </div>
    </section>


        <div class="explication_pleine_page">
            <p>Renseigner jusqu'à 3 <strong>écoles</strong> de musique, <strong>classes</strong> ou <strong>lieux</strong> dans lesquelles vous enseignez la pédagogie Suzuki</p>
            <p>Le premier lieu servira de référence pour l'affichage sur la carte de géolocalisation des professeurs du site de l'AFPS. La saisie de la ville et du code postal est importante.</p>
        </div>

        <div class="grid_3inputs">
            <div class="input_box input_text input_box_bleu">
                <label for="adherent_prof_ecole1">École / classe / lieu [1]*</label>
                <input type="text" name="adherent_prof_ecole1" id="adherent_prof_ecole1" placeholder="Lieu dans lequel vous enseignez" required>
            </div>

            <div class="input_box input_text input_box_gris">
                <label for="adherent_prof_ecole1_mail">Mail</label>
                <input type="text" name="adherent_prof_ecole1_mail" id="adherent_prof_ecole1_mail">
            </div>

            <div class="input_box input_text input_box_gris">
                <label for="adherent_prof_ecole1_web">Site internet</label>
                <input type="text" name="adherent_prof_ecole1_web" id="adherent_prof_ecole1_web">
            </div>

            <div class="input_box input_text input_box_gris">
                <label for="adherent_prof_ecole1_adresse">Adresse*</label>
                <input type="text" name="adherent_prof_ecole1_adresse" id="adherent_prof_ecole1_adresse" required>
            </div>

            <div class="input_box input_text input_box_gris">
                <label for="adherent_prof_ecole1_cp">Code postal*</label>
                <input type="text" name="adherent_prof_ecole1_cp" id="adherent_prof_ecole1_cp" placeholder="Important pour le référencement dans l'annuaire" required>
            </div>

            <div class="input_box input_text input_box_gris">
                <label for="adherent_prof_ecole1_ville">Ville*</label>
                <input type="text" name="adherent_prof_ecole1_ville" id="adherent_prof_ecole1_ville" placeholder="Important pour le référencement dans l'annuaire" required>
            </div>

            <div class="input_box input_text input_box_gris">
                <label for="adherent_prof_ecole1_region">Région*</label>
                <select id="adherent_prof_ecole1_region" name="adherent_prof_ecole1_region" required>
${regionsEcolesProfOptions}
                </select>
            </div>
        </div>


        <div id="ajout_ecole2" class="ajout_ecole_button">
            <p onclick="ajout_ecole(2)">Vous souhaitez ajouter une autre école </p>
        </div>


        <div id="ajout_ecole2_content" class="hidden">
            <div class="grid_3inputs">
                <div class="input_box input_text input_box_bleu">
                    <label for="adherent_prof_ecole2">École / classe [2]</label>
                    <input type="text" name="adherent_prof_ecole2" id="adherent_prof_ecole2" placeholder="Dans laquelle vous enseignez">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole2_mail">Mail</label>
                    <input type="text" name="adherent_prof_ecole2_mail" id="adherent_prof_ecole2_mail">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole2_web">Site internet</label>
                    <input type="text" name="adherent_prof_ecole2_web" id="adherent_prof_ecole2_web">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole2_adresse">Adresse</label>
                    <input type="text" name="adherent_prof_ecole2_adresse" id="adherent_prof_ecole2_adresse">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole2_cp">Code postal</label>
                    <input type="text" name="adherent_prof_ecole2_cp" id="adherent_prof_ecole2_cp">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole2_ville">Ville</label>
                    <input type="text" name="adherent_prof_ecole2_ville" id="adherent_prof_ecole2_ville">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole2_region">Région</label>
                    <select id="adherent_prof_ecole2_region" name="adherent_prof_ecole2_region">
${regionsEcolesProfOptions}
                    </select>
                </div>
            </div>

            <div id="ajout_ecole3" class="ajout_ecole_button">
                <p onclick="ajout_ecole(3)">Vous souhaitez ajouter une autre école </p>
            </div>

            <div id="ajout_ecole3_content" class="grid_3inputs hidden">

                <div class="input_box input_text input_box_bleu">
                    <label for="adherent_prof_ecole3">École / classe [3]</label>
                    <input type="text" name="adherent_prof_ecole3" id="adherent_prof_ecole3" placeholder="Dans laquelle vous enseignez">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole3_mail">Mail</label>
                    <input type="text" name="adherent_prof_ecole3_mail" id="adherent_prof_ecole3_mail">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole3_web">Site internet</label>
                    <input type="text" name="adherent_prof_ecole3_web" id="adherent_prof_ecole3_web">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole3_adresse">Adresse</label>
                    <input type="text" name="adherent_prof_ecole3_adresse" id="adherent_prof_ecole3_adresse">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole3_cp">Code postal</label>
                    <input type="text" name="adherent_prof_ecole3_cp" id="adherent_prof_ecole3_cp">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole3_ville">Ville</label>
                    <input type="text" name="adherent_prof_ecole3_ville" id="adherent_prof_ecole3_ville">
                </div>

                <div class="input_box input_text input_box_gris">
                    <label for="adherent_prof_ecole3_region">Région</label>
                    <select id="adherent_prof_ecole3_region" name="adherent_prof_ecole3_region">
${regionsEcolesProfOptions}
                    </select>
                </div>
            </div>
        </div>
    </div>

    `;



    // AFFICHER LE FORMULAIRE DE SAISIE DU DIPLOME
    document.querySelector('#diplome0').innerHTML = contenuhtml_diplome;

}

// LORS DE SAISIE DU DIPLOME AJOUT JUSQU'À 3 ÉCOLES
function ajout_ecole(e) {
    console.log("on est dans toto");
    ajout_ecole_content = document.getElementById("ajout_ecole"+ e +"_content");
    ajout_ecole_content.classList.remove('hidden');
}

// SUPPRIMER LA SAISIE DES INFORMATIONS POUR LE DIPLOME
function remove_prof_diplome() {
    document.querySelector('#diplome1').remove();
}

/////////////////////////////////////////
// SAISIE DES INFORMATIONS POUR UN LA FORMATION DE PROF
/////////////////////////////////////////
// quand le visiteur clique sur "obtenir un diplome"

function ajout_prof_formation(checkboxElem) {
    // si box diplome checked on affiche
    if (checkboxElem.checked) {
        affiche_prof_formation();
    } else {
        // si box diplome unchecked on supprime
        remove_prof_formation();
    }
}

// AFFICHER LA SAISIE DES INFORMATIONS POUR LA FORMATION
function affiche_prof_formation() {
    console.log("On est dans function prof_formation");

    contenuhtml_formation = `
        <div id="formation1">
            <div class="grid_3inputs">
                <div class="input_box input_text input_box_bleu">
                    <label for="adherent_prof_stagiaire_instrument1">Je suis en formation en :*</label>
                    <select id="adherent_prof_stagiaire_instrument1" name="adherent_prof_stagiaire_instrument1" onchange="select_prof_stagiaire_instrument(1)" required>
                        <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>

                <div class="input_box input_text input_box_bleu">
                    <label for="adherent_prof_stagiaire_instrument1_esa">Niveau*</label>
                    <select id="adherent_prof_stagiaire_instrument1_esa" name="adherent_prof_stagiaire_instrument1_esa" required>
                        <option value="" selected></option>
                        <option value="Niveau 1">Niveau 1</option>
                        <option value="Niveau 2">Niveau 2</option>
                        <option value="Niveau 3">Niveau 3</option>
                        <option value="Niveau 4">Niveau 4</option>
                        <option value="Niveau 5">Niveau 5</option>
                        <option value="Instructeur 1">Instructeur (année 1)</option>
                        <option value="Instructeur 2">Instructeur (année 2)</option>
                    </select>
                </div>

                <div class="input_box input_text input_box_bleu" id="select_adherent_prof_stagiaire_instrument1_prof">
                    <label for="adherent_prof_stagiaire_instrument1_prof">Formateur*</label>
                    <select id="adherent_prof_stagiaire_instrument1_prof" name="adherent_prof_stagiaire_instrument1_prof" required>
                    </select>
                </div>
            </div>

            <div class="grid_3inputs">
                <div class="input_box input_text input_box_bleu">
                    <label for="adherent_prof_stagiaire_instrument2">Ajout d'une autre formation :</label>
                    <select id="adherent_prof_stagiaire_instrument2" name="adherent_prof_stagiaire_instrument2" onchange="select_prof_stagiaire_instrument(2)">
                        <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>

                <div class="input_box input_text input_box_bleu">
                    <label for="adherent_prof_stagiaire_instrument2_esa">Niveau</label>
                    <select id="adherent_prof_stagiaire_instrument2_esa" name="adherent_prof_stagiaire_instrument2_esa">
                        <option value="" selected></option>
                        <option value="Niveau 1">Niveau 1</option>
                        <option value="Niveau 2">Niveau 2</option>
                        <option value="Niveau 3">Niveau 3</option>
                        <option value="Niveau 4">Niveau 4</option>
                        <option value="Niveau 5">Niveau 5</option>
                        <option value="Instructeur 1">Instructeur (année 1)</option>
                        <option value="Instructeur 2">Instructeur (année 2)</option>
                    </select>
                </div>

                <div class="input_box input_text input_box_bleu">
                    <label for="adherent_prof_stagiaire_instrument2_prof">Formateur</span></label>
                    <select id="adherent_prof_stagiaire_instrument2_prof" name="adherent_prof_stagiaire_instrument2_prof">
                    </select>
                </div>
            </div>
        </div>
    `;



    // AFFICHER LE FORMULAIRE DE SAISIE DU DIPLOME
    document.querySelector('#formation0').innerHTML = contenuhtml_formation;

}

// QUEL PROF POUR QUEL INSTRUMENT
function select_prof_stagiaire_instrument(e) {
    console.log("instrument = " + e);
    let instrument_saisie = document.getElementById("adherent_prof_stagiaire_instrument"+ e +"").value;
    console.log("instrument_saisie = ", instrument_saisie);
    if (instrument_saisie == "Alto"){
        contenuhtml_prof = `<option value="" selected></option>
        <option value="prof non inscrit">professeur non encore inscrit</option>`;
        document.getElementById("adherent_prof_stagiaire_instrument"+ e +"_prof").innerHTML = contenuhtml_prof;
        contenuhtml_prof ='';
    };
    if (instrument_saisie == "Piano"){
        contenuhtml_prof = `<option value="" selected></option>
        <option value="PERRIN Véronique">PERRIN Véronique</option>
        <option value="prof non inscrit">professeur non encore inscrit</option>`;
        document.getElementById("adherent_prof_stagiaire_instrument"+ e +"_prof").innerHTML = contenuhtml_prof;
        contenuhtml_prof ='';
    };
    if (instrument_saisie == "Violon"){
        contenuhtml_prof = `<option value="" selected></option>
        <option value="BOSSUAT Christophe">BOSSUAT Christophe</option>
        <option value="MARTIN Joanne">MARTIN Joanne</option>
        <option value="PROST Geneviève">PROST Geneviève</option>
        <option value="prof non inscrit">professeur non encore inscrit</option>`;
        document.getElementById("adherent_prof_stagiaire_instrument"+ e +"_prof").innerHTML = contenuhtml_prof;
        contenuhtml_prof ='';
    };
    if (instrument_saisie == "Violoncelle"){
        contenuhtml_prof = `<option value="" selected></option>
        <option value="LATIL Chantal">LATIL Chantal</option>
        <option value="RIVERA Ruben">RIVERA Ruben</option>
        <option value="prof non inscrit">professeur non encore inscrit</option>`;
        document.getElementById("adherent_prof_stagiaire_instrument"+ e +"_prof").innerHTML = contenuhtml_prof;
        contenuhtml_prof ='';
    };



}

// SUPPRIMER LA SAISIE DES INFORMATIONS POUR LA FORMATION
function remove_prof_formation() {
    document.querySelector('#formation1').remove();
}