{% 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 %}
{% 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  pt-2 ps-2 ms-1 me-1  " style="flex-grow:1;">
                <div style="margin-right:2rem;  {{ client.typeClient.id == 2 ? 'width:166px' : '' }}">
                    {#                <div  class="mb-2 title-700">Souscripteur {{ client.getArraySites ? '(' ~ client.getArraySites|join(',') ~ ')' }}</div>#}
                    <div  class="mb-2 title-700">Souscripteur</div>
                    <div>
                        <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">
                            {{ client.getFormattedNumeroClient }}
                        </span>
                    </div>
                    <div class="input-group form-group">
                        <label class="white me-2 col-form-label control-label" style="width: 29px;">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>
                <div style="margin-right:2rem; {{ client.typeClient.id == 2 ? 'min-width:260px' : '' }}">
                    {% if client.typeClient.id == 2 %}
                        <div class="d-flex flex-column justify-content-end pb-2">
                            <div class="input-group form-group {{ client.typeClient.id == 2 ? '' : 'hide' }} pb-2 d-flex">
                                <label class="white me-2 control-label align-self-center" style="width:89px">Catégorie</label>
                                <select name="categorie_pro" class="form-control" id="categorie_pro" style="width: 166px !important;" {{ client.categoriePro ? 'disabled' : '' }}>
                                    {% 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 {{ client.typeClient.id == 2 ? '' : 'hide' }} d-flex">
                                <label class="white me-2 col-form-label control-label align-self-center" for="client_entreprise">Nom entreprise</label>
                                <input type="text" id="client_entreprise" name="client_entreprise" class="form-control bg-white"  value="{{ client.nomEntreprise }}" {{ client.nomEntreprise ? 'disabled' : '' }}>
                            </div>
                        </div>
                    {% else %}
                        <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" name="souscripteur_prenom" style="max-width:166px;" class="form-control bg-white" value="{{ client.prenom }}" {{ client.prenom  ? 'disabled' : '' }}>
                        </div>
                    {% endif %}
                </div>
                <div>
                    <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:{{ client.typeClient.id == 2 ? '653px' : '733px'}}">
                                    <button type="submit" form="form_agent_adresse" style="background: transparent;border: 0;right:0">
                                        <i class="fa fa-lg icon color-primary"></i>
                                    </button>
                                    <input type="text" id="client_adresse_auto" 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;">
                                    {% 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 style="margin-right:1rem;width: 176.3px">
                    <div  class="input-group form-group pb-2 d-flex flex-column">
                        {%  if client.getEquipementsActif %}
                            <div class="align-self-start">
                                <a class="btn btn-success" 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;">Changement souscripteur</a>
                            </div>
                        {% endif %}
                        {% if equipement and equipement.getClientAncienSouscripteur %}
                           <div class="mt-1" style="font-size:12px;">Ancien souscripteur: {{ equipement.getClientAncienSouscripteur }} ({{ equipement.getDateAncienSouscripteur|date('d/m/Y') }})</div>
                        {% endif %}
                    </div>
                </div>
            </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" 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 client.getEquipementsActif %}
                            <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="18"  height="18" src="{{ asset('build/images/picto_desactiver_equip.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  : '<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.getPrivilege == true %}
                                       <span class="me-1"><img width="25"  height="25" src="{{ asset('build/images/picto-privilege.png') }} " class="" style="vertical-align: baseline"></span>
                                   {% endif %}
                                   {% if equipement.equipementGroupes is not empty %}
                                       <span class="me-1"><img width="25"  height="25" src="{{ asset('build/images/picto-equip-lie.png') }} " class="" style="vertical-align: baseline"></span>
                                   {% endif %}
                                   {%  if equipement.getLastContrat and equipement.getLastContrat.groupe %}
                                       <div class="me-1">
                                           <i class="fa fa-users circle-icon popper bg-vert picto-group-contrat" style="font-size:13px;line-height:1.5rem;width:25px;height:25px;" data-path="{{ path('equipement_get_path_contrat_groupe', {id: equipement.id}) }}"></i>
                                           <div class="info-tooltip bg-vert">N°{{ equipement.getLastContrat.groupe }}</div>
                                       </div>
                                   {% endif %}
                                   {% if equipement.getSalarieFrisquet %}
                                       <span class="me-1"><img width="26"  height="26" src="{{ asset('build/images/picto-salarie-frisquet.png') }} " class="" style="vertical-align: baseline;"></span>
                                   {% endif %}
                                   {% if equipement.getChantier is not null %}
                                       <div>
                                           <img width="25"  height="25" src="{{ asset('build/images/chantier.png') }} " class="popper0" style="vertical-align: baseline;">
                                           <div class="info-tooltip bg-grey-dark">N°{{ equipement.getChantier }}</div>
                                       </div>
                                   {% 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=" px-2 py-2 " id="sidebar-client" style="position:relative;  background-color: rgb(245,245,245)" >#}

{#            <ul class="nav nav-tabs  flex-colum column-tab" id="list-equipement-actif" role="tablist" data-tabs="tabs" style="overflow-y:scroll;flex-wrap:inherit;height:858px;flex-direction:column;">#}
{#                {% if client.getEquipementsActif %}#}
{#                    {% for equipement in client.getEquipementsActif %}#}
{#                        {% if equipement.actif == true %}#}
{#                            {% set id_equipement = ((id_equipement is null or id_equipement=="null") and loop.first) ? equipement.id : id_equipement %}#}
{#                        <li class="nav-item px-2 w-100 d-flex" role="presentation" style=" {{ id_equipement and id_equipement == equipement.id ? 'order:-1' : '' }}">#}
{#                        <button class="nav-link  w-100 text-start px-1 d-flex justify-content-between {{ 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">#}
{#                            <span class="px-2 py-3 w-100 equipement-item {{ loop.index == 0 ? 'active' : ''}}">#}
{#                                {% if equipement.clientUtilisateur %}#}
{#                                    <span class="w-100 color-orange">{{ 'Utilisateur: ' ~ equipement.clientUtilisateur }}</span><br>#}
{#                                {% endif %}#}
{#                                <span style="font-weight: bold;">#}
{#                                    <span> <span class="bg-primary me-1" style="padding: 4px;border-radius: 3px;"> {{ equipement.EquipementFamilleContrat ? equipement.EquipementFamilleContrat.code }}</span> N°{{ equipement.numSerieprincipal ? equipement.numSerieprincipal  : '<i>serie en attente</i>' }}</span>#}
{#                                    <span style="float:right">#}
{#                                        {% if equipement.getPrivilege == true %}#}
{#                                            <img width="20"  height="20" src="{{ asset('build/images/svg-crown.png') }} " class="me-2" style="vertical-align: baseline">#}
{#                                        {% endif %}#}
{#                                        {% if equipement.equipementGroupes is not empty %}#}
{#                                            <i class="fa fa-lg fa-link me-2"></i>#}
{#                                        {% endif %}#}
{#                                        {{ equipement.EquipementTypePuissance ? equipement.EquipementTypePuissance.EquipementType.type : '' }}#}
{#                                        <a data-popup-id="popup-equipement-inactif-{{ equipement.id }}" data-poppup-container="body" data-dxpopup="" data-popup-title="Confirmation équipement inactif" data-popup-width="auto"><i class="fa fa-lg fa-remove ms-2"  style="color:red"></i></a>#}
{#                                    </span>#}
{#                                </span>#}
{#                                <br/>#}
{#                                <span class="w-100 d-inline-block">{{ equipement.EquipementFamille ? equipement.EquipementFamille.libelle : '' }}</span>#}
{#                                <br/><span class="mt-2 w-100">#}
{#                                    {{ equipement.adresse.adresse }}#}
{#                                    {%  if equipement.getLastContrat and equipement.getLastContrat.groupe %}#}
{#                                        <i class="fa fa-users circle-icon popper bg-vert picto-group-contrat" style="float:right;font-size:13px;line-height:1.5rem;width:25px;height:25px;" data-path="{{ path('equipement_get_path_contrat_groupe', {id: equipement.id}) }}"></i>#}
{#                                        <div class="info-tooltip bg-vert">N°{{ equipement.getLastContrat.groupe }}</div>#}
{#                                    {% endif %}#}
{#                                    {% if equipement.getSalarieFrisquet %}#}
{#                                        <img width="35"  height="35" src="{{ asset('build/images/salarie_frisquet.png') }} " class="" style="vertical-align: baseline;float:right;margin-left:1rem">#}
{#                                    {% endif %}#}
{#                                    {% if equipement.getChantier %}#}
{#                                        <img width="25"  height="25" src="{{ asset('build/images/chantier.png') }} " class="popper0 me-1" style="vertical-align: baseline;float:right;margin-left:1rem">#}
{#                                        <div class="info-tooltip bg-grey-dark">N°{{ equipement.getChantier }}</div>#}
{#                                    {% endif %}#}
{#                                    &nbsp;<br>{{ equipement.adresse.codePostal ~ ' ' ~ equipement.adresse.ville}}#}
{#                                </span>#}
{#                            </span>#}
{#                        </button>#}
{#                    </li>#}
{#                        {% endif %}#}
{#                    {% endfor %}#}
{#                {% else %}#}
{#                    aucun#}
{#                {% endif %}#}

{#            {% if client.getEquipementsInactif %}#}
{#                <span class="me-2" style="font-size:19px; margin-top:auto;">Equipement inactif</span>#}
{#                {% for equipement in client.getEquipementsInactif %}#}
{#                    <li class="nav-item px-2 d-flex" role="presentation">#}
{#                        <button class="btn btn-success inverse  p-1 popper" id="{{ equipement.id }}-tab" data-bs-toggle="tab" data-bs-target="#tabdata-{{ equipement.id }}" type="button" role="tab"  aria-selected="true">{{ equipement.getNumSeriePrincipal }}</button>#}
{#                        <div class="info-tooltip bg-primary">{{ equipement.commentaireDesactivation }}</div>#}
{#                        <a alt="réactiver l'équipement" title="réactiver l'équipement" data-confirm="1" data-message="Etes vous sur de vouloir réactiver l'équipement?" data-href="{{ path('equipement_cancel_inactif', {id: equipement.id}) }}" class="align-self-center" ><i class="fa fa-unlock ms-2 color-primary"> </i></a>#}
{#                    </li>#}
{#                {% endfor %}#}
{#                #}{##}{#<span class="d-flex "  style="flex-wrap:wrap;align-items:baseline;position:absolute;bottom:2px" >#}
{#                    #}{##}{##}
{#                   #}{##}{##}
{#                #}{##}{#</span>#}
{#            {% endif %}#}
{#            </ul>#}
{#        </div>#}
        <div class=" bg-grey tab-content" id="body-client">
                {% set disabled =  (equipement.getActif == false) ? 'disabled' : '' %}
                {% set contrat = equipement.getLastContrat %}

                {% 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 " style="z-index: 1000;">
                            <ul class="nav nav-tabs pt-1 nav-orange d-flex flex-column " role="tablist" id="show_tab-{{ equipement.id }}" data-tabs="tabs" style="position:relative">
                                <li class="nav-item sticky-links__element" role="presentation">
                                    <a class="nav-link bg-grey active rounded-circle-30 p-0 border-orange"  href="#tab-1-{{ equipement.id }}"  role="tab"  aria-selected="true">
                                        <i class="fa fa-fire ms-1" aria-hidden="true"></i>
                                        <span class="nav-title">Détail de l'équipement</span>
                                    </a>
                                </li>
                                <li class="nav-item sticky-links__element" role="presentation">
                                    <a class="nav-link  bg-grey rounded-circle-30 p-0 border-orange"  href="#tab-2-{{ equipement.id }}"  role="tab"  aria-selected="true">
                                        <i class="fa fa-tools ms-1" 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-30 p-0 border-orange"   href="#tab-3-{{ equipement.id }}" role="tab"  aria-selected="true">
                                        <i class="fa fa-euro ms-1" aria-hidden="true"></i>
                                        <span class="nav-title">Factures et devis</span>
                                    </a>
                                </li>
                                <li class="nav-item sticky-links__element" role="presentation">
                                    <a class="nav-link  bg-grey rounded-circle-30 p-0 border-orange"   href="#tab-4-{{ equipement.id }}" role="tab"  aria-selected="true">
                                        <i class="fa fa-envelope ms-1" aria-hidden="true"></i>
                                        <span class="nav-title">Communication</span>
                                    </a>
                                </li>
                                <li class="nav-item sticky-links__element" role="presentation">
                                    <a class="nav-link  bg-grey rounded-circle-30 p-0 border-orange"   href="#tab-5-{{ equipement.id }}" role="tab"  aria-selected="true">
                                        <i class="fa fa-exclamation-triangle ms-1 " aria-hidden="true"></i>
                                        <span class="nav-title">Aide technique</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="d-flex flex-column" style="width:38px;">
                        </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" 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 " style="width: 1089px;margin-right: 0.3rem">
                                            <div class="d-flex bg-primary flex-column bloc_fiche_2" style="height:266px;width:539px;margin-right: 0.3rem;">
                                                <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  not utilisateur or utilisateur == equipement.clientSouscripteur or equipement.logementVide %}
                                                        {% if equipement.getActif == true %}
                                                            <a class="btn btn-md btn-block  me-3 d-flex flex-column" style="justify-content: center; align-items:center;width:100%;height:100%;"  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-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 add-icon" style="position:relative !important;;"></i>
                                                            </a>
                                                        {% endif %}
                                                    {% else %}
                                                        <div class="d-flex flex-wrap" style="gap:0.5rem;">
                                                            <div class="d-flex align-items-center "  style="margin-right: 0.8rem;">
                                                                <label class="me-1">N°Client: </label>
                                                                {% if utilisateur.getEquipements|length > 0 %}
                                                                <a href="{{ path('show_client', {'id': utilisateur.id}) }}" class="text-decoration-none fw-600"  target="_blank" style="font-size: 15px;">
                                                                    {{ utilisateur.getFormattedNumeroClient }}
                                                                </a>
                                                                {% else  %}
                                                                    <span class="color-vert-link fw-600" style="font-size:15px">{{ utilisateur.getFormattedNumeroClient }}</span>
                                                                {% endif %}
                                                            </div>
                                                            <div class="d-flex align-items-center">
                                                                <label class="me-1" style="width:70px;">Type</label>
                                                                <input type="text" style="width:136px;" disabled class="form-control bg-grey" value="{{ utilisateur.typeClient.libelle }}">
                                                            </div>
                                                            <div class="d-flex w-100">
                                                                <div class="d-flex w-100" style="position:relative;">
                                                                    <span  class="pt-1" style="width:51px">E-mail</span>
                                                                    <ul class="collection w-100" id="collection-email-utilisateur" style="margin-bottom: 0rem;width:304px;margin-left:0;padding-left:1rem" data-index="{{ utilisateur.ClientEmails|length +1}}" data-prototype="#prototype-utilisateur-mail">
                                                                        <li class="mb-0 position-relative">
                                                                            {% set name_input_1 = 'utilisateur[' ~ utilisateur.id ~'][clientEmails][1][email]' %}
                                                                            {% set value_1 =  (utilisateur.ClientEmails.get(0)) ? utilisateur.ClientEmails.get(0).email : '' %}
                                                                            {% set type_1 = 'email' %}
                                                                            {% set name_input_2 = 'utilisateur[' ~ utilisateur.id ~'][clientEmails][1][commentaireEmail]' %}
                                                                            {% set value_2  = (utilisateur.ClientEmails.get(0)) ? utilisateur.ClientEmails.get(0).commentaireEmail : '' %}
                                                                            {% set name_input_3 = 'utilisateur[' ~ utilisateur.id ~'][clientEmails][1][id]' %}
                                                                            {% set value_3  = (utilisateur.ClientEmails.get(0)) ? utilisateur.ClientEmails.get(0).id : '' %}
                                                                            {% set popup_id = 'popup-utilisateur-commentaireEmail-1' %}
                                                                            {% set data_disable = 'data-disable-on-view' %}
                                                                            {{ include('clients/_prototype_collection.html.twig') }}
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        {% if utilisateur.typeClient.id == 2 %}
                                                            <div class="d-flex w-100">
                                                                <div class="d-flex align-items-center ">
                                                                    <label style="margin-right:0.4rem">Catégorie</label>
                                                                    <input type="text" disabled class="form-control bg-grey" value="{{ utilisateur.CategoriePro.libelle }}" style="width:173px;">
                                                                </div>
                                                                <div class="d-flex align-items-center ms-2">
                                                                    <label style="margin-right: 0.68rem" style="width:92px">Nom Entreprise</label>
                                                                    <input type="text" disabled class="form-control bg-grey" value="{{ utilisateur.nomEntreprise }}" style="width:173px;">
                                                                </div>
                                                            </div>
                                                        {% else %}
                                                            <div class="d-flex w-100">
                                                                <div class="d-flex align-items-center me-4">
                                                                    <label class="me-1 px-1" style="width:58px;">Civilité</label>
                                                                    <input type="text" disabled class="form-control bg-grey" style="width:75px;" value="{{ utilisateur.etatCivil ? utilisateur.etatCivil.libelleCourt : '' }}">
                                                                </div>
                                                                <div class="d-flex align-items-center ms-auto">
                                                                    <label class="me-1" style="width:68px;">Nom</label>
                                                                    <input type="text" disabled class="form-control bg-grey" value="{{ utilisateur.nom }}">
                                                                </div>
                                                            </div>
                                                            <div class="d-flex w-100">
                                                                <div class="d-flex align-items-center ms-auto">
                                                                    <label class="me-1" style="width: 69px;">Prénom</label>
                                                                    <input type="text" disabled class="form-control bg-grey" value="{{ utilisateur.prenom }}">
                                                                </div>
                                                            </div>




                                                        {% endif %}
                                                        </div>
                                                        <div class="d-flex mt-2" style="position:relative">
                                                            <span class="icon-phone-rotary" style="position: absolute;">{{ source('@public_path'~asset('build/images/phone-rotary.svg')) }}</span>
                                                            <ul class="collection  d-flex w-100 justify-content-md-between flex-wrap" id="collection-tel-utilisateur" style="margin-bottom: 0rem;margin-left:0px" data-index="{{ utilisateur.clientTels|length +1 }}" data-prototype="#prototype-utilisateur-tel">
                                                                {% for i in 1..3 %}
                                                                    <li style="position:relative;margin-bottom:0">
                                                                        {% set name_input_1 = 'utilisateur[' ~ utilisateur.id ~'][clientTels][' ~ i ~'][numTel]' %}
                                                                        {% set value_1 =  (utilisateur.clientTels.get(i-1)) ? utilisateur.clientTels.get(i-1).numTel %}
                                                                        {% set type_1 = 'text' %}
                                                                        {% set fr =  (utilisateur.clientTels.get(i-1)) ? utilisateur.clientTels.get(i-1).fr : 1 %}
                                                                        {% set class_sup = (fr) ? 'input_tel' : 'input_tel not_fr' %}
                                                                        {% set minlength = (fr) ? 'minlength=14' : '' %}
                                                                        {% set maxlength = 'maxlength=14' %}
                                                                        {% set pattern = (fr) ? 'pattern=[0-9]{2}.[0-9]{2}.[0-9]{2}.[0-9]{2}.[0-9]{2}' : '9999999999' %}
                                                                        {% set name_input_2 = 'utilisateur[' ~ utilisateur.id ~'][clientTels][' ~ i ~'][commentaireTel]' %}
                                                                        {% set value_2  = (utilisateur.clientTels.get(i-1)) ? utilisateur.clientTels.get(i-1).commentaireTel %}
                                                                        {% set name_input_3 = 'utilisateur[' ~ utilisateur.id ~'][clientTels][' ~ i ~'][id]' %}
                                                                        {% set value_3  = (utilisateur.clientTels.get(i-1)) ? utilisateur.clientTels.get(i-1).id %}
                                                                        {% set name_input_fr = 'utilisateur[' ~ utilisateur.id ~'][clientTels][' ~ i ~'][fr]' %}
                                                                        {% set width = "width:150px" %}
                                                                        {% set popup_id = 'popup-utilisateur-commentaireTel-' ~ i %}
                                                                        {% set data_disable = 'data-disable-on-view' %}
                                                                        {{ include('clients/_prototype_collection.html.twig') }}
                                                                    </li>
                                                                {% endfor %}
                                                            </ul>
                                                        </div>
                                                        {% if utilisateur != equipement.clientSouscripteur %}
                                                            <div class="d-flex justify-content-center pt-2" style="margin-top:auto;">
                                                                <a class="btn btn-md btn-block btn-outline-danger me-3" 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-3" 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-3" 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 %}
                                                </div>
                                            </div>
                                            <div class="d-flex bg-primary flex-column  bloc_fiche_2 me-auto"   style="height:266px;width:543px">
                                                <div class="text-center py-1 position-relative" style="color:white">
                                                    Contrat
                                                    <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">
                                                    <div class="d-flex flex-wrap mb-3 " style="gap:0.5rem">
                                                        <div class="d-flex w-100 justify-content-between">
                                                            <div class="d-flex align-items-center me-2">
                                                                <label style="width:44px;" class="me-1">Famille</label>
                                                                <select name="famille_contrat-{{ equipement.id }}" data-disable-on-view="" style="width:108px" {{ disabled }} class="form-control bg-grey"  form="form_client_update">
                                                                    {% for famille in famillesContrat %}

                                                                        {% if contrat or equipement.equipementFamilleContrat %}
                                                                            {% set selected =  (equipement and equipement.equipementFamilleContrat and  equipement.equipementFamilleContrat.id == famille.id) ? 'selected' : '' %}
                                                                            <option value="{{ famille.id }}" {{ selected }}>{{ famille.getLibelle }}</option>
                                                                        {% else %}
                                                                            {% if famille.id != 1 %}
                                                                                {% set selected =  (famille.getCode == '2') ? 'selected' : '' %}
                                                                                <option value="{{ famille.id }}" {{ selected }}>{{ famille.getCode }}</option>
                                                                            {% endif %}
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                </select>
                                                            </div>
                                                            <div class="d-flex align-items-center me-2">
                                                                <label class="me-1">Type</label>
                                                                <select name="contrat_type-{{ equipement.id }}" data-disable-on-view="" style="width:auto" {{ disabled }} class="form-control bg-grey" id="contrat_type" form="form_client_update">
                                                                    <option value="" {{contrat and contrat.ContratType ? '' : 'selected' }}></option>
                                                                    {% for type in typesContrat %}
                                                                        {% set selected =  (contrat and contrat.ContratType and contrat.ContratType.id == type.id) ? 'selected' : '' %}
                                                                        <option value="{{ type.id }}" {{ selected }}>{{ type.libelleCourt }}</option>
                                                                    {% endfor %}
                                                                </select>
                                                            </div>
                                                            <div class="me-1">
                                                                <div data-disable-on-view="" id="salarie-frisquet" class="{{ equipement.getSalarieFrisquet ? 'active' : '' }} popper" style="vertical-align: baseline;cursor:pointer"></div>
                                                                <div class="info-tooltip bg-grey color-primary border-grey-dark">Salarié Frisquet</div>
                                                                <input type="hidden" name="salarie_frisquet" value="{{ equipement.getSalarieFrisquet }}" form="form_client_update" />
                                                            </div>
                                                            <div class="d-flex align-items-center">
                                                                <label style="width:72px">Date debut</label>
                                                                <input type="date" data-disable-on-view="" name="date_debut_contrat-{{ equipement.id }}" {{ disabled }} class="form-control bg-grey input-date-custom" value="{{contrat and contrat.dateDebutContrat|date("Y-m-d") ? contrat.dateDebutContrat|date("Y-m-d") : (isGU ? equipement.datePremierAllumage|date("Y-m-d") : '') }}" form="form_client_update">
                                                            </div>
                                                        </div>
                                                        <div class="d-flex w-100 justify-content-between">
                                                            <div class="d-flex align-items-center" style="margin-right:2rem;">
                                                                <label class="me-1" style="width:117px">Date souscription</label>
                                                                <input type="date"  style="width:128px"  data-disable-on-view="" name="date_souscription-{{ equipement.id }}" {{ disabled }} class="form-control bg-grey input-date-custom" value="{{contrat and contrat.dateSouscription ? contrat.dateSouscription|date("Y-m-d") : '' }}" form="form_client_update">
                                                            </div>
                                                            <div class="d-flex align-items-center">
                                                                <label class="me-1" style="width:67px;">Date fin</label>
                                                                {%  if contrat.contratResiliations[0] is defined %}
                                                                    <input type="date"  data-disable-on-view="" style="width:150px"  form="form_client_update" name="date_fin_contrat-{{ equipement.id }}" {{ disabled }} class="form-control border-orange bg-saumon-light input-date-custom" value="{{contrat and contrat.dateFinContrat ? contrat.dateFinContrat|date("Y-m-d") : '' }}">
                                                                    {% if contrat.contratResiliations[0].getDate|date("d/m/Y") != contrat.dateFinContrat|date("d/m/Y")  %}
                                                                        <span class="ms-3 color-saumon-bold">Résilié le {{ contrat.contratResiliations[0].getDate|date("d/m/Y") }}</span>
                                                                    {% else %}
                                                                        <span class="ms-3 color-saumon-bold">en cours de résiliation</span>
                                                                    {% endif %}
                                                                {% else %}
                                                                    <input type="date"  data-disable-on-view="" style="width:150px"  form="form_client_update" name="date_fin_contrat-{{ equipement.id }}" {{ disabled }} class="form-control bg-grey input-date-custom" value="{{contrat and contrat.dateFinContrat ? contrat.dateFinContrat|date("Y-m-d") : (isGU ? equipement.datePremierAllumage|date_modify("+1 year")|date("Y-m-d") : '') }}">
                                                                {% endif %}
                                                            </div>
                                                        </div>

                                                        <div class="d-flex align-items-center me-5">
                                                            <label class="me-1" style="width:117px">Date paiement</label>
                                                            <input type="date" data-disable-on-view="" style="width:150px"  form="form_client_update" name="date_paiement_contrat-{{ equipement.id }}" {{ disabled }} class="form-control bg-grey input-date-custom" value="{{ contrat and contrat.datePaiement ? contrat.datePaiement|date("Y-m-d") : '' }}">
                                                        </div>
                                                        <div class="d-flex w-100 justify-content-between">
                                                            <div class="d-flex align-items-center">
                                                                <label class="me-1">Envoi avis échéance</label>
                                                                <input type="date"  style="width:113px !important" data-disable-on-view="" name="date_echeance-{{ equipement.id }}" {{ disabled }} form="form_client_update" class="form-control bg-grey input-date-custom" value="{{contrat and contrat.dateAvisEcheance ? contrat.dateAvisEcheance|date("Y-m-d") : '' }}">
                                                            </div>
                                                            <div class="d-flex align-items-center" style="margin-left: -2rem;">
                                                                <label class="me-1 ">Age</label>
                                                                <input type="text"  style="width:24px; padding: 0!important"  data-disable-on-view="" name="age" disabled class="form-control bg-grey text-center" value="{{ equipement.getAge ? equipement.getAge : '' }}">
                                                            </div>
                                                            <div class="d-flex align-items-center">
                                                                <label class="me-2">Mode de paiement</label>
                                                                <select name="mode-paiement-{{ equipement.id }}" data-disable-on-view="" style="width:auto" {{ disabled }} form="form_client_update" class="form-control bg-grey" id="mode_paiement">
                                                                    <option>Bancaire</option>
                                                                    <option>Chèque</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex w-100 justify-content-between">
                                                            <div class="form-check" style="margin-right:2.5rem;">
                                                                <input class="form-check-input"  form="form_client_update" data-disable-on-view=""  value='oui' name="logement_2_ans-{{ equipement.id }}" form="form_client_update"  {{ equipement.getLogementPlus2Ans ? 'checked' : '' }} type="checkbox" value="" id="logement_2_ans-{{ equipement.id }}" style="margin-top:0.6rem;">
                                                                <label class="form-check-label me-1 " for="logement_2_ans-{{ equipement.id }}" style="padding-top: 0.4rem;"> Logement > 2 ans</label>
                                                            </div>
                                                            <div class="d-flex align-items-center">
                                                                <label class="me-1" style="width:54px;">Remise</label>
                                                                <input type="text"  style="width:60px" data-disable-on-view="" name="coefficient-{{ equipement.id }}" {{ disabled }} form="form_client_update" class="form-control bg-grey" value="{{contrat and contrat.getCoefficient ? contrat.getCoefficient : '' }}">
                                                            </div>
                                                            <div class="d-flex align-items-center">
                                                                <label class="me-1">TVA</label>
                                                                <select name="tva-{{ equipement.id }}" data-disable-on-view="" style="width:auto" {{ disabled }} form="form_client_update" class="form-control bg-grey" id="equipement_tva">
                                                                    {% for taux in tauxTva %}
                                                                        {% set selected =  ((equipement.getTauxTva and equipement.getTauxTva.id == taux.id) or (not equipement.getTauxTva and client.getTypeClient.id == 1 and taux.taux == 10) or (not equipement.getTauxTva and client.getTypeClient.id == 2 and taux.taux == 20)) ? 'selected' : '' %}
                                                                        <option value="{{ taux.id }}" {{ selected }} {{ taux.actif == false ? 'disabled' : '' }}>{{ taux.taux }}%</option>
                                                                    {% endfor %}
                                                                </select>
                                                            </div>
                                                            <div class="d-flex align-items-center">
                                                                <label class="me-1">Tarif TTC</label>
                                                                <input type="text"  style="width:60px" data-disable-on-view="" name="contrat_tarif" disabled class="form-control bg-grey pe-0" value="{{ contrat and contrat.facture ? contrat.facture.montantTtc }}">
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div class="d-flex justify-content-between">
                                                        {% if equipement.getActif %}
                                                            {% if contrat  and  contrat.contratResiliations[0] is not defined %}
                                                                 <a id="button-resilier-contrat-{{ equipement.id  }}" data-disable-on-view="" data-scrollview-height="100%" data-popup-scrollview=".form_resilier_contrat" data-popup-id="popup-resilier-{{ equipement.id }}" data-dxpopup=""  data-poppup-container="body"  data-dxpopup=""  data-popup-position-at="top" data-popup-position-my="top" data-popup-title="Résilier contrat" data-popup-width="auto" class="btn btn-md btn-block btn-outline-danger me-3">Résilier le contrat</a>
                                                                <a id="button-contrat-groupe-{{ equipement.id  }}" data-disable-on-view="" data-popup-id="popup-groupe-contrat-{{ contrat.id }}" data-dxpopup=""  data-poppup-container="body" data-popup-title="Groupe" data-popup-width="auto" class="btn btn-md btn-block {{ (equipement.getLastContrat and equipement.getLastContrat.groupe) ? 'bg-pink color-vert border-success' : 'btn-outline-success' }} ms-2" style="order:3"><i class="fa fa-users me-2"></i>Groupe</a>
                                                            {% elseif contrat.contratResiliations[0] is defined %}
                                                                <button  class="btn  btn-outline-danger me-3 me-auto" data-confirm="1" data-href="{{ path('equipement_cancel_resiliation_contrat', {id: contrat.contratResiliations[0].id}) }}" >Annuler résiliation</button>
                                                            {% endif %}
                                                            {% if equipement.getPrivilege == true %}
                                                               <div class="ms-auto">
                                                                   <img width="28"  height="28" class="popper" src="{{ asset('build/images/picto-privilege.png') }} " style="vertical-align: sub" />
                                                                   {% if equipement.getLastPrivilege %}
                                                                       <div class="info-tooltip bg-jaune-privilege">Dernière proposition le {{ equipement.getLastPrivilege.getDateProposition|date('d/m/Y') }}</div>
                                                                   {% endif %}
                                                               </div>
                                                            {% endif %}
                                                            <a data-popup-id="popup-simulateur-contrat-{{ equipement.id }}" data-poppup-container="body" data-dxpopup="" data-popup-title="Simulateur" data-popup-width="auto" class="btn btn-md btn-block btn-outline-success button-simulateur ms-auto" onclick="$('#simulateur-age-{{ equipement.id }}').change();"><i class="fa fa-calculator me-2"></i>Simulateur contrat</a>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex bg-primary flex-column h-auto mt-2 w-100"  >
                                                <div class="text-center py-1" style="color:white">Localisation</div>
                                                <div class="px-2 py-2 bg-white color-primary  w-100 h-100 block-infos-container">
                                                    <div class="d-flex w-100 justify-content-between">
                                                        <div class="d-flex align-items-center me-3" style="flex:1">
                                                            <label class="me-1" style="width:79px;">Adresse</label>
                                                            <input type="text" data-disable-on-view="" form="form_client_update" data-prefix="equipement" data-diverror="#adresse_auto_error-{{ equipement.id }}"  {{ disabled }} data-idequipement="{{ equipement.id }}" data-idsite="{{ equipement.getSecteur ? equipement.getSecteur().getSectorisationVersion().getSite().id }}" name="equipement_localisation-{{ equipement.id }}" class="form-control bg-grey adresse_auto" value="{{ equipement.adresse ? equipement.adresse.getLisibleAdresse : ''}}">
                                                            <div id="adresse_auto_error-{{ equipement.id }}" style="display: none;height:30px;"></div>
                                                            <input type="hidden" form="form_client_update" name="equipement_code_postal-{{ equipement.id }}">
                                                            <input type="hidden" form="form_client_update" name="equipement_ville-{{ equipement.id }}">
                                                            <input type="hidden" form="form_client_update" name="equipement_adresse-{{ equipement.id }}">
                                                            <input type="hidden" form="form_client_update" name="equipement_coordinates-{{ equipement.id }}">
                                                        </div>
                                                        <div class="d-flex align-items-center">
                                                            <div data-disable-on-view="" id="client-chantier" class="popper me-1  {{  equipement.getChantier is not null ? 'active' : ''  }}" style="vertical-align: baseline;cursor:pointer"></div>
                                                            <div class="info-tooltip bg-grey color-primary border-grey-dark">Chantier</div>
                                                            <input type="text" name="equipement_chantier"  data-disable-on-view="" class="form-control bg-grey" {{ equipement.getChantier is null ? 'disabled' : ''  }} value="{{ equipement.getChantier is not null ? ((equipement.getChantier != 0) ? 'N°'~ equipement.getChantier  : '') : '' }}" placeholder="N° de chantier" style="width: 98px;padding: 0 2px !important;" form="form_client_update">
{#                                                            <span class="fst-italic" id="text-numero-chantier" style="display:none;">N° généré automatiquement</span>#}
                                                        </div>
                                                    </div>
                                                    <div class="d-flex mt-2">
                                                        {% if equipement.getActif %}
                                                            <div class="d-flex align-items-center position-relative " style="flex:1">
                                                                <label  style="width:80px;margin-right:0.2rem;">Complément</label>
                                                                {{ include('clients/_complements_adresse_view.html.twig') }}
                                                                <div class="d-flex ms-2">
                                                                    <a data-popup-id="popup-add-complement" data-disable-on-view=""  data-poppup-container="body" data-dxpopup="" data-popup-title="Complément d'adresse" data-popup-width="auto">
                                                                        <i  class="fa fa-lg fa-plus  bg-outline-vert  button-add me-0" data-disable-on-view=""  style="position:relative;border-color: #14a085 !important;top:inherit;right:inherit"></i>
                                                                    </a>
                                                                </div>
                                                            </div>

{#                                                            <div#}
{#                                                                    style="padding-right: 38px;"#}
{#                                                                    class="grid grid-condensed"#}
{#                                                                    data-style="tab"#}
{#                                                                    id="complement-adresse-grid-{{ equipement.id }}"#}
{#                                                                    data-page="AdresseComplement"#}
{#                                                                    data-columns="{{ complementAdresseGrid.columns|json_encode() }}"#}
{#                                                                    data-getpath="{{ complementAdresseGrid.get_path ~ equipement.id}}"#}
{#                                                                    data-createpath="{{ complementAdresseGrid.create_path ~ equipement.id}}"#}
{#                                                                    data-searchpanel='{"visible":false}'#}
{#                                                                    data-pagination='{"visible":false}'#}
{#                                                                    data-toolbarinvisible="true"#}
{#                                                                    data-editing="{{ type_affichage == 'edit' and locks[equipement.id] is defined  ? '' : defaultEditorGridOption }}"#}
{#                                                            >#}
{#                                                            </div>#}
                                                        {% endif %}
                                                        {% set secteur = equipement.getSecteur %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex bg-primary flex-column h-auto bloc_fiche_3 bloc_fiche_technique"  style="width:550px">
                                            <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;">
                                                    <div class="d-flex align-items-center" style="margin-right: 1.3rem;">
                                                        <label style="width:44px;" class="me-1">Famille</label>
                                                        <select name="famille_equipement-{{ equipement.id }}" data-disable-on-view="" data-idequipement="{{ equipement.id }}" style="width:auto" class="form-control bg-grey change_equipement" {{ disabled }} data-form-change="#form-change-infos-technique-{{ equipement.id }}" data-target="#target-equipement-type-{{ equipement.id }}" form="form_client_update">
                                                            <option value="" {{ equipement.equipementFamille ? '' : 'selected' }}></option>
                                                            {% for famille in famillesEquipement %}
                                                                {% set selected =  (equipement and equipement.equipementFamille and  equipement.equipementFamille.id == famille.id) ? 'selected' : '' %}
                                                                <option value="{{ famille.id }}" {{ selected }}>{{ famille.getCodeLibelle }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="d-flex align-items-center" id="target-equipement-type-{{ equipement.id }}">
                                                        {{ include('clients/_select_equipement_types.html.twig') }}
                                                    </div>

                                                    <div class="d-flex align-items-center" style="margin-right: 1.8rem;">
                                                        <label style="width:108px;" class="me-1">N°série</label>
                                                        <input type="text"  style="width:134px"  data-disable-on-view="" maxlength="14" name="numero_serie-{{ equipement.id }}" {{ disabled }} class="form-control bg-grey" value="{{ equipement.getNumSeriePrincipal ? equipement.getNumSeriePrincipal : '' }}" form="form_client_update">
                                                    </div>
                                                    <div class="form-check" style="margin-right: 1rem;">
                                                        <input class="form-check-input" form="form_client_update" data-disable-on-view=""  name="vmc-{{ equipement.id }}" form="form_client_update"  {{ equipement.vmc ? 'checked' : '' }} type="checkbox" value="" id="vmc-{{ equipement.id }}" style="margin-top:0.6rem;">
                                                        <label class="form-check-label me-1 " value="oui" for=vmc"-{{ equipement.id }}" style="padding-top: 0.4rem;"> VMC</label>
                                                    </div>
                                                    <div class="d-flex align-items-center" id="target-equipement-puissance-{{ equipement.id }}">
                                                        {{ include('clients/_select_equipement_puissances.html.twig') }}
                                                    </div>
                                                    <div class="d-flex align-items-center {{ (equipement.equipementFamille and  equipement.equipementFamille.id == 10) ? '' : 'hidden'}}" id="numero_serie_secondaire-{{ equipement.id }}">
                                                        <label style="width:108px;" class="me-1">N°série extérieur</label>
                                                        <input type="text"  style="width:134px" data-disable-on-view="" maxlength="14" name="numero_serie_secondaire-{{ equipement.id }}" {{ disabled }} class="form-control bg-grey" value="{{ equipement.getNumSerieSecondaire ? equipement.getNumSerieSecondaire : '' }}" form="form_client_update">
                                                    </div>
                                                    <div class="d-flex align-items-center" style="margin-left:6.7rem;">
                                                        <label style="width:61px;" class="me-1">Energie</label>
                                                        <select name="equipement_energie-{{ equipement.id }}" data-disable-on-view="" style="width:61px" {{ disabled }} class="form-control bg-grey"  form="form_client_update">
                                                            <option value="" {{ equipement.energie ? '' : 'selected' }}></option>
                                                            {% for energie in energies %}
                                                                {% set selected =  (equipement.energie and equipement.energie.id == energie.id) ? 'selected' : '' %}
                                                                <option value="{{ energie.id }}" {{ selected }}>{{ energie.libelleCourt }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <label style="width:108px;" class="me-1">Date allumage</label>
                                                        <input type="date"   data-disable-on-view="" {{ disabled }} name="date_premier_allumage-{{ equipement.id }}" max="{{ "now"|date("Y-m-d") }}" class="form-control bg-grey input-date-custom " value="{{ equipement.datePremierAllumage ? equipement.datePremierAllumage|date("Y-m-d") : null }}" form="form_client_update">
                                                    </div>
                                                    <div class="d-flex align-items-center position-relative" style="margin-left:7.4rem;">
                                                        <label style="width:61px;" class="me-1">Local</label>
                                                        <i class="fa fa-lg fa-history custom-history color-grey-dark" style="right:82px;" data-popup-id="popup-history-equipement-local" data-poppup-container="body" data-dxpopup="" data-popup-title="Historique Equipement Local" data-popup-width="auto"></i>
                                                        <select form="form_client_update" data-disable-on-view="" name="equipement_local-{{ equipement.id }}" style="width:auto" {{ disabled }} class="form-control bg-grey">
                                                            {% for local in locaux %}
                                                                {% set selected =  (equipement and equipement.equipementLocal and equipement.equipementLocal.id == local.id) ? 'selected' : '' %}
                                                                <option value="{{ local.id }}" {{ selected }}>{{ local.libelle }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </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-outline-vert add_complement_adresse button-add" 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>
                                                        <div
                                                                style="padding-right: 38px;min-height:133px;max-height:133px;"
                                                                class="grid grid-condensed"
                                                                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-searchpanel='{"visible":false}'
                                                                data-pagination='{"visible":false}'
                                                                data-toolbarinvisible="true"
                                                                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 %}
                                                        <a class="btn btn-md btn-block btn-outline-success me-3 ms-auto"  data-poppup-container="body" data-popup-id="popup-details-installation-{{ equipement.id }}" data-dxpopup="" data-popup-title="Détails installation" data-popup-width="87%" data-popup-height="88%">Détails installation</a>
                                                        {% if client.equipements|length > 1 %}
                                                            <a class="btn btn-md btn-block {{ equipement.equipementGroupes is not empty ? 'bg-pink color-vert border-success' :'btn-outline-success' }} me-1" 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">{{ equipement.equipementGroupes is not empty ? 'Equipements liés' : '+ Lier équipement' }}</a>
                                                        {% endif %}
                                                        {% if client.getPorteOuvertes is not empty %}
                                                            <a class="btn btn-md btn-block  me-3 bg-orange-inverse border-orange" data-poppup-container="body" data-popup-id="popup-equipement-po-{{ client.id }}" data-dxpopup="" data-popup-title="Porte ouverte" data-popup-width="auto"> <div class="d-flex"> <span class="me-2"><img width="20"  height="20" src="{{ asset('build/images/porte-ouverte.png') }} " style="vertical-align: sub"></span><span>Porte ouverte</span></div></a>
                                                        {% endif %}
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {#<div class="tab-pane fade show" id="tab-2-{{ equipement.id }}" role="tabpanel" style="position:relative">#}
                                {#<div class="d-flex bg-primary flex-column h-auto bloc-4-border" style="position:relative">#}
                                {#<div class="text-center py-1" style="color:white">Programmer une intervention</div>#}
                                {#<div class="px-2 py-4 bg-white w-100 h-100">#}
                                {#<div class="row mb-2">#}
                                {#<div class="col">#}
                                {#<div class="input-group form-group">#}
                                {#<label class="me-3 form-label control-label" for="client_type">Type d'intervention</label>#}
                                {#<select id="client_type" name="client[type]" class="form-control-sm form-control">#}
                                {#<option value=""></option>#}
                                {#</select>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="col">#}
                                {#<div class="input-group form-group">#}
                                {#<label class="me-2 form-label control-label required" for="client_id">Nombre de techniciens</label>#}
                                {#<input type="number" name="nb_tec" required="required">#}
                                {#</div>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="row">#}
                                {#<p style="color:#f05b41">Renseigner cette partie uniquement si le client à des contraintes de dates ou de crénaux</p>#}
                                {#</div>#}
                                {#<div class="row mb-3 px-3">#}
                                {#<div class="col">#}
                                {#<div class="input-group form-group">#}
                                {#<label class="me-2 form-label control-label required" for="client_id">A partir du</label>#}
                                {#<input type="date" name="date_a_partir" class="form-control-sm form-control">#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="col">#}
                                {#<div class="input-group form-group">#}
                                {#<label class="me-2 form-label control-label required" for="client_id">Avant le</label>#}
                                {#<input type="date" name="date_avant" class="form-control-sm form-control">#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="col">#}
                                {#<div class="input-group form-group ">#}
                                {#<label class="me-2 form-label control-label required" for="client_id">Entre</label>#}
                                {#<input type="date" name="date_entre" class="form-control-sm form-control">#}
                                {#</div>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="row px-3 py-2" >#}
                                {#<div class="input-group form-group">#}
                                {#<div class="form-check form-check-inline  me-4">#}
                                {#<input class="form-check-input" type="radio" name="periode_rdv" id="periode_rdv1" value="matin">#}
                                {#<label class="form-check-label" for="periode_rdv1">Matin</label>#}
                                {#</div>#}
                                {#<div class="form-check form-check-inline me-4">#}
                                {#<input class="form-check-input" type="radio" name="periode_rdv" id="periode_rdv2" value="first_rdv_matin">#}
                                {#<label class="form-check-label" for="periode_rdv2">1er RDV matin</label>#}
                                {#</div>#}
                                {#<div class="form-check form-check-inline me-4">#}
                                {#<input class="form-check-input" type="radio" name="periode_rdv" id="periode_rdv3" value="last_rdv_matin" >#}
                                {#<label class="form-check-label" for="periode_rdv3">Dernier RDV matin</label>#}
                                {#</div>#}
                                {#<div class="form-check form-check-inline me-4">#}
                                {#<input class="form-check-input" type="radio" name="periode_rdv" id="periode_rdv4" value="aprem" >#}
                                {#<label class="form-check-label" for="periode_rdv4">Après-midi</label>#}
                                {#</div>#}
                                {#<div class="form-check form-check-inline me-4">#}
                                {#<input class="form-check-input" type="radio" name="periode_rdv" id="periode_rdv5" value="first_rdv_aprem" >#}
                                {#<label class="form-check-label" for="periode_rdv5">1er RDV Après-midi</label>#}
                                {#</div>#}
                                {#<div class="form-check form-check-inline me-4">#}
                                {#<input class="form-check-input" type="radio" name="periode_rdv" id="periode_rdv6" value="last_rdv_aprem">#}
                                {#<label class="form-check-label" for="periode_rdv6">Dernier RDV après-midi</label>#}
                                {#</div>#}
                                {#</div>#}
                                {#</div>#}
                                {#</div>#}
                                {#<a style="position: absolute;bottom: -17px;right: 50%; background-color: #2c3e50 !important;color: white;width: 35px;height: 35px;font-size: 1.3em;line-height: 2.3rem; border-radius:20px;cursor:pointer"><i class="fa fa-search" style="padding-top: 6px;padding-left: 3px;display: flex;justify-content: center;"></i></a>#}
                                {#</div>#}
                                {#<div class="row my-4">#}
                                {#<div class="col">#}
                                {#<div class="d-flex p-2" style="background-color:#14a085; color: white">#}
                                {#<div  class="me-3" style="width:50px;"> {{ source('@public_path'~asset('build/images/picto-distance.svg')) }}</div>#}
                                {#<div class="text-center" style="margin: 0 auto;">#}
                                {#<span><b>affichage par distance optimale</b></span><br>#}
                                {#<span><i>Permet d'optimiser les tournées des techniciens de terrain</i></span>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="d-flex justify-content-between p-2">#}
                                {#<div class="d-flex">#}
                                {#<img width="19" height="21" class="me-2" src="{{ asset('build/images/picto-worker-hat.png') }}">#}
                                {#<div>#}
                                {#<div>76 - Benoît Villette</div>#}
                                {#<div style="opacity: 0.5">16 - Thierry Richard</div>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="text-center">#}
                                {#<b>Vendredi 27 Avril 2021</b><br>#}
                                {#<i class="fa fa-clock"></i> Après-midi#}
                                {#</div>#}
                                {#<div class="text-end">#}
                                {#Environ <span style="color:rgb(25,184,97)">50m</span><br>#}
                                {#<span style="opacity: 0.5">Environ</span>&nbsp;<span style="color:rgb(237,125,49)">1,2Km</span>#}
                                {#</div>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="col">#}
                                {#<div class="d-flex p-2" style="background-color:#f05b41; color: white">#}
                                {#<div class="me-3" style="width:50px;">#}
                                {#{{ source('@public_path'~asset('build/images/picto-date.svg')) }}#}
                                {#</div>#}
                                {#<div class="text-center" style="margin: 0 auto;">#}
                                {#<span><b>affichage par date</b></span><br>#}
                                {#<span><i>Permet de répondre à la contrainte de date du client</i></span>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="d-flex justify-content-between p-2">#}
                                {#<div class="text-first">#}
                                {#<b style="color:#f05b41">Vendredi 27 Avril 2021</b><br>#}
                                {#<i class="fa fa-clock"></i> 1er RDV matin#}
                                {#</div>#}
                                {#<div >#}
                                {#<div style="opacity:0.5"><img width="19" height="21" class="me-2" src="{{ asset('build/images/picto-worker-hat.png') }}"> 76 - Benoît Villette / 16 - Thierry Richard</div>#}
                                {#<div class="text-end">#}
                                {#Environ <span style="color:#f05b41">5.5km</span> /#}
                                {#<span>Environ</span>&nbsp;<span style="color:#f05b41">8.0km</span>#}
                                {#</div>#}
                                {#</div>#}
                                {#</div>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="my-4">#}
                                {#<table class="table table-striped w-100">#}
                                {#<thead style="vertical-align: middle;">#}
                                {#<th>Date</th>#}
                                {#<th>RG</th>#}
                                {#<th>Intervention</th>#}
                                {#<th>Agent</th>#}
                                {#<th>Durée (min)</th>#}
                                {#<th>Numéro de<br>fiche</th>#}
                                {#<th>PC</th>#}
                                {#<th>Privilège</th>#}
                                {#<th>Observations</th>#}
                                {#<th>Documents<br>générés</th>#}
                                {#</thead>#}
                                {#<tbody>#}
                                {#<tr>#}
                                {#<td>31/01/2021</td><td>1</td><td>V1</td><td>35</td><td>75</td><td>2104100844</td><td>24</td><td></td><td>Chaudière dans une salle de bain</td><td></td>#}
                                {#</tr>#}
                                {#<tr>#}
                                {#<td>31/01/2020</td><td>1</td><td>V1</td><td>110</td><td>75</td><td>2104100843</td><td>39</td><td></td><td></td><td></td>#}
                                {#</tr>#}
                                {#<tr>#}
                                {#<td>31/01/2019</td><td>1</td><td>V1</td><td>45</td><td>75</td><td>2104100842</td><td>39</td><td></td><td></td><td></td>#}
                                {#</tr>#}
                                {#<tr>#}
                                {#<td>31/01/2018</td><td>1</td><td>V1</td><td>35</td><td>75</td><td>2104100841</td><td>7</td><td></td><td></td><td></td>#}
                                {#</tr>#}
                                {#</tbody>#}
                                {#</table>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="tab-pane fade show" id="tab-3-{{ equipement.id }}" role="tabpanel" >#}
                                {#<div class="d-flex bg-primary flex-column h-auto bloc-4-border" style="position:relative">#}
                                {#<div class="text-center py-1" style="color:white">Contrat</div>#}
                                {#</div>#}
                                {#<div class="my-4">#}
                                {#<table class="table table-striped w-100">#}
                                {#<thead style="vertical-align: middle;">#}
                                {#<th>Type</th>#}
                                {#<th>Date début</th>#}
                                {#<th>Date fin</th>#}
                                {#<th>Date avis <br>échéance</th>#}
                                {#<th>Date<br>paiement</th>#}
                                {#<th>Mode<br>paiement</th>#}
                                {#<th>Date relance</th>#}
                                {#<th>Date 2eme<br>relance</th>#}
                                {#<th>Prix HT</th>#}
                                {#<th>Prix TTC</th>#}
                                {#<th>Taux<br>TVA</th>#}
                                {#<th>Coeff.</th>#}
                                {#<th>Facture</th>#}
                                {#</thead>#}
                                {#<tbody>#}
                                {#<tr>#}
                                {#<td>MOD</td><td></td><td>31/01/2021</td><td>16/12/2020</td><td>28/12/2020</td><td>Chèque</td><td></td><td></td><td>210,8</td><td>263,50</td><td>20%</td><td>1,0000</td><td></td>#}
                                {#</tr>#}
                                {#<tr>#}
                                {#<td>MOD</td><td></td><td>31/01/2020</td><td>16/12/2019</td><td>28/12/2020</td><td>Chèque</td><td></td><td></td><td>210,8</td><td>263,50</td><td>20%</td><td>1,0000</td><td></td>#}
                                {#</tr>#}
                                {#<tr>#}
                                {#<td>MOD</td><td></td><td>31/01/2017</td><td>16/12/2017</td><td>28/12/2020</td><td>Chèque</td><td>13/02/2017</td><td></td><td>210,8</td><td>263,50</td><td>20%</td><td>1,0000</td><td></td>#}
                                {#</tr>#}
                                {#</tbody>#}
                                {#</table>#}
                                {#</div>#}
                                {#<div class="d-flex bg-primary flex-column h-auto bloc-4-border" style="position:relative">#}
                                {#<div class="text-center py-1" style="color:white">Intervention</div>#}
                                {#</div>#}
                                {#<div class="my-4">#}
                                {#<table class="table table-striped w-100">#}
                                {#<thead style="vertical-align: middle;">#}
                                {#<th>Date<br>intervention</th>#}
                                {#<th>N°<br>intervention</th>#}
                                {#<th>Date paiement</th>#}
                                {#<th>Mode<br>paiement</th>#}
                                {#<th>Date<br>Relance</th>#}
                                {#<th>Date 2ème<br>relance</th>#}
                                {#<th>Prix HT</th>#}
                                {#<th>Prix TTC</th>#}
                                {#<th>Taux TVA</th>#}
                                {#<th>Coeff.</th>#}
                                {#<th>Facture</th>#}
                                {#</thead>#}
                                {#<tbody>#}
                                {#<tr>#}
                                {#<td>21/12/2019</td>#}
                                {#<td>42568</td>#}
                                {#<td>28/12/2020</td>#}
                                {#<td>Espèce</td>#}
                                {#<td></td>#}
                                {#<td></td>#}
                                {#<td>582.82</td>#}
                                {#<td>699,38</td>#}
                                {#<td>20%</td>#}
                                {#<td>1,0000</td>#}
                                {#<td></td>#}
                                {#</tr>#}
                                {#</tbody>#}
                                {#</table>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="tab-pane fade show" id="tab-4-{{ equipement.id }}" role="tabpanel">#}
                                {#<div class="my-4">#}
                                {#<table class="table table-striped w-100">#}
                                {#<thead style="vertical-align: middle;">#}
                                {#<th>Date envoi</th>#}
                                {#<th>Type comm.</th>#}
                                {#<th>Canal</th>#}
                                {#<th>Date Intervention</th>#}
                                {#<th>N° courrier</th>#}
                                {#<th>Commentaire</th>#}
                                {#<th>Voir</th>#}
                                {#</thead>#}
                                {#<tbody>#}
                                {#<tr>#}
                                {#<td>15/01/2021</td>#}
                                {#<td>Avis de passage</td>#}
                                {#<td>SMS</td>#}
                                {#<td>31/01/2021</td>#}
                                {#<td>-</td>#}
                                {#<td></td>#}
                                {#<td></td>#}
                                {#</tr>#}
                                {#<tr>#}
                                {#<td>15/01/2020</td>#}
                                {#<td>Information</td>#}
                                {#<td>Courrier</td>#}
                                {#<td>-</td>#}
                                {#<td>9903</td>#}
                                {#<td>Mailing Condensation</td>#}
                                {#<td></td>#}
                                {#</tr>#}
                                {#<tr>#}
                                {#<td>10/01/2020</td>#}
                                {#<td>Avis d'échéance</td>#}
                                {#<td>Courrier</td>#}
                                {#<td>-</td>#}
                                {#<td>8952</td>#}
                                {#<td></td>#}
                                {#<td></td>#}
                                {#</tr>#}
                                {#<tr>#}
                                {#<td>31/01/20191</td>#}
                                {#<td>Fiche d'intervention</td>#}
                                {#<td>E-mail</td>#}
                                {#<td>31/01/2019</td>#}
                                {#<td>-</td>#}
                                {#<td></td>#}
                                {#<td></td>#}
                                {#</tr>#}
                                {#</tbody>#}
                                {#</table>#}
                                {#</div>#}
                                {#</div>#}
                                {#<div class="tab-pane fade show" id="tab-5-{{ equipement.id }}" role="tabpanel">#}
                                {#<div class="my-4"> </div>#}
                                {#</div>#}
                            </div>
                        </div>
                        <div style="width:185px;margin-left:0.4rem;">
                            <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 bg-grey 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 bg-grey 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 bg-grey 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 bg-grey 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 bg-grey 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>#}
                                        <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>
                                    </div>
                                    <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" >
                                                    <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" >
                                                    <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>
                                </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/_popup_complement_adresse.html.twig') }}
        {{ include('clients/_popup_resilier_contrat.html.twig') }}
        {{  include('clients/_popup_details_installation.html.twig') }}
        {{  include('clients/_popup_history_contrats.html.twig') }}
        {{  include('clients/_popup_history_equipement_local.html.twig') }}
        {{  include('clients/_popup_history_equipement_utilisateur.html.twig') }}
        {{  include('clients/_popup_groupe_contrat.html.twig') }}
        {{ include('clients/_popup_gestion_preferences_planification.html.twig') }}
        {% if equipement.getPrivilege == true %}
            {{ include('clients/_popup_privileges.html.twig') }}
        {% endif %}
        {{ include('clients/_popup_simulateur_contrat.html.twig') }}
        {{ include('clients/_popup_equipement_inactif.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/_popup_porte_ouvertes.html.twig') }}
    {% endif %}
    {{ include('clients/_popup_add_equipement.html.twig') }}
    {{ include('clients/_popup_changement_souscripteur.html.twig') }}
    <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 %}