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

{% block body %}

<ul class="nav nav-tabs">
    <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#contact-info" data-bs-toggle="tab">Informations principales</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#contact-cotisations" data-bs-toggle="tab">Cotisations</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#contact-services" data-bs-toggle="tab">Services</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#contact-commissions" data-bs-toggle="tab">Commissions</a>
    </li>
</ul>

<div class="tab-content mt-3">
    <div id="contact-info" class="tab-pane fade show active">
        <p>
            Contact verouillé : {{ verrou_contact ? 'Oui' : 'Non' }}
            {% if verrou_contact and 'Administrateur' in app.user.roles or 'Validateur local' in app.user.roles %}
                <button onclick="deverrouContact(null, {{ id_contact }})" type="button" id="btn-fiche-deverrou" class="btn btn-primary ms-2">Déverrouiller</button>
            {% elseif not verrou_contact and 'Administrateur' in app.user.roles or 'Validateur local' in app.user.roles %}
                <button onclick="verrouContact(null, {{ id_contact }})" type="button" id="btn-fiche-verrou" class="btn btn-primary ms-2">Verrouiller</button>
            {% endif %}
        </p>
        <p>
            Niveau de validation : {{ valid_contact }}
        </p>
        <legend>Informations du contact
            {% if verrou_contact %}
                <button type="button" id="btn-modif-contact" class="btn btn-primary ms-2" disabled>Modifier</button>
            {% else %}
                <button type="button" id="btn-modif-contact" class="btn btn-primary ms-2">Modifier</button>
            {% endif %}
        </legend>
        {% if type_contact == 'P' %}
            <table id="table-infos-contact-pers" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
            </table>
            <legend class="mt-5 fs-5">Affectation site(s)</legend>
            <table id="table-infos-contact-sites" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
            </table>
        {% elseif type_contact == 'O' %}
            <table id="table-infos-contact-org" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
            </table>
            <legend class="mt-5 fs-5">Affectation site(s)</legend>
            <table id="table-infos-contact-sites" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
            </table>
        {% endif %}
    </div>

    <div id="contact-cotisations" class="tab-pane fade show">
        <legend>Cotisations
            <button type="button" id="btn-add-coti" class="btn btn-primary ms-2">Ajouter</button>
        </legend>
            <table id="table-coti-contact" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
            </table>
        </legend>
    </div>

    <div id="contact-services" class="tab-pane fade show">
        {% if type_contact == 'P' %}
        <legend>Appartenances aux services dans chaque organisme
            {% if verrou_contact %}
                <button type="button" id="btn-add-serv" class="btn btn-primary ms-2" disabled>Ajouter</button>
            {% else %}
                <button type="button" id="btn-add-serv" class="btn btn-primary ms-2">Ajouter</button>
            {% endif %}
        </legend>
        <table id="table-list-pers-services" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
        </table>
        {% elseif type_contact == 'O' %}
        <legend>Services
            {% if verrou_contact %}
                <button type="button" id="btn-add-serv-org" class="btn btn-primary ms-2" disabled>Ajouter</button>
            {% else %}
                <button type="button" id="btn-add-serv-org" class="btn btn-primary ms-2">Ajouter</button>
            {% endif %}
        </legend>
        <table id="table-list-services" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
        </table>
        <legend>Membres des services
            {% if verrou_contact %}
                <button type="button" id="btn-add-serv" class="btn btn-primary ms-2" disabled>Ajouter personne existante</button>
                <button type="button" id="btn-add-serv-new" class="btn btn-primary ms-2" disabled>Ajouter nouvelle personne</button>
            {% else %}
                <button type="button" id="btn-add-serv" class="btn btn-primary ms-2">Ajouter personne existante</button>
                <button type="button" id="btn-add-serv-new" class="btn btn-primary ms-2">Ajouter nouvelle personne</button>
            {% endif %}
        </legend>
        <table id="table-list-services-membres" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
        </table>
        {% endif %}
    </div>

    <div id="contact-commissions" class="tab-pane fade show">
        {% if type_contact == 'P' %}
        <legend>Appartenances aux commissions dans chaque organisme
            {% if verrou_contact %}
                <button type="button" id="btn-add-comm" class="btn btn-primary ms-2" disabled>Ajouter</button>
            {% else %}
                <button type="button" id="btn-add-comm" class="btn btn-primary ms-2">Ajouter</button>
            {% endif %}
        </legend>
        <table id="table-list-pers-comm" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
        </table>
        {% elseif type_contact == 'O' %}
        <legend>Commissions
            {% if verrou_contact %}
                <button type="button" id="btn-add-comm-org" class="btn btn-primary ms-2" disabled>Ajouter</button>
            {% else %}
                <button type="button" id="btn-add-comm-org" class="btn btn-primary ms-2">Ajouter</button>
            {% endif %}
        </legend>
        <table id="table-list-comm" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
        </table>
        <legend class="mt-5">Membres des commissions
            {% if verrou_contact %}
                <button type="button" id="btn-add-comm" class="btn btn-primary ms-2" disabled>Ajouter personne existante</button>
                <button type="button" id="btn-add-comm-new" class="btn btn-primary ms-2" disabled>Ajouter nouvelle personne</button>
            {% else %}
                <button type="button" id="btn-add-comm" class="btn btn-primary ms-2">Ajouter personne existante</button>
                <button type="button" id="btn-add-comm-new" class="btn btn-primary ms-2">Ajouter nouvelle personne</button>
            {% endif %}
        </legend>
        <table id="table-list-comm-membres" class="table table-striped" data-search="false" data-locale="fr-FR" data-show-columns="false" data-show-export="false" data-filter-control="false" data-pagination="false" data-detail-view="false">
        </table>
    {% endif %}
    </div>
