{% extends 'admin/layout.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('cas') }}
{% 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"><a href="#">Liste clients à servir</a></li>
            <li class="breadcrumb-item active" aria-current="page">Carte des clients à servir</li>
        </ol>
    </nav>
{% endblock %}

{% block main %}
    <div class="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-3 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>
                <div class="d-flex flex-column list-search-categorie">
                    <span class="list-search-categorie--title bg-primary">
                        PÔLE
                    </span>
                    <span class=" list-search-categorie--input pt-3 mt-1">
                        <div class="input-group input-group-sm">
                            <select id="agent_pole" name="agent[pole]" class="form-select mb-3">
                                <option value="" selected>Pôle</option>
                            </select>
                        </div>
                    </span>
                </div>
                <span class="border-categorie"></span>
                <div class="d-flex flex-column list-search-categorie">
                    <span class="list-search-categorie--title bg-primary">
                        AGENT
                    </span>
                    <span class=" list-search-categorie--input pt-3 mt-1">
                        <div class="input-group input-group-sm">
                            <select id="agent_code" name="agent[code]" class="form-select mb-3">
                                <option value="1" selected>Agent 1</option>
                                <option value="2">Agent 2</option>
                            </select>
                        </div>
                        <div class="input-group input-group-sm">
                            <label for="agent_qualification" style="font-size: 0.875rem;">
                                <input type="checkbox" id="agent_qualification" name="agent[qualification]" value="1" checked>
                                Prendre en compte la qualification du tech
                            </label>
                        </div>
                    </span>
                </div>
                <span class="border-categorie"></span>
                <div class="d-flex flex-column list-search-categorie">
                    <span class="list-search-categorie--title bg-primary">
                        DATE
                    </span>
                    <span class=" list-search-categorie--input pt-3 mt-1">
                        <div class="input-group input-group-sm">
                            <input type="date" class="form-control">
                        </div>
                    </span>
                </div>
                <span class="border-categorie"></span>
                <div class="d-flex flex-column list-search-categorie-double">
                    <span class="list-search-categorie--title bg-primary">
                        LOCALISATION
                    </span>

                    <div class="d-flex flex-row">
                        <span class=" list-search-categorie--input pt-3 pe-1 mt-1">
                            <div class="input-group input-group-sm">
                                <select id="agent_rdvs" name="agent[rdvs]" class="form-select mb-3">
                                    <option value="" selected>RDV</option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm">
                                <select id="agent_adresse" name="agent[adresse]" class="form-select mb-3">
                                    <option value="" selected>Adresse</option>
                                </select>
                            </div>
                        </span>
                        <span class=" list-search-categorie--input pt-3 ps-1 mt-1">
                            <div class="input-group input-group-sm">
                                <select id="agent_code_client" name="agent[code_client]" class="form-select mb-3">
                                    <option value="" selected>Code client</option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm">
                                <select id="agent_cp_ville" name="agent[cp_ville]" class="form-select mb-3">
                                    <option value="" selected>CP - Ville</option>
                                </select>
                            </div>
                        </span>
                    </div>
                </div>
                <span class="border-categorie"></span>
                <div class="d-flex flex-column list-search-categorie">
                    <span class="list-search-categorie--title bg-primary">
                        TRI
                    </span>
                    <span class=" list-search-categorie--input pt-3 mt-1">
                        <div class="input-group input-group-sm">
                            <select id="agent_tri" name="agent[tri]" class="form-select mb-3">
                                <option value="1">Par Date Fin de Contrat</option>
                                <option value="2" selected>Par distance</option>
                            </select>
                        </div>
                    </span>
                </div>
                <div class="d-flex flex-column list-search-action">
                    <span class="list-search-categorie--title bg-primary">
                    </span>
                    <span class=" list-search-categorie--input pt-3 mt-1">
                        <a class="btn btn-md btn-block btn-success mb-2 "><i
                                    class="fa fa-search me-2"></i> Rechercher</a>
                        <a class="btn btn-md btn-block btn-danger"><i class="fa fa-remove me-3" aria-hidden="true"></i>Effacer </a>
                    </span>
                </div>

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

    <div id="clientAServirContent">
        <div id="clientsAServirMap"></div>
        <div id="cardPagination">
            {% include 'clients/list_client_a_servir.html.twig' %}
            <div class="pagination justify-content-center">
            </div>
        </div>
    </div>


{% endblock %}

 {% block javascripts %}
     <script>
         var page = '{{ page|default(null) }}';
     </script>
     {{ parent() }}
     {{ encore_entry_script_tags('cas') }}
 {% endblock %}