{% extends 'admin/layout.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('secto') }}
{% endblock %}
{% block body_id 'admin_post_index' %}
{%  block fil_ariane %}
    {% set url = app.request.pathinfo|split('/') %}
    <nav aria-label="breadcrumb" style="margin-top: 0.4rem;">
        <ol class="breadcrumb" style="margin-bottom: 0;">
            <li class="breadcrumb-item"><a href="#">{{ url[1]|upper }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Sectorisation</li>
        </ol>
    </nav>
{% endblock %}

{% block main %}
    <div clas="col-xs-12">
        <!-- gérer les catégories de recherche -->
        <form>
            <div id="filter-container" class="d-flex justify-content-start mb-4" style="position: relative;">
                <div class="d-flex flex-column list-search-categorie">
                    <span class="list-search-categorie--title bg-primary">
                        SITE
                    </span>
                    <span class=" list-search-categorie--input pt-5 mt-1">
                        <div class="input-group input-group-sm">
                            <select id="agent_site" name="agent[site]" class="form-select mb-3">
                                <option value="ROSNY" selected>ROSNY</option>
                            </select>
                        </div>
                    </span>
                </div>
                <span class="border-categorie"></span>

                <!-- Pour avoir la barre de titre de couleur jusqu'au bout -->
                <div class="d-flex flex-column list-search-action">
                    <span class="list-search-categorie--title bg-primary">
                        HISTORIQUE
                    </span>
                    <span class=" list-search-categorie--input pt-3 mt-1">
                        <section class="cd-horizontal-timeline">
                            <div class="timeline">
                                <div class="events-wrapper">
                                    <div class="events">
                                        <ol>
                                            {% for rowHisto in resHisto %}
                                                <li class="listeHisto {% if rowHisto.id == version %}versionActuelle{% endif %}">
                                                    <div class="cadreHisto">
                                                        <a href="#0" id="{{ rowHisto.id }}" {% if rowHisto.id == version %}class="selected"{% endif %}>MEP : <strong class="dateMepFormat">{{ rowHisto.date_mep }}</strong><br/>Créée le {{ rowHisto.date_modif }}</a>
                                                        <div class="detailsCommentaire">
                                                            <img src="{{ asset('build/images/secto/details.png') }}" />
                                                        </div>
                                                        <div class="contentCommentaire">{{ rowHisto.commentaires }}</div>
                                                        <div class="dateMep" style="display:none">{{ rowHisto.date_mep_format }}</div>
                                                    </div>
                                                </li>
                                            {% endfor %}
                                        </ol>

                                        <span class="filling-line" aria-hidden="true"></span>
                                    </div> <!-- .events -->
                                </div> <!-- .events-wrapper -->

                                <ul class="cd-timeline-navigation">
                                    <li><a href="#0" class="prev inactive">Prev</a></li>
                                    <li><a href="#0" class="next">Next</a></li>
                                </ul> <!-- .cd-timeline-navigation -->
                            </div> <!-- .timeline -->
                        </section>
                    </span>

                </div>

                <span id="filter-image"><i class="fas fa-filter bg-primary"></i></span>
            </div>
        </form>
    </div>


    <div id="containerMap">
        <div id="sectorisationMap"></div>

        <div id="explainMe" style="display: none; width: auto;">
            <div id="legende">
                <p id="texte">explications</p>
            </div>
        </div>

        <div id="blocRight">

            <span id="minimize-tab"><i class="fas fa-table fa-2x"></i></span>
            <div id="blocTab">


                {#{{ include('admin/list_datagrid_content.html.twig') }}#}
                {{ include('admin/list_datagrid_full.html.twig') }}


                {#<select id="selectResponsable" >#}
                {#<option value="">Tous les responsables</option>#}
                {#{% for rowResponsable in resResponsables %}#}
                {#<option value="{{ rowResponsable.code_agent }}" > {{ rowResponsable.prenom_agent }}  {{ rowResponsable.nom_agent }} ({{ rowResponsable.code_agent }})</option>#}
                {#{% endfor %}#}
                {#</select>#}

                {#<table id="table_clients" data-toggle="table"#}
                {#data-show-export="true"#}
                {#data-search="true"#}
                {#data-pagination="true"#}
                {#data-search-align="left"#}
                {#data-visible-search="true"#}
                {#data-locale="fr-FR"#}
                {#data-height="750"#}
                {#data-show-footer="true"#}
                {#data-footer-style="footerStyle"#}
                {#data-show-columns="true"#}
                {#data-unique-id="code_agent">#}
                {#<thead>#}
                {#<tr>#}
                {#<th data-sortable="false" data-field="site" data-visible="false">Site</th>#}
                {#<th data-sortable="true" data-field="code_agent">Code Agent</th>#}
                {#<th data-sortable="true" data-field="nom_agent">Nom Agent</th>#}
                {#<th data-sortable="true" data-field="famille0" data-visible="false" data-footer-formatter="totalFormatter">Famille 0</th>#}
                {#<th data-sortable="true" data-field="famille1" data-visible="false" data-footer-formatter="totalFormatter">Famille 1</th>#}
                {#<th data-sortable="true" data-field="famille2" data-visible="false" data-footer-formatter="totalFormatter">Famille 2</th>#}
                {#<th data-sortable="true" data-field="famille3" data-visible="false" data-footer-formatter="totalFormatter">Famille 3</th>#}
                {#<th data-sortable="true" data-field="total_clients" data-footer-formatter="totalFormatter">Total clients</th>#}
                {#<th data-sortable="true" data-field="code_groupe" data-visible="false">Responsable</th>#}
                {#</tr>#}
                {#</thead>#}
                {#<tbody>#}
                {#{% for rowAgent in resAgents %}#}
                {#<tr id="{{ rowAgent.code_agent }}">#}
                {#<td>{{ rowAgent.site }}</td>#}
                {#<td>{{ rowAgent.code_agent }}</td>#}
                {#<td>{{ rowAgent.prenom_agent }} {{ rowAgent.nom_agent }}</td>#}
                {#<td>{{ rowAgent.famille0 }}</td>#}
                {#<td>{{ rowAgent.famille1 }}</td>#}
                {#<td>{{ rowAgent.famille2 }}</td>#}
                {#<td>{{ rowAgent.famille3 }}</td>#}
                {#<td >{{ rowAgent.nb_clients }}</td>#}
                {#<td>{{ rowAgent.code_groupe }}</td>#}
                {#</tr>#}
                {#{% endfor %}#}
                {#</tbody>#}
                {#</table>#}
            </div>
            <div id="tabAgents" style="display:none">{{ resAgents|json_encode(constant('JSON_PRETTY_PRINT')) }}</div>
            <div id="site" style="display:none">{{ user.site }}</div>
        </div>

        <div class="modal fade" id="loadMe" tabindex="-1" role="dialog" aria-labelledby="loadMeLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-loader">
                    <div class="modal-body text-center">
                        <div class="loader"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="deleteMe" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class=" modal-content">
                    <div class="modalHeader">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h1 class="modalTitle">Supprimer le secteur <span id="deleteNomSecteur"></span></h1>
                    </div>
                    <div class="pop-up_bloc">
                        <form action="#" class="form_guide">
                            <div id="alerte" class="alertes"></div>
                            <div class="align_justify">
                                <a href="#"><button type="button" class="btn annuler" data-dismiss="modal">Annuler</button></a>
                                <a href="#"><button type="button" class="btn valider" id="deleteSecteur">Valider</button></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="alertVersion" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class=" modal-content">
                    <div class="modalHeader">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h1 class="modalTitle">Confirmation changement de version</h1>
                    </div>
                    <div class="pop-up_bloc">
                        <form action="#" class="form_guide">
                            <div class="alertes">Les modifications en cours seront perdues, êtes-vous sûr de vouloir changer de version ? </div>
                            <div class="align_justify">
                                <a href="#"><button type="button" class="btn annuler" data-dismiss="modal">Annuler</button></a>
                                <a href="#"><button type="button" class="btn valider" id="confirmVersion">Valider</button></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="alertDate" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class=" modal-content">
                    <div class="modalHeader">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h1 class="modalTitle">Confirmation écrasement de version</h1>
                    </div>
                    <div class="pop-up_bloc">
                        <form action="#" class="form_guide">
                            <div class="alertes"> Il existe déjà une version ayant cette date de mise en production, êtes vous sûre de vouloir écraser celle ci ? </div>
                            <div class="align_justify">
                                <a href="#"><button type="button" class="btn annuler" data-dismiss="modal">Annuler</button></a>
                                <a href="#"><button type="button" class="btn valider" id="confirmEcrase">Valider</button></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="erreur" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class=" modal-content">
                    <div class="modalHeader">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h1 class="modalTitle">Erreur</h1>
                    </div>
                    <div class="pop-up_bloc">
                        <form action="#" class="form_guide">
                            <div id="messageErreur" class="alertes"></div>
                            <div class="align_center">
                                <a href="#"><button type="button" class="btn valider" data-dismiss="modal">OK</button></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="saveMe" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class=" modal-content">
                    <div class="modalHeader">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h1 class="modalTitle">Sauvegarder les modifications suivantes : </h1>
                    </div>
                    <div class="pop-up_bloc">
                        {#<form action="#" class="form_guide" >#}
                        <form method="post" action="" class="form_ajax mbm" id="form_save">
                            <div id="histoMapActions">
                                <div id="histoMap"></div>
                                {#<div id="modifMap"></div>#}
                                <div id="rightSaveMe">
                                    <div id="historiqueActions">
                                    </div>
                                    <div id="divDateMep">
                                        <label for="dateMep">Date de mise en place : </label>
                                        {#<input type="date" name="dateMep" id="dateMep" min="{{ dateJour }}" value="{{ dateJour }}" required>#}
                                        <input type="date" name="dateMep" id="dateMep" min="{{ dateJour }}"  required>
                                    </div>
                                </div>
                            </div>
                            <div id="blocCommentaires" style="display: none">
                                <label for="commentaires">Commentaires :</label>
                                <br/>
                                <textarea id="commentaires" placeholder="Veuillez préciser vos modifications enregistrées. Ce commentaire sera visible dans l'historique des versions." name="commentaires" rows="5" cols="33" required></textarea>
                            </div>
                            <div class="align_justify">
                                <a href="#"><button type="button" class="btn delete" id="deleteModif">Effacer les modifications en cours</button></a>
                                <a href="#"><button type="button" class="btn annuler" data-dismiss="modal">Annuler</button></a>
                                <a href="#"><button type="submit" class="btn valider" id="saveModif">Valider</button></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="renameMe" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class=" modal-content">
                    <div class="modalHeader">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h1 class="modalTitle">Modifier le secteur <span id="idSecteur"></span></h1>
                    </div>
                    <div class="pop-up_bloc">
                        <form action="#" class="form_guide">
                            <div class="align_form">
                                <div class="champs">
                                    <label>Nom secteur</label>
                                    <input type="text" name="nomSecteur" id="nomSecteur" placeholder="Nom secteur" required>
                                </div>
                                <div class="champs">
                                    <label for="code_agent">Agent principal</label>
                                    <select id="code_agent" class="selectAgent">
                                        {% for rowAgent in resAgents %}
                                            <option value="{{ rowAgent.code_agent }}" > {{ rowAgent.prenom_agent }}  {{ rowAgent.nom_agent }} ({{ rowAgent.code_agent }})</option>
                                        {% endfor %}
                                    </select>
                                    <i class="fa fa-trash" data-id="code_agent"></i>
                                </div>
                                <div class="champs">
                                    <label for="suppleant_1">Agent suppléant 1</label>
                                    <select id="suppleant_1" class="selectAgent" >
                                        {% for rowAgent in resAgents %}
                                            <option value="{{ rowAgent.code_agent }}" > {{ rowAgent.prenom_agent }}  {{ rowAgent.nom_agent }} ({{ rowAgent.code_agent }})</option>
                                        {% endfor %}
                                    </select>
                                    <i class="fa fa-trash" data-id="suppleant_1"></i>
                                </div>
                                <div class="champs">
                                    <label for="suppleant_2">Agent suppléant 2</label>
                                    <select id="suppleant_2" class="selectAgent" >
                                        {% for rowAgent in resAgents %}
                                            <option value="{{ rowAgent.code_agent }}" > {{ rowAgent.prenom_agent }}  {{ rowAgent.nom_agent }} ({{ rowAgent.code_agent }})</option>
                                        {% endfor %}
                                    </select>
                                    <i class="fa fa-trash" data-id="suppleant_2"></i>
                                </div>
                                <div class="champs">
                                    <label for="suppleant_3">Agent suppléant 3</label>
                                    <select id="suppleant_3" class="selectAgent" >
                                        {% for rowAgent in resAgents %}
                                            <option value="{{ rowAgent.code_agent }}" > {{ rowAgent.prenom_agent }}  {{ rowAgent.nom_agent }} ({{ rowAgent.code_agent }})</option>
                                        {% endfor %}
                                    </select>
                                    <i class="fa fa-trash" data-id="suppleant_3"></i>
                                </div>
                                <div class="champs">
                                    <label for="suppleant_4">Agent suppléant 4</label>
                                    <select id="suppleant_4" class="selectAgent" >
                                        {% for rowAgent in resAgents %}
                                            <option value="{{ rowAgent.code_agent }}" > {{ rowAgent.prenom_agent }}  {{ rowAgent.nom_agent }} ({{ rowAgent.code_agent }})</option>
                                        {% endfor %}
                                    </select>
                                    <i class="fa fa-trash" data-id="suppleant_4"></i>
                                </div>
                            </div>
                            <div id="infoVerrouillage" class="alertes">Un agent est associé à deux rôles. Merci de modifier pour valider les modifications.</div>
                            <div class="align_justify">
                                <a href="#"><button type="button" class="btn annuler" data-dismiss="modal">Annuler</button></a>
                                <a href="#"><button type="button" class="btn valider" id="modifierNomSecteur">Valider</button></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="distanceBetween" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class=" modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modalHeader">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h1 class="modalTitle">Calculer la distance entre le secteur <span id="distanceNomSecteur"></span> et des agents</h1>
                    </div>
                    <div class="pop-up_bloc">
                        <form action="#" class="form_guide">
                            <label for="selectAgents" id="labelSelectAgents">
                                Rechercher et selectionner les agents
                                <select id="selectAgents" name="agents[]" multiple="multiple">
                                    <option value="all" >Tous les agents</option>
                                    {% for rowAgent in resAgents %}
                                        <option value="{{ rowAgent.code_agent }}" > {{ rowAgent.prenom_agent }}  {{ rowAgent.nom_agent }} ({{ rowAgent.code_agent }})</option>
                                    {% endfor %}
                                </select>
                            </label>
                            <div class="align_justify">
                                <a href="#"><button type="button" class="btn annuler" data-dismiss="modal">Annuler</button></a>
                                <a href="#"><button type="button" class="btn valider" id="calculDistance">Valider</button></a>
                            </div>
                            <table id="distanceTable" style="display: none;">
                                <tr>
                                    <th>Agent</th>
                                    <th>Distance</th>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

 {% block javascripts %}
     <script>
         var page = '{{ page|default(null) }}';
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js" integrity="sha512-uVSVjE7zYsGz4ag0HEzfugJ78oHCI1KhdkivjQro8ABL/PRiEO4ROwvrolYAcZnky0Fl/baWKYilQfWvESliRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js" integrity="sha512-VKjwFVu/mmKGk0Z0BxgDzmn10e590qk3ou/jkmRugAkSTMSIRkd4nEnk+n7r5WBbJquusQEQjBidrBD3IQQISQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.15/jspdf.plugin.autotable.min.js" integrity="sha512-y7bAIyWa5Ncv0AFN0tcz4QLyPFVIHqN66hvNyIY0uryA8RIcKNyR9MjHpuUY95Baj2KwQ7EdRWoer7vLimZAHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     {{ parent() }}
     {{ encore_entry_script_tags('list') }}
     {{ encore_entry_script_tags('secto') }}
 {% endblock %}