{# 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 --- #}
                <td class="coupon-bailleur">
                    <div class="coupon-title">COUPON BAILLEUR</div>
                    
                    <div class="coupon-label">Quittance N°:</div>
                    <div class="dynamic-data">{{ item.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">Immeuble / Appt:</div>
                    <div class="dynamic-data" style="font-size: 11px;">{{ loyer.location.appartement.immeuble.titre }} / {{ 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 encaissement:</div>
                    <div style="border-bottom: 1px solid #000; height: 15px;"></div>

                    <div class="coupon-label" style="margin-top:10px" align="center">Signature / Cachet:</div>
                    
                    {# QR Code Coupon (Petit format) #}
                    {% if loyer.qrPayload %}
                    <div align="center" style="margin-top:20px">
    <img src="{{ qr_code_path(loyer.qrPayload) }}" width="50" height="50" />
    <div style="font-size: 8px; color: #666;">Authentification digitale</div>
</div>
                    {% endif %}
                </td>

                {# --- BLOC DROIT : QUITTANCE PRINCIPALE --- #}
                <td valign="top" style="padding-left: 15px;" >
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td colspan="9" rowspan="2" valign="top" class="bloc-info-quittance">
                              <div align="center">
                                  {% if entreprise.logo %}
                                        <img src="{{ asset('uploads/logos/' ~ entreprise.logo) }}" 
                                            style="max-width: 150px; max-height: 80px; object-fit: contain;" 
                                            alt="Logo {{ entreprise.raisonSociale }}" />
                                    {% endif %}
                                  <br />
                                  <strong>{{ entreprise.raisonSociale }}</strong><br />
                                  <strong class="dynamic-data">{{ entreprise.telephone }}</strong><br />
                                  <span style="text-transform: uppercase;"><strong>{{ loyer.location.appartement.immeuble.titre }}</strong></span><br />
                                  <strong>{{ loyer.location.appartement.immeuble.adresseGeographique }}</strong><br/>
                                  <span>Appt : {{ loyer.location.appartement.titre }}</span>
                              </div>
                              
                              {# QR Code Principal (Grand format) #}
                              {% if loyer.qrPayload %}
                              <div align="center" style="margin-top:20px">
    <img src="{{ qr_code_path(loyer.qrPayload) }}" width="100" height="100" />
    <div style="font-size: 8px; color: #666;">Authentification digitale</div>
</div>
                              {% endif %}
                          </td>
                          <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>