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

{% block body_id 'admin_post_index' %}
{% block style_container %}padding:0;{% endblock %}
{% block body_class ' bg-white' %}
{% block header_style ' margin-bottom:0 !important;' %}

{% block title %} Client :  {{ client.nom }}  - N°{{ client.getFormattedNumeroClient }} {% endblock %}
{% set id_equipement = app.request.query.get('id_equipement')|default('null')  %}
{% set equipement = null %}
{%  if id_equipement is null or id_equipement=="null" %}
    {% set equipement = client.getEquipementsActif[0] is defined ? client.getEquipementsActif[0] : client.getEquipementsInactif[0] %}
    {% set id_equipement = ((id_equipement is null or id_equipement=="null")) ? equipement.id : id_equipement %}
{%  else %}
    {% for equipementc in client.getEquipements %}
        {% if equipementc.id == id_equipement %}
            {% set equipement = equipementc %}
        {% endif %}
    {% endfor %}
{% endif %}
{%  if equipement is null %}
   {% set equipement = client.getEquipementsActif[0] is defined ? client.getEquipementsActif[0] : client.getEquipementsInactif[0] %}
   {% set id_equipement = equipement.id %}
{%  endif %}
{% set is_pac = equipement.equipementFamille and  equipement.equipementFamille.id == 10 %}
{% set contrat = equipement and equipement.getLastContrat ? equipement.getLastContrat : null %}
 {% set disabled =  (equipement.getActif == false) ? 'disabled' : '' %}
 {% set affichage = 'client' %}
{% block main %}
    {% set my_lock = (lock.utilisateur == app.user and lock.getIdEntite == equipement.id) ? true : false %}
    {% set type_affichage = my_lock ? 'edit' : 'view'  %}
    {% set defaultEditorGridOption = '{"mode":"row","allowUpdating":false,"allowDeleting":false,"allowAdding":false}' %}
    <form id="form_client_update" method="post" data-affichage="{{ type_affichage }}" action="{{ path('equipement_maj') }}" data-turbo="true" data-changed="false"  style="height: {{ equipement.adresse and equipement.adresse.getEtagePorteComplement ? '131.9px' : '113.5px' }}">
        <input type="hidden" name="id_equipement_update" id="id_equipement_update" value="{{ equipement.id }}" form="form_client_update">
        <input type="hidden" name="id_client" value="{{ client.id }}" form="form_client_update">
        <input type="hidden" name="process" id="process_update" value="" form="form_client_update">
        <input type="hidden" id="lock-id" value="{{ lock.utilisateur == app.user ? lock.id : '' }}">
        <div class="d-flex position-fixed bg-white" style="z-index: 1000; border-top:5px solid white;">
            <div class="d-flex bg-primary position-relative  pt-2 ps-2 ms-1 pe-2  " style="flex-grow:1;margin-right: 7px">
                <div style="margin-right:2.3rem;  width:156px">
                    {#                <div  class="mb-2 title-700">Souscripteur {{ client.getArraySites ? '(' ~ client.getArraySites|join(',') ~ ')' }}</div>#}
                    <div  class="mb-2 title-700">Souscripteur</div>
                    <div class="d-flex align-items-center">
                        <label class=" white me-2 col-form-label control-label" for="agent_site">N°client</label>
                        <span class="color-vert-link fw-600" style="font-size:14px;margin-left: auto">
                            {{ client.getFormattedNumeroClient }}
                        </span>
                    </div>
                </div>
                <div style="margin-right:2.3rem;width: 232px;">
                        <div class="d-flex flex-column justify-content-end pb-2">
                            <div class="input-group form-group">
                                <label class="white me-2 col-form-label control-label" style="width: 55px;">Type</label>
                                <select name="type_client" style="width: 118px !important;flex: 0 1 auto;" class="form-control" id="type_client" {{ client.typeClient ? 'disabled' : '' }}>
                                    {% for type in typesClient %}
                                        {% set selected =  (client.typeClient and client.typeClient.id == type.id) ? 'selected' : '' %}
                                        <option value="{{ type.id }}" {{ selected }}>{{ type.libelle }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="input-group form-group  pb-2 d-flex">
                                <label class="white me-2 control-label align-self-center" style="width:55px">Catégorie</label>
                                <select name="categorie_pro" class="form-control"  {{ disabled }} id="categorie_pro" style="width: 167px !important;flex:inherit" {{ client.categoriePro ? 'disabled' : '' }}>
                                    <option value=""></option>
                                    {% for categorie_p in categoriesPro %}
                                        {% set selected =  (client.categoriePro and client.categoriePro.id == categorie_p.id) ? 'selected' : '' %}
                                        <option value="{{ categorie_p.id }}" {{ selected }}>{{ categorie_p.libelle }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="input-group form-group d-flex" style="line-height: 14px;">
                                <label class="white control-label" for="client_entreprise" style="width:64px">Nom<br>entreprise</label>
                                <input type="text" id="client_entreprise"  {{ disabled }} name="client_entreprise" class="form-control bg-white"  value="{{ client.nomEntreprise }}" {{ client.nomEntreprise ? 'disabled' : '' }}>
                            </div>
                        </div>
                </div>
                <div class="d-flex flex-column" style="width: 223px;margin-right: 2.3rem;">
                    <div class="input-group form-group pb-2 d-flex" >
                        <label class="white me-3 control-label align-self-center">Civilité</label>
                        <select name="etat_civil" class="form-control" id="etat_civil" style="width: 90px !important;flex: 0 1 auto;" {{ client.etatCivil ? 'disabled' : '' }}>
                            {% for civilite in civilites %}
                                {% set selected =  (client.etatCivil and client.etatCivil.id == civilite.id) ? 'selected' : '' %}
                                <option value="{{ civilite.id }}" {{ selected }}>{{ civilite.libelleCourt }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <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="souscripteur_nom" style="max-width:166px;" class="form-control bg-white" value="{{ client.nom }}" {{ client.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"  {{ disabled }} name="souscripteur_prenom" style="max-width:166px;" class="form-control bg-white" value="{{ client.prenom }}" {{ client.prenom  ? 'disabled' : '' }}>
                    </div>
                </div>
                <div style="width: 510px;margin-right: 2.3rem;">
                    <div  class="input-group form-group pb-2">
                        <form id="form_agent_adresse" action="{{ path('patch_agent_adresse', {id: client.id}) }}" method="post" class="form-ajax">
                            <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:466px">
                                    <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="client_adresse_auto"  {{ disabled }} name="client_adresse_auto" data-prefix="equipement" data-disable-on-view="" class="form-control bg-white input-field" value="{{ client.adresse }}" data-idsite="{{ client.getEquipementPrincipal and client.getEquipementPrincipal.getSecteur() ? client.getEquipementPrincipal.getSecteur.getSectorisationVersion().getSite().id : '' }}">
                                    <div class="adresse_auto_error" style="display: none;height:30px;margin-bottom:0"></div>
                                    <input type="hidden" name="souscripteur_code_postal" form="form_client_update">
                                    <input type="hidden" name="souscripteur_ville" form="form_client_update">
                                    <input type="hidden" name="souscripteur_adresse" form="form_client_update">
                                    <input type="hidden" name="souscripteur_coordinates" form="form_client_update">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="" style="position:relative">
                        <span class="icon-phone-rotary white" style="position: absolute;">{{ source('@public_path'~asset('build/images/phone-rotary.svg')) }}</span>
                        <ul class="collection d-flex " id="collection-tel" style="margin-bottom: 0rem;margin-left:7px;gap: 0.6rem;" data-index="{{ client.clientTels|length +1 }}" data-prototype="#prototype-client-tel">
                            {% for i in 1..3 %}
                                <li >
                                    {% set name_input_1 = 'client[clientTels][' ~ i ~'][numTel]' %}
                                    {% set value_1 =  (client.clientTels.get(i-1)) ? client.clientTels.get(i-1).numTel :'' %}
                                    {% set type_1 = 'text' %}
                                    {% set fr =  client.clientTels.get(i-1) ? client.clientTels.get(i-1).fr : 1 %}
                                    {% set pattern = (fr) ? 'pattern=[0-9]{2}.[0-9]{2}.[0-9]{2}.[0-9]{2}.[0-9]{2}' : '9999999999' %}
                                    {% set minlength =  (fr) ? 'minlength=14' : '' %}
                                    {% set maxlength = 'maxlength=14' %}
                                    {% set class_sup = (fr) ? 'input_tel' : 'input_tel not_fr' %}
                                    {% set name_input_2 = 'client[clientTels][' ~ i ~'][commentaireTel]' %}
                                    {% set value_2  = (client.clientTels.get(i-1)) ? client.clientTels.get(i-1).commentaireTel :'' %}
                                    {% set name_input_3 = 'client[clientTels][' ~ i ~'][id]' %}
                                    {% set value_3  = (client.clientTels.get(i-1)) ? client.clientTels.get(i-1).id :'' %}
                                    {% set name_input_fr = 'client[clientTels][' ~ i ~'][fr]' %}
                                    {% set popup_id = 'popup-client-commentaireTel-' ~ i %}
                                    {% set width = "width:150px" %}
                                    {% set data_disable = 'data-disable-on-view' %}
                                    {{ include('clients/_prototype_collection.html.twig') }}
                                </li>
                            {% endfor %}
                        </ul>
                        {#                        <a class="add_item_link" data-collection-holder-id="collection-tel"><i class="fa fa-plus add-icon" style="right: 31px;"></i></a>#}
                    </div>
                    <div class="d-flex">
                        <div><i class="fa fa-envelope align-self-center" style="font-size: 1.7em;"></i></div>
                        <div>
                            <ul class="collection" id="collection-email" style="margin-bottom: 0;width:481px;padding-left:11px;" data-index="{{ client.ClientEmails|length +1}}" data-prototype="#prototype-client-mail">
                                <li style="position:relative;width:310px;">
                                    {% set name_input_1 = 'client[clientEmails][1][email]' %}
                                    {% set value_1 =  (client.ClientEmails.get(0) ) ? client.ClientEmails.get(0).email :'' %}
                                    {% set type_1 = 'email' %}
                                    {% set name_input_2 = 'client[clientEmails][1][commentaireEmail]' %}
                                    {% set value_2  = (client.ClientEmails.get(0)) ? client.ClientEmails.get(0).commentaireEmail :'' %}
                                    {% set name_input_3 = 'client[clientEmails][1][id]' %}
                                    {% set value_3  = (client.ClientEmails.get(0)) ? client.ClientEmails.get(0).id :'' %}
                                    {% set popup_id = 'popup-client-commentaireEmail-1' %}
                                    {% set data_disable = 'data-disable-on-view' %}
                                    {{ include('clients/_prototype_collection.html.twig') }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class=" d-flex flex-column">
                    <div  class="input-group form-group pb-2">
                        {%  if client.getEquipementsActif %}
                            <div class="align-self-start" style="min-width:143.4px">
                                {% if equipement.getActif %}
                                <a class="btn btn-success px-2" id="btn-open-change-souscripteur" data-popup-position-of="center" data-popup-position-at="top" data-popup-offset ="0 275"  data-popup-id="popup-changement-souscripteur" data-scrollview-height="300px" data-popup-scrollview="#changement-souscripteur-tab-equipement" data-disable-on-view="" data-poppup-container="body" data-dxpopup="" data-popup-title="Changement de souscripteur" data-popup-width="auto" style="height: 28px;line-height: 13px;">Nouveau souscripteur</a>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                    {% set margin_top_picto = true %}
                    {% if client.typeClient.id == 2 %}
                        <a data-popup-position-of="center" class="ms-auto" data-popup-position-at="top" data-disable-on-view data-poppup-container="body" data-popup-id="popup-impot-{{ client.id }}" data-dxpopup="" data-popup-offset ="0 275" data-popup-title="Identification fiscale" data-popup-width="auto">
                            {{ include('clients/_picto_impot.html.twig') }}
                        </a>
                    {% endif %}
                    {% if client.getClientTutelle %}
                        <a data-popup-position-of="center" class="ms-auto" data-popup-position-at="top" data-disable-on-view data-poppup-container="body" data-popup-id="popup-tuteur-{{ client.getClientTutelle.id }}" data-dxpopup="" data-popup-offset ="0 275" data-popup-title="Tuteur" data-popup-width="auto" style="width:28px;height:28px;">
                            {{ include('clients/_picto_tutelle.html.twig') }}
                        </a>
                    {% endif %}
                </div>
                {% if equipement and equipement.getClientAncienSouscripteur %}
                    <div class="mt-1 position-absolute" style="font-size:12px;bottom: 0;font-style:italic;left:200px;">Ancien souscripteur: {{ equipement.getClientAncienSouscripteur }} ({{ equipement.getDateAncienSouscripteur|date('d/m/Y') }})</div>
                {% endif %}
            </div>
            <div class="d-flex bg-primary pt-2 px-2 "  style="flex-grow:1;max-width:466px;">
                <div class="d-flex flex-column align-items-end me-2">
                    <div>
                        <p class="mt-0 mb-0 title-700" id="sidebar-client-container-title--text" style="font-size: 1.4em;">Equipements </p>
                    </div>
                    <div class="d-flex flex-column mt-auto">
                        <div class="mb-1 ms-auto">
                            <a class="" data-poppup-container="body" style="align-self:center;margin-left: auto;" data-popup-id="popup-add-equipement" data-popup-closeoutside="false" data-dxpopup="" data-popup-title="Ajouter un équipement" data-popup-width="auto">
                                <i class="fa fa-plus add-icon me-0" style=";position:relative; right:0;border-radius:4px;"></i>
                            </a>
                        </div>
                        <div class="d-flex">
                            <div class="d-flex flex-column">
                                <span class="color-vert me-2" >{{ client.getEquipementsActif|length }} actifs</span>
                                <span class="color-orange">{{ client.getEquipementsInactif|length }} inactif</span>
                            </div>
                            <div>
                                <a class="position:relative bg-vert text-decoration-none d-flex flex-column align-items-center" id="show-equipements" style="align-self:center;margin-left: auto; height:38px;width:32px;border-radius:4px;display:block" >
                                    <span class=" me-0 d-block w-100 text-center pt-1" style=";position:relative; font-size: 0.8125rem; font-weight: 700;">{{ client.getEquipementsActif|length }}</span>
                                    <span class="mt-1" style="width: 0; height: 0;border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid white;"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="min-width:335px">
                    <div class=" bg-white w-100 text-start d-flex justify-content-between mb-1 flex-column {{ id_equipement and id_equipement == equipement.id ? 'active' : '' }}" data-idequipement="{{ equipement.id }}" id="{{ equipement.id }}-tab" data-bs-toggle="tab" data-bs-target="#tabdata-{{ equipement.id }}" type="button" role="tab"  aria-selected="true">
                        <div class="d-flex px-2 bg-grey-table" style="padding-top:0.15rem;">
                            {% if equipement.clientUtilisateur %}
                                <span class="w-100 color-orange">{{ equipement.clientUtilisateur }}</span><br>
                            {% else %}
                                <span class="w-100 color-orange">----</span><br>
                            {% endif %}
                            {%  if equipement.getActif %}
                            <a class="d-flex" data-popup-id="popup-equipement-inactif-{{ equipement.id }}" data-poppup-container="body" data-dxpopup="" data-popup-title="Confirmation équipement inactif" data-popup-width="auto">
                                <img width="16"  height="16" src="{{ asset('build/images/picto-equipement-inactif.png') }} " style="vertical-align: baseline">
                            </a>
                            {% endif %}
                        </div>
                        <div class="px-2 w-100 pt-1" style="line-height: 18.3px;">
                            <div class="d-flex justify-content-between">
                                <span class="bg-primary me-1" style="padding: 1px 2px;border-radius: 3px;"> {{ equipement.EquipementFamilleContrat ? equipement.EquipementFamilleContrat.libelle }}</span>
                                <span>{{ equipement.numSerieprincipal ?  equipement.numSerieprincipal|slice(0, 4) ~ ' ' ~ equipement.numSerieprincipal|slice(4, 6) ~ ' ' ~ equipement.numSerieprincipal|slice(10, 4) : '<i>serie en attente</i>' }}</span>
                            </div>
                            <div class="d-flex color-vert w-100">
                                <div class="d-inline-block">{{ equipement.EquipementFamille ? equipement.EquipementFamille.libelle : '' }}</div>
                                <div class="ms-auto">
                                    {{ equipement.EquipementTypePuissance ? equipement.EquipementTypePuissance.EquipementType.type : '' }}
                                </div>
                            </div>
                           <div class="d-flex justify-content-between">
                               <div class="d-flex flex-column me-2">
                                   <div>{{ equipement.adresse ? equipement.adresse.adresse|lower : '' }}</div>
                                   {% if equipement.adresse and equipement.adresse.getEtagePorteComplement %}
                                       <div>{{ equipement.adresse.getEtagePorteComplement }}</div>
                                   {% endif %}
                                   <div>{{ equipement.adresse ? equipement.adresse.codePostal ~ ' ' ~ equipement.adresse.ville : ''}}</div>
                               </div>
                               <div class="d-flex mt-1">
                                   {% if equipement.isEligiblePrivilege %}
                                       <span class="me-1"><img width="28"  height="28" src="{{ asset('build/images/picto-privileges.png') }} " class="" style="vertical-align: baseline"></span>
                                   {% endif %}
                                   {% if equipement.equipementGroupes is not empty %}
                                       <span class="me-1"><img width="28"  height="28" src="{{ asset('build/images/picto-equipement-lies.png') }} " class="" style="vertical-align: baseline"></span>
                                   {% endif %}
                                   {%  if equipement.getLastContrat and equipement.getLastContrat.groupe %}
                                       <div class="me-1" >
                                           <img width="28"  height="28" src="{{ asset('build/images/picto-groupe-contrat.png') }} " class="popper" style="vertical-align: baseline;">
                                           <div class="info-tooltip bg-vert">N°{{ equipement.getLastContrat.groupe }}</div>
                                       </div>
                                   {% endif %}
                                   {% if equipement.getSalarieFrisquet %}
                                       <span class="me-1"><img width="28"  height="28" src="{{ asset('build/images/salarie-frisquet-actif.png') }} " class="" style="vertical-align: baseline;"></span>
                                   {% endif %}
                                   {% if equipement.getChantier is not null %}
                                       <div class="me-1">
                                           <img width="28"  height="28" src="{{ asset('build/images/picto-chantier.png') }} " class="popper0" style="vertical-align: baseline;">
                                           <div class="info-tooltip bg-grey-dark">N°{{ equipement.getChantier }}</div>
                                       </div>
                                   {% endif %}
                                   {% if client.getPorteOuvertes is not empty %}
                                       <img width="28"  height="28" class="popper me-1" src="{{ asset('build/images/picto-po.png') }} " style="vertical-align: sub" />
                                   {% endif %}
                                   {% if equipement.getClientUtilisateur and equipement.getClientUtilisateur.getClientTutelle %}
                                       <img width="28" height="28" src="{{ asset('build/images/picto-tutelle.png') }} " >
                                   {% endif %}
                               </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="my-custom-class-for-errors">
        </div>


        <div class="d-flex justify-content-between flex-wrap" style="gap:0.8rem;">
{#            {% if client.clientSites is empty %}#}
{#                {% set utilisateurSites = app.user.getUtilisateurSites %}#}
{#                {% if utilisateurSites|length > 1 %}#}
{#                    <div class="input-group form-group">#}
{#                        <label class=" white me-2 col-form-label control-label">Site</label>#}
{#                        <select name="souscripteur_site" style="width:auto" class="form-control bg-grey"  required>#}
{#                            {% for utilisateurSite in utilisateurSites %}#}
{#                                <option value="{{ utilisateurSite.site.id }}">{{ utilisateurSite.site.nom }}</option>#}
{#                            {% endfor %}#}
{#                        </select>#}
{#                    </div>#}
{#                {% endif %}#}
{#            {% endif %}#}

        </div>
    </form>
    <div class="row mx-0 pt-1 mt-1">
        {% set nbEquipementsActif = client.getEquipementsActif|length %}
        <div class=" bg-grey tab-content px-0" id="body-client" >
                {% set  contrat_en_cours = contrat and contrat.getDateFinContrat|date('Y-m-d') > 'now'|date('Y-m-d') %}
                {% set paiement = contrat and contrat.facture and contrat.facture.paiements[0] ? contrat.facture.paiements[0] : null %}
                {% set lien_paiement = contrat and contrat.dateAvisEcheance and not contrat.datePaiement and client.getClientEmails[0] %}
                {% set envoi_avis_echeance = contrat_en_cours and not contrat.dateAvisEcheance %}

                {% set isGU = (contrat is null  and equipement.datePremierAllumage and  equipement.datePremierAllumage|date_modify("+1 year")|date('U') >= "now"|date('U')) ? true : false %}
                {% set utilisateur = equipement.clientUtilisateur %}
                <div class="tab-pane fade show  {{ equipement.getActif == false ? 'disabled' : '' }} {{ id_equipement and id_equipement == equipement.id ? 'active' : '' }}" id="tabdata-{{ equipement.id }}" role="tabpanel" aria-labelledby="{{ equipement.id }}-tab">
                    <div class="d-flex flex-row position-relative">
                        <div class="position-fixed d-flex justify-content-center " style="z-index: 1000;">
                            <ul class="nav nav-tabs pt-1 nav-primary d-flex flex-column " role="tablist" id="show_tab-{{ equipement.id }}" data-tabs="tabs" style="position:relative;margin-left:14px">
                                <li class="nav-item sticky-links__element" role="presentation">
                                    <a class="nav-link bg-white active rounded-circle-40 p-0 border-primary"  href="#tab-1-{{ equipement.id }}"  role="tab"  aria-selected="true">
                                        <i class="fa fa-fire fa-lg ms-1" aria-hidden="true"></i>
                                        <span class="nav-title">EQUIPEMENT</span>
                                    </a>
                                </li>
                                <li class="nav-item sticky-links__element" role="presentation">
                                    <a class="nav-link  bg-grey rounded-circle-40 p-0 border-primary"  href="#tab-2-{{ equipement.id }}"  role="tab"  aria-selected="false">
                                        <i class="fa fa-tools ms-1 fa-lg" aria-hidden="true"></i>
                                        <span class="nav-title">INTERVENTIONS</span>
                                    </a>
                                </li>
                                <li class="nav-item sticky-links__element" role="presentation">
                                    <a class="nav-link  bg-grey rounded-circle-40 p-0 border-primary"   href="#tab-3-{{ equipement.id }}" role="tab"  aria-selected="false">
                                        <i class="fa fa-euro ms-1 fa-lg" aria-hidden="true"></i>
                                        <span class="nav-title">FACTURATION</span>
                                    </a>
                                </li>
                                <li class="nav-item sticky-links__element" role="presentation">
                                    <a class="nav-link  bg-grey rounded-circle-40 p-0 border-primary"   href="#tab-4-{{ equipement.id }}" role="tab"  aria-selected="false">
                                        <i class="fa fa-envelope ms-1 fa-lg" aria-hidden="true"></i>
                                        <span class="nav-title">CONTACT</span>
                                    </a>
                                </li>
                                <li class="nav-item sticky-links__element" role="presentation">
                                    <a class="nav-link  bg-grey rounded-circle-40 p-0 border-primary"   href="#tab-5-{{ equipement.id }}" role="tab"  aria-selected="false">
                                        <i class="fa fa-exclamation-triangle ms-1 fa-lg" aria-hidden="true"></i>
                                        <span class="nav-title">AIDE TECHNIQUE</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="d-flex flex-column" style="width:72px;">
                        </div>
                        <div>
                            <div class=" pb-3  "  style="height:870px; position:relative;" data-bs-spy="scroll" data-bs-target="#show_tab-{{ equipement.id }}"  >
                                <div class="tab-pane fade show tab-client" id="tab-1-{{ equipement.id }}" role="tabpanel">
                                    {#                            <div class="d-flex ">#}
                                    {#                                <div class="d-flex bg-primary flex-column h-auto bloc_picto  {{ nbEquipementsActif == 1 ? '' : 'hide' }} " style="width:7%">#}
                                    {#                                    <div class="text-center py-1" style="color:white">Pictos</div>#}
                                    {#                                    {{ include('clients/_pictos.html.twig') }}#}
                                    {#                                </div>#}
                                    {#                                <div class="d-flex bg-primary flex-column h-auto bloc_fiche_pref" style="width:49.5%">#}
                                    {#                                    <div class="text-center py-1" style="color:white">Préférences de planification</div>#}
                                    {#                                    {{ include('clients/_equipement_preference_planification.html.twig') }}#}
                                    {#                                </div>#}
                                    {#                            </div>#}

                                    <div class="d-flex flex-wrap ">
                                        <div class="d-flex flex-wrap justify-content-between me-1 " style="width: 1051px;">
                                            <div class="d-flex bg-primary flex-column bloc_fiche_2 me-1" style="height:266px;width:535px;">
                                                <div class="text-center py-1 position-relative" style="color:white;">
                                                    Utilisateur
                                                    <a data-popup-id="popup-history-equipement-utilisateur" data-poppup-container="body" data-dxpopup="" data-popup-title="Historique Utilisateur" data-popup-width="auto"><i class="fa fa-lg fa-history custom-history"></i></a>
                                                </div>
                                                <div class="px-2 py-2 bg-white color-primary w-100 h-100 block-infos-container d-flex" style="flex-direction: column">
                                                    {% if equipement.getActif %}
                                                        {% if  not utilisateur or utilisateur == equipement.clientSouscripteur or equipement.logementVide %}
                                                            {% if equipement.getActif == true %}
                                                                <div class="d-flex w-100 h-100 justify-content-center align-items-end">
                                                                    <a class="btn btn-block  btn-outline-success me-1" style="width:146px;"  data-popup-position-of="center" data-popup-position-at="top" data-disable-on-view data-poppup-container="body" data-popup-id="popup-add-utilisateur" data-dxpopup="" data-popup-offset ="0 275" data-popup-title="Ajouter un utilisateur" data-popup-width="auto">
                                                                        {#                                                                {% if equipement.logementVide %}#}
                                                                        {#                                                                    <span class="mb-2">Le logement est vide.<br>Pour ajouter un utilisateur, cliquer sur le bouton ajouter ci dessous.</span>#}
                                                                        {#                                                                {% endif %}#}
                                                                        <i class="fa fa-plus" style="position:relative !important;;"></i>Nouvel utilisateur
                                                                    </a>
                                                                </div>
                                                            {% endif %}
                                                        {% else %}
                                                            <div class="d-flex flex-wrap" style="gap:0.5rem;">
                                                                    {% set client_affiche = utilisateur%}
                                                                    {% set nom_reference = 'utilisateur' %}
                                                                    {{ include('clients/_affichage_utilisateur_tuteur.html.twig') }}
                                                                    {% set margin_top_picto = false %}
                                                                    {% if utilisateur.getClientTutelle %}
                                                                        <a data-popup-position-of="center" data-popup-position-at="top" data-disable-on-view data-poppup-container="body" data-popup-id="popup-tuteur-{{ utilisateur.getClientTutelle.id }}" data-dxpopup="" data-popup-offset ="0 275" data-popup-title="Tuteur" data-popup-width="auto">
                                                                            {{ include('clients/_picto_tutelle.html.twig') }}
                                                                        </a>
                                                                    {% endif %}
                                                                    {% if utilisateur.typeClient.id == 2 %}
                                                                        <a data-popup-position-of="center" data-popup-position-at="top" data-disable-on-view data-poppup-container="body" data-popup-id="popup-impot-{{ utilisateur.id }}" data-dxpopup="" data-popup-offset ="0 275" data-popup-title="Identification fiscale" data-popup-width="auto">
                                                                            {{ include('clients/_picto_impot.html.twig') }}
                                                                        </a>
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                            {% if utilisateur != equipement.clientSouscripteur %}
                                                                <div class="d-flex pt-2" style="margin-top:auto;">
                                                                    <a class="btn btn-md btn-block btn-outline-danger me-1" data-message = "Confirmez vous que ce logement est vide?" data-href="{{ path('equipement_logement_vide', {id: equipement.id}) }}" data-disable-on-view=""  data-confirm="1">Logement vide</a>
                                                                    <a class="btn btn-md btn-block btn-outline-success me-1" data-disable-on-view data-poppup-container="body" data-popup-id="popup-add-utilisateur" data-dxpopup="" data-popup-title="Ajouter un utilisateur" data-popup-position-of="center"  data-scrollview-height="300px" data-popup-position-at="top" data-popup-offset ="0 275" data-popup-width="auto"> Nouvel utilisateur</a>
                                                                    <a class="btn btn-md btn-block btn-outline-success me-1" data-poppup-container="body" data-popup-id="popup-transformer-souscripteur-{{ equipement.id }}" data-disable-on-view="" data-dxpopup="" data-popup-title="Confirmation de transformation utilisateur en souscripteur" data-popup-width="auto">Transformer en souscripteur</a>
                                                                </div>
                                                            {% endif %}
                                                        {% endif %}
                                                {% endif %}
                                                </div>
                                            </div>
                                            <div class="d-flex bg-primary flex-column  bloc_fiche_2 me-auto"   style="height:266px;width:512px">
                                                <div class="text-center py-1 position-relative" style="color:white">
                                                    {# si sous contrat mais retard de paiement de 4 mois on affiche retard de paiement #}
                                                    {# si contrat résilié et date >= à date du jour on affiche contrat resilié le #}
                                                    {# sinon on affiche infos contrat standard #}
                                                    {% set contratResiliation = contrat.contratResiliations[0] is defined and contrat.contratResiliations[0].getDate|date("Y-m-d") >= "now"|date("Y-m-d")  ? 'Contrat résilité le ' ~ contrat.contratResiliations[0].date|date("d/m/Y") : '' %}
                                                    {% if contrat is defined and contrat is not null and contrat.isContratEchu() %}
                                                        Contrat échu pour défaut de paiement
                                                    {% elseif contrat.contratResiliations[0] is defined and contrat.contratResiliations[0].getDate|date("Y-m-d") >= "now"|date("Y-m-d") %}
                                                       Contrat résilié le {{ contrat.contratResiliations[0].getDate|date("d/m/Y") }}
                                                    {% else %}
                                                        {{ equipement and equipement.equipementFamilleContrat ? equipement.equipementFamilleContrat.libelle : 'Hors Contrat' }}
                                                    {% endif %}
                                                    <a data-popup-id="popup-history-contrats-{{ equipement.id }}" data-poppup-container="body" data-dxpopup="" data-popup-title="Historique Contrat" data-popup-width="auto"><i class="fa fa-lg fa-history custom-history"></i></a>
                                                </div>
                                                <div class="px-2 py-1 bg-white color-primary w-100 h-100 block-infos-container">
                                                    {{ include('clients/contrat/contrat.html.twig') }}
                                                </div>
                                            </div>
                                            <div class="d-flex w-100" >
                                                <div class="d-flex bg-primary flex-column h-auto mt-0 flex-grow-1 " style="margin-right: 4px;">
                                                    <div class="text-center py-1" style="color:white">Localisation</div>
                                                    <div class="px-2 py-2 bg-white color-primary   h-100 block-infos-container">
                                                        {{ include('clients/localisation/localisation.html.twig') }}
                                                    </div>
                                                </div>
                                                <div class="d-flex bg-primary flex-column h-auto mt-0 ms-auto" style="width:311px !important;" >
                                                    <div class="text-center py-1" style="color:white">Secteur n°{{ equipement.getSecteur is not null ? equipement.getSecteur  }}</div>
                                                    <div class="px-2 py-2 bg-white color-primary  h-100 block-infos-container">
                                                        <div class="d-flex align-items-center mb-2">
                                                            <label  style="width:112px;">Agent de planning</label>
                                                            <input type="text" class="form-control" disabled value="{{ equipement.getSecteur and equipement.getSecteur.getUtilisateurPlanning ? equipement.getSecteur.getUtilisateurPlanning.getCodeNom : '' }}" style="width: 183px;" >
                                                        </div>
                                                        <div class="d-flex align-items-center">
                                                            <label style="width:112px;">Agent de terrain</label>
                                                            <input type="text" name="equipement_chantier"   class="form-control"  disabled value="{{ equipement.getSecteur and equipement.getSecteur.getAgentPrincipal ? equipement.getSecteur.getAgentPrincipal.getCodeNom : '' }}" style="width: 183px;" >
                                                            {#                                                            <span class="fst-italic" id="text-numero-chantier" style="display:none;">N° généré automatiquement</span>#}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex bg-primary flex-column h-auto bloc_fiche_3 bloc_fiche_technique" id="bloc_infos_tech" >
                                            <div class="text-center py-1" style="color:white">Informations technique</div>
                                            <form id="form-change-infos-technique-{{ equipement.id }}" class="form form-ajax" method="post" action="{{ path('equipement_maj_infos_technique', {'id': equipement.id}) }}">
                                                <input type="hidden" name="type_change" form="form-change-infos-technique-{{ equipement.id }}" value="">
                                                <input type="hidden" name="data_value" value="" form="form-change-infos-technique-{{ equipement.id }}" >
                                            </form>
                                            <div  class="px-2 py-1 d-flex bg-white color-primary w-100 h-100 block-infos-container flex-column client-infostech">
                                                <div class="client-infostech-infos d-flex flex-wrap mb-2" style="gap:0.5rem;" id="result-infos-tech">
                                                    {% if is_pac %}
                                                        {{ include('clients/informations_technique/infostec_pac.html.twig') }}
                                                    {% else %}
                                                        {{ include('clients/informations_technique/infostec_chaudiere.html.twig') }}
                                                    {% endif %}
                                                </div>
                                                <div class="client-infostech-options position-relative">
                                                    {% if equipement.getActif %}
                                                        <div>Options
                                                            <i class="fa fa-info-circle popper color-grey-dark" style="font-size:1.1rem;"></i>
                                                            <div class="info-tooltip bg-primary">L'ajout/suppression d'options seront pris en compte dans le tarif lors du renouvellement du contrat.</div>
                                                        </div>
                                                        <div class="d-flex " style="position: absolute;top:inherit;right:0;">
                                                            <i  class="fa fa-lg fa-plus bg-vert add_complement_adresse button-add me-0" data-disable-on-view="" data-target-grid="#equipement-option-grid-{{ equipement.id }}" style="position:relative;border-color: #14a085 !important;top:inherit;right:inherit"></i>
                                                        </div>
                                                        <a class="position-absolute text-decoration-none" style="right:0; top:54px;" data-popup-position-of="center" data-popup-position-at="top" data-disable-on-view="" data-popup-id="popup-history-equipement-options" data-poppup-container="body" data-dxpopup="" data-popup-title="Historique options" data-popup-width="auto" data-popup-offset="0 275" >
                                                            <div class="d-flex align align-self-end bg-white justify-content-center align-items-center border-grey-field" style=";width: 28px;height: 28px;border-radius:4px">
                                                                <i class="fa fa-lg fa-history custom-history color-primary" style="position:relative;right:-2px;top:0px;" ></i>
                                                            </div>
                                                        </a>
                                                        <div
                                                                style="padding-right: 38px;min-height:133px;max-height:133px;"
                                                                class="grid grid-condensed table-inverse-color small-icon-grid"
                                                                data-style="tab"
                                                                id="equipement-option-grid-{{ equipement.id }}"
                                                                data-page="EquipementOption"
                                                                data-columns="{{ equipementOptionGrid.columns|json_encode() }}"
                                                                data-getpath="{{ equipementOptionGrid.get_path ~ equipement.id}}"
                                                                data-createpath="{{ equipementOptionGrid.create_path ~ equipement.id}}"
                                                                data-deletepath="{{ equipementOptionGrid.delete_path }}"
                                                                data-searchpanel='{"visible":false}'
                                                                data-pagination='{"visible":false}'
                                                                data-toolbarinvisible="true"
                                                                data-gridClass="small-icon-grid"
                                                                data-editing="{{ equipementOptionGrid.editing is defined   ? equipementOptionGrid.editing|json_encode() : defaultEditorGridOption }}"
                                                        >
                                                        </div>
                                                    {% endif %}
                                                </div>

                                                <div class="d-flex justify-content-center pt-2 client-infostech-actions">
                                                    {% if equipement.getActif %}
                                                        {% if client.equipements|length > 1 %}
                                                            {% if equipement.equipementGroupes is empty %}
                                                                <a class="btn btn-md btn-block btn-outline-success me-1" style="height: 31px;" data-disable-on-view="" data-popup-id="popup-lier-equipement" data-poppup-container="body" data-dxpopup="" data-popup-title="Lier équipement" data-popup-width="auto"><i class="fa fa-link"></i>Lier équipement</a>
                                                            {% endif %}
                                                        {% endif %}
                                                        <a class="btn btn-md btn-block btn-outline-success ms-auto" style="height: 31px"  data-poppup-container="body" data-popup-id="popup-details-installation-{{ equipement.id }}" data-dxpopup="" data-popup-title="Détails installation" data-popup-width="{{ is_pac ? '1110' : '1623' }}px" data-popup-height="auto">Détails installation</a>
                                                        {% if equipement.equipementGroupes is not empty %}
                                                            <a class="btn btn-md btn-block btn-outline-success d-flex align-items-center justify-content-center ms-2" style="height: 31px;width:31px;" data-disable-on-view="" data-popup-id="popup-lier-equipement" data-poppup-container="body" data-dxpopup="" data-popup-title="Lier équipement" data-popup-width="auto"><i class="fa fa-link color-vert me-0" style="font-size: 0.9rem;vertical-align: middle"></i></a>
                                                        {% endif %}
                                                        <a class="btn btn-md btn-block color-bleu d-flex align-items-center justify-content-center ms-2" style="height: 31px;width:31px;" data-popup-id="popup-blocnote" data-poppup-container="body" data-dxpopup="" data-popup-position-at="center" data-popup-title="Bloc note"  data-popup-width="500px" data-popup-height="auto"><img width="31"  height="31" src="{{ asset('build/images/picto-blocnote.png') }} " style="vertical-align: sub"></a>

{#                                                        <a class="btn btn-md btn-block color-bleu d-flex align-items-center justify-content-center ms-2" style="height: 31px;width:31px;" data-popup-id="popup-blocnote" data-poppup-container="body" data-dxpopup="" data-popup-position-at="top" data-popup-title="Bloc note" data-scrollview-height="300px" data-popup-scrollview="#popup-blocnote--content" data-popup-offset ="0 275" data-popup-width="auto"><img width="31"  height="31" src="{{ asset('build/images/picto-blocnote.png') }} " style="vertical-align: sub"></a>#}
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="border-top-orange" style="margin:4px 0;"></div>
                                    <div class="d-flex">
                                        <div class="d-flex bg-primary flex-column h-auto bloc_fiche_3 bloc_fiche_technique" style="width:308px;margin-right: 5px;" >
                                            <div class="text-center py-1" style="color:white">Liste des interventions</div>
                                            <div class="px-2 py-2 bg-white color-primary w-100 h-100 block-infos-container d-flex" style="flex-direction: column">
                                                {% if equipement.interventions|length > 1 %}
                                                    <table class="table table-responsive table-sm table-inverse-color-datagrid mb-0 ">
                                                        <thead>
                                                        <tr>
                                                            <th style="width: 80px !important;">Date</th>
                                                            <th style="width:40px !important;">Type</th>
                                                            <th style="width:30px !important;"></th> {# Colonne pour les pictos #}
                                                            <th style="width: 140px !important;">Agent</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        {% for intervention in equipement.interventions|sort((a, b) => b.planning.date <=> a.planning.date) %}
                                                            <tr class="intervention_client cursor-pointer" data-id="{{ intervention.id }}">
                                                                <td class="align-middle">{{ intervention.planning.date|date('d/m/Y') }}</td>
                                                                <td class="text-center align-middle">{{ intervention.getTypePlanification ? intervention.getTypePlanification.codeCourt }}</td>
                                                                <td class="text-center align-middle">
                                                                    <div class="d-flex justify-content-center align-items-center w-100 h-100">
                                                                        {% if intervention.interventionAnomalies|length > 0 %}
                                                                            <img src="{{ asset('build/images/triangle-anomalie.png') }}"  width="12" height="12" style="height:12px;vertical-align:middle;">
                                                                        {% endif %}
                                                                        {% if intervention.getObservations %}
                                                                            <img src="{{ asset('build/images/loupe-observation.png') }}" width="12" height="12" style="vertical-align:middle;">
                                                                        {% endif %}
                                                                    </div>
                                                                </td>
                                                                <td>{{ intervention.planning and intervention.planning.utilisateurAgent ? intervention.planning.utilisateurAgent.getCodeNom }}</td>
                                                            </tr>
                                                        {% endfor %}
                                                        </tbody>
                                                    </table>
                                                {% else %}
                                                    <div class="text-center">Aucune intervention</div>
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="d-flex bg-primary flex-column h-auto bloc_fiche_3 bloc_fiche_technique" style="width:591px;margin-right: 5px" >
                                            <div class="text-center py-1" style="color:white">Intervention</div>
                                            <div class="px-2 py-2 bg-white color-primary w-100 h-100 block-infos-container d-flex" style="flex-direction: column">
                                                <div id="result_intervention_client">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex bg-primary flex-column h-auto bloc_fiche_3 bloc_fiche_technique" style="width:734px;" >
                                            <div class="text-center py-1" style="color:white">Facturation</div>
                                            <div class="px-2 py-2 bg-white color-primary w-100 h-100 block-infos-container d-flex" style="flex-direction: column">
                                                <div id="result_intervention_client_facturation">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="width:185px;margin-left:4px;margin-right: 1px">
                            <div class="d-flex  flex-column h-auto bloc_fiche_pref position-fixed" style="width:185px">
                                <div class="text-center py-1 bg-primary" style="color:white">Préférences de planification</div>
{#                                {{ include('clients/_equipement_preference_planification.html.twig') }}#}
                                    <div class="px-1 py-2 bg-white color-primary w-100 h-100 block-infos-container d-flex flex-column ">
                                        {% if equipement.getEquipementPreferencesPlanification %}
                                            {% set planification = equipement.getEquipementPreferencesPlanification %}
                                            {% if planification.getDateEntreDebut or planification.getDateEntreFin or planification.getDateAvantLe or planification.getDateAPartirDu %}
                                                <div class="title_preferences_planifications bg-grey-light fw-600 color-orange px-2">Dates</div>
                                                {% if planification.getDateEntreDebut or planification.getDateEntreFin %}
                                                <div class="d-flex my-2 flex-column" style="gap:0.5rem">
                                                    {% if planification.getDateEntreDebut %}
                                                        <div class="d-flex ps-2 align-items-center">
                                                            <div class="me-2">Entre le</div>
                                                            <input type="text" disabled  style="width:91px"   value="{{ planification.getInclusionRecurrente ? planification.getDateEntreDebut|format_datetime(locale='fr',pattern="dd MMMM") : planification.getDateEntreDebut|date('d/m/Y') }}"   class="form-control ps-1" >
                                                        </div>
                                                    {% endif %}
                                                    {% if planification.getDateEntreFin %}
                                                        <div class="d-flex ps-2 align-items-center">
                                                            <div style="margin-right: 1.7rem;">Et le</div>
                                                            <input type="text" disabled  style="width:91px"   value="{{ planification.getInclusionRecurrente ? planification.getDateEntreFin|format_datetime(locale='fr',pattern="dd MMMM") : planification.getDateEntreFin|date('d/m/Y') }}"   class="form-control ps-1" >
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                {% endif %}
                                            {% endif %}
                                            {% if planification.getUniquementScolaire %}
                                                <div class="d-flex mt-2 mb-1 flex-column justify-content-center align-items-center" style="gap:0.5rem">
                                                    <div class="color-vert fw-600 text-center">Pendant les vacances scolaires uniquement</div>
                                                </div>
                                            {% endif %}
                                                {%  if planification.getDateAvantLe or planification.getDateAPartirDu %}
                                                <div class="d-flex my-2 flex-column" style="gap:0.5rem">
                                                    {% if planification.getDateAvantLe %}
                                                        <div class="d-flex ps-2 align-items-center">
                                                            <div class="me-2">Avant le</div>
                                                            <input type="text" disabled  style="width:91px"   value="{{ planification.getAvantRecurrente ? planification.getDateAvantLe|format_datetime(locale='fr',pattern="dd MMMM") : planification.getDateAvantLe|date('d/m/Y') }}"   class="form-control ps-1" >
                                                        </div>
                                                        {% endif %}
                                                    {% if planification.getDateAPartirDu %}
                                                        <div class="d-flex ps-2 align-items-center">
                                                            <div class="me-2">Après le</div>
                                                            <input type="text" disabled  style="width:91px"   value="{{ planification.getApresRecurrente ? planification.getDateAPartirDu|format_datetime(locale='fr',pattern="dd MMMM") :  planification.getDateAPartirDu|date('d/m/Y') }}"   class="form-control  ps-1" >
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                {% endif %}
                                            {% if planification.getPlanifierPreference and planification.getPlanifierJour %}
                                                <div class="title_preferences_planifications bg-grey-light fw-600 color-orange px-2">Jour de planification</div>
                                                <div class="d-flex my-2 flex-column justify-content-center align-items-center">
                                                    {% if planification.getPlanifierPreference %}
                                                        <div style="font-size: 14px;">{{ planification.getPlanifierPreference|capitalize }}</div>
                                                    {% endif %}
                                                    {% if planification.getPlanifierJour %}
                                                        {% for jour in planification.getPlanifierJour |split(',')  %}
                                                            <div class="fw-600">{{ jour }}</div>
                                                        {% endfor %}
                                                    {% endif %}
                                                </div>
                                            {% endif %}
                                            {% if (planification.getPlanifierPartieJournee and planification.getPlanifierPartieJournee != 'Indifférent')
                                                or planification.getHorairePassage != ''
                                            %}
                                                <div class="title_preferences_planifications bg-grey-light fw-600 color-orange px-2">Moment</div>
                                                <div class="d-flex my-2 flex-column justify-content-center align-items-center">
                                                    {% if (planification.getPlanifierPartieJournee and planification.getPlanifierPartieJournee != 'Indifférent')   %}
                                                        <div style="font-size: 14px;">{{ planification.getPlanifierPartieJournee|capitalize }}</div>
                                                    {% endif %}
                                                    {% if planification.getPremiereVisite %}
                                                        <div class="color-vert fw-600">Première visite</div>
                                                    {% endif %}
                                                    {% if planification.getHorairePassage %}
                                                        <div class="d-flex ps-2 align-items-center">
                                                            <div class="me-2">Horaire</div>
                                                            <input type="text" disabled  style="width:100px"   value="{{ planification.getHorairePassage.getLisibleHoraires }}"   class="form-control ps-1 pe-0" >
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            {% endif %}
                                            {% if planification.getPlanifierAgent or planification.getEnvoyer2Agents or planification.getEnvoyerRts %}
                                                <div class="title_preferences_planifications bg-grey-light fw-600 color-orange px-2">Agent</div>
                                                <div class="d-flex my-2 flex-column justify-content-center align-items-center">
                                                    {% if planification.getPlanifierAgent %}
                                                        <div style="font-size: 14px;">{{ planification.getPlanifierAgent|capitalize }}</div>
                                                    {% endif %}
                                                    {% if planification.getAgent %}
                                                        <div class="fw-600">{{planification.getAgent}}</div>
                                                    {% endif %}
                                                    {% if planification.getEnvoyer2Agents %}
                                                        <div class="color-vert fw-600">Envoyer 2 agents</div>
                                                    {% endif %}
                                                    {% if planification.getEnvoyerRts %}
                                                        <div class="color-vert fw-600">Envoyer le RTS</div>
                                                    {% endif %}
                                                </div>
                                            {% endif %}
                                        {% else %}
                                            <div class="text-center color-grey-dark">
                                                Aucune préference de planification définie
                                            </div>
                                        {% endif %}
                                        <div class="my-3 bg-grey-dark" style="padding:1px;"></div>
                                        {%  if equipement.getActif %}
                                        <div class="d-flex justify-content-center">
                                            <a  class="btn btn-md btn-block btn-outline-success me-2"  data-disable-on-view="" data-poppup-container="body" data-popup-id="popup_pref_planification" data-dxpopup="" data-popup-title="Préférences de planification" data-popup-width="auto" style="width:85px" type="button">Définir</a>
                                            <button class="btn btn-md btn-block btn-outline-success" data-disable-on-view="" data-poppup-container="body" data-popup-id="popup-preference-plannification" data-dxpopup=""  data-popup-position-of="center" data-popup-position-at="top" data-popup-title="Gestion des préférences de planification" data-popup-width="auto">
                                                <i class="fa fa-clone" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                        <div class="mt-3 bg-orange" style="padding:1px;"></div>
                                        {% endif %}
{#                                        <div class="d-flex flex-column">#}
{#                                            {% set agent_principal = equipement.getSecteur ? equipement.getSecteur.getAgentPrincipal : null %}#}
{#                                            <label class="me-1">Agent principal</label>#}
{#                                            <input type="text" name="secteur_agent_principal"  disabled class="form-control bg-grey" value="{{ agent_principal ? agent_principal.id ~ ' : '  ~ agent_principal.getNomComplet : '' }}">#}
{#                                        </div>#}
                                        {% if equipement.getActif %}
                                        <div class="d-flex justify-content-center mt-3 mb-2">
                                            <button id="" class="btn btn-md btn-block bg-outline-bleu" style="width:123px;" {{ disabled }}><i class="fa fa-calendar-alt me-2 " ></i>Planifier</button>
                                        </div>
                                        {% endif %}
                                    </div>
                                    {% if equipement.getActif %}
                                    <div class="px-2 py-2 mt-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-client" class="btn btn-md btn-block btn-outline-success d-flex" type="button" form="form_client_update" style="height:48px;" >
                                                    <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-client" class="btn btn-md btn-block btn-outline-danger mt-2 d-flex" onclick="$('#process_update').val('close');" type="button" form="form_client_update" style="height:48px;" >
                                                    <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 client 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>
                                    {% endif %}
                                </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
{% endblock %}
{% block popup %}
{#    {% for equipement in client.equipements %}#}
        {{ include('clients/_popup_pref_planification.html.twig') }}
        {{ include('clients/_list_equipements.html.twig') }}
        {{ include('clients/localisation/_popup_complement_adresse.html.twig') }}
        {{ include('clients/contrat/_popup_resilier_contrat.html.twig') }}
        {{  include('clients/_popup_details_installation.html.twig') }}
        {{  include('clients/contrat/_popup_history_contrats.html.twig') }}
        {{  include('clients/informations_technique/_popup_history_equipement_local.html.twig') }}
        {{  include('clients/informations_technique/_popup_history_equipement_options.html.twig') }}
        {{  include('clients/_popup_history_equipement_utilisateur.html.twig') }}
        {{  include('clients/contrat/_popup_groupe_contrat.html.twig') }}
        {{ include('clients/_popup_gestion_preferences_planification.html.twig') }}
        {% if equipement.getLastPrivilege %}
            {{ include('clients/contrat/_popup_privileges.html.twig') }}
        {% endif %}
        {% if (equipement.getContratAvenir) %}
            {{ include('clients/contrat/_popup_contrat_a_venir.html.twig') }}
        {% endif %}
        {{ include('clients/contrat/_popup_simulateur_tarifs.html.twig') }}
        {{ include('clients/_popup_equipement_inactif.html.twig') }}
        {{ include('clients/informations_technique/_popup_bloc_note.html.twig') }}
        {{ include('clients/_popup_lock_expired.html.twig') }}
        {{ include('clients/_popup_add_utilisateur.html.twig') }}
        {% if equipement.clientUtilisateur and equipement.clientUtilisateur != equipement.clientSouscripteur %}
            {{ include('clients/_popup_utilisateur_to_souscripteur.html.twig') }}
        {% endif %}
{#    {% endfor %}#}
    {% if client.equipements|length > 1 %}
        {{ include('clients/_popup_lier_equipement.html.twig') }}
    {% endif %}
    {% if client.porteOuvertes is not empty %}
        {{ include('clients/contrat/_popup_porte_ouvertes.html.twig') }}
    {% endif %}
    {{ include('clients/_popup_add_equipement.html.twig') }}
    {{ include('clients/_popup_changement_souscripteur.html.twig') }}
    {% if equipement.getClientSouscripteur and equipement.getClientSouscripteur.getClientTutelle %}
        {% set tuteur = equipement.getClientSouscripteur.getClientTutelle %}
        {{ include('clients/_popup_tuteur.html.twig') }}
    {% endif %}
    {% if equipement.getClientUtilisateur and equipement.getClientUtilisateur.getClientTutelle %}
        {% set tuteur = equipement.getClientUtilisateur.getClientTutelle %}
        {{ include('clients/_popup_tuteur.html.twig') }}
    {% endif %}
    {% if equipement.getClientSouscripteur and equipement.getClientSouscripteur.typeClient.id == 2 %}
        {% set pro = equipement.getClientSouscripteur %}
        {{ include('clients/_popup_impot.html.twig') }}
    {% endif %}
    {% if equipement.getClientUtilisateur and equipement.getClientUtilisateur.typeClient.id == 2 %}
        {% set pro = equipement.getClientUtilisateur %}
        {{ include('clients/_popup_impot.html.twig') }}
    {% endif %}
    <div id="popup-detail-client" style="display:none;"></div>
{% endblock %}
 {% block javascripts %}
     <script>
         var page = '{{ page|default(null) }}';

     </script>
     {{ parent() }}
     {{ encore_entry_script_tags('client') }}
{% endblock %}