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

{% block title %}Annuaire{% endblock %}

{% block body %}
    <section class="container">
        {% include 'utils/file.ariane.html.twig' %}  
        <h4 id="mainTitle" data-groupe="{{ groupe }}" >Annuaire - EELO</h4>
        <hr/>

        {% if secure.havePermission(constant('_ADD_SERV_GEST_USER', app_const)) %}
            <div class="d-flex justify-content-between">
                <a class="btn btn-sm btn-primary" href="/personne/create"><i class="bi bi-plus-lg"></i> Nouvelle</a>
            </div>
            <hr />
        {% endif %}
        
        <br /><section>
            {{ form_start(form) }}
                <div class="input-group mb-3">
                    {{ form_widget(form.searchValue) }}
                    <span class="input-group-text"><button type="submit" class="btn btn-sm"><i class="bi bi-search"></i></button></span>
                </div>
            {{ form_end(form) }}
        </section><br />  <br />

        {% set navItem = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'] %}

        <section class="row" style="width:100%">
            <section class="col-2">
                <ul class="nav nav-pills flex-column">
                    {% for letter in navItem %}
                        <li class="nav-item">
                        {% if letter == groupe %}
                            <a class="nav-link active" aria-current="page" href="/personne/liste/{{ letter }}">{{ letter }}</a>
                        {% else %}
                            <a class="nav-link" href="/personne/liste/{{ letter }}">{{ letter }}</a>
                        {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </section>

            <section class="col-10">
                {% if result.elements|length <= 0  %} 
                        <p> Aucun contact trouvé</p>
                        <br />
                        <a href="/personne/create">Ajouter un contact</a>
                {% else %}
                        <div class="accordion accordion-flush" id="accordionFlushExample">
                            {% for obj in result.elements %}
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="{{ obj.code }}">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{ obj.code }}" aria-expanded="false" aria-controls="flush-collapse{{ obj.code }}">
                                            {{ obj.nom }} {{ obj.prenom }} 
                                        </button>
                                    </h2>
                                    {% if loop.index == 1 %}
                                        <div id="flush-collapse{{ obj.code }}" class="accordion-collapse collapse show" aria-labelledby="flush-heading{{ obj.code }}" data-bs-parent="#accordionFlushExample" style="width:100%">
                                    {% else %}
                                        <div id="flush-collapse{{ obj.code }}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{ obj.code }}" data-bs-parent="#accordionFlushExample" style="width:100%">
                                    {% endif %}                                    
                                        <div class="accordion-body" style="width:100%">
                                            <!-- ***********************************************
                                            ***   Données de contact
                                            ***  **************************************************
                                            -->
                                            <section class="row" style="width:100%">
                                                <section class="col-sm-3 d-flex flex-column">
                                                     <span class="avatar-large mb-3">
                                                        {% if obj.avatar %}
                                                            <img src={{obj.avatar}} width="100%" />
                                                        {% else %}
                                                            <i>Aucun avatar</i>
                                                        {% endif %} 
                                                    </span>
                                                    
                                                    <small class="mb-3 w-100 text-center">
                                                        {% if secure.havePermission(constant('_UPDATE_SERV_GEST_USER', app_const)) %}
                                                            <a href="#" data-bs-toggle="modal" data-bs-target="#changeAvatar" class="changePhoto text-secondary mr-5" title="Changer d'image de profile" data-code="{{obj.code}}" data-name="{{ obj.prenom }} {{ obj.nom }}" >Changer</a>
                                                        {% endif %}

                                                        {% if obj.avatar != "/images/default-avatar.png" and secure.havePermission(constant('_REMOVE_SERV_GEST_USER', app_const)) %}
                                                            <a href="/personne/avatar/remove/{{ groupe }}/{{obj.code}}?page={{result.currentPage}}&pageSize={{result.pageSize}}&filtre={{result.filtre}}" title="Supprimer l'image de profile actuelle" class="text-danger" >Supprimer</a>
                                                        {% endif %}
                                                    </small> 
                                                </section>
                                                <section class="col-sm-9">
                                                    <div class="row" style="width:100%" >
                                                        <div class="col-10">
                                                            <section class="d-flex flex-column" style="width:100%" >
                                                                <h2>{{ obj.prenom }} {{ obj.nom }}</h2> <hr /><br/>
                                                                <!-- -->
                                                                {% if obj.adresse %}
                                                                    <div class="d-flex justify-content-start">
                                                                        <strong style="margin-right: 10px"><i class="bi bi-geo-alt-fill"></i> </strong>
                                                                        <span>{{ obj.adresse }} <br/><br/>
                                                                    </div>
                                                                {% endif %} 
                                                                
                                                                <!-- -->
                                                                <div class="d-flex justify-content-start">
                                                                    {% if obj.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">
                                                                    {% if obj.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>

                                                                <!-- Attachement user -->
                                                                <div class="d-flex justify-content-start">
                                                                    {% if obj.profile %}
                                                                        <i class="bi bi-check-square"></i>
                                                                        <strong class="ml-5 mb-3"><small class="text-secondary">Profile utilisateur</small></strong><br />
                                                                    {% endif %}
                                                                </div>
                                                            </section>
                                                        </div><br />
                                                        <div class="col-2">
                                                            {% if secure.havePermission(constant('_UPDATE_SERV_GEST_USER', app_const)) or secure.havePermission(constant('_REMOVE_SERV_GEST_USER', app_const)) %}
                                                                <div class="btn-group">
                                                                    <button type="button" class="btn btn-ligth dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                                                        <i class="bi bi-three-dots-vertical"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                                        {% if secure.havePermission(constant('_UPDATE_SERV_GEST_USER', app_const)) %}
                                                                            <li><a class="dropdown-item" href="/personne/update/{{obj.code}}?page={{result.currentPage}}&pageSize={{result.pageSize}}&filtre={{result.filtre}}">Modifier</a></li>
                                                                        {% endif %}
                                                                        {% if secure.havePermission(constant('_REMOVE_SERV_GEST_USER', app_const)) and obj.profile == null %}
                                                                            <li><a class="dropdown-item text-danger" href="/personne/suppression/{{obj.code}}?page={{result.currentPage}}&pageSize={{result.pageSize}}&filtre={{result.filtre}}">Supprimer</a></li>
                                                                        {% endif %}
                                                                    </ul>
                                                                </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </section>
                                            </section>

                                            <!-- ***********************************************
                                            ***   Commentaire
                                            ***  **************************************************
                                            -->
                                            <section class="row" style="width:100%">
                                                <section class="pers-com col-sm-12">
                                                    {% if obj.description != null and obj.description|trim|length > 0  %} 
                                                        <p>{{ obj.description|raw }}</p>
                                                    {% else %}
                                                        <p>Pas de description.</p>
                                                    {% endif %}
                                                    
                                                    <br />
                                                </section>
                                            </section>


                                            <!-- ***********************************************
                                            ***   Liste des contactes et enfants 
                                            ***  **************************************************
                                            -->
                                            {% include 'personne/adressPage.html.twig' with {'obj': obj } %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %} 
                        </div>
                {% endif %} 
            </section>
        </section>


        <br />
        <hr />
        {% include 'utils/pagination.html.twig'  with {'url': '/personne/liste/'  ~ groupe }  %}  
        <br />
    </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, {'attr': {'id': 'form_person_avatar_edit'}}) }}       
                <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>   
    
