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

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

{% block title %} Intervention : {{ intervention.id }}{% if intervention.equipement and intervention.equipement.clientSouscripteur %} - {{ intervention.equipement.clientSouscripteur.nom }}{% endif %} {% endblock %}

{% set equipement = intervention.equipement %}
{% set client = equipement ? equipement.clientSouscripteur : null %}

{% block main %}
    {% if client %}
    <div class="d-flex  bg-white w-100" style="z-index: 1000; border-top:5px solid white;">
        <div class="d-flex bg-primary position-relative pt-2 ps-2 ms-1 pe-2 justify-content-between" style="flex-grow:1;">
            <div>
                <div class="d-flex align-items-center mb-2" style="width: 205px;">
                    <label class="white me-2 col-form-label control-label title-700" for="agent_site" style="font-family: Lato; font-weight: 400; font-style: normal; font-size: 14px; line-height: 100%; letter-spacing: 0%; vertical-align: middle;">Intervention</label>
                    <span class="color-vert-link fw-600 title-700" style="font-size:14px;margin-left: auto; font-family: Lato; font-weight: 400; font-style: normal; line-height: 100%; letter-spacing: 0%; vertical-align: middle;">
                        {{ intervention.getNumficheOracle ? intervention.getNumficheOracle : intervention.id }}
                    </span>
                </div>
                <div class="d-flex align-items-center" style="width: 205px;">
                    <label class="white me-2 col-form-label control-label" for="agent_site" style="font-family: Lato; font-weight: 400; font-style: normal; font-size: 14px; line-height: 100%; letter-spacing: 0%; vertical-align: middle;">N°client</label>
                    <span class="color-vert-link fw-600" style="font-size:14px;margin-left: auto; font-family: Lato; font-weight: 400; font-style: normal; line-height: 100%; letter-spacing: 0%; vertical-align: middle;">
                        {{ client.getFormattedNumeroClient }}
                    </span>
                </div>
            </div>
            <div >
                <div class="d-flex flex-column justify-content-end pb-2 ">
                    <div class="input-group form-group">
                        <label class="white me-2 col-form-label control-label" style="width: 55px;">Type</label>
                        <input type="text" disabled class="form-control bg-grey" style="width: 118px !important;flex: 0 1 auto;" value="{{ client.typeClient ? client.typeClient.libelle : '' }}">
                    </div>
                    <div class="input-group form-group pb-2 d-flex">
                        <label class="white me-2 control-label align-self-center" style="width:55px">Catégorie</label>
                        <input type="text" disabled class="form-control bg-grey" style="width: 167px !important;flex:inherit" value="{{ client.categoriePro ? client.categoriePro.libelle : '' }}">
                    </div>
                    <div class="input-group form-group d-flex" style="line-height: 14px;">
                        <label class="white control-label" for="client_entreprise" style="width:64px">Nom<br>entreprise</label>
                        <input type="text" id="client_entreprise" disabled name="client_entreprise" class="form-control bg-grey" value="{{ client.nomEntreprise }}">
                    </div>
                </div>
            </div>
            <div class="d-flex flex-column" >
                <div class="input-group form-group pb-2 d-flex">
                    <label class="white me-3 control-label align-self-center">Civilité</label>
                    <input type="text" disabled class="form-control bg-grey" style="width: 90px !important;flex: 0 1 auto;" value="{{ client.etatCivil ? client.etatCivil.libelleCourt : '' }}">
                </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" disabled name="souscripteur_nom" style="max-width:166px;" class="form-control bg-grey" value="{{ client.nom }}">
                </div>
                <div class="input-group form-group d-flex">
                    <label class="white me-2 control-label align-self-center" for="agent_prenom" style="width:48px;">Prénom</label>
                    <input type="text" id="agent_prenom" disabled name="souscripteur_prenom" style="max-width:166px;" class="form-control bg-grey" value="{{ client.prenom }}">
                </div>
            </div>
            <div >
                <div class="input-group form-group pb-2">
                    <div class="d-flex">
                        <i class="fa fa-lg fa-2x fa-home align-self-center white" style="margin-left: -0.2rem; margin-right: 0.8rem;"></i>
                        <div class="input-icons" style="width:466px">
                            <input type="text" id="client_adresse_auto" disabled name="client_adresse_auto" class="form-control bg-grey" value="{{ client.adresse }}">
                        </div>
                    </div>
                </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" style="margin-bottom: 0rem;margin-left:7px;gap: 0.6rem;">
                        {% for i in 1..3 %}
                            <li>
                                {% set clientTel = client.clientTels.get(i-1) %}
                                {% if clientTel %}
                                    <input type="text" disabled class="form-control bg-grey" value="{{ clientTel.numTel }}" style="width:150px">
                                    {% if clientTel.commentaireTel %}
                                        <i class="fa collection-info fa-info-circle"></i>
                                        <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>
                <div class="d-flex">
                    <div><i class="fa fa-envelope align-self-center white" style="font-size: 1.7em;"></i></div>
                    <div>
                        <ul class="collection" style="margin-bottom: 0;width:481px;padding-left:11px;">
                            <li style="position:relative;width:310px;">
                                {% set clientEmail = client.ClientEmails.get(0) %}
                                {% if clientEmail %}
                                    <input type="email" disabled class="form-control bg-grey" value="{{ clientEmail.email }}" style="width:310px">
                                    {% if clientEmail.commentaireEmail %}
                                        <i class="fa collection-info fa-info-circle"></i>
                                        <div class="info-tooltip">{{ clientEmail.commentaireEmail }}</div>
                                    {% endif %}
                                {% else %}
                                    <input type="email" disabled class="form-control bg-grey" value="" style="width:310px">
                                {% endif %}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {% if equipement and equipement.getClientAncienSouscripteur %}
                <div class="mt-1 position-absolute" style="font-size:12px;bottom: 0;font-style:italic;left:200px;">Ancien souscripteur: {{ equipement.getClientAncienSouscripteur }} ({{ equipement.getDateAncienSouscripteur|date('d/m/Y') }})</div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {# Fiche intervention complète en lecture seule sous le bandeau souscripteur #}
    <div class="mt-2">
        {{ include('intervention/_fiche_intervention_readonly.html.twig') }}
    </div>

{% endblock %}

{% block popup %}
    {% if client %}
        {% if client.typeClient and client.typeClient.id == 2 %}
            {% set pro = client %}
            {{ include('clients/_popup_impot.html.twig') }}
        {% endif %}
        {% if client.getClientTutelle %}
            {% set tuteur = client.getClientTutelle %}
            {{ include('clients/_popup_tuteur.html.twig') }}
        {% endif %}
    {% endif %}
    {% set utilisateur = equipement ? equipement.getClientUtilisateur : null %}
    {% if utilisateur and utilisateur != equipement.clientSouscripteur %}
        {% if utilisateur.typeClient and utilisateur.typeClient.id == 2 %}
            {% set pro = utilisateur %}
            {{ include('clients/_popup_impot.html.twig') }}
        {% endif %}
        {% if utilisateur.getClientTutelle %}
            {% set tuteur = utilisateur.getClientTutelle %}
            {{ include('clients/_popup_tuteur.html.twig') }}
        {% endif %}
    {% endif %}
    {% set payeur_tiers = intervention ? intervention.getClientPayeurTiers : null %}
    {% if payeur_tiers %}
        {% if payeur_tiers.typeClient and payeur_tiers.typeClient.id == 2 %}
            {% set pro = payeur_tiers %}
            {{ include('clients/_popup_impot.html.twig') }}
        {% endif %}
        {% if payeur_tiers.getClientTutelle %}
            {% set tuteur = payeur_tiers.getClientTutelle %}
            {{ include('clients/_popup_tuteur.html.twig') }}
        {% endif %}
    {% endif %}
    {{ include('intervention/_popup_history_planification.html.twig') }}
{% endblock %}