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

{% block title %}Détails de {{ appartement.titre }} | {{ immeuble.titre }}{% endblock %}

{% block body %}
{# --- LOGIQUE DE CONTRÔLE --- #}
{% set plan = (abonnementActuel and abonnementActuel.abonnement) ? abonnementActuel.abonnement : null %}
{% set isExpired = (abonnementActuel is null or not abonnementActuel.isActive()) %}
{% set canModify = (not isExpired) %}
{% set activeLocation = appartement.locations|filter(l => l.dateFin is null)|first %}

<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>
            <h3 class="page-header page-header-top mb-1">
                <i class="fas fa-door-open text-success me-2"></i>{{ appartement.titre }}
            </h3>
            <p class="text-muted small mb-0 d-none d-md-block">
                Lot : <strong>{{ immeuble.titre }}</strong>
            </p>
        </div>
        
        <div class="d-flex gap-2">
            <a href="{{ path('app_entreprise_appartement_index') }}" class="btn btn-sm btn-outline-secondary btn-return shadow-sm px-3">
                <i class="fas fa-arrow-left me-1"></i> Retour a la liste
            </a>

            {% if is_granted('ROLE_ENTREPRISE_ROOT') %}
                <div {% if not canModify %} data-bs-toggle="tooltip" title="Abonnement expiré" {% endif %}>
                    <a href="{{ canModify ? path('app_entreprise_appartement_edit', {'id_immeuble': immeuble.id, 'id': appartement.id}) : '#' }}" 
                       class="btn btn-sm btn-warning 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 : FICHE TECHNIQUE & TARIFS --- #}
        <div class="col-12 col-lg-7">
            
            {# 1. Fiche Technique #}
            <div class="card card-detail shadow-sm mb-4">
                <div class="card-body p-4">
                    <h6 class=" mb-4 border-bottom pb-2 text-uppercase small">Fiche Technique</h6>
                    
                    <div class="row g-3">
                        <div class="col-6 col-md-4">
                            <div class="info-label text-uppercase">Configuration</div>
                            <div class="info-value">
                                <span class="badge bg-light text-dark border">{{ appartement.nbrePieces|default('0') }} Pièces</span>
                                <span class="badge bg-light text-dark border">{{ appartement.nbreSalleBain|default('0') }} SDB</span>
                            </div>
                        </div>
                        <div class="col-6 col-md-4">
                            <div class="info-label text-uppercase">Ordre d'affichage</div>
                            <div class="info-value text-muted">N° {{ appartement.ordre|default('-') }}</div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="info-label text-uppercase">Lot Rattaché</div>
                            <div class="info-value">
                                <a href="{{ path('app_entreprise_immeuble_show', {'id': immeuble.id}) }}" class="text-decoration-none text-success">
                                    <i class="fas fa-layer-group me-1"></i> {{ immeuble.titre }}
                                </a>
                            </div>
                        </div>
                    </div>

                    {% if appartement.description %}
                        <div class="mt-4 p-3 bg-light rounded shadow-sm" style="font-size: 0.85rem; font-style: italic;">
                            <i class="fas fa-quote-left text-muted me-2"></i>{{ appartement.description|nl2br }}
                        </div>
                    {% endif %}
                </div>
            </div>

            {# 2. Grille Tarifaire #}
            <div class="card card-detail shadow-sm">
                <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h6 class=" mb-0">Historique des Loyers</h6>
                    {% if is_granted('ROLE_ENTREPRISE_ROOT') %}
                        <a href="{{ canModify ? path('app_entreprise_appartement_loyer_new', {'id_immeuble': immeuble.id, 'id': appartement.id}) : '#' }}" 
                           class="btn btn-xs btn-success px-3 {{ not canModify ? 'disabled' : '' }}">
                            <i class="fas fa-plus me-1"></i> Nouveau tarif
                        </a>
                    {% endif %}
                </div>
                <div class="card-body p-0">
                    {% if historiquesLoyer is empty %}
                        <div class="text-center py-5">
                            <i class="fas fa-money-bill-wave fa-2x text-light mb-2"></i>
                            <p class="text-muted small">Aucun tarif défini.</p>
                        </div>
                    {% else %}
                        <div class="table-responsive">
                            <table class="table table-custom table-hover align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th class="ps-4">Période</th>
                                        <th class="text-center">Loyer HC</th>
                                        <th class="text-center">Charges</th>
                                        <th class="text-end pe-4">Total TTC</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for loyer in historiquesLoyer %}
                                        <tr class="{{ loyer.dateFin is null ? 'table-success-light' : '' }}">
                                            <td class="ps-4">
                                                {% if loyer.dateFin is null %}
                                                    <span class="badge bg-success me-2">Actuel</span>
                                                    <span class="small ">Depuis le {{ loyer.dateDebut|date('d/m/Y') }}</span>
                                                {% else %}
                                                    <span class="text-muted small">Du {{ loyer.dateDebut|date('d/m/Y') }} au {{ loyer.dateFin|date('d/m/Y') }}</span>
                                                {% endif %}
                                            </td>
                                            <td class="text-center ">{{ loyer.montantLoyer|format_money }}</td>
                                            <td class="text-center text-muted small">{{ loyer.totalCharges|format_money }}</td>
                                            <td class="text-end pe-4  text-success">{{ loyer.totalLoyer|format_money }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {# --- COLONNE DROITE : STATUT & CONTRATS --- #}
        <div class="col-12 col-lg-5">
            
            {# 3. Statut d'Occupation #}
            <div class="card card-detail shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h6 class=" mb-0">Statut d'Occupation</h6>
                    {% if activeLocation is empty %}
                        <a href="{{ canModify ? path('app_entreprise_location_new', {'id_appartement': appartement.id}) : '#' }}" 
                           class="btn btn-xs btn-info px-3 {{ not canModify ? 'disabled' : '' }}">
                            <i class="fas fa-user-plus me-1"></i> Louer
                        </a>
                    {% endif %}
                </div>
                <div class="card-body p-4 text-center">
                    {% if activeLocation is not empty %}
                        <div class="avatar bg-soft-success text-success mb-3 mx-auto rounded-circle d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                            <i class="fas fa-user-check fa-lg"></i>
                        </div>
                        <h6 class=" mb-1">Occupé</h6>
                        <p class="small text-muted mb-0">Locataire : <br>
                            <a href="{{ path('app_entreprise_locataire_show', {'id': activeLocation.locataire.id}) }}" class=" text-success text-decoration-none">
                                {{ activeLocation.locataire.nomComplet }}
                            </a>
                        </p>
                    {% else %}
                        <div class="avatar bg-soft-secondary text-muted mb-3 mx-auto rounded-circle d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                            <i class="fas fa-door-closed fa-lg"></i>
                        </div>
                        <h6 class=" mb-1 text-muted">Disponible / Vacant</h6>
                        <p class="small text-muted mb-0">Prêt pour une nouvelle mise en location.</p>
                    {% endif %}
                </div>

                {# Historique des contrats #}
                <div class="card-footer bg-white p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0 small">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-3 border-0 py-2">Historique Locataires</th>
                                    <th class="text-end pe-3 border-0 py-2">Dates</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for location in appartement.locations|sort((a, b) => b.dateDebut <=> a.dateDebut) %}
                                    <tr>
                                        <td class="ps-3 py-2">
                                            <a href="{{ path('app_entreprise_location_show', {'id': location.id}) }}" class="text-decoration-none text-dark fw-medium">
                                                {{ location.locataire.nomComplet }}
                                            </a>
                                        </td>
                                        <td class="text-end pe-3 py-2 text-muted" style="font-size: 11px;">
                                            {{ location.dateDebut|date('d/m/y') }} - {{ location.dateFin ? location.dateFin|date('d/m/y') : 'Présent' }}
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="2" class="text-center text-muted py-3 small">Aucun contrat passé.</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {# 4. Zone de Danger #}
            {% if is_granted('ROLE_ENTREPRISE_ROOT') %}
                <div class="card border-0 shadow-sm" style="background-color: #fff5f5; border-radius: 10px;">
                    <div class="card-body p-4">
                        <h6 class="text-danger  mb-2 small"><i class="fas fa-exclamation-triangle me-2"></i>ZONE DE DANGER</h6>
                        <p class="text-muted mb-3" style="font-size: 11px;">La suppression de cet appartement entraînera la perte définitive de tous les loyers et contrats associés.</p>
                        <div {% if not canModify %} data-bs-toggle="tooltip" title="Abonnement expiré" {% endif %}>
                            <div class="{{ not canModify ? 'opacity-50 pointer-none' : '' }}">
                                {{ include('entreprise/appartement/_delete_form.html.twig', {'appartement': appartement, 'id_immeuble': immeuble.id}) }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

        </div>
    </div>
</div>
{% endblock %}