<%- include('../../template_parts/head')%>

<body>

    <!-- ---------------------------------- -->
    <!-- HEADER -->
    <!-- ---------------------------------- -->
    <%- include('../../template_parts/header_tunnel')%>

    <main>

        <!-- ---------------------------------- -->
        <!-- TITRE DE LA PAGE -->
        <!-- ---------------------------------- -->
        <%- include('../template_parts/concert_titrepage')%>

        <!-- ---------------------------------- -->
        <!-- FORMULAIRE -->
        <!-- ---------------------------------- -->
        <article class="stage_formulaire_cont form_adhesion">
    
            <form id="form_inscription_famille" action="" method="post" class="stage_formulaire">

                <!-- ---------------------------------- -->
                <!-- ADHÉRENT -->
                <!-- ---------------------------------- -->
                <section>
                    <h1><img class='icone_titre' src="/public/images/icones/icone_compte.png" alt="icone information">VOTRE COMPTE ADHÉRENT</h1>

                    <div class="grid_2inputs">
                        <div>
                            <p>Identifiant : <span class='identifiant'><%= identifiant %></span></p>
                        </div>
                    </div>
                    <div class="grid_2inputs">
                        <div class="input_box input_text input_box_gris">
                            <label for="association_suzuki">Association Suzuki *</label>
                            <input type="text" name="association_suzuki" id="association_suzuki" value='<%= association_suzuki %>' title="Association noté dans votre dossier adhérent, vous pouvez la modifier" required>
                        </div>
                    </div>

                    <% if(locals.deja_inscrit_concert == "non"){ %>
                        <div class="grid_2inputs">
                            <div class="input_box input_text input_box_gris">
                                <label for="adherent_nom">Nom du parent *</label>
                                <input type="text" name="adherent_nom" id="adherent_nom" value='<% if (locals.adherent_nom) { %><%= adherent_nom %><% }; %>' title="Nom de famille de l'adérent, famille ou professeur" required>
                            </div>

                            <div class="input_box input_text input_box_gris">
                                <label for="adherent_prenom">Prénom du parent *</label>
                                <input type="text" name="adherent_prenom" id="adherent_prenom" value='<% if (locals.adherent_prenom) { %><%= adherent_prenom %><% }; %>' title="Prénom de l'adérent, famille ou professeur" required>
                            </div>
                        </div>


                        <div class="grid_2inputs">
                            <div class="input_box input_text input_box_gris">
                                <label for="adherent_telephone_mobile">Téléphone mobile *</label>
                                <input type="tel" name="adherent_telephone_mobile" id="adherent_telephone_mobile" value="<% if (locals.adherent_telephone_mobile) { %><%= adherent_telephone_mobile %><% }; %>" title="Dans quelle ville habitez vous ?" required>
                            </div>

                            <div class="input_box input_text input_box_gris">
                                <label for="adherent_mail">Mail *</label>
                                <input type="email" name="adherent_mail" id="adherent_mail" value="<% if (locals.adherent_mail) { %><%= adherent_mail %><% }; %>" title="Combien de personnes pouvez-vous héberger ?" required>
                            </div>
                        </div>
                    <% } %>
                </section>

                <!-- ---------------------------------- -->
                <!-- HÉBERGEMENT -->
                <!-- ---------------------------------- -->
                <% if(locals.deja_inscrit_concert == "non"){ %>
                    <section>
                        <div class="grid_1inputs">
                            <div class="icone_hebergement">
                                <div><img class='icone' src="/public/images/icones/icone_house.png" alt="icone maison">Vous habitez en région parisienne ?</div>
                                <div>Pouvez-vous héberger des adhérents qui n'habitent pas en région parisienne ?</div>
                                <div class="input_box input_text input_box_gris">
                                    <label for="hebergement_ville">Dans quelle ville ?</label>
                                    <input type="text" name="hebergement_ville" id="hebergement_ville" value='<% if (locals.hebergement_ville) { %><%= hebergement_ville %><% }; %>'>
                                </div>
                                <div class="input_box input_text input_box_gris">
                                    <label for="hebergement_nb">Pour combien de personnes ?</label>
                                    <input type="number" name="hebergement_nb" id="hebergement_nb" value=''>
                                </div>
                            </div>
                        </div>
                    </section>
                <% } %>

                

                <!-- ---------------------------------- -->
                <!-- EXPLICATIONS -->
                <!-- ---------------------------------- -->
                <section>
                    <% if(locals.deja_inscrit_concert == "non"){ %>
                        <h1 class="titre_personne"><span class="rouge">QUI DOIT S'INSCRIRE AU CONCERT ?</span></h1>
                        <% } else{ %>
                            <h1 class="titre_personne"><span class="rouge">ADHÉRANT DÉJÀ INSCRIT AU CONCERT : AJOUT DE PLACES</span></h1>
                        <% } %>
                    <div class="description">
                        <p>- Les élèves instrumentistes jouant au concert (concertistes)</p>
                        <p>- Les spectateurs</p>
                        <p>- Les parents encadrants</p>
                        <p>- Les professeurs encadrants</p>
                    </div>
                    
                </section>

                <div class="space40"></div>

                <!-- ---------------------------------- -->
                <!-- ÉlÈVES CONCERTISTES -->
                <!-- ---------------------------------- -->
                
                <% if(locals.quota_concertiste == "nondepasse"){ %>
                    <% if(locals.tout_instrument_nb_restantes > 0){ %>
                        <section>
                            <div class="place_categorie">
                                <div class="sous_titre">
                                    <div><img class='icone_titre' src="/public/images/icones/musican.webp" alt="icone information à cliquer" /></div>
                                    <div><p>ÉLÈVES CONCERTISTES</p></div>
                                </div>
                            </div>
                            <div><p class="marginbottom_40px montserrat_light">Tarif élève concertiste : 23€</p></div>
                            
                            <!-- Voulez-vous ajouter un concertiste ? -->
                            <div class="input_checkbox">
                                <input type="checkbox" name="check_eleve0" id="check_eleve0" onchange="ajout_eleve(0)">
                                <label class="gras" for="check_eleve0">Voulez-vous inscrire un élève concertiste ?</label>
                            </div>

                            <section class="marginbottom_40px">
                                <div class="montserrat_light">
                                    <p><span class="montserrat_regular">Nombre de places restantes :</span></p>
                                    <!-- <p>- <% if(locals.piano_nb_restantes < 1 ){ %> <span class="rouge">piano : <%- locals?.piano_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> piano : <%- locals?.piano_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.alto_nb_restantes < 1 ){ %> <span class="rouge">alto : <%- locals?.alto_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> alto : <%- locals?.alto_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.flute_nb_restantes < 1 ){ %> <span class="rouge">flûte : <%- locals?.flute_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> flûte : <%- locals?.flute_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.trompette_nb_restantes < 1 ){ %> <span class="rouge">trompette : <%- locals?.trompette_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> trompette : <%- locals?.trompette_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.harpe_nb_restantes < 1 ){ %> <span class="rouge">harpe : <%- locals?.harpe_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> harpe : <%- locals?.harpe_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.violon1_nb_restantes < 1 ){ %> <span class="rouge">violon cahier 1 à 5 : <%- locals?.violon1_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> violon cahier 1 à 5 : <%- locals?.violon1_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.violon2_nb_restantes < 1 ){ %> <span class="rouge">violon cahier 6 à 10 : <%- locals?.violon2_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> violon cahier 6 à 10 : <%- locals?.violon2_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.violoncelle1_nb_restantes < 1 ){ %> <span class="rouge">violoncelle cahier 1 à 4 : <%- locals?.violoncelle1_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> violoncelle cahier 1 à 4 : <%- locals?.violoncelle1_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.violoncelle2_nb_restantes < 1 ){ %> <span class="rouge">violoncelle cahier 5 à 10 : <%- locals?.violoncelle2_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> violoncelle cahier 5 à 10 : <%- locals?.violoncelle2_nb_restantes %><% } %></p> -->
                                    <!-- <p>- piano : <%- locals?.piano_nb_restantes %></p> -->
                                    <!-- <p>- alto : <%- locals?.alto_nb_restantes %></p> -->
                                    <!-- <p>- flûte : <%- locals?.flute_nb_restantes %></p> -->
                                    <!-- <p>- trompette : <%- locals?.trompette_nb_restantes %></p> -->
                                    <!-- <p>- harpe : <%- locals?.harpe_nb_restantes %></p> -->
                                    <!-- <p>- violon cahier 1 à 5 : <%- locals?.violon1_nb_restantes %></p> -->
                                    <!-- <p>- violon cahier 6 à 10 : <%- locals?.violon2_nb_restantes %></p> -->
                                    <!-- <p>- violoncelle cahier 1 à 4 : <%- locals?.violoncelle1_nb_restantes %></p> -->
                                    <!-- <p>- violoncelle cahier 5 à 10 : <%- locals?.violoncelle2_nb_restantes %></p> -->
                                    <!-- <p>- <% if(locals.piano_nb_restantes < 1 ){ %> <span class="rouge">piano : <%- locals?.piano_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> piano : <%- locals?.piano_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.alto_nb_restantes < 1 ){ %> <span class="rouge">alto : <%- locals?.alto_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> alto : <%- locals?.alto_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.flute_nb_restantes < 1 ){ %> <span class="rouge">flûte : <%- locals?.flute_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> flûte : <%- locals?.flute_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.trompette_nb_restantes < 1 ){ %> <span class="rouge">trompette : <%- locals?.trompette_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> trompette : <%- locals?.trompette_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.harpe_nb_restantes < 1 ){ %> <span class="rouge">harpe : <%- locals?.harpe_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> harpe : <%- locals?.harpe_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.violon1_nb_restantes < 1 ){ %> <span class="rouge">violon cahier 1 à 5 : <%- locals?.violon1_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> violon cahier 1 à 5 : <%- locals?.violon1_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.violon2_nb_restantes < 1 ){ %> <span class="rouge">violon cahier 6 à 10 : <%- locals?.violon2_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> violon cahier 6 à 10 : <%- locals?.violon2_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.violoncelle1_nb_restantes < 1 ){ %> <span class="rouge">violoncelle cahier 1 à 4 : <%- locals?.violoncelle1_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> violoncelle cahier 1 à 4 : <%- locals?.violoncelle1_nb_restantes %><% } %></p> -->
                                    <!-- <p>- <% if(locals.violoncelle2_nb_restantes < 1 ){ %> <span class="rouge">violoncelle cahier 5 à 10 : <%- locals?.violoncelle2_nb_restantes %> - <a class="text_listeatt" href="listeattente">S'inscrire sur liste d'attente</a></span>%> <% } else{ %> violoncelle cahier 5 à 10 : <%- locals?.violoncelle2_nb_restantes %><% } %></p> -->

                                    <p>- <% if(locals.piano_nb_restantes < 1 ){ %> <span class="rouge gras">piano : <%- locals?.piano_nb_restantes %>- Il n'y a plus de place en piano</span> <% } else{ %> piano : <%- locals?.piano_nb_restantes %><% } %></p>
                                    <p>- <% if(locals.alto_nb_restantes < 1 ){ %> <span class="rouge gras">alto : <%- locals?.alto_nb_restantes %>- Il n'y a plus de place en alto</span> <% } else{ %> alto : <%- locals?.alto_nb_restantes %><% } %></p>
                                    <p>- <% if(locals.flute_nb_restantes < 1 ){ %> <span class="rouge gras">flûte : <%- locals?.flute_nb_restantes %>- Il n'y a plus de place en flûte</span> <% } else{ %> flûte : <%- locals?.flute_nb_restantes %><% } %></p>
                                    <p>- <% if(locals.trompette_nb_restantes < 1 ){ %> <span class="rouge gras">trompette : <%- locals?.trompette_nb_restantes %>- Il n'y a plus de place en trompette</span> <% } else{ %> trompette : <%- locals?.trompette_nb_restantes %><% } %></p>
                                    <p>- <% if(locals.harpe_nb_restantes < 1 ){ %> <span class="rouge gras">harpe : <%- locals?.harpe_nb_restantes %>- Il n'y a plus de place en harpe</span><% } else{ %> harpe : <%- locals?.harpe_nb_restantes %><% } %></p>
                                    <p>- <% if(locals.violon1_nb_restantes < 1 ){ %> <span class="rouge gras">violon cahier 1 à 5 : <%- locals?.violon1_nb_restantes %>- Il n'y a plus de place en violon cahier 1 à 5</span> <% } else{ %> violon cahier 1 à 5 : <%- locals?.violon1_nb_restantes %><% } %></p>
                                    <p>- <% if(locals.violon2_nb_restantes < 1 ){ %> <span class="rouge gras">violon cahier 6 à 10 : <%- locals?.violon2_nb_restantes %>- Il n'y a plus de place en violon cahier 6 à 10</span> <% } else{ %> violon cahier 6 à 10 : <%- locals?.violon2_nb_restantes %><% } %></p>
                                    <p>- <% if(locals.violoncelle1_nb_restantes < 1 ){ %> <span class="rouge gras">violoncelle cahier 1 à 4 : <%- locals?.violoncelle1_nb_restantes %>- Il n'y a plus de place en violoncelle cahier 1 à 4</span> <% } else{ %> violoncelle cahier 1 à 4 : <%- locals?.violoncelle1_nb_restantes %><% } %></p>
                                    <p>- <% if(locals.violoncelle2_nb_restantes < 1 ){ %> <span class="rouge gras">violoncelle cahier 5 à 10 : <%- locals?.violoncelle2_nb_restantes %>- Il n'y a plus de place en violoncelle cahier 5 à 10 </span> <% } else{ %> violoncelle cahier 5 à 10 : <%- locals?.violoncelle2_nb_restantes %><% } %></p>

                                </div>
                            </section>
                        </section>
                        
                    <% } else{ %>
                        <section>
                            <div class="sous_titre">
                                <div><img class='icone_titre' src="/public/images/icones/musican.webp" alt="icone information à cliquer" /></div>
                                <div><p>ÉLÈVES CONCERTISTES</p></div>
                            </div>
                            
                            <p class="montserrat_light"><mark>Il n'y a plus de place concertiste</mark></p>
                        </section>
                    <% } %>
                <% } else{ %>
                    <section>
                        <div class="sous_titre">
                            <div><img class='icone_titre' src="/public/images/icones/musican.webp" alt="icone information à cliquer" /></div>
                            <div><p>ÉLÈVES CONCERTISTES</p></div>
                        </div>
                        
                        <p class="montserrat_light"><mark>Vous avez déjà atteint le nombre maximum d'élèves concertistes inscrits</mark></p>
                    </section>
                <% } %>
                
                
                <!-- SAISIE POUR UN CONCERTISTE -->
                <section id="eleve0" data-piano_nb_restantes='<%= piano_nb_restantes %>' data-alto_nb_restantes='<%= alto_nb_restantes %>' data-flute_nb_restantes='<%= flute_nb_restantes %>' data-trompette_nb_restantes='<%= trompette_nb_restantes %>' data-harpe_nb_restantes='<%= harpe_nb_restantes %>' data-violon1_nb_restantes='<%= violon1_nb_restantes %>' data-violon2_nb_restantes='<%= violon2_nb_restantes %>' data-violoncelle1_nb_restantes='<%= violoncelle1_nb_restantes %>' data-violoncelle2_nb_restantes='<%= violoncelle2_nb_restantes %>'>
                </section>

                <div class="space40"></div>

                <!-- ---------------------------------- -->
                <!-- SPECTATEUR -->
                <!-- ---------------------------------- -->
                <section>
                    <div class="place_categorie">
                        <div class="sous_titre">
                            <div><img class='icone_titre' src="/public/images/icones/spectator.webp" alt="icone information à cliquer" /></div>
                            <div><p>SPECTATEURS</p></div>
                        </div>
                    </div>
                </section>
                <div><p class="marginbottom_40px montserrat_light">Tarif spectateur : 20€</p></div>

                <!-- COMBIEN DE SPECTATEURS ? 3 MAX -->
                <% if(locals.quota_spectateur == "nondepasse"){ %>
                    <section id="spectateur0" data-spectateur_nb_restantes='<%= spectateur_nb_restantes %>' data-spectateur_remisenvente='oui' data-quota_total_spectateur='<%= quota_total_spectateur %>'>
                    
                    </section>
                    <% } else{ %>
                        <section id="spectateur0" data-spectateur_nb_restantes='<%= spectateur_nb_restantes %>' data-spectateur_remisenvente='non' data-quota_total_spectateur='<%= quota_total_spectateur %>'>
                            <p class="montserrat_light"><mark>Vous avez déjà atteint le nombre maximum de spectateurs inscrits</mark></p>
                        </section>
                    <% } %>
                

                <div class="space40"></div>


                <!-- ---------------------------------- -->
                <!-- ENCADRANT -->
                <!-- ---------------------------------- -->
                <section>
                    <div class="place_categorie">
                        <div class="sous_titre">
                            <div><img class='icone_titre' src="/public/images/icones/encadrant.webp" alt="icone information à cliquer" /></div>
                            <div>
                                <p>ENCADRANT <span class="montserrat_light">PARENT</span> ou <span class="montserrat_light">PROFESSEUR</span></p>
                                <ul class="note">
                                    <li>Les encadrants n'ont pas besoin d'acheter de place spectateur.</li>
                                    <li>Selon ses missions l'encadrant ne verra peut-être pas le concert.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Voulez-vous ajouter un encadrant ? -->
                    <div class="input_checkbox">
                        <input type="checkbox" name="check_encadrant0" id="check_encadrant0" onchange="ajout_encadrant(0,<%= encadr_parent_nb_restantes %>)">
                        <label class="gras" for="check_encadrant0">Souhaitez-vous être encadrant pour cet événement ?</label>
                    </div>

                </section>

                <!-- SAISIE POUR UN ENCADRANT -->
                <section id="encadrant0" data-encadr_parent_nb_restantes='<%= encadr_parent_nb_restantes %>'>
                </section>


                <!-- ---------------------------------- -->
                <!-- DON -->
                <!-- ---------------------------------- -->
                <section class="margintop_60px">
                    <div class="place_categorie">
                        <div class="sous_titre">
                            <div><i class="fa fa-heart rouge"></i></div>
                            <div><p class="rouge">DON</p></div>
                        </div>
                    </div>

                    <!-- Voulez-vous ajouter un don ? -->
                    <div class="input_box input_text input_box_gris">
                        <label for="don">Un don l'Association ? <i class="fa fa-heart rouge"></i></label>
                        <input type="number" name="don" id="don" placeholder="Entrez ici le montant en euros" title="Entrer un montant en euros">
                    </div>
                </section>


                <!-- ---------------------------------- -->
                <!-- COMMENTAIRE -->
                <!-- ---------------------------------- -->
                <% if(locals.deja_inscrit_concert == "non"){ %>
                    <section class="commentaire">
                        <div class="place_categorie">
                            <div class="sous_titre">
                                <div><i class="fa fa-comments"></i></div>
                                <div><p>COMMENTAIRE</p></div>
                            </div>
                        </div>
                        <div class="input_box input_text input_box_bleu margintop_40px">
                            <label class="labeltextarea" for="commentaire_adherent">Un commentaire <br> à nous transmettre ?</label>
                            <textarea class="textarea_commentaire" id="commentaire_adherent" name="commentaire_adherent"rows="8" cols="40"></textarea>
                        </div>
                    </section>
                <% } %>






                <button type="submit" class="button_icone">
                    <span class="btn_icone">+</span><span class="btn_texte">VALIDER</span>
                </button>

            </form>
        </article>

    </main>
  
  
  
    <!-- ---------------------------------- -->
    <!-- FOOTER -->
    <!-- ---------------------------------- -->
    <%- include('../../template_parts/footer')%>
  
</body>

<!-- JAVASCRIPT d'EXECUTION -->
<script src="/public/js/adhesion/hidden_visible.js"></script>
<script src="/public/js/concert/concert_formulaire_famille.js"></script>

</html>