{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Détails de l'abonnement #{{ abonnement.reference }}{% endblock %}



{% block body %}
<div class="container py-4">
    {# --- BARRE D'ACTIONS --- #}
    <div class="d-flex justify-content-between align-items-center mb-4 d-print-none">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 bg-transparent p-0">
                <li class="breadcrumb-item small"><a href="{{ path('app_entreprise_abonnement_index') }}" class="text-decoration-none text-muted">Abonnements</a></li>
                <li class="breadcrumb-item small active">Détails {{ abonnement.reference }}</li>
            </ol>
        </nav>
        <div class="d-flex gap-2">
            <button onclick="window.print();" class="btn btn-dark shadow-sm">
                <i class="fas fa-print me-2"></i>Imprimer
            </button>
            <a href="{{ path('app_entreprise_abonnement_index') }}" 
               class="btn btn-outline-secondary shadow-sm">
                <i class="fas fa-arrow-left me-1"></i> Retour
            </a>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-10 col-xl-9">
            <div class="card receipt-card">
                {# --- HEADER DU REÇU --- #}
                <div class="card-header receipt-header p-4 p-md-5">
                    <div class="row align-items-center">
                        <div class="col-sm-7 text-center text-sm-start">
                            <h6 class="fw-bold text-uppercase text-primary mb-2" style="letter-spacing: 1px;">Reçu Officiel</h6>
                            <h2 class="fw-black mb-0 display-6">LOYER<span class="text-primary">EXPRESS</span></h2>
                            <p class="text-muted small mb-0 mt-2">Gestion Immobilière Digitalisée</p>
                        </div>
                        <div class="col-sm-5 text-center text-sm-end mt-4 mt-sm-0">
                            {% set today = "now"|date('Y-m-d') %}
                            
                            {% if abonnement.statut == 'ANNULE' %}
                                <div class="status-stamp stamp-danger">Annulé</div>
                            {% elseif abonnement.statut == 'EN_ATTENTE_ANNULATION' %}
                                <div class="status-stamp stamp-warning">Suspension</div>
                            {% elseif abonnement.dateFin|date('Y-m-d') < today %}
                                <div class="status-stamp stamp-expired">Expiré</div>
                            {% elseif abonnement.dateDebut|date('Y-m-d') > today %}
                                <div class="status-stamp stamp-waiting">À venir</div>
                            {% else %}
                                <div class="status-stamp stamp-active">Payé / Actif</div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="card-body p-4 p-md-5">
                    {# --- INFO ENTREPRISE & FACTURE --- #}
                    <div class="row mb-5">
                        <div class="col-md-6 mb-4 mb-md-0">
                            <div class="p-3 border rounded-4 h-100 bg-light-subtle">
                                <h6 class="text-muted text-uppercase small fw-bold mb-3 border-bottom pb-2">Client (Facturé à)</h6>
                                <h5 class="fw-bold text-dark mb-1">{{ abonnement.entreprise.raisonSociale }}</h5>
                                <div class="text-muted small">
                                    <div class="mb-1"><i class="fas fa-id-badge me-2"></i>Compte : #ENT-{{ "%04d"|format(abonnement.entreprise.id) }}</div>
                                    <div class="mb-1"><i class="fas fa-user me-2"></i>Contact : {{ app.user.nomComplet }}</div>
                                    <div><i class="fas fa-envelope me-2"></i>{{ abonnement.entreprise.email|default(app.user.email) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 border rounded-4 h-100 bg-light-subtle">
                                <h6 class="text-muted text-uppercase small fw-bold mb-3 border-bottom pb-2 text-md-end">Détails de transaction</h6>
                                <div class="text-md-end">
                                    <h5 class="fw-bold mb-1">{{ abonnement.reference }}</h5>
                                    <div class="text-muted small">
                                        <div class="mb-1">Émis le : <strong>{{ abonnement.dateDebut ? abonnement.dateDebut|date('d/m/Y H:i') : abonnement.dateDebut|date('d/m/Y') }}</strong></div>
                                        <div class="mb-1">Méthode : <span class="badge bg-white text-dark border">{{ abonnement.modePaiement|default('Non spécifié') }}</span></div>
                                        <div>Statut : <span class="text-success fw-bold">Transaction confirmée</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# --- TABLEAU DES DÉTAILS --- #}
                    <div class="table-responsive mb-4">
                        <table class="table table-hover border">
                            <thead class="table-light">
                                <tr>
                                    <th class="py-3 ps-4 border-0">Désignation</th>
                                    <th class="text-center py-3 border-0">Période de Validité</th>
                                    <th class="text-end py-3 pe-4 border-0">Prix Unitaire</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="align-middle">
                                    <td class="py-4 ps-4">
                                        <div class="d-flex align-items-center">
                                            <div class="icon-shape bg-primary text-white rounded-3 me-3 d-none d-md-flex" style="width: 50px; height: 50px;">
                                                <i class="fas fa-gem fa-lg"></i>
                                            </div>
                                            <div>
                                                <h6 class="fw-bold mb-1">Pack {{ abonnement.abonnement.titre }}</h6>
                                                <p class="text-muted small mb-0">Engagement annuel (12 mois de service inclus)</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <div class="fw-bold text-dark">{{ abonnement.dateDebut|date('d/m/Y') }}</div>
                                        <div class="small text-muted text-uppercase" style="font-size: 0.7rem;">au</div>
                                        <div class="fw-bold text-dark">{{ abonnement.dateFin|date('d/m/Y') }}</div>
                                    </td>
                                    <td class="text-end pe-4 fw-bold">
                                        {{ (abonnement.montantPaye)|number_format(0, '.', ' ') }} <small>FCFA</small>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot class="border-top-2">
                                <tr>
                                    <td colspan="2" class="text-end fw-bold py-3 text-uppercase small">Total Net à Payer (TTC)</td>
                                    <td class="text-end pe-4 py-3 fw-black h4 mb-0 text-primary">
                                        {{ abonnement.montantPaye|number_format(0, '.', ' ') }} <span class="h6">FCFA</span>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    {# --- FOOTER DU REÇU (Signatures et Notes) --- #}
                    <div class="row mt-5 pt-3">
                        <div class="col-sm-7">
                            <div class="bg-light p-3 rounded-3 border-start border-primary border-4">
                                <h6 class="fw-bold small text-uppercase mb-2"><i class="fas fa-info-circle me-2"></i>Informations Légales</h6>
                                <ul class="text-muted small mb-0 ps-3">
                                    <li>Ce reçu est généré électroniquement et est valable sans signature manuscrite.</li>
                                    <li>L'accès aux fonctionnalités sera interrompu le <strong>{{ abonnement.dateFin|date('d/m/Y') }}</strong> à minuit.</li>
                                    <li>Pour toute réclamation, veuillez citer la référence <strong>{{ abonnement.reference }}</strong>.</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-sm-5 text-center mt-4 mt-sm-0 d-flex flex-column align-items-center justify-content-center">
                            <div class="signature-box border rounded-3 p-2 bg-light d-flex align-items-center justify-content-center" style="width: 180px; height: 90px; border-style: dashed !important;">
                                {% if abonnement.statut in ['ACTIF', 'PAYE'] %}
                                    <div class="text-success fw-bold p-2 border border-success border-2 rounded" style="transform: rotate(-5deg); font-size: 0.8rem; letter-spacing: 2px;">
                                        AUTHENTIFIÉ
                                    </div>
                                {% else %}
                                    <span class="text-muted small">Cachet Numérique</span>
                                {% endif %}
                            </div>
                            <span class="small text-muted mt-2 fw-bold text-uppercase" style="font-size: 0.65rem;">Direction Loyer Express</span>
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-light text-center py-3 border-top-0">
                    <small class="text-muted">Merci de votre confiance. <strong class="text-dark">Loyer Express</strong>, votre partenaire immobilier.</small>
                </div>
            </div>
             
            <div class="text-center mt-4 d-print-none">
                <p class="text-muted small">
                    Un problème avec cette transaction ? 
                    <a href="mailto:contact@loyerexpress.com" class="fw-bold text-primary text-decoration-none">
                        <i class="fas fa-headset me-1"></i>Contacter le support client
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}