{# Récupération de l'utilisateur au moment de l'intervention #}
{% set date_intervention = intervention.planning ? intervention.planning.date : (intervention.planning ? intervention.planning.dateCreation : null) %}
{% set utilisateur_intervention = null %}
{% if date_intervention and equipement and equipement.getHistoriqueEquipementUtilisateurs|length > 0 %}
    {# On cherche dans l'historique l'utilisateur qui était actif au moment de l'intervention #}
    {# On trie par date décroissante pour trouver le dernier changement avant ou à la date de l'intervention #}
    {% set historique_utilisateurs = equipement.getHistoriqueEquipementUtilisateurs|sort((a, b) => a.dateHeure > b.dateHeure ? -1 : 1) %}
    {# On prend le dernier changement avant ou à la date de l'intervention #}
    {% for hist in historique_utilisateurs %}
        {% if hist.dateHeure <= date_intervention and not utilisateur_intervention %}
            {% set utilisateur_intervention = hist.utilisateur %}
        {% endif %}
    {% endfor %}
{% endif %}
{# Si aucun historique trouvé ou si l'intervention est antérieure à tous les historiques, on prend l'utilisateur actuel #}
{% if not utilisateur_intervention and equipement %}
    {% set utilisateur_intervention = equipement.getClientUtilisateur %}
{% endif %}
{% set utilisateur = utilisateur_intervention %}
<div class="px-2 py-2 bg-white color-primary w-100 h-100 block-infos-container position-relative" style="height: 227px !important">
    {% if not utilisateur or not equipement or utilisateur == equipement.clientSouscripteur or equipement.logementVide %}
        <div class="d-flex w-100 h-100 justify-content-center align-items-center">
            <div class="text-center">Aucun utilisateur sur cet équipement</div>
        </div>
    {% else %}
        <div class="d-flex flex-column w-100" style="gap:0.5rem;">
            {# Ligne 1 : N°Client, Type, Civilité #}
            <div class="d-flex w-100">
                <div class="d-flex align-items-center" style="margin-right: 1.2rem;">
                    <label class="me-1">N°Client: </label>
                    <span class="color-vert-link fw-600" style="font-size:15px">{{ utilisateur.getFormattedNumeroClient }}</span>
                </div>
                <div class="d-flex align-items-center">
                    <label style="width:36px;">Type</label>
                    <input type="text" style="width:120px;" disabled class="form-control bg-grey" value="{{ utilisateur.typeClient.libelle }}">
                </div>
                <div class="d-flex align-items-center ms-auto">
                    <label class="me-1 px-1" style="width:58px;">Civilité</label>
                    <input type="text" disabled class="form-control bg-grey" style="width:120px;" value="{{ utilisateur.etatCivil ? utilisateur.etatCivil.libelleCourt : '' }}">
                </div>
            </div>
            
            {# Ligne 2 : Nom, Catégorie #}
            <div class="d-flex w-100">
                <div class="d-flex align-items-center">
                    <label class="me-1" style="width:51px;">Nom</label>
                    <input type="text" disabled class="form-control bg-grey" value="{{ utilisateur.nom }}" style="width:170px;">
                </div>
                <div class="d-flex align-items-center ms-auto">
                    <label style="margin-right:2.8rem">Catégorie</label>
                    <input type="text" disabled class="form-control bg-grey" value="{{ utilisateur.CategoriePro ? utilisateur.CategoriePro.libelle : '' }}" style="width:173px;">
                </div>
            </div>
            
            {# Ligne 3 : Prénom, Nom Entreprise #}
            <div class="d-flex w-100">
                <div class="d-flex w-100">
                    <div class="d-flex align-items-center">
                        <label class="me-1" style="width: 51px;">Prénom</label>
                        <input type="text" disabled class="form-control bg-grey" value="{{ utilisateur.prenom }}" style="width:170px;">
                    </div>
                    <div class="d-flex align-items-center ms-auto">
                        <label style="margin-right: 0.68rem; width:92px">Nom Entreprise</label>
                        <input type="text" disabled class="form-control bg-grey" value="{{ utilisateur.nomEntreprise }}" style="width:173px;">
                    </div>
                </div>
            </div>
            
            {# Ligne 4 : Adresse #}
            <div class="d-flex w-100 align-items-center">
                <i class="fa fa-lg fa-2x fa-home align-self-center" style="margin-left: -0.2rem; margin-right: 1.2rem; font-size:2.6em"></i>
                <input type="text" disabled class="form-control bg-grey" value="{{ utilisateur.adresse ? utilisateur.adresse : '' }}" style="flex:1;">
            </div>
            
            {# Ligne 5 : Téléphones #}
            <div class="d-flex w-100 align-items-center" 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 flex-wrap justify-content-between" style="margin-bottom: 0rem;margin-left:22px;gap:0.6rem;">
                    {% for i in 1..3 %}
                        <li style="position:relative;">
                            {% set clientTel = utilisateur.clientTels.get(i-1) %}
                            {% if clientTel %}
                                {% set fr = clientTel.fr is defined ? clientTel.fr : 1 %}
                                {% set popup_id = 'popup-client-commentaireTel-' ~ utilisateur.id ~ '-' ~ i %}
                                <input type="text" disabled class="form-control bg-grey input_tel" value="{{ clientTel.numTel }}" style="width:150px">
                                <div class="me-2 telephone-fr {{ fr ? '' : 'opacity-25' }}" style="width:16px;position: absolute;right: 18px;bottom: 5px;">
                                    {{ source('@public_path'~asset('build/images/fr.svg')) }}
                                </div>
                                {% if clientTel.commentaireTel %}
                                    <a>
                                        <i class="fa collection-info has-info fa-info-circle"></i>
                                    </a>
                                    <div class="info-tooltip">{{ clientTel.commentaireTel }}</div>
                                {% endif %}
                            {% else %}
                                <input type="text" disabled class="form-control bg-grey" value="" style="width:150px">
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
            
            {# Ligne 6 : Emails #}
            <div class="d-flex w-100">
                <div class="d-flex w-100" style="position:relative;">
                    <div><i class="fa fa-envelope align-self-center" style="font-size: 2.4em; width: 28px; margin-left: 1px;"></i></div>
                    <ul class="collection w-100" style="margin-bottom: 0rem;width:304px;margin-left:0;padding-left:1rem">
                        <li class="mb-0 position-relative" style="width:311px">
                            {% set clientEmail = utilisateur.ClientEmails.get(0) %}
                            {% if clientEmail %}
                                {% set popup_id = 'popup-client-commentaireEmail-' ~ utilisateur.id %}
                                <input type="email" disabled class="form-control bg-grey" value="{{ clientEmail.email }}" style="width:311px">
                                {% if clientEmail.commentaireEmail %}
                                    <a>
                                        <i class="fa collection-info has-info fa-info-circle"></i>
                                    </a>
                                    <div class="info-tooltip">{{ clientEmail.commentaireEmail }}</div>
                                {% endif %}
                            {% else %}
                                <input type="email" disabled class="form-control bg-grey" value="" style="width:311px">
                            {% endif %}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        {# Pictos en bas à droite #}
        <div class="position-absolute" style="bottom: 8px; right: 8px; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end;">
            {% if utilisateur.typeClient and utilisateur.typeClient.id == 2 %}
                <a data-popup-position-of="center" data-popup-position-at="top" data-poppup-container="body" data-popup-id="popup-impot-{{ utilisateur.id }}" data-dxpopup="" data-popup-offset="0 275" data-popup-title="Identification fiscale" data-popup-width="auto">
                    <div class="d-flex align align-self-end bg-white justify-content-center align-items-center border-grey-field" style="width: 28px;height: 28px;border-radius:4px">
                        <img class="bg-white" src="{{ asset('build/images/picto-impot.png') }}" style="vertical-align: baseline;border-radius: 4px; margin-top: 0.18rem;width:22px;height:19px;">
                    </div>
                </a>
            {% endif %}
            {% if utilisateur.getClientTutelle %}
                <a data-popup-position-of="center" data-popup-position-at="top" data-poppup-container="body" data-popup-id="popup-tuteur-{{ utilisateur.getClientTutelle.id }}" data-dxpopup="" data-popup-offset="0 275" data-popup-title="Tuteur" data-popup-width="auto" style="width:28px;height:28px;">
                    <div class="d-flex align align-self-end bg-white justify-content-center align-items-center" style="border-radius:4px">
                        <img class="bg-white" src="{{ asset('build/images/picto-tutelle.png') }}" width="28" height="28" style="vertical-align: baseline;border-radius: 4px;">
                    </div>
                </a>
            {% endif %}
        </div>
    {% endif %}
</div>