{# templates/entreprise/intervention/show.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Intervention #{{ intervention.id }} | {{ intervention.appartement.titre }}{% endblock %}

{% block body %}

{# --- LOGIQUE DE CONTRÔLE --- #}
{% set isExpired = (abonnementActuel is null or not abonnementActuel.isActive()) %}
{% set canModify = (not isExpired) %}
{# Utilisation de la devise de l'entreprise si disponible, sinon F.CFA #}
{% set currency = app.user.entreprise.devise.symbole|default('F.CFA') %}

<div class="container-fluid py-4 px-md-4 conterner-express">

    {# --- EN-TÊTE HARMONISÉ --- #}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div class="d-flex align-items-center">
            <a href="{{ path('app_entreprise_intervention_index') }}" class="btn btn-sm btn-outline-secondary btn-return shadow-sm me-3">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h3 class="page-header page-header-top mb-1">Détails de l'Intervention</h3>
                <p class="text-muted small mb-0">Réf : #{{ intervention.id }} | <strong>Type :</strong> {{ intervention.typeName }}</p>
            </div>
        </div>
        
        <div class="d-flex gap-2">
            <a href="{{ path('app_entreprise_intervention_index') }}" class="btn btn-sm btn-secondary shadow-sm px-3">
                <i class="fas fa-list me-1"></i> Liste
            </a>
            {% if is_granted('ROLE_ENTREPRISE_COLLAB') %}
                <div {% if not canModify %} data-bs-toggle="tooltip" title="Abonnement expiré" {% endif %}>
                    <a href="{{ canModify ? path('app_entreprise_intervention_edit', {'id': intervention.id}) : '#' }}" 
                       class="btn btn-sm btn-info text-white shadow-sm px-3 {{ not canModify ? 'disabled opacity-50' : '' }}">
                        <i class="fas {{ not canModify ? 'fa-lock' : 'fa-edit' }} me-1"></i> Modifier
                    </a>
                </div>
            {% endif %}
        </div>
    </div>

    {% include 'flash_messages.html.twig' %}

    <div class="row g-4">
        {# --- COLONNE GAUCHE : INFOS TECHNIQUES --- #}
        <div class="col-12 col-lg-8">
            <div class="card card-detail shadow-sm mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-4 border-bottom pb-2 text-muted italic">Spécifications techniques</h6>
                    
                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <div class="info-label mb-1">Nature des travaux</div>
                            <div class="info-value">
                                <span class="status-pill bg-soft-info"><i class="fas fa-wrench me-2"></i>{{ intervention.typeName }}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-label mb-1">Date d'intervention</div>
                            <div class="info-value text-dark">
                                <i class="far fa-calendar-check me-2 text-muted"></i>
                                {{ intervention.dates ? intervention.dates|date('d/m/Y') : 'Non planifiée' }}
                            </div>
                        </div>
                    </div>

                    <div class="row g-4 mb-2">
                        <div class="col-md-6">
                            <div class="info-label mb-1">Immeuble / Lot</div>
                            <div class="info-value text-dark">
                                <i class="fas fa-building me-2 text-muted"></i>{{ intervention.appartement.immeuble.titre }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-label mb-1">Appartement concerné</div>
                            <a href="{{ path('app_entreprise_appartement_show', {'id_immeuble': intervention.appartement.immeuble.id, 'id': intervention.appartement.id}) }}" class="text-decoration-none">
                                <div class="info-value text-primary"><i class="fas fa-door-open me-2"></i>{{ intervention.appartement.titre }}</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {# DESCRIPTION #}
            <div class="card card-detail shadow-sm">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-3 text-muted italic">Description des travaux</h6>
                    <div class="bg-light p-3 rounded border text-muted" style="min-height: 120px; white-space: pre-line;">
                        {% if intervention.description %}
                            {{ intervention.description }}
                        {% else %}
                            <span class="fst-italic small">Aucune description détaillée n'a été saisie pour cette intervention.</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {# --- COLONNE DROITE : FINANCES & ACTIONS --- #}
        <div class="col-12 col-lg-4">
            {# COÛT TOTAL #}
            <div class="card card-detail shadow-sm mb-4 border-start border-success border-4 bg-white">
                <div class="card-body p-4">
                    <div class="info-label mb-2"><i class="fas fa-money-bill-wave me-2 text-success"></i>Coût Total HT</div>
                    <div class="d-flex align-items-baseline">
                        <span class="display-6 fw-bold text-dark">{{ intervention.montant|number_format(0, '.', ' ') }}</span>
                        <span class="ms-2 fw-bold text-muted">{{ currency }}</span>
                    </div>
                    <p class="small text-muted mt-2 mb-0 italic">Montant imputé aux charges de maintenance.</p>
                </div>
            </div>

            {# ZONE DE DANGER #}
            {% if is_granted('ROLE_ENTREPRISE_ROOT') %}
                <div class="card card-detail shadow-sm bg-soft-danger border-0">
                    <div class="card-body p-4">
                        <h6 class="fw-bold text-danger mb-3 text-uppercase small">
                            <i class="fas fa-exclamation-triangle me-2"></i>Administration
                        </h6>
                        <p class="small text-muted mb-4">
                            La suppression est irréversible et retirera ce montant de vos statistiques de dépenses.
                        </p>
                        <div class="{{ not canModify ? 'opacity-50 pointer-none' : '' }}">
                            {{ include('entreprise/intervention/_delete_form.html.twig', {'intervention': intervention}) }}
                        </div>
                    </div>
                </div>
            {% endif %}

            {# NOTE D'INFORMATION #}
            <div class="card shadow-sm border-0 mt-4 bg-soft-info">
                <div class="card-body p-3">
                    <div class="d-flex align-items-start small text-dark">
                        <i class="fas fa-info-circle me-2 mt-1 text-info"></i>
                        <span>Cette fiche permet de suivre l'historique des réparations de l'appartement <strong>{{ intervention.appartement.titre }}</strong>.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .bg-soft-info { background-color: rgba(13, 202, 240, 0.1); }
        .bg-soft-danger { background-color: rgba(220, 53, 69, 0.05); }
        .status-pill { padding: 6px 12px; border-radius: 50px; font-weight: 600; font-size: 0.85rem; display: inline-block; }
        .info-label { color: #94a3b8; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; }
        .info-value { font-weight: 600; }
        .italic { font-style: italic; }
        .btn-return { border-radius: 8px; transition: all 0.2s; }
        .btn-return:hover { transform: translateX(-3px); background-color: #f8f9fa; }
    </style>
{% endblock %}