{% extends 'base.html.twig' %}

{% block title %}Profile{% endblock %}

{% block body %}
    {# ===================================================================
    ## == Bloc présentation information utilisateur
    ## ===================================================================
    #}
     <section class="container">
        {% include 'utils/file.ariane.html.twig' %}   
        <br/>
    </section>

    <section class="container d-flex justify-content-start">
        <div style="text-align:center;margin-right: 20px;">
            <span class="avatar-large">
                {% if user.personne.avatar %}
                    <img src={{user.personne.avatar}} width="100%" />
                {% else %}
                    <i>Aucun avatar</i>
                {% endif %}                
            </span><br/>
            <small>
                <a href="#" data-bs-toggle="modal" data-bs-target="#changeAvatar"  title="Changer d'image de profile" style="margin-right:3px;">Changer</a>
                {% if user.personne.avatar != '/images/default-avatar.png' %}
                    <a class="text-danger" href="/user/remove/avatar" title="Supprimer l'image de profile actuelle">Supprimer</a>
                {% endif %}
            </small>
        </div>
        <div class="d-flex flex-column mb-3 w-100">
            <div class="p-2 w-100" style="font-size:13pt;">
                {% if user.personne.nom or user.personne.prenom %} <h4>{{user.personne.prenom}} {{user.personne.nom}}</h4>{% endif %}
            </div>
            <div class="p-2 w-100 h-100">
                <small style="font-size:12pt;">
                    <span class="text-success mr-5" title="nom utilisateur valide"><i class="bi bi-check2-circle"></i></span>
                    {{user.username}}
                </small><br />
                <small style="font-size:12pt;">
                    {% if user.isVerified %}
                        <span class="text-success mr-5" title="adresse validée"><i class="bi bi-check2-circle"></i></span>
                        {{user.email}}
                    {% else %}
                        <span class="text-danger mr-5" title="adresse non validée"><i class="bi bi-exclamation-triangle-fill"></i></span>
                        <a href="/user/send-verif-token/profile/profile/{{user.username}}" title="demander un nouveau token de validation">{{user.email}}</a>
                    {% endif %}                
                </small> <br/>
            </div>
            <div class="p-2 w-100">
                <div class="row">
                    <div class="col-sm-4"></div>
                    <div class="col-sm-8">
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#changePasswordForm" style="margin-right:5px;" ><i class="bi bi-lock-fill"></i> Changer de mot de passe</button><br/><br/>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#changeProfileForm" ><i class="bi bi-person-circle"></i> Modifier mon profile</button><br/><br/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><br />

    <section class="container">
        <div class="accordion" id="accordionPanelsStayOpenExample">
            {# ===================================================================
            ## == Bloc identite de personne
            ## ===================================================================
            #}
            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#personalData" aria-expanded="true" aria-controls="personalData">
                    DONNEES PERSONNELLES
                </button>
                </h2>
                <div id="personalData" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
                <div class="accordion-body">
                    <!-- ***********************************************
                    ***   Données de contact
                    ***  **************************************************
                    -->
                    <section class="row w-100">
                        <section class="col-sm-12 ">
                            <div class="row w-100" >
                                <div class="col-12">
                                    <section class="d-flex flex-column w-100" >
                                        <h2>{{ user.personne.prenom }} {{ user.personne.nom }}</h2> <hr /><br/>
                                        <!-- -->
                                        {% if user.personne.adresse %}
                                            <div class="d-flex justify-content-start  w-100">
                                                <strong style="margin-right: 10px"><i class="bi bi-geo-alt-fill"></i> </strong>
                                                <span>{{ user.personne.adresse }} <br/><br/>
                                            </div>
                                        {% endif %} 
                                        
                                        <!-- -->
                                        <div class="d-flex justify-content-start  w-100">
                                            {% if user.personne.isMembre %}
                                                <i class="bi bi-check-square"></i>
                                                <strong class="ml-5 mb-3"><small class="text-secondary">Membre de l'église </small></strong>
                                            {% endif %}
                                        </div>

                                        <!-- -->
                                        <div class="d-flex justify-content-start  w-100">
                                            {% if user.personne.isConseil %}
                                                <i class="bi bi-check-square"></i>
                                                <strong class="ml-5 mb-3"><small class="text-secondary">Membre du conseil </small></strong>
                                            {% endif %}
                                        </div>
                                    </section><br />
                                </div>
                            </div>
                        </section>
                    </section>

                    {% include 'personne/adressPage.html.twig' with {'obj': user.personne } %}

                </div>
                </div>
            </div>
            {# ===================================================================
            ## == Bloc présentation description utilisateur
            ## ===================================================================
            #}
            <div class="accordion-item">
                {% set label = "description" %}
                {% if secure.haveRole("PAST") %}{% set label = "message" %}{% endif %}
                <h2 class="accordion-header" id="descriptionData">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                    {{label|upper}}
                </button>
                </h2>
                <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="descriptionData">
                <div class="accordion-body">         
                    {% if user.personne.description %}{{ user.personne.description | raw}}{% else %} Vous n'avez pas défini de {{label}} {% endif %}
                    <hr />
                    <div class="w-100 d-flex flex-row justify-content-end">
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#changeMessageForm" ><i class="bi bi-pencil-square"></i> Modifier</button>
                    </div>
                </div>
                </div>
            </div>
            
        </div>
    </section>
   

    {# ===================================================================
    ## == Bloc modal change avatar
    ## ===================================================================
    #}
    <div class="modal fade" id="changeAvatar" tabindex="-1" aria-labelledby="exampleModalLabel01" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content container">            
            {{ form_start(avatarForm) }}       
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel01">Changer d'image de profile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <h3 id="modal-ctx-name"></h3>
                    <hr /><br />
                    {{ form_row(avatarForm.avatar) }} </br />
                    <div class="row">
                        <div class="col">
                            <small>La taille maximale autorisée est <strong>{{maxSize}}</strong> </small><br/>
                            <small>
                                les types de documents autorisés sont 
                                <ul>
                                {% for extension in mimeTypes %}
                                    <li><strong>{{extension}}</strong> </li>
                                {% endfor %}
                                </ul>
                            </small> 
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x-lg"></i> Annuler</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Enregistrer</button>
                </div>
            {{ form_end(avatarForm) }}
            </div>
        </div>
    </div>   

    {# ===================================================================
    ## == Bloc modal change mot de passe
    ## ===================================================================
    #}
    <div class="modal fade" id="changePasswordForm" tabindex="-1" aria-labelledby="exampleModalLabel02" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content container">            
            {{ form_start(changePasswordForm) }}       
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel02">Nouveau mot de passe</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    {{ form_row(changePasswordForm.current) }} </br />
                    {{ form_row(changePasswordForm.nouveau) }} </br />
                    {{ form_row(changePasswordForm.confirmation) }} </br />
                    <div class="row">
                        <div class="col">
                            <small>Le nouveau mot de passe doit contenir au moins:
                                <ul>
                                    <li><strong>8</strong> caractères</li> 
                                    <li><strong>1</strong> lettre miniscule</li> 
                                    <li><strong>1</strong> lettre majuscule</li> 
                                    <li><strong>1</strong> caractère spécial</li> 
                                </ul>
                            </small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x-lg"></i> Annuler</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Enregistrer</button>
                </div>
            {{ form_end(changePasswordForm) }}
            </div>
        </div>
    </div> 
    
    {# ===================================================================
    ## == Bloc modal change mprofile
    ## ===================================================================
    #}
    <div class="modal fade" id="changeProfileForm" tabindex="-1" aria-labelledby="exampleModalLabel03" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content container">            
            {{ form_start(changeProfileForm) }}       
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel03">Mise à jour Profile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    {{ form_row(changeProfileForm.nom) }} </br />
                    {{ form_row(changeProfileForm.prenom) }} </br />
                    {{ form_row(changeProfileForm.email) }} </br />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x-lg"></i> Annuler</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Enregistrer</button>
                </div>
            {{ form_end(changeProfileForm) }}
            </div>
        </div>
    </div> 
    
    {# ===================================================================
    ## == Bloc modal change message
    ## ===================================================================
    #}
    <div class="modal fade" id="changeMessageForm" tabindex="-1" aria-labelledby="exampleModalLabel04" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
            <div class="modal-content container">            
            {{ form_start(changeMessageForm) }}       
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel04">Mise à jour Message</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    {{ form_row(changeMessageForm.message) }} </br />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x-lg"></i> Annuler</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Enregistrer</button>
                </div>
            {{ form_end(changeMessageForm) }}
            </div>
        </div>
    </div> 
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/editor_manager.js') }}"></script>  
    <script>
                       
        $( document ).ready(function() {
            $(".adminAdressMail").click(function(){
                const code = $(this).attr("data-code");
                const groupe = "A";
                $("#form_person_adress_mail_edit").attr("action", (`/personne/adresse/mail/${code}/${groupe}/userProfile`));                
            });
            
            $(".adminAdressPhone").click(function(){
                const code = $(this).attr("data-code");
                const groupe = "A";
                $("#form_person_adress_phone_edit").attr("action", (`/personne/adresse/phone/${code}/${groupe}/userProfile`));
                
            });

            $(".suppAdressConf").click(function(){
                const code = $(this).attr("data-code");
                const groupe = "A";
                const type = $(this).attr("data-type");
                const val = $(this).attr("data-value");
                $("#formDeleteAdress").attr("action", (`/personne/adresse/${type}-delete/${code}/${groupe}/userProfile`));
                $("#adresseName").empty().text(val);
                
            });

        });
    </script> 
{% endblock %}