{# templates/entreprise/loyer_mensuel/_quittance_pro_card.html.twig #} {% set
loyer = item.loyer %} {% set isAvis = item.datePaiement is null or item.montant
<= 0 %} {% set dateDebut = "01-" ~ loyer.mois ~ "-" ~ loyer.annee %} {% set
dernierJour = dateDebut|date('t') %} {% set dateFin = dernierJour ~ "-" ~
loyer.mois ~ "-" ~ loyer.annee %} {% set calculCharges = loyer.totalDu -
loyer.montantMensuel %}

<style>
    .quittance-container {
        font-family: "Courier New", Courier, monospace;
        color: #000;
        background-color: #fff;
        width: 100%;
    }
    .reponso2 {
        text-transform: uppercase;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    .dynamic-data {
        font-weight: bold;
    }
    .line {
        min-height: 20px;
    }
    .coupon-bailleur {
        border-right: 2px dashed #333;
        padding-right: 15px;
        vertical-align: top;
        width: 180px;
    }
    .coupon-title {
        font-weight: bold;
        text-decoration: underline;
        font-size: 12px;
        text-align: center;
        margin-bottom: 10px;
    }
    .coupon-label {
        font-size: 10px;
        margin-top: 5px;
    }
    .address-box {
        font-size: 13px;
        line-height: 1.4;
    }
    .title-main {
        font-weight: bold;
        font-size: 18px;
        text-align: center;
        margin: 7px 0;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 3px 0;
    }
    .footer-text {
        font-size: 10px;
        color: #666;
    }
</style>

<div class="quittance-container">
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr>
                {# --- BLOC GAUCHE : COUPON BAILLEUR --- #}
                <td class="coupon-bailleur">
                    <div class="coupon-title">COUPON BAILLEUR</div>

                    <div class="coupon-label">Facture N°:</div>
                    <div class="dynamic-data">{{ loyer.reference }}</div>

                    <div class="coupon-label">Locataire:</div>
                    <div class="dynamic-data" style="font-size: 11px">
                        {{ loyer.location.locataire.nomComplet|slice(0, 25) }}
                    </div>

                    <div class="coupon-label">Local:</div>
                    <div class="dynamic-data" style="font-size: 10px">
                        {{ loyer.location.appartement.titre }}
                    </div>

                    <div class="coupon-label">Période:</div>
                    <div class="dynamic-data">
                        {{ loyer.mois | date_mois }} {{ loyer.annee }}
                    </div>

                    <div
                        style="
                            margin-top: 15px;
                            border: 1px solid #000;
                            padding: 5px;
                            text-align: center;
                            min-height: 45px;
                        "
                    >
                        <div class="coupon-label" style="margin: 0">
                            MONTANT ENCAISSÉ
                        </div>
                        <div style="font-size: 16px; font-weight: bold">
                            {{ item.montant > 0 ? item.montant|format_money : '' }}
                        </div>
                    </div>

                    <div class="coupon-label" style="margin-top: 20px">
                        Date de règlement:
                    </div>
                    <div style="border-bottom: 1px solid #000; height: 18px">
                        <span class="dynamic-data" style="font-size: 10px">
                            {{ item.datePaiement ? item.datePaiement|date('d/m/Y') : '' }}
                        </span>
                    </div>

                    <div
                        class="coupon-label"
                        style="margin-top: 10px; text-align: center"
                    >
                        Signature & Cachet:
                    </div>

                    {% if loyer.qrPayload %}
                    <div style="text-align: center; margin-top: 15px">
                        <img
                            src="{{ qr_code_path(loyer.qrPayload) }}"
                            width="50"
                            height="50"
                        />
                        <div style="font-size: 7px; color: #666">
                            ID: {{ loyer.id }}
                        </div>
                    </div>
                    {% endif %}
                </td>

                {# --- BLOC DROIT : STRUCTURE PROFESSIONNELLE --- #}
                <td valign="top" style="padding-left: 20px">
                    {# Header: Logo et Dates #}
                    <table width="100%" border="0">
                        <tr>
                            <td width="40%" valign="top">
                                {% if entreprise.logo %}
                                <img
                                    src="{{ asset('uploads/logos/' ~ entreprise.logo) }}"
                                    style="max-width: 180px; max-height: 60px"
                                />
                                {% else %}
                                <div style="font-size: 18px; font-weight: bold">
                                    {{ entreprise.raisonSociale }}
                                </div>
                                {% endif %}
                            </td>
                            <td
                                width="20%"
                                align="center"
                                style="font-size: 12px"
                            >
                                {% if loyer.qrPayload %}
                                <img
                                    src="{{ qr_code_path(loyer.qrPayload) }}"
                                    width="60"
                                    height="60"
                                />
                                <div style="font-size: 8px; color: #666">
                                    Authentification digitale
                                </div>
                                {% endif %}
                            </td>
                            <td
                                width="40%"
                                align="right"
                                style="font-size: 12px"
                            >
                                <strong>DATE :</strong>
                                <div
                                    class="reponso2"
                                    style="
                                        min-width: 100px;
                                        display: inline-block;
                                        text-align: center;
                                    "
                                >
                                    <span class="dynamic-data">
                                        {{ (not isAvis and item.datePaiement) ? item.datePaiement|date('d/m/Y') : '&nbsp;'|raw }}
                                    </span>
                                </div>
                                <br />
                                <div style="margin-top: 5px">
                                    <strong>PÉRIODE :</strong>
                                    {{ dateDebut|date('d/m/Y') }} au
                                    {{ dateFin|date('d/m/Y') }}<br />
                                    <strong>RÉF :</strong> {{ loyer.reference }}
                                </div>
                            </td>
                        </tr>
                    </table>

                    {# Bloc Adresses #}
                    <table width="100%" border="0" style="margin-top: 7px">
                        <tr>
                            <td width="60%" valign="top" class="address-box">
                                <strong>De:</strong><br />
                                <strong>{{ entreprise.raisonSociale }}</strong
                                ><br />
                                {{ entreprise.situationGeographique | nl2br
                                }}<br />
                                Tél: {{ entreprise.telephone }}
                            </td>
                            <td
                                width="40%"
                                valign="top"
                                class="address-box"
                                style="border: 1px solid #ccc; padding: 5px"
                            >
                                <strong>A:</strong><br />
                                <strong>{{
                                    loyer.location.locataire.nomComplet
                                }}</strong
                                ><br />
                                Tél.:
                                <strong>{{
                                    loyer.location.locataire.telephone
                                }}</strong>
                            </td>
                        </tr>
                    </table>

                    <div class="title-main">QUITTANCE DE LOYER</div>

                    {# Tableau Financier #}
                    <table
                        width="100%"
                        border="1"
                        cellspacing="0"
                        cellpadding="8"
                        style="
                            border-collapse: collapse;
                            font-size: 12px;
                            border-color: #eee;
                        "
                    >
                        <thead>
                            <tr bgcolor="#f9f9f9">
                                <th align="left">Désignation</th>
                                <th align="right" width="90">Loyer Nu</th>
                                <th align="right" width="90">Charges</th>
                                <th align="right" width="110">Total à Payer</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    Loyer mensuel -
                                    <span style="background-color: #cef59d"
                                        >{{ loyer.mois | date_mois }}
                                        {{ loyer.annee }}</span
                                    >
                                </td>
                                <td align="right">
                                    {{ loyer.montantMensuel | format_money }}
                                </td>
                                <td align="right">
                                    {{ (calculCharges ?: 0)|format_money }}
                                </td>
                                <td align="right" class="dynamic-data">
                                    {{ loyer.totalDu | format_money }}
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    {# Texte de Quittance #}
                    <div
                        style="
                            font-size: 11px;
                            margin-top: 10px;
                            line-height: 1.5;
                        "
                    >
                        <table
                            width="100%"
                            border="0"
                            cellspacing="0"
                            cellpadding="0"
                            style="margin-top: 0px"
                        >
                            <tr>
                                <td width="25%" nowrap>
                                    Le locataire à payé la somme de :
                                </td>
                                <td
                                    width="35%"
                                    class="reponso2 dynamic-data"
                                    nowrap="nowrap"
                                >
                                    {{ loyer.totalDu | format_money2 }}
                                    {{ loyer.totalDu | amount_lettres }}
                                </td>
                                <td
                                    width="40%"
                                    style="padding-left: 10px"
                                    nowrap="nowrap"
                                >
                                    correspondant à :
                                </td>
                            </tr>
                        </table>

                        <div class="dynamic-data" style="margin-top: 5px">
                            <span
                                style="
                                    font-weight: normal;
                                    text-transform: lowercase;
                                "
                            >
                                l'occupation des locaux situés à
                                {{
                                    loyer.location.appartement.immeuble
                                        .adresseGeographique
                                }}
                                sous toutes réserves de droit</span
                            >
                            DONT QUITTANCE
                        </div>
                    </div>

                    {# Pied de page / Signature #}
                    <table width="100%" style="margin-top: 55px">
                        <tr>
                            <td width="70%" class="footer-text" valign="bottom">
                                Document valant quittance sous réserve
                                d'encaissement définitif.
                            </td>
                            <td width="30%" align="center">
                                <div
                                    style="
                                        font-size: 10px;
                                        font-weight: bold;
                                        margin-bottom: 5px;
                                    "
                                >
                                    Le Bailleur (Cachet)
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>