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

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

{% block main %}
<div class="row d-flex bg-primary pt-2 pb-3 mb-1 me-1 ms-2">
    <span class="text-center pb-1">Agent</span>
    <div class="row d-flex">
        <div class="col-2">
            <div class="input-group form-group">
                <label class=" white me-2 col-form-label control-label" for="agent_site">Site</label>
                <input type="text" id="agent_site" name="agent_site" disabled class="form-control bg-white" value="{{ agent.getSitesListe }}">
            </div>
        </div>
        <div class="col-lg-2 col-md-4">
            <div class="input-group form-group">
                <label class="white me-2 col-form-label control-label" for="agent_prenom">Prénom</label>
                <input type="text" id="agent_prenom" name="agent_prenom" disabled class="form-control bg-white" value="{{ agent.prenom }}">
            </div>
        </div>
        <div class="col-lg-2 col-md-4">
            <div class="input-group form-group">
                <label class="white me-2 col-form-label control-label" for="agent_nom">Nom</label>
                <input type="text" id="agent_nom" name="agent_nom" disabled class="form-control bg-white" value="{{ agent.nom }}">
            </div>
        </div>
        <div class="col-lg-6 col-md-12 mt-lg-0 mt-md-2">
            <form id="form_agent_adresse" action="{{ path('patch_agent_adresse', {id: agent.id}) }}" method="post" class="form-ajax">
                <div class="input-group form-group d-flex">
                    <i class="fa fa-lg fa-2x fa-home me-2 align-self-center"></i>
                     <div class="input-icons" style="flex:1">
                         <button type="submit" form="form_agent_adresse" style="background: transparent;border: 0;right:0">
                             <i class="fa fa-lg fa-save icon color-primary"></i>
                         </button>
                         <input type="text" id="agent_adresse_auto" name="agent_adresse_auto" class="form-control bg-white input-field" value="{{ agent.adresse }}">
                         <input type="hidden" name="code_postal">
                         <input type="hidden" name="ville">
                         <input type="hidden" name="adresse">
                         <input type="hidden" name="coordinates">
                     </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="d-flex customtab-periode">
    <div class="col-sm-3 color-primary bg-grey" style="position:relative;width:15%">
        <ul class="nav nav-tabs flex-colum column-tab ms-2" role="tablist" data-tabs="tabs">
            <li class="nav-item w-100 d-flex mb-0" role="presentation">
                <button class="nav-link active w-100 text-start px-1 justify-content-between py-2" id="agent-1-tab" data-bs-toggle="tab" data-bs-target="#agent-details" type="button" role="tab"  aria-selected="true">
                    <span class="periode_nom">Détails agent</span>
                </button>
            </li>
              <li class="nav-item w-100 d-flex mb-0" role="presentation">
                <button class="nav-link  w-100 text-start px-1 justify-content-between py-2" id="agent-2-tab" data-bs-toggle="tab" data-bs-target="#agent-appareils" type="button" role="tab"  aria-selected="true">
                    <span class="periode_nom">Appareils</span>
                </button>
            </li>
              <li class="nav-item w-100 d-flex mb-0" role="presentation">
                <button class="nav-link  w-100 text-start px-1 justify-content-between py-2" id="agent-3-tab" data-bs-toggle="tab" data-bs-target="#agent-formations" type="button" role="tab"  aria-selected="true">
                    <span class="periode_nom">Formations</span>
                </button>
            </li>
        </ul>
    </div>

    <div class="tab-content bg-white px-3 pb-3 pt-2 col-sm-9" style="width:85%">
        <div class="tab-pane fade show active" 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">
                <div class="d-flex bg-primary flex-column h-auto  bloc_fiche_2">
                    {% set affectation = agent.getActiveUtilisateurAffectation %}
                    <div class="text-center py-1 " style="color:white">Affectation : {{ affectation ? affectation.debutEffet|date("d/m/Y") : 'Aucune affectation active' }}</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' %}
                        {{ include('agent/_affectation.html.twig') }}
                        <div class="mt-5 mb-2 d-flex align-items-center justify-content-center">
                            {% if affectation and affectation.finEffet %}
                                <div class="d-flex align-items-center">
                                    <i style="color:#c44133">l'affectation actuelle prendra fin le {{ affectation.finEffet|date("d/m/Y") }}</i>
                                    <button class="btn btn-danger" data-confirm="1" data-message="Etes vous sur de vouloir annuler le départ?" data-href="{{ path('agent_cancel_depart', {id: affectation.id}) }}">Annuler le départ de l'agent</button>
                                </div>
                            {% else %}
                                <button class="btn btn-success me-3"
                                        data-popup-id="popup-programmer-changement"
                                        data-poppup-container="body"
                                        data-dxpopup=""
                                        data-popup-title="Programmer un changement"
                                        data-popup-width="auto">
                                    <i class="fa fa-clock me-2"></i>
                                    {% if agent.getNextAffectation %}
                                        Voir changement programmé prévu le {{ agent.getNextAffectation.DebutEffet|date("d/m/Y") }}
                                    {% else %}
                                        Programmer un changement
                                    {% endif %}
                                </button>
                                {%  if affectation  %}
                                    <button class="btn btn-danger"
                                            data-popup-id="popup-quitter-entreprise"
                                            data-poppup-container="body"
                                            data-dxpopup=""
                                            data-popup-title="Quitter l'entreprise"
                                            data-popup-width="auto">
                                        Quitter l'entreprise<i class="fa fa-door-open ms-2"></i>
                                    </button>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="d-flex bg-primary flex-column h-auto bloc_fiche_2" >
                    <div class="text-center py-1" style="color:white">Qualification</div>
                    <div class="px-3 py-2 bg-white w-100 h-100 block-infos-container">
                        <div class="d-flex " style="position: absolute;top:inherit;right:0;">
                            <i id="add_agent_qualification" class="fa fa-lg fa-plus custom-history bg-vert" style="position:relative;border-color: #14a085 !important;-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
                                style="padding-right: 75px;"
                                class="grid"
                                data-style="tab"
                                id="agent-grid-qualification"
                                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 class="d-flex bg-primary flex-column h-auto bloc_fiche_2">
                    <div class="text-center py-1 " style="color:white">Contact</div>
                    <div class="px-3 py-2 bg-white w-100 h-100 block-infos-container">
                        <form id="form_agent_contact" action="{{ path('patch_agent_contact', {id: agent.id}) }}" method="post" class="form-ajax">
                            <div class="d-flex flex-wrap">
                                <div>
                                    <div class="d-flex " style="position: absolute;top:inherit;right:0;">
                                        <button type="submit" form="form_agent_contact" style="background: transparent;border: 0;"><i id="edit_agent_conctact" class="fa fa-lg fa-save custom-history bg-vert" title="sauvegarder les changements" style="position:relative;border-color: #14a085 !important;-webkit-text-stroke: 1px #14a085;top:inherit;right:inherit"></i></button>
                                        {#                                <i class="fa fa-lg fa-history custom-history" style="position:relative;top:inherit;right:inherit" ></i>#}
                                    </div>
                                    <div class="d-flex flex-wrap">
                                        <div class="d-flex align-items-center me-lg-5 ">
                                            <label style="width:81px;" class="me-1"><i class="fa fa-lg fa-mobile me-2" aria-hidden="true"></i>Pro</label>
                                            <input style="width:130px" type="tel" minlength="10"  maxlength="10" size="10" name="tel_pro" class="form-control" value="{{ agent.getTelPro ? agent.getTelPro.numero : '' }}">
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <label class="me-1"><i class="fa fa-lg fa-mobile me-2" aria-hidden="true"></i>Perso</label>
                                            <input  style="width:130px" type="tel" minlength="10"  maxlength="10" size="10" name="tel_perso" class="form-control" value="{{ agent.getTelPerso ? agent.getTelPerso.numero : '' }}">&nbsp;
                                        </div>
                                    </div>
                                    <div class="d-flex flex-wrap my-3">
                                        <div class="d-flex align-items-center me-5">
                                            <label style="width:105px;" class="me-1"> <span class="icon-phone-rotary">{{ source('@public_path'~asset('build/images/phone-rotary.svg')) }}</span>Secteur</label>
                                            <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-center">
                                            <label class="me-1"><span class="icon-phone-rotary">{{ source('@public_path'~asset('build/images/phone-rotary.svg')) }}</span>Pôle</label>
                                            <input type="text" style="width:150px"  disabled name="tel_pole" class="form-control" value="{{ agent.getPoleSite ? agent.getPoleSite.numero : '' }}">&nbsp;
                                        </div>
                                    </div>
                                    <div class="my-3 d-flex align-items-center">
                                        <label class="me-1" class="icon-phone-rotary" style="width:80px;"><i class="fa fa-lg fa-envelope me-2" aria-hidden="true"></i>Perso</label>
                                        <input  class="form-control" type="email" name="mail_perso" style="width:300px" value="{{ agent.getEmailPerso ? agent.getEmailPerso.email : '' }}">
                                    </div>
                                    <div class="my-3 d-flex align-items-end">
                                        <label class="me-1" style="width:80px;">&nbsp;Code Agi</label>
                                        <input type="text" maxlength="9" class="form-control" name="agi" style="width:auto" value="{{ agent.codeClientAgi }}">
                                    </div>
                                </div>
                                <div class="ms-2" style="margin-top:2rem;position:relative">
                                    {% set photo = agent.photo %}
                                    <img src="{{ (photo) ? photo :  asset('build/images/image_default_agent.png') }}" id="agent-photo"  class="d-flex"  width="150" height="150" style="margin:0 auto;">
                                    <div class="d-flex bg-primary flex-column mt-1" style="width:150px">
                                        <div id="upload-photo-agent" style="margin-bottom: 2px" ></div>
                                        <a  title="supprimer la photo" data-confirm="1" id="agent-photo-delete" href="{{ path('agent_delete_photo', {'id': agent.id}) }}" class="{{ photo ? '' : 'hide' }} color-white mb-1"  style="margin-left:4px; font-size:12px;text-decoration: none"><i class="fa fa-trash color-white"  style="font-size:15px; margin-right:13px"></i>Supprimer</a>
                                    </div>

                                    <input type="hidden" name="photo_agent" id="photo_agent_64">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="d-flex bg-primary flex-column h-auto bloc_fiche_2" >
                    <div class="text-center py-1" style="color:white">Secteur</div>
                    <div class="px-3 py-2 bg-white w-100 h-100 block-infos-container">
{#                        <i class="fa fa-lg fa-history custom-history"></i>#}
                        <div class="my-3 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 bg-orange" style="width:300px; color:white;text-decoration:underline;" value="{{ agent.getSecteurPrincipal  }}">
                            {% else %}
                                <span class="color-primary">-</span>
                            {% endif %}
                        </div>
                        <div class="d-flex ">
                            <div><label style="width: 120px;" class="me-1">Agent suppléant</label></div>
                            <div class="d-flex align-items-center me-5 flex-wrap">
                                {% if agent.getSecteursSuppleant %}
                                    {% for secteurSecondaire in agent.getSecteursSuppleant %}
                                        <input type="text"  style="width:200px;color:white;text-decoration:underline; margin-bottom:3px"  disbaled class="form-control bg-orange me-3" value="{{ secteurSecondaire }}">
                                    {% endfor %}
                                {% else %}
                                    <span class="color-primary">-</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade show" id="agent-appareils" role="tabpanel" aria-labelledby="agent-2-tab">
            <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" class="fa fa-lg fa-plus custom-history bg-vert" style="position:relative;border-color: #14a085 !important;-webkit-text-stroke: 1px #14a085;top:inherit;right:inherit"></i>
                </div>
                <div
                        style="padding-right: 38px;"
                        class="grid"
                        data-style="tab"
                        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>
        <div class="tab-pane fade show" id="agent-formations" role="tabpanel" aria-labelledby="agent-3-tab">
            <div class="px-2 py-2 bg-primary">
                <div class="text-center color-white"></i>en cours de développement</div>
            </div>
        </div>
    </div>
</div>
<div id="popup-quitter-entreprise" style="display:none" >
    <i class="mb-4" style="font-size: 0.9rem; display: block">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;" action="{{ path('agent_quitter_entreprise', {id: agent.id}) }}"  method="post"  data-turbo="false">
            <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-success me-3 " type="submit">Valider</button>
                    <button  class="btn btn-danger btn-close-popup"  data-dxpopup-id="popup-quitter-entreprise" type="button" >Fermer</button>
                </div>
            </div>
        </form>
    </div>
</div>
    <div id="popup-programmer-changement" style="display:none" data-turbo ="false" >
        {%  set classLabel = 'color-white' %}
        {%  set disabled = 'disabled' %}
        <form action="{{ path('agent_programmer_changement', {'id' : agent.id}) }}" method="post" data-turbo="false">
            <div class="d-flex mb-2">
                <div class=" d-flex align-items-center justify-content-center" style="width:48.5%">
                    <label class="me-3">Depuis le</label>
                    <input type="text"  disabled class="form-control" style="width:150px;" value="{{ affectation ? affectation.debutEffet|date("d/m/Y") : '' }}">
                </div>
                <div style="width:2%" class="d-flex align-items-center"><i class="fas fa-lg fa-2x fa-arrow-alt-circle-right color-vert"></i></div>
                <div class=" d-flex align-items-center justify-content-center" style="width:48.5%">
                    <label class="me-3">A partir de</label>
                    {% set dateValue = (agent.getNextAffectation) ? agent.getNextAffectation.debutEffet|date("Y-m-d") : '' %}
                    <input type="date" name="date_debut_programme" required class="form-control" style="width:150px;" min="{{"now"|date_modify("+1 day")|date("Y-m-d") }}" value="{{ dateValue }}">
                </div>
            </div>
            <div class="d-flex justify-content-between flex-wrap">
                <div class="d-flex bg-orange flex-column h-auto" style="width:48.5%">
                    <div class="px-2 py-2  w-100 h-100" style="color:white">
                        {%  set type = 'show' %}
                        {{ include('agent/_affectation.html.twig') }}
                    </div>
                </div>
                <div class="d-flex bg-primary flex-column h-auto" style="width:48.5%" >
                    <div class="px-2 py-2 w-100 h-100">
                        {%  set disabled = '' %}
                        {%  set type = 'edit' %}
                        {% set styleBlock = 'width:760px;' %}
                        {% set hasNext = agent.getNextAffectation ? true : false %}
                        {{ include('agent/_affectation.html.twig') }}
                    </div>
                    {%  if hasNext %}
                        <div class="d-flex justify-content-center my-2">
                            <button  class="btn btn-success" data-confirm="1" data-href="{{ path('agent_cancel_affectation', {id: agent.getNextAffectation.id}) }}" >Annuler le changement</button>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="form-group d-flex justify-content-center mt-4">
                <div class="form-actions-row">
                    <button  class="btn btn-success me-3 " type="submit">Valider</button>
                    <button  class="btn btn-danger btn-close-popup"  data-dxpopup-id="popup-programmer-changement" type="button" >Fermer</button>
                </div>
            </div>
        </form>
    </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('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);
                                     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 : '',
                 progress: 1,
                 showFileList: false,
                 selectButtonText: 'Modifier',
                 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) {
                     e.element.find(".dx-fileuploader-button").dxButton("instance").option("icon", "fa fa-edit color-white");
                 },
                 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");
         });



     </script>
 {% endblock %}