{% extends "layout_contacts.html.twig" %}

{% block body %}

<div class="col">
    <ul class="nav nav-tabs">
        <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#evo" data-bs-toggle="tab">Evolution adhérents/souscriptions</a>
        </li>
        {#<li class="nav-item">
        <a class="nav-link" href="#rupture-cotis" data-bs-toggle="tab">Rupture cotisation</a>
        </li>#}
        <li class="nav-item">
        <a class="nav-link" href="#membres-actifs" data-bs-toggle="tab">Membres actifs</a>
        </li>
    </ul>

    <div class="tab-content">
        <div id="evo" class="tab-pane fade show active">
            <p class="mt-2">Veuillez choisir l'année pour votre recherche :</p>
            <select class="selectpicker" id="annee-rech-adh">
                <option value="{{ 'now' | date('Y')+1 }}">{{ 'now' | date('Y')+1 }}</option>
                <option selected value="{{ 'now' | date('Y') }}">{{ 'now' | date('Y') }}</option>
                <option value="{{ 'now' | date('Y')-1 }}">{{ 'now' | date('Y')-1 }}</option>
                <option value="{{ 'now' | date('Y')-2 }}">{{ 'now' | date('Y')-2 }}</option>
                <option value="{{ 'now' | date('Y')-3 }}">{{ 'now' | date('Y')-3 }}</option>
                <option value="{{ 'now' | date('Y')-4 }}">{{ 'now' | date('Y')-4 }}</option>
            </select>
            <button id="submit-adh-evo" class="btn btn-primary" type="submit">Valider</button>
            <table style="font-size:14px" id="table-evo-adh" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="true" data-pagination="false" data-detail-view="false" data-detail-formatter="detailAdh">
            </table>

            <div id="result-evo" class="visible mt-5">
                <div style="white-space: pre-line" class="alert alert-warning" role="alert">L'ordre des cases cochées définit la priorité. Par exemple, une personne ayant fait un don tout en étant adhérent, appaîtra en don et non adhésion si la dernière case cochée est "Total de souscriptions/dons/legs"</div>
                <p class="mt-2">Voici votre sélection :</p>

                <div class="row">
                    <div id="evo-adh-menu" class="col-2" style="display: none">
                        <div class="card card-panel sticky-top" style="top: 75px; z-index: auto">
                            <div class="card-header text-center">MENU</div>
                            <ul class="list-group list-group-flush">
                                <a id="evo-adh-carnet" href="#" class="list-group-item">Ajouter à un carnet</a>
                                <a href="#" class="list-group-item">Ajouter à une diffusion</a>
                                <div class="clearfix split-items">
                                    <a id="evo-adh-mail" href="#" class="list-group-item left-side">Envoyer mail</a>
                                    <a id="evo-adh-mail-copie" href="#" class="list-group-item right-side">Copier mail(s)</a>
                                </div>
                                <a id="evo-adh-export" href="#" class="list-group-item">Exporter sélection</a>
                            </ul>
                        </div>
                    </div>

                    <div class="col-10">
                        <table style="font-size:12px" id="table-evo-adh-filter" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="true" data-filter-control="true" data-pagination="false" data-detail-view="false">
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div id="rupture-cotis" class="tab-pane fade">
        </div>
        
        <div id="membres-actifs" class="tab-pane fade">
            <p class="mt-2">Choisissez une ou plusieurs commissions du CEN pour afficher les personnes appartenant à une des commissions sélectionnées</p>
            <select class="selectpicker" id="comm-cen-select">
                {% for key, comm in list_comm_cen %}
                    <option value={{ key }}>{{ comm }}</option>
                {% endfor %}
            </select>
            <button id="submit-comm-cen" class="btn btn-primary" type="submit">Valider</button>

            <div id="result-comm-cen" class="visible mt-5">
                <p class="mt-2">Voici la liste des personnes appartenant à cette commission :</p>

                <div class="row">
                    <div id="membres-comm-menu" class="col-2" style="display: none">
                        <div class="card card-panel sticky-top" style="top: 75px; z-index: auto">
                            <div class="card-header text-center">MENU</div>
                            <ul class="list-group list-group-flush">
                                <a id="membres-comm-carnet" href="#" class="list-group-item">Ajouter à un carnet</a>
                                <a href="#" class="list-group-item">Ajouter à une diffusion</a>
                                <div class="clearfix split-items">
                                    <a id="membres-comm-mail" href="#" class="list-group-item left-side">Envoyer mail</a>
                                    <a id="membres-comm-mail-copie" href="#" class="list-group-item right-side">Copier mail(s)</a>
                                </div>
                                <a id="membres-comm-export" href="#" class="list-group-item">Exporter sélection</a>
                            </ul>
                        </div>
                    </div>

                    <div class="col-10">
                        <table style="font-size:12px" id="table-membres-comm" class="table table-striped mt-2" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="true" data-filter-control="true" data-pagination="false" data-detail-view="false">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{ form_start(form_adh_ajout_carnet, {'attr': {'class': 'form-horizontal', 'id': 'form_adh_ajout_carnet'}}) }}
<div class="modal fade modal-edit" id="modal-carnet">
    <div class="modal-dialog modal-xl modal-dialog-edit">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajouter à un carnet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <div class="row justify-content-start">
                            <div class="col-auto">
                                {{ form_label(form_adh_ajout_carnet.type_carnet, "Type du carnet", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_adh_ajout_carnet.type_carnet, {'attr': {'class': 'form-control selectpicker', 'data-style': 'btn-default'}}) }}
                            </div>
                            <div class="col-auto" style="display:none">
                                {{ form_label(form_adh_ajout_carnet.carnet, "Carnet existant", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_adh_ajout_carnet.carnet, {'attr': {'class': 'form-control selectpicker', 'data-style': 'btn-default', 'data-live-search': "true", 'data-size': "6"}}) }}
                            </div>
                            <div class="col-auto" style="display:none">
                                {{ form_label(form_adh_ajout_carnet.new_carnet, "Nouveau carnet", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_adh_ajout_carnet.new_carnet, {'attr': {'class': 'form-control' }}) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                {{ form_widget(form_adh_ajout_carnet.valider, {'attr': {'class': 'btn-primary'}}) }}
            </div>
        </div>
    </div>
</div>
{{ form_end(form_adh_ajout_carnet) }}

{% endblock %}