{% extends 'admin/layout.html.twig' %}

{% block body_class 'bg-white font-size-sm' %}
{% block style_container %}padding:0;{% endblock %}
{% block title %} Agent : {{ agent.nom }}  - N°{{ agent.codeAgent ? agent.codeAgent : agent.id }} {% endblock %}

{% block main %}
    {% set affectation = agent.getActiveUtilisateurAffectation %}
    {% set my_lock = (lock.utilisateur == app.user and lock.getIdEntite == agent.id) ? true : false %}
    {% set type_affichage = my_lock ? 'edit' : 'view'  %}
     <form id="form_agent_update" method="post" action="{{ path('patch_agent', {id: agent.id}) }}" data-affichage="{{ type_affichage }}" data-turbo="true" data-changed="false"  style="height: 135px">
         <input type="hidden" name="process" id="process_update" value="" form="form_agent_update">
         <input type="hidden" id="lock-id" value="{{ lock.utilisateur == app.user ? lock.id : '' }}">
         <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 ms-1 me-1  " style="flex-grow:1;">
            <div style="margin-right:2rem;">
                <div  class="mb-2 title-700">Agent ({{ agent.getSitesListe ? agent.getSitesListe : '(Site)' }})</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="agent_nom" style="width:48px;">Nom</label>
                    <input type="text" id="agent_nom" name="agent_nom" style="max-width:166px;" class="form-control bg-white" value="{{ agent.nom }}" {{ agent.nom ? 'disabled' : '' }}>
                </div>
                <div class="input-group form-group d-flex">
                    <label class="white me-2  control-label align-self-center" for="agent_prenom"  style="width:48px;">Prénom</label>
                    <input type="text" id="agent_prenom" name="agent_prenom" style="max-width:166px;" class="form-control bg-white" value="{{ agent.prenom }}" {{ agent.prenom  ? 'disabled' : '' }}>
                </div>
            </div>
            <div style="margin-right:1rem;">
                <div  class="input-group form-group pb-2">
                    <div class="d-flex">
                        <i class="fa fa-lg fa-2x fa-home align-self-center" style="margin-left: -0.2rem;  margin-right: 0.8rem;"></i>
                        <div class="input-icons me-3" style="width:733px">
                            <button type="submit" form="form_agent_adresse" style="background: transparent;border: 0;right:0">
                                <i class="fa fa-lg icon color-primary"></i>
                            </button>
                            <input type="text" id="agent_adresse_auto" name="agent_adresse_auto" data-disable-on-view="" class="form-control bg-white input-field" value="{{ agent.adresse }}" >
                            <div class="adresse_auto_error" style="display: none;height:30px;margin-bottom:0"></div>
                            <input type="hidden" name="code_postal" form="form_agent_update" value="">
                            <input type="hidden" name="ville" form="form_agent_update" value="">
                            <input type="hidden" name="adresse" form="form_agent_update" value="">
                            <input type="hidden" name="coordinates" form="form_agent_update" value="">
                        </div>
                    </div>
                </div>
                <div class="d-flex align-items-end">
                    <div class="icon-phone-rotary-agent white" style="width: 45px;height:40px;margin-left: -0.4rem;">{{ source('@public_path'~asset('build/images/phone-rotary.svg')) }}</div>
                    <div class="d-flex align-items-baseline flex-column me-2">
                        <span class="me-1">Perso</span>
                        <input  style="width:130px" type="text" data-disable-on-view="" minlength="14"  maxlength="14" size="10" name="tel_perso" class="form-control input_tel" value="{{ agent.getTelPerso ? agent.getTelPerso.numero : '' }}">
                    </div>
                    <div class="d-flex align-items-baseline flex-column me-2">
                        <span class="me-1">Pro</span>
                        <input  style="width:130px" type="tel" data-disable-on-view="" minlength="10"  maxlength="10" size="10" name="tel_pro" class="form-control input_tel" value="{{ agent.getTelPro ? agent.getTelPro.numero : '' }}">
                    </div>
                    <div class="d-flex align-items-baseline flex-column me-2">
                        <span style="width:105px;" class="me-1"> Secteur</span>
                        <input type="text"  style="width:130px"  disabled name="tel_secteur" class="form-control" value="{{ agent.agence ? agent.agence.numTel : '' }}">
                    </div>
                    <div class="d-flex align-items-baseline flex-column">
                        <span class="me-1">Pôle</span>
                        <input type="text" style="width:80px"  disabled name="tel_pole" class="form-control" value="{{ agent.getPole ? agent.getPole.numero : '' }}">
                    </div>
                </div>
                <div class="my-2 d-flex align-items-center">
                   <i class="fa fa-lg fa-envelope fa-2x " aria-hidden="true" style="width: 32px;"></i>
                    <input  class="form-control" type="email" name="mail_perso" data-disable-on-view="" style="width:271px" value="{{ agent.getEmailPerso ? agent.getEmailPerso.email : '' }}">
                </div>
            </div>
            <div class="px-2 color-primary h-100 d-flex flex-column align-items-center " style="flex:1">
                <div id="result-prog-quitter" class="d-flex flex-column justify-content-center w-100 h-100" style="margin-left: 6rem;">
                    {{ include('agent/_boutons_prog_quitter.html.twig') }}
                </div>
            </div>

        </div>
    </div>
     </form>

    <div class="tab-content bg-grey px-1 pb-3 pt-2 col-sm-12" id="body-agent">
        <div class="tab-pane fade show active d-flex" id="agent-details" role="tabpanel" aria-labelledby="agent-1-tab" style="position:relative">
           <div class="d-flex justify-content-between flex-wrap flex-lg-row flex-md-column position-relative" style="width: 1707px;">
                <div class="d-flex bg-primary flex-column h-auto " style="width: 1400px;">
                    <div class="text-center py-1 " style="color:white">Informations Agent</div>
                    <div class="px-3 py-2 bg-white color-primary w-100 h-100 block-infos-container">
{#                       <i class="fa fa-lg fa-history custom-history"></i>#}
                        {%  set disabled = 'disabled' %}
                        {%  set type = 'show' %}
                        {%  set programmation = 'non' %}
                        <div class="d-flex">
                            <div style="width:60%">
                                <div class="d-flex">
                                    <div class="ms-2 me-5" style="position:relative">
                                        {% set photo = agent.photo %}
                                        <img src="{{ (photo) ? photo :  asset('build/images/image_default_agent.png') }}" id="agent-photo" data-defaultimage="{{ asset('build/images/image_default_agent.png') }}"  class="d-flex"  width="105" height="108" style="margin:0 auto;">
                                        <div class="d-flex mt-1 position-relative"  style="width:93px;height: 20px;margin-left: 3px;">
                                            <div id="upload-photo-agent" data-disableonview="{{ type_affichage }}" style="width:93px;height: 20px;border: 1px solid #2C3E50"></div>
                                        </div>
                                        <a  title="supprimer la photo" data-confirm="1" data-ajax="true" data-js="$('#photo_agent_64').val('');$('#agent-photo').attr('src',$('#agent-photo').data('defaultimage'));$('#agent-photo-delete').hide();" id="agent-photo-delete" href="{{ path('agent_delete_photo', {'id': agent.id}) }}" class="{{ photo ? '' : 'hide' }} color-vert mb-1"  style="margin-left:4px; font-size:12px;text-decoration: none;position:absolute;right: -21px;bottom: -4px;"><i class="fa fa-trash color-vert {{ type_affichage != 'edit' ? 'hide' : '' }}"  style="font-size:15px; margin-right:13px"></i></a>
                                        <input type="hidden" name="photo_agent" id="photo_agent_64" form="form_agent_update">
                                    </div>
                                    <div class="d-flex flex-column">
                                        {{ include('agent/_affectation.html.twig') }}
                                    </div>
                                </div>
                                {% if not agent.isPlanning %}
                                <div class="px-2 py-2 bg-white" style="position:relative;">
                                    <div class="d-flex " style="position: absolute;top:inherit;right:0;">
                                        <i id="add_agent_restriction" data-disable-on-view="" class="fa fa-lg fa-plus button-add custom-history bg-vert" style="position:relative;border-color: #14a085;-webkit-text-stroke: 1px #14a085;top:inherit;right:inherit"></i>
                                    </div>
                                    <div
                                            style="padding-right: 38px;"
                                            class="grid"
                                            data-style="tab"
                                            data-disableonview="{{ type_affichage }}"
                                            id="agent-grid-restriction"
                                            data-columns="{{ restrictionsGrid.columns|json_encode() }}"
                                            data-getpath="{{ restrictionsGrid.get_path is defined  ? restrictionsGrid.get_path : '' }}"
                                            data-createpath="{{ restrictionsGrid.create_path is defined  ? restrictionsGrid.create_path : '' }}"
                                            data-editing="{{ restrictionsGrid.editing is defined  ? restrictionsGrid.editing|json_encode() : '' }}"
                                            data-deletepath="{{ restrictionsGrid.delete_path is defined  ? restrictionsGrid.delete_path : '' }}"
                                            data-patchpath="{{ restrictionsGrid.patch_path is defined  ? restrictionsGrid.patch_path : '' }}"
                                            data-searchpanel='{"visible":false}'
                                            data-pagination='{"visible":false}'
                                            data-toolbarinvisible="true"
                                            data-oneditorpreparing_change_items='{"field":"idtype_planification", "name": "idtype_planification"}'
                                            data-disable-only-editing = "{{ restrictionsGrid.disableOnlyEditing is defined  ? restrictionsGrid.disableOnlyEditing|json_encode() : '' }}"
                                            data-disable-only-adding = "{{ restrictionsGrid.disableOnlyAdding is defined  ? restrictionsGrid.disableOnlyAdding|json_encode() : '' }}"
                                    >
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                            {% if not agent.isPlanning %}
                            <div style="width: 40%">
                                <div class="d-flex bg-primary flex-column h-auto" >
                                    <div class=" bg-white w-100 h-100 block-infos-container" style="border: none">
                                        <div class="d-flex " style="position: absolute;top:inherit;right:0;">
                                            <i id="add_agent_qualification" data-disable-on-view="" class="fa fa-lg fa-plus button-add custom-history bg-vert" style="position:relative;border-color: #14a085;-webkit-text-stroke: 1px #14a085;top:inherit;right:inherit"></i>
                                            {#                            <i class="fa fa-lg fa-history custom-history" style="position:relative;top:inherit;right:inherit"></i>#}
                                        </div>
                                        <div
                                                class="grid"
                                                data-style="tab"
                                                id="agent-grid-qualification"
                                                data-disableonview="{{ type_affichage }}"
                                                data-columns="{{ qualificationsGrid.columns|json_encode() }}"
                                                data-getpath="{{ qualificationsGrid.get_path is defined  ? qualificationsGrid.get_path : '' }}"
                                                data-createpath="{{ qualificationsGrid.create_path is defined  ? qualificationsGrid.create_path : '' }}"
                                                data-editing="{{ qualificationsGrid.editing is defined  ? qualificationsGrid.editing|json_encode() : '' }}"
                                                data-deletepath="{{ qualificationsGrid.delete_path is defined  ? qualificationsGrid.delete_path : '' }}"
                                                data-searchpanel='{"visible":false}'
                                                data-pagination='{"visible":false}'
                                                data-toolbarinvisible="true"
                                                data-oneditorpreparing_change_items='{"field":"code", "name":"libelle"}'
                                        >

                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
               <div class="d-flex flex-column" style="width: 302px;">
                   <div class="d-flex bg-primary flex-column h-auto " >
                       <div class="text-center py-1 " style="color:white">Commande magasin</div>
                       <div class="px-3 py-2 bg-white color-primary w-100 h-100 block-infos-container">
                           <div class="mb-2 d-flex align-items-baseline  ">
                               <span style="width:80px;" class="me-1"> Agence</span>
                               <input type="text"  disabled class="form-control" value="{{ agent.agence ? agent.agence.nom : '' }}" style="width:170px">
                           </div>
                           <div class="d-flex align-items-end">
                               <span class="me-1" style="width:82px;margin-left: -2.1px">&nbsp;Code Agi</span>
                               <input type="text" maxlength="9" disabled class="form-control" name="agi" style="width:170px" value="{{ agent.codeClientAgi }}">
                           </div>
                       </div>
                   </div>
                   {% if not agent.isPlanning %}
                   <div class="d-flex bg-primary flex-column h-auto ">
                       <div class="text-center py-1 " style="color:white">Informations Secteur</div>
                       <div class="px-3 py-2 bg-white color-primary w-100 h-100 block-infos-container">
                           <div class="mb-2 d-flex align-items-center">
                               <label class="me-1" style="width:120px;">Agent principal</label>
                               {% if agent.getSecteurPrincipal %}
                                   <input type="text" disabled class="form-control" style="width:150px;" value="{{ agent.getSecteurPrincipal  }}">
                               {% else %}
                                   <span class="color-primary">-</span>
                               {% endif %}
                           </div>
                           <div class="d-flex  align-items-center">
                               <label style="width: 120px;" class="me-1">Agent suppléant</label>
                               {% if agent.getSecteursSuppleant %}
                                   {% set listeSecteursSec = agent.getSecteursSuppleant | join(',') %}
                                   <input type="text"  style="width:150px; margin-bottom:3px"  disabled class="form-control" value="{{ listeSecteursSec }}">
                               {% else %}
                                   <span class="color-primary">-</span>
                               {% endif %}
                           </div>
                       </div>
                   </div>
                   {% endif %}
               </div>
               {% if not agent.isPlanning %}
               <div style="width: 1710px;height:1px;" class="bg-orange my-1"></div>
               <div class="d-flex bg-primary flex-column h-auto " style="width: 1703px;">
                   <div class="text-center py-1 " style="color:white">Appareils</div>
                   <div class="px-2 py-2 bg-white" style="position:relative;">
                       <div class="d-flex " style="position: absolute;top:inherit;right:0;">
                           <i id="add_agent_appareil" data-disable-on-view="" class="fa fa-lg fa-plus button-add custom-history bg-vert" style="position:relative;border-color: #14a085 ;-webkit-text-stroke: 1px #14a085;top:inherit;right:inherit"></i>
                       </div>
                       <div
                               style="padding-right: 38px;"
                               class="grid"
                               data-style="tab"
                               data-disableonview="{{ type_affichage }}"
                               id="agent-grid-appareil"
                               data-columns="{{ appareilsGrid.columns|json_encode() }}"
                               data-getpath="{{ appareilsGrid.get_path is defined  ? appareilsGrid.get_path : '' }}"
                               data-createpath="{{ appareilsGrid.create_path is defined  ? appareilsGrid.create_path : '' }}"
                               data-editing="{{ appareilsGrid.editing is defined  ? appareilsGrid.editing|json_encode() : '' }}"
                               data-deletepath="{{ appareilsGrid.delete_path is defined  ? appareilsGrid.delete_path : '' }}"
                               data-patchpath="{{ appareilsGrid.patch_path is defined  ? appareilsGrid.patch_path : '' }}"
                               data-searchpanel='{"visible":false}'
                               data-pagination='{"visible":false}'
                               data-toolbarinvisible="true"
                               data-oneditorpreparing_change_items='{"field":"id", "name":"appareil"}'
                               data-disable-only-editing = "{{ appareilsGrid.disableOnlyEditing is defined  ? appareilsGrid.disableOnlyEditing|json_encode() : '' }}"
                               data-disable-only-adding = "{{ appareilsGrid.disableOnlyAdding is defined  ? appareilsGrid.disableOnlyAdding|json_encode() : '' }}"
                       >

                       </div>
                   </div>
               </div>
               {% endif %}
               <div style="width: 1710px;height:1px;" class="bg-orange my-1"></div>
               <div class="d-flex bg-primary flex-column h-auto " style="width: 1703px;">
                   <div class="text-center py-1 " style="color:white">Formations</div>
                   <div class="px-2 py-2 bg-white" style="position:relative;">
                       <div class="text-center color-primary"></i>en cours de développement</div>
                   </div>
               </div>
            </div>
            <div style="width:185px;margin-left:12px;">
                <div class="d-flex  flex-column h-auto bloc_fiche_pref position-fixed" style="width:185px">
                    <div class="px-2 py-2  {{ my_lock ? 'bg-white color-white' : 'bg-orange color-primary' }} w-100 h-100 block-infos-container d-flex flex-column align-items-center ">
                            <div id="form-actions-row" class="d-flex flex-column justify-content-center">
                                {% if my_lock %}
                                    <button id="btn-save-agent" class="btn btn-md btn-block btn-outline-success d-flex" type="submit" form="form_agent_update" >
                                        <i class="fa fa-save me-3 align-self-center fa-lg"></i>
                                        <span style="text-align: left">Enregistrer et continuer l'édition</span>
                                    </button>
                                    <button id="btn-save-agent-close" class="btn btn-md btn-block btn-outline-danger mt-2 d-flex" onclick="$('#process_update').val('close');" type="submit" form="form_agent_update" >
                            <i class="fa fa-save me-3 align-self-center fa-lg"></i>
                            <span style="text-align: left">Enregistrer et fermer la fiche</span>
                            </button>
                            {% elseif lock is defined %}
                            <div class="text-center  color-white" style="font-size: 12px;">
                                <div class="pt-1">Fiche agent en lecture seule</div>
                                <div>Modification par {{ lock.getUtilisateur }}</div>
                                <div class="pb-1">{{ lock.getDateDebut|date('d/m/Y H:i') }}</div>
                            </div>

                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="popup-quitter-entreprise" style="display:none" >
    <i  style="font-size: 0.9rem; display: block;color:#C00000;font-style: italic;font-weight: 600">A renseigner uniquement si l'agent quitte définitivement l'entreprise : ne pas utiliser pour un changement de poste ou pour un arrêt de travail.</i>
    <div class="p-3">
        <form  style="font-size: 1rem;" class="form-ajax" data-target-html="#result-prog-quitter" data-js="$('#close-popup-quitterentreprise').click();" action="{{ path('agent_quitter_entreprise', {id: agent.id}) }}"  method="post" >
            <div class="form-group mb-2 d-flex justify-content-center">
                <label  class="col-form-label" >Date de sortie de l'entreprise</label>
                <input type="date" class="form-control-sm mx-2" name="date_sortie"  class="me-2" required>
            </div>

            <div class="form-group d-flex justify-content-center mt-4">
                <div class="form-actions-row">
                    <button  class="btn btn-outline-danger btn-close-popup me-3"  data-dxpopup-id="popup-quitter-entreprise" id="close-popup-quitterentreprise" type="button" >Annuler</button>
                    <button  class="btn btn-outline-success" type="submit">Valider</button>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}

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

    {{ parent() }}
     <script type="module">
         $('body').on('click', '#add_agent_qualification', function (e) {
             var datagridAgentQualification = $('#agent-grid-qualification').dxDataGrid('instance');
             datagridAgentQualification.addRow();
         });
         $('body').on('click', '#add_agent_appareil', function (e) {
             var datagridAgentAppareil = $('#agent-grid-appareil').dxDataGrid('instance');
             datagridAgentAppareil.addRow();
         });
         $('body').on('click', '#add_agent_restriction', function (e) {
             var datagridAgentRestriction = $('#agent-grid-restriction').dxDataGrid('instance');
             datagridAgentRestriction.addRow();
         });
         $('body').on('change', '#affectation_temps_travail', function(e) {
             if ($(this).val() != "100") $('#affectation_div_motif').removeClass('hide');
             else $('#affectation_div_motif').addClass('hide');
         });
         $(document).on('ready turbo:load', function() {
             $('#affectation_type_profil option, ' +
                 '#affectation_utilisateur_planning option, ' +
                 '#affectation_motif option, ' +
                 '#affectation_temps_travail option, ' +
                 '#affectation_plannifiable option,' +
                 '#affectation_responsable option').each(function(e) {
                 if (this.hasAttribute('selected')) $(this).prop('selected', true);
                else $(this).prop('selected', false);
             });
             if ($('#affectation_temps_travail option:selected').val() != "100") {
                 $('#affectation_div_motif').removeClass('hide');
             }

             $('input[name=agent_adresse_auto]').autocomplete({
                 source: function(request, response) {
                     $.ajax({
                         method: "GET",
                         url: 'https://api-adresse.data.gouv.fr/search/?q=' + $("input[name='agent_adresse_auto']").val() + '&type=housenumber&autocomplete=1&limit10&lat&lon',
                         dataType: "json",
                         success: function(data){
                             response($.map(data.features, function (item) {
                                 var adresses = [];
                                 // Ici on est obligé d'ajouter les CP dans un array pour ne pas avoir plusieurs fois le même
                                 if ($.inArray(item.properties.label, adresses) == -1 && item.properties.housenumber) {
                                     adresses.push(item.properties.label);
                                     console.log(item);
                                     return { label: item.properties.label,
                                         city: item.properties.city,
                                         postcode: item.properties.postcode,
                                         name: item.properties.name,
                                         coordinates: item.geometry.coordinates
                                     };
                                 }
                             }));
                         }
                     })
                 },
                 // On remplit aussi la ville
                 select: function(event, ui) {
                     $("input[name='code_postal']").val(ui.item.postcode);
                     $("input[name='ville']").val(ui.item.city);
                     $("input[name='adresse']").val(ui.item.name);
                     $("input[name='coordinates']").val(ui.item.coordinates);
                 }
             });


             $('#upload-photo-agent').dxFileUploader({
                 multiple: false,
                 accept: "image/*",
                 uploadMode: "instantly",
                 uploadMethod: 'POST',
                 labelText : '',
                 visible: ($('#upload-photo-agent').data('disableonview') == 'edit') ? true: false,
                 progress: 1,
                 showFileList: false,
                 selectButtonText: 'Nouvelle photo',
                 onUploaded: function (e) {
                     const fileReader = new FileReader();
                     fileReader.readAsDataURL(e.file);
                     fileReader.onload= () => {
                         $('#agent-photo').attr('src', fileReader.result);
                         $('#photo_agent_64').val(fileReader.result);
                         $('#agent-photo-delete').removeClass('hide');
                         $('#edit_agent_conctact').click();
                     }
                 },
                 onContentReady: function(e) {
                     if (e.element.find('.dx-fileuploader-button')) {
                         e.element.find(".dx-fileuploader-button").attr('data-disable-on-view', '').dxButton("instance").option("icon", "fa fa-plus ");
                     }
                 },
                 onProgress: function(e) {
                     var percent = e.component.option("progress");
                     $('.progress').addClass('show').removeClass('hide');
                     $(".progress-bar").css("width", percent + "%").text(percent + "%");
                 },
                 onUploadStarted: function (e) {
                     if (!e.component.__uploadedFilesCount) {   //this is just a custom option that is not used by dxFileUploader
                         e.component.__uploadedFilesCount = 0;
                     }
                 },
                 onUploadError: function (e) {
                     let xhttp = e.request;
                     console.log(e.error.responseText);
                     if (xhttp.status === 400) {
                         e.message = e.error.responseText;
                     }
                     if (xhttp.readyState === 4 && xhttp.status === 0) {
                         e.message = "Connection refused";
                     }
                 }
             }).dxFileUploader("instance");
         });
         $('body').on('change', '#affectation_responsable', function(e) {
             var idUtilisateurPlanning = $('#affectation_responsable option:selected').data('idgestionnaire');
            if (idUtilisateurPlanning) {
                $('#affectation_utilisateur_planning').val(idUtilisateurPlanning);
            } else {
                $('#affectation_utilisateur_planning').val('');
            }
         });

         const lockIdAgent = $('#lock-id').val();

         function checkLockExpiration() {
             if (lockIdAgent) {
                 $.ajax({
                     url: `/check_expiration_lock/${lockIdAgent}`, // Modifie l'URL selon ta route Symfony
                     method: 'GET',
                     dataType: 'json',
                     success: function (response) {
                         if (response.expired) {
                             //afficher la popup du choix de fermer la fiche ou raffraichir la page client
                             // window.location.reload();
                             if( $('#popup-lock-expired').is(':hidden') ){
                                 const popup_lock = $('#popup-lock-expired').dxPopup({
                                     width: "auto",
                                     height:"auto",
                                     maxHeight: "90vh",
                                     container: ".dx-viewport",
                                     showTitle: true,
                                     title: "Inactivité",
                                     visible: false,
                                     dragEnabled: true,
                                     dragOutsideBoundary: true,
                                     closeOnOutsideClick: false,
                                     showCloseButton: true,
                                     elementAttr: {
                                         class: "nobutton dark_shadow"
                                     },
                                     position: {
                                         at: "center",
                                         my: "center",
                                         collision : 'fit',
                                     },
                                 }).dxPopup('instance');

                                 $('#popup-lock-expired').show();
                                 popup_lock.show();
                             }
                         }
                     },
                     error: function () {
                         console.error('Erreur lors de la vérification du lock.');
                     }
                 });
             } else {
                 console.log('pas de lock');
             }

         }
         setInterval(checkLockExpiration, 60000);



     </script>
 {% endblock %}
{% block popup %}
    {{ include('agent/_popup_lock_expired.html.twig') }}
{% endblock %}