</div>

{{ form_start(form_saisie_service, {'attr': {'class': 'form-horizontal', 'id': 'form_saisie_service'}}) }}
<div class="modal fade" id="modal-add-service" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajout d'un service</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-between">
                            <div class="col-auto">
                                {{ form_label(form_saisie_service.intitule, "Intitulé", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_saisie_service.intitule) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <div class="row justify-content-between">
                            <div class="col-auto">
                                {{ form_label(form_saisie_service.num, "Numéro", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_saisie_service.num) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_saisie_service.rue, "Rue", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_saisie_service.rue) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_saisie_service.cp, "Code postal", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_saisie_service.cp) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_saisie_service.ville, "Ville", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_saisie_service.ville) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <div class="row justify-content-between">
                            <div class="col-auto">
                                {{ form_label(form_saisie_service.tel, "Tél.", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_saisie_service.tel) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_saisie_service.mail, "Mail", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_saisie_service.mail) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    {{ form_widget(form_saisie_service.ajouter, {'attr': {'class': 'btn-primary mb-2'}}) }}
                </div>
            </div>
        </div>
    </div>
</div>
{{ form_end(form_saisie_service) }}

{{ form_start(form_saisie_comm, {'attr': {'class': 'form-horizontal', 'id': 'form_saisie_comm'}}) }}
<div class="modal fade" id="modal-add-comm" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajout d'une commission</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-between">
                            <div class="col-auto">
                                {{ form_label(form_saisie_comm.intitule, "Intitulé", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_saisie_comm.intitule) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    {{ form_widget(form_saisie_comm.ajouter, {'attr': {'class': 'btn-primary mb-2'}}) }}
                </div>
            </div>
        </div>
    </div>
</div>
{{ form_end(form_saisie_comm) }}

{{ form_start(form_assoc_pers_serv, {'attr': {'class': 'form-horizontal', 'id': 'form_assoc_pers_serv'}}) }}
<div class="modal fade" id="modal-add-personne-serv" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajout d'une personne (création de personne)</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-between">
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_serv.civ, "Civilité", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_serv.civ, {'attr': {'class': 'form-control selectpicker', 'data-style': 'btn-default'}}) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_serv.nom, "Nom", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_serv.nom) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_serv.prenom, "Prénom", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_serv.prenom) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <div class="row justify-content-between">
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_serv.service, "Service", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_serv.service, {'attr': {'class': 'form-control selectpicker', 'data-style': 'btn-default'}}) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_serv.tel_pro, "Tel. pro.", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_serv.tel_pro) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_serv.mail_pro, "Mail pro.", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_serv.mail_pro) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_serv.statut, "Statut", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_serv.statut, {'attr': {'class': 'form-control selectpicker', 'data-style': 'btn-default', 'data-live-search': 'true', 'data-size': '6'}}) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                {{ form_widget(form_assoc_pers_serv.ajouter, {'attr': {'class': 'btn-primary mb-2'}}) }}
            </div>
        </div>
    </div>
</div>
{{ form_end(form_assoc_pers_serv) }}

{{ form_start(form_assoc_pers_comm, {'attr': {'class': 'form-horizontal', 'id': 'form_assoc_pers_comm'}}) }}
<div class="modal fade" id="modal-add-personne-comm" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajout d'une personne (création de personne)</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-between">
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_comm.civ, "Civilité", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_comm.civ, {'attr': {'class': 'form-control selectpicker', 'data-style': 'btn-default'}}) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_comm.nom, "Nom", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_comm.nom) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_comm.prenom, "Prénom", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_comm.prenom) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <div class="row justify-content-between">
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_comm.comm, "Commission", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_comm.comm, {'attr': {'class': 'form-control selectpicker', 'data-style': 'btn-default'}}) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_comm.tel_pro, "Tel. pro.", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_comm.tel_pro) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_comm.mail_pro, "Mail pro.", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_comm.mail_pro) }}
                            </div>
                            <div class="col-auto">
                                {{ form_label(form_assoc_pers_comm.statut, "Statut", {'label_attr': {'class': 'control-label'}}) }}
                                {{ form_widget(form_assoc_pers_comm.statut, {'attr': {'class': 'form-control selectpicker', 'data-style': 'btn-default', 'data-live-search': 'true', 'data-size': '6'}}) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                {{ form_widget(form_assoc_pers_comm.ajouter, {'attr': {'class': 'btn-primary mb-2'}}) }}
            </div>
        </div>
    </div>
</div>
{{ form_end(form_assoc_pers_comm) }}

<script>
var type_contact = {{ type_contact|json_encode|raw }};
var coti_contact = {{ coti_contact|json_encode|raw }};
var infos_contact = {{ infos_contact|json_encode|raw }};
var infos_contact_sites = {{ infos_contact_sites|json_encode|raw }};
var list_statuts = {{ list_statuts|json_encode|raw }};
var list_applis = {{ list_applis|json_encode|raw }};
var list_pers_services = {{ list_pers_services|json_encode|raw }};
var list_pers_comm = {{ list_pers_comm|json_encode|raw }};
var list_services = {{ list_services|json_encode|raw }};
var list_comms = {{ list_comms|json_encode|raw }};
var list_services_membres = {{ list_services_membres|json_encode|raw }};
var list_comm_membres = {{ list_comm_membres|json_encode|raw }};
</script>

{% endblock %}