{% extends 'base.html.twig' %}

{% block title %}Quittance en ligne - LOYER-EXPRESS{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        :root {
            --express-green: #72a333;
            --express-green-dark: #5a8228;
            --express-orange: #ffc107;
            --dark-navy: #0f172a;
        }

        /* --- STYLE HERO (Identique à votre charte) --- */
        .hero-invoice {
            background: linear-gradient(135deg, var(--dark-navy) 0%, var(--express-green) 100%);
            padding: 100px 0 80px;
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
            text-align: center;
        }

        /* --- CONTAINER DE LA QUITTANCE --- */
        .invoice-main-container {
            background: white;
            border-radius: 30px;
            margin-top: -60px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            position: relative;
            z-index: 10;
            border: 1px solid rgba(0,0,0,0.05);
        }

        /* --- WRAPPER POUR L'INCLUSION DU MODELE D'IMPRESSION --- */
        .print-preview-wrapper {
            background: #f8fafc;
            padding: 20px;
            border-radius: 15px;
            border: 2px dashed #e2e8f0;
            overflow-x: auto; /* Pour le responsive mobile */
        }

        .status-badge {
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: bold;
            font-size: 0.9rem;
            display: inline-block;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .status-paid { background: #dcfce7; color: #166534; }
        .status-pending { background: #fef9c3; color: #854d0e; }

        @media print {
            .hero-invoice, .no-print, .actions-row { display: none !important; }
            .invoice-main-container { margin-top: 0; box-shadow: none; padding: 0; border: none; }
            .print-preview-wrapper { background: white; padding: 0; border: none; }
        }

        @media (max-width: 768px) {
            .invoice-main-container { padding: 20px; }
        }
    </style>
{% endblock %}

{% block body %}

    {# --- HERO SECTION --- #}
    <header class="hero-invoice">
        <div class="container animate__animated animate__fadeIn">
            {% if loyer.statut == constant('App\\Entity\\Entreprise\\LoyerMensuel::STATUT_PAYE') %}
                <span class="status-badge status-paid"><i class="fas fa-check-circle me-2"></i> Document Certifié / Payé</span>
            {% else %}
                <span class="status-badge status-pending"><i class="fas fa-clock me-2"></i> Paiement en attente</span>
            {% endif %}
            <div style="color:#fff;text-transform:italic;font-size : 14px">Le statut de paiement affiché reflète les mises à jour effectuées en temps réel par votre bailleur sur la plateforme.</div>
            
            <h1 class="display-5 fw-bold">Votre <span class="text-warning">Quittance</span> en ligne</h1>
            <p class="lead opacity-75">Référence : {{ loyer.reference }}</p>
        </div>
    </header>

    {# --- MAIN CONTENT --- #}
    <div class="container mb-5">
        <div class="invoice-main-container animate__animated animate__fadeInUp">
            
           
            {# ZONE DE LA QUITTANCE (Réutilise vos modèles entreprise) #}
            <div class="print-preview-wrapper">
                {% set item = {
                    'loyer': loyer,
                    'typeBail': loyer.location.typeBail,
                    'montant': loyer.montantPaye,
                    'dateQuittance': "now"|date("d/m/Y"),
                    'datePaiement': loyer.paiements.last ? loyer.paiements.last.datePaiement : null,
                    'isComplet': (loyer.montantPaye >= loyer.totalDu),
                    'locataire': loyer.location.locataire,
                    'appartement': loyer.location.appartement,
                    'isVierge': (loyer.montantPaye <= 0)
                } %}

                <div class="quittance-content">
                    {% if item.typeBail == 2 %}
                        {% include 'entreprise/loyer_mensuel/_quittance_card_pro2.html.twig' with {'item': item} %}
                    {% else %}
                        {% include 'entreprise/loyer_mensuel/_quittance_card2.html.twig' with {'item': item} %}
                    {% endif %}
                </div>
            </div>

            {# FOOTER DE SECURITÉ #}
            <div class="mt-5 pt-4 border-top text-center">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <p class="text-muted small">
                            Cette quittance est un document électronique officiel émis via la plateforme <strong>LOYER-EXPRESS</strong>. 
                            L'authenticité de ce document peut être vérifiée en scannant le QR Code présent sur l'original.
                        </p>
                        <div class="d-flex justify-content-center gap-3 mt-3 no-print">
                            <span class="badge bg-light text-dark border p-2"><i class="fas fa-shield-alt text-success me-1"></i> Connexion SSL Sécurisée</span>
                            <span class="badge bg-light text-dark border p-2"><i class="fas fa-file-contract text-primary me-1"></i> Conforme OHADA</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

{% endblock %}