{% extends 'admin/layout.html.twig' %}
{% block body_class ' bg-white' %}
{% block style_container %}padding:0;{% endblock %}
{% block title %} Cartographie des interventions {% endblock %}


{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('map') }}
    {{ encore_entry_link_tags('carto') }}
{% endblock %}
{% block body_id 'admin_post_index' %}

{% block main %}
    <form action="" id="form_carto" method="post" data-turbo="false" data-changed="false" style="height: 97px">
        <input type="hidden" name="process" id="process_update" value="" form="form_carto">
        <div class="d-flex position-fixed bg-white col-sm-12" style="z-index: 1000;">
            <div class="d-flex bg-primary  pt-2 ps-2 pb-2 ms-1 me-1 justify-content-center" style="flex-grow:1;">
                <div class="d-flex align-items-center">
                    <div style="margin-right:2rem;">
                        <div class="input-group form-group pb-2 d-flex">
                            <label class="white me-2  control-label align-self-center" for="site" style="width:48px;">Site</label>
                            <select name="site" style="width:128px" class="form-control bg-grey" form="form_carto">
                                {% for site in sites %}
                                    <option value="{{ site.getId }}">{{ site.getNom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div style="margin-right:2rem;">
                        <div class="input-group form-group pb-2 d-flex">
                            <label class="white me-2  control-label align-self-center" for="groupes" style="width:48px;">Groupe</label>
                            <div class="dropdown-container" data-list="groupes">
                                <div class="dropdown">
                                    <button style="width:200px" type="button"
                                            class="d-flex form-control dropdown-button">Sélectionnez des groupes
                                    </button>
                                    <div class="dropdown-content" id="dropdown-content-groupes">
                                        {% for groupe in groupes %}
                                            <label>
                                                <input type="checkbox" name="options_groupes[]"
                                                       value="{{ groupe.getId }}" class="checkbox-option">
                                                {{ groupe.getTypeNom }}
                                            </label>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- Champ caché pour stocker les valeurs sélectionnées -->
                                <input type="hidden" name="selected_options_groupes" class="selected-options">
                            </div>

                        </div>
                    </div>
                    <div style="margin-right:2rem;">
                        <div class="input-group form-group pb-2 d-flex">
                            <label class="white me-2  control-label align-self-center" for="agents" style="width:48px;">Agent</label>

                            <div class="dropdown-container" data-list="agents">
                                <div class="dropdown">
                                    <button style="width:200px" type="button"
                                            class="d-flex form-control dropdown-button">Sélectionnez des agents
                                    </button>
                                    <div class="dropdown-content" id="dropdown-content-agents">
                                        {% for agent in agents %}
                                            <label>
                                                <input type="checkbox" name="options_agents[]" value="{{ agent.getId }}"
                                                       class="checkbox-option">
                                                {{ agent.getCodeNom }}
                                            </label>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- Champ caché pour stocker les valeurs sélectionnées -->
                                <input type="hidden" name="selected_options_agents" class="selected-options">
                                <input type="hidden" id="selected_etiquettes">
                            </div>
                        </div>
                    </div>
                    <div style="margin-right:2rem;">
                        <div class="input-group form-group pb-2 d-flex">
                            <label class="white me-2  control-label align-self-center" for="date_tournee">Date de la
                                tournée</label>
                            <input type="date" style="width:128px" name="date_tournee"
                                   class="form-control bg-white input-date-custom" value="{{ 'now'|date('Y-m-d') }}">
                        </div>
                    </div>
                </div>
                <div class="px-2 color-primary h-100 d-flex flex-column align-items-center ">
                    <div class="d-flex flex-column justify-content-center w-100 h-100"
                         style="margin-left: 6rem;">
                        <div class="d-flex flex-column align-items-center h-100" style="gap:0.5rem;">
                            <button id="submit-form-carto" class="btn bg-vert-vert w-100 " style="width: 193px !important;" form="form_carto">
                                Rechercher
                            </button>

                            <button id="reset-form-carto" class="btn bg-rouge-rouge w-100" style="width:193px !important">
                                Effacer
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
    <div class="col-md-12 ms-1 me-1" id='etiquettes'>
    </div>

    <div id="map" class="ms-1 me-1" style="width: auto; height: 700px;"></div>

    <div id="loader-overlay" class="loader-overlay"></div>
    <div id="loader" class="loader-container">
        <div class="spinner">
            <div></div><div></div><div></div><div></div>
            <div></div><div></div><div></div><div></div>
        </div>
        <div class="text">Chargement...</div>
    </div>
    {{ encore_entry_script_tags('loader') }}

{% endblock %}

{% block popup %}
    {{ include('agent/_popup_cartographie_legende.html.twig') }}
    {{ include('agent/_popup_cartographie_rdv.html.twig') }}
    {{ include('agent/_popup_cartographie_gps.html.twig') }}
{% endblock %}

 {% block javascripts %}
     <script>
         var page = '{{ page|default(null) }}';
         var data = {{ data|json_encode|raw }};
         var path_client = {{ path_client|json_encode|raw }};
     </script>
     {{ parent() }}
     {{ encore_entry_script_tags('map') }}
     {{ encore_entry_script_tags('carto') }}
 {% endblock %}