{# templates/entreprise/loyer_mensuel/quittance_impression.html.twig #}
{% extends 'base_print.html.twig' %}

{% block title %}Impression Quittances - Mode Paysage{% endblock %}

{% block stylesheets %}
    {{ parent() }}
   <style>
    /* --- AFFICHAGE ÉCRAN (Preview) --- */
    .report-paper {
        background: white;
        width: 297mm;
        min-height: 210mm;
        padding: 10mm;
        margin: 20px auto;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }

    /* --- CONFIGURATION IMPRESSION --- */
    @media print {
        @page { 
            size: A4 landscape;
            margin: 0; /* On gère les marges via le padding pour plus de précision */
        }

        /* On réinitialise les styles de base pour l'impression */
        html, body {
            background: none;
            margin: 0;
            padding: 0;
            width: 297mm;
        }

        /* Désactiver le bandeau de contrôle */
        .no-print { 
            display: none !important; 
        }

        /* CONFIGURATION DES PAGES */
        .report-paper {
            display: block !important; /* On repasse en block */
            position: relative !important; /* SURTOUT PAS d'absolute */
            width: 297mm !important;
            height: 210mm !important; /* On fixe la hauteur pour forcer le saut de page */
            padding: 5mm !important;
            margin: 0 !important;
            box-shadow: none !important;
            page-break-after: always !important; /* Force le saut après chaque bloc de 2 */
            break-after: page !important;
            overflow: hidden;
        }

        .quittance-wrapper {
        height: 105mm !important; /* Moitié exacte de 210mm */
        max-height: 105mm !important;
        min-height: 105mm !important;
        overflow: hidden;
        position: relative;
        display: block;
        page-break-inside: avoid; /* Empêche une quittance de se couper sur deux pages */
    }

    .quittance-wrapper table {
        max-height: 100mm;
    }

       
    }

    .cut-line {
  border-top: 2px dashed #000;
  margin: 10px 0;
  width: 100%;
  height: 1px;
}
.quittance-wrapper {
        height: 105mm !important; /* Moitié exacte de 210mm */
        max-height: 105mm !important;
        min-height: 105mm !important;
        overflow: hidden;
        position: relative;
        display: block;
        page-break-inside: avoid; /* Empêche une quittance de se couper sur deux pages */
    }

    .quittance-wrapper table {
        max-height: 100mm;
    }

</style>
{% endblock %}

{% block body %}
    {# Bandeau de contrôle (masqué à l'impression) #}
    <div class="no-print mb-4 d-flex justify-content-between p-3 bg-light border-bottom">
        <div>
            <h1 class="h4 mb-0">Impression des quittances (<small class="text-muted">Format A4 Paysage.</small>)</h1>
        </div>
        <button onclick="window.print()" class="btn btn-success">
            <i class="fas fa-print"></i> Imprimer maintenant
        </button>
    </div>

    {# 
       On "aplatit" d'abord tous les items de tous les groupes, 
       puis on les regroupe par 2 pour créer nos pages 
    #}
    {% set toutesLesQuittances = [] %}
    {% for groupe in groupesPaiement %}
        {% set toutesLesQuittances = toutesLesQuittances|merge(groupe) %}
    {% endfor %}

    {% for page in toutesLesQuittances|batch(2) %}
        <div class="report-paper">
            {% for item in page %}
                <div class="quittance-wrapper">
                    {# LOGIQUE DE DISTINCTION DES MODÈLES #}
                    {% if item.typeBail == 2 %}
                        {% include 'entreprise/loyer_mensuel/_quittance_card_pro.html.twig' with {'item': item} %}
                    {% else %}
                        {% include 'entreprise/loyer_mensuel/_quittance_card.html.twig' with {'item': item} %}
                    {% endif %}

                    
                </div>

                {# Affiche le trait de coupe uniquement s'il y a une deuxième quittance sur la page #}
                {% if loop.first and not loop.last %}
                    <div class="cut-line"></div>
                {% endif %}
            {% endfor %}
        </div>
    {% endfor %}
{% endblock %}