{% endblock %}

{% block javascripts %}
    {{ parent() }}    
    <script>
        $( document ).ready(function() {
            $(".changePhoto").click(function(){
                const mainTitle = document.getElementById("mainTitle");
                const code = $(this).attr("data-code");
                if(mainTitle){
                    const groupe = mainTitle.getAttribute("data-groupe");
                    $("#form_person_avatar_edit").attr("action", (`/personne/avatar/load/${code}/${groupe}`));
                    $("#modal-ctx-name").empty().text($(this).attr("data-name"));
                }
                
            });

            $(".adminAdressMail").click(function(){
                const mainTitle = document.getElementById("mainTitle");
                const code = $(this).attr("data-code");
                if(mainTitle){
                    const groupe = mainTitle.getAttribute("data-groupe");
                    $("#form_person_adress_mail_edit").attr("action", (`/personne/adresse/mail/${code}/${groupe}`));
                    //$("#adresse_mail_form_email").empty().val($(this).attr("data-email"));
                }
                
            });
            
            $(".adminAdressPhone").click(function(){
                const mainTitle = document.getElementById("mainTitle");
                const code = $(this).attr("data-code");
                if(mainTitle){
                    const groupe = mainTitle.getAttribute("data-groupe");
                    $("#form_person_adress_phone_edit").attr("action", (`/personne/adresse/phone/${code}/${groupe}`));
                    //$("#adresse_mail_form_email").empty().val($(this).attr("data-email"));
                }
                
            });

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

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