{# templates/entreprise/loyer_mensuel/_quittance_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 %}

<style>
    .quittance-container { 
        font-family: 'Courier New', Courier, monospace; 
        color: #000;
    }
    .reponso2 { text-transform:uppercase; border-bottom:1px solid rgba(27, 199, 89, .2); }
    .dynamic-data { font-weight: bold; }
    .style1 { font-size: 10px; }
    .line { min-height: 20px; }

    .coupon-bailleur {
        border-right: 2px dashed #333; 
        padding-right: 15px;
        vertical-align: top;
        width: 200px;
    }
    .bloc-info-quittance {
        padding-left: 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; }
    .qr-wrapper { margin-top: 10px; text-align: center; }
</style>

<div style="background-color: #fff; margin: 0px 2px 4px;" id="facture" class="quittance-container">
    <table width="100%" style="font-family:'Courier New', Courier, monospace; font-size:14px; border-color:#333;">
        <tbody>
            <tr>
                {# --- BLOC GAUCHE : COUPON BAILLEUR --- #}
                {# --- BLOC DROIT : QUITTANCE PRINCIPALE --- #}
                <td valign="top" style="padding-left: 15px;" >
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td rowspan="2" valign="top"><span style="width:33px"><img src="{{ asset('images/quittance3.gif') }}" width="33" height="400" onerror="this.style.display='none'" /></span></td>
                          
                          <td width="936" colspan="8" valign="top" style="padding-left:20px;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td>
                                    <div align="center" style="font-size:35px;">
                                        <span style="margin:0px 0 0 0;font-family:Algerian;text-align:right;font-weight:normal;">QUITTANCE DE LOYER</span>                                    </div>                                </td>
                               </tr>
                              <tr>
                                <td colspan="8">
                                <div style="display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin-bottom: 5px;">
                                    <div style="text-align: left;">
                                        Référence : <strong>{{ item.loyer.reference }}</strong>                                    </div>

                                    <div style="text-align: right; display: flex; align-items: flex-end;">
                                        <span style="margin-right: 5px;">Date de paiement :</span>
                                        <div class="reponso2" style="min-width: 150px; text-align: center; display: inline-block;">
                                            <strong class="dynamic-data">
                                                {% if not isAvis and item.datePaiement %}
                                                    {{ item.datePaiement|date('d/m/Y') }}
                                                {% else %}
                                                    &nbsp;
                                                {% endif %}                                            </strong>                                        </div>
                                    </div>
                                </div>                            </td>
                              </tr>
                            </table>

                            <div style="padding:5px;border:1px solid;border-radius: 5px;margin-bottom:30px">
                                <table width="100%" border="1" style="border-style:dotted;border-color:#eee; border-width:1px; " cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td bgcolor="#ddd">Loyer base</td>
                                      <td bgcolor="#ddd">Ch. eau</td>
                                      <td bgcolor="#ddd">Ch. élec.</td>
                                      <td bgcolor="#ddd">gard.</td>
                                      <td bgcolor="#ddd">Autres</td>
                                      <td bgcolor="#ddd" align="center"><strong>Total dû:</strong></td>
                                    </tr>
                                    <tr>
                                      <td bgcolor="#eee"><div style="margin:5px 7px 0; text-align:right; border-bottom:1px solid;" class="line dynamic-data">{{ loyer.montantMensuel|format_money }}</div></td>
                                      <td><div style="margin:5px 7px 0; text-align:right; border-bottom:1px solid;" class="line dynamic-data">{{ (loyer.chargeEau ?: 0)|format_money }}</div></td>
                                      <td bgcolor="#eee"><div style="margin:5px 7px 0; text-align:right; border-bottom:1px solid;" class="line dynamic-data">{{ (loyer.chargeElectricite ?: 0)|format_money }}</div></td>
                                      <td><div style="margin:5px 7px 0; text-align:right; border-bottom:1px solid;" class="line dynamic-data">{{ (loyer.chargeGardien ?: 0)|format_money }}</div></td>
                                      <td bgcolor="#eee"><div style="margin:5px 7px 0; text-align:right; border-bottom:1px solid;" class="line dynamic-data">{{ (loyer.chargeAutre ?: 0)|format_money }}</div></td>
                                      <td><div style="margin:5px 7px 0; text-align:right; border-bottom:1px solid;" class="line dynamic-data"><strong>{{ loyer.totalDu|format_money }} </strong></div></td>
                                    </tr>
                                </table>
                            </div>

                            <table  width="100%" border="0" cellpadding="0" cellspacing="0" style="font-family:'Courier New', Courier, monospace;">
                                <tr>
                                  <td colspan="4"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td width="5%" nowrap="nowrap"><div style="text-align:left; margin-right:5px;">Re&ccedil;u de </div></td>
                                      <td width="95%"><div style="text-align:left;" class="reponso2 line dynamic-data"><strong>{{ loyer.location.locataire.nomComplet }}</strong></div></td>
                                    </tr>
                                  </table></td>
                                </tr>
                                <tr>
                                    <td width="36%" nowrap="nowrap"><div><strong>A payé la somme de</strong></div></td>
                                    <td width="128%" nowrap="nowrap"><div style="text-align:left;" class="reponso2 line dynamic-data">
                                            
                                                <strong> {{ loyer.totalDu | format_money2 }}
                                    {{ loyer.totalDu | amount_lettres }} </strong>
                                           
                                        </div></td>
                                    <td width="128%" colspan="2" nowrap="nowrap">pour</td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:'Courier New', Courier, monospace;">
                                            <tr>
                                                <td width="2%" nowrap="nowrap">la période de</td>
                                                <td width="23%" nowrap="nowrap"><div style="text-align:center;background-color:#cef59d;" class="reponso2 line dynamic-data"><strong>{{ loyer.mois|date_mois }} {{ loyer.annee }}</strong></div></td>
                                                <td width="75%">correspondant &agrave; un mois de loyer des locaux</td>
                                            </tr>
                                        </table>                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:'Courier New', Courier, monospace;">
                                            <tr>
                                                <td nowrap> occup&eacute;s situ&eacute;s &agrave;</td>
                                                <td width="100%" nowrap="nowrap"><div style="text-align:left; margin-left:5px;" class="reponso2 line dynamic-data"><strong>{{ loyer.location.appartement.immeuble.adresseGeographique }}</strong></div></td>
                                            </tr>
                                        </table>                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:'Courier New', Courier, monospace;">
                                      <tr>
                                        <td>le dit</td>
                                        <td><div style="text-align:center;" class="reponso2 line">LOYER</div></td>
                                        <td nowrap="nowrap"><div style="margin-left:5px;">commen&ccedil;ant du</div></td>
                                        <td><div style="text-align:center;" class="reponso2 line dynamic-data"><strong>{{ dateDebut|date('d/m/Y') }}</strong></div></td>
                                        <td><div style="margin-left:5px;">au</div></td>
                                        <td><div style="text-align:center;" class="reponso2 line dynamic-data"><strong>{{ dateFin|date('d/m/Y') }}</strong></div></td>
                                      </tr>
                                    </table></td>
                                </tr>
                                <tr>
                                    <td height="28" colspan="4"><div>sous toutes r&eacute;serves de droit <strong>DONT QUITTANCE</strong></div></td>
                                </tr>
                            </table>                          </td>
                        </tr>
                        <tr>
                            <td height="10" colspan="8">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:15px; font-family:'Courier New', Courier, monospace;">
                                    <tr>
                                        <td>
                                            <div class="style1">
                                            <div style="margin: 0 0 0 19px">
                                                NOTA - Un locataire ne peut d&eacute;m&eacute;nager sans :<br />
                                                1 - Avoir acquitt&eacute; toutes ses contributions de l'ann&eacute;e.<br />
                                                2 - Avoir donn&eacute; congé par &eacute;crit dans les d&eacute;lais.<br />
                                                3 - Avoir effectué les r&eacute;parations locatives à sa charge.                                            </div>
                                            </div>                                        </td>
                                        <td valign="bottom"><div style="text-align:right; font-size:10px; color:#666">imprimé via <strong>LoyerExpress.com</strong></div></td>
                                    </tr>
                                </table>                            </td>
                        </tr>
                    </table>                </td>
            </tr>
        </tbody>
    </table>
</div>