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

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

let personne = 0;

window.onload = () => {
    affichePersonne(personne);
};

function ajoutPersonne() {
    affichePersonne(personne);
}

function affichePersonne(personneCount) {
    personneCount++;
    console.log("Affiche personne :", personneCount);

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

    // Vérifie si l'élément existe déjà
    if (!document.querySelector(`#personne${personneCount}`)) {
        let contenuHtmlPersonne = `
        <section id="personne${personneCount}" class="personne">
            <h2>
                <img class="icone_titre" src="/public/images/icones/icone_personne.png" alt="icone information à cliquer">
                PERSONNE <span class="rouge numero">${personneCount}</span>`;

        if (personneCount > 1) {
            contenuHtmlPersonne += `
                <span class="remove_personne">
                    <input class="input_suppr" type="checkbox" name="check_personne_delete${personneCount}" id="check_personne_delete${personneCount}">
                    <label class="label_suppr" for="check_personne_delete${personneCount}" onclick="supprimerPersonne(${personneCount})">Supprimer cette personne</label>
                </span>`;
        }

        contenuHtmlPersonne += `
            </h2>
            <div class="grid_2inputs">
                <div class="input_box input_text input_box_gris">
                    <label for="personne_${personneCount}_nom">Nom de famille *</label>
                    <input type="text" name="personne_${personneCount}_nom" id="personne_${personneCount}_nom" required>
                </div>
                <div class="input_box input_text input_box_gris">
                    <label for="personne_${personneCount}_prenom">Prénom *</label>
                    <input type="text" name="personne_${personneCount}_prenom" id="personne_${personneCount}_prenom" required>
                </div>
            </div>
            <div class="grid_2inputs">
                <div class="input_box input_text input_box_gris">
                    <label for="personne_${personneCount}_datenaissance">Date de naissance * (jj/mm/aaaa)</label>
                    <input type="text" name="personne_${personneCount}_datenaissance" id="personne_${personneCount}_datenaissance" placeholder="01/01/1999" pattern="[0-3][0-9]/[0-1][0-9]/[1-2][0-9]{3}" minlength="10" maxlength="10" title="le format de date doit être jj/mm/aaaa" required>
                </div>
            </div>
            <div id="personne_${personneCount}_instrument_activite_call" class="grid_2inputs">
                <div id="personne_${personneCount}_profil_call" class="input_box input_text input_box_bleu">
                    <label for="personne_${personneCount}_role">Rôle de la personne ? *</label>
                    <select id="personne_${personneCount}_role" name="personne_${personneCount}_role" autocomplete="off" required onchange="selectPersonneProfil(this, ${personneCount})">
                        <option value="" selected></option>
                        <option value="instrumentiste">Élève</option>
                        <option value="professeur">Professeur</option>
                    </select>
                </div>
            </div>`;

        if (personneCount < 6) {
            contenuHtmlPersonne += `
            <div class="input_checkbox">
                <input type="checkbox" name="check_personne${personneCount}" id="check_personne${personneCount}" onclick="ajoutPersonne()">
                <label for="check_personne${personneCount}">Voulez-vous ajouter une autre personne au stage ?</label>
            </div>`;
        }

        contenuHtmlPersonne += `</section>`;

        // Insère le nouveau contenu après la dernière personne
        const lastPersonne = document.querySelector(`#personne${personneCount - 1}`);
        if (lastPersonne) {
            lastPersonne.insertAdjacentHTML("afterend", contenuHtmlPersonne);
        } else {
            document.body.insertAdjacentHTML("beforeend", contenuHtmlPersonne);
        }

        personne = personneCount;
    }
}

function selectPersonneProfil(select, personneCount) {
    console.log("Valeur sélectionnée :", select.value);

    const instrumentDisplayId = `#personne_${personneCount}_instrument_display`;
    const instrumentActiviteCall = document.querySelector(`#personne_${personneCount}_instrument_activite_call`);

    // Supprime l'affichage précédent
    if (document.querySelector(instrumentDisplayId)) {
        document.querySelector(instrumentDisplayId).remove();
    }

    if (select.value === "professeur") {
        instrumentActiviteCall.insertAdjacentHTML("afterend", `
        <div id="personne_${personneCount}_instrument_display">
            <div class="grid_2inputs">
                <div class="input_box input_text input_box_gris">
                    <label for="personne_${personneCount}_instrument">Instrument *</label>
                    <select id="personne_${personneCount}_instrument" name="personne_${personneCount}_instrument" required onchange="handleInstrumentChange(${personneCount})">
                        <option value="" selected></option>
                        <option value="alto">Alto</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_${personneCount}_repas">Repas du midi *</label>
                    <select id="personne_${personneCount}_repas" name="personne_${personneCount}_repas" required>
                        <option value="" selected></option>
                        <option value="repas">Oui (8€)</option>
                        <option value="non">Non</option>
                    </select>
                </div>
            </div>
        </div>`);
    } else if (select.value === "instrumentiste") {
        instrumentActiviteCall.insertAdjacentHTML("afterend", `
        <div id="personne_${personneCount}_instrument_display">
            <div class="grid_2inputs">
                <div class="input_box input_text input_box_gris">
                    <label for="personne_${personneCount}_instrument">Instrument *</label>
                    <select id="personne_${personneCount}_instrument" name="personne_${personneCount}_instrument" required onchange="handleInstrumentChange(${personneCount})">
                        <option value="" selected></option>
                        <option value="alto">Alto</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_${personneCount}_cahier">Niveau Cahier *</label>
                    <select id="personne_${personneCount}_cahier" name="personne_${personneCount}_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_${personneCount}_piece">Pièces récentes *</label>
                    <input type="text" name="personne_${personneCount}_piece" id="personne_${personneCount}_piece" required>
                </div>
                <div id="professeur_field_${personneCount}" class="input_box input_text input_box_bleu">
                    <label for="personne_${personneCount}_prof">Nom professeur *</label>
                    <input type="text" name="personne_${personneCount}_prof" id="personne_${personneCount}_prof" required>
                </div>
            </div>
        </div>`);
    }
}

function handleInstrumentChange(personneCount) {
    const instrumentSelect = document.querySelector(`#personne_${personneCount}_instrument`);
    const professeurField = document.querySelector(`#professeur_field_${personneCount}`);

    if (instrumentSelect && professeurField) {
        // Si l'instrument sélectionné est le piano, affiche une liste déroulante pour le professeur
        if (instrumentSelect.value === "piano") {
            professeurField.innerHTML = `
                <label for="personne_${personneCount}_prof">Nom professeur *</label>
                <select id="personne_${personneCount}_prof" name="personne_${personneCount}_prof" required>
                    <option value="" selected></option>
                    <option value="Isabelle Gaston">Isabelle Gaston</option>
                    <option value="Koyuki Kawahara">Koyuki Kawahara</option>
                </select>
            <p>Seuls les élèves de Isabelle Gaston et Koyuki Kawahara peuvent s'inscrire pour le piano.</p>`;
        } else {
            // Pour les autres instruments, affiche un champ de saisie libre
            professeurField.innerHTML = `
                <label for="personne_${personneCount}_prof">Nom professeur *</label>
                <input type="text" name="personne_${personneCount}_prof" id="personne_${personneCount}_prof" required>
            `;
        }
    }
}

function supprimerPersonne(personneCount) {
    const personneElement = document.querySelector(`#personne${personneCount}`);
    if (personneElement) {
        personneElement.remove();
    }
}