
<table border="1" style="font-size: 11pt!important;" cellspacing="5">
    <tbody>
    <tr>
        <td style="height: 55px!important;text-align: left!important;width: 200px!important;">
            <img style="width: 100%!important;" src="../public/pdf/logo.png" alt="logo">
        </td>
        <td style="height: 55px!important;text-align: left!important;"></td>
    </tr>
    </tbody>
</table>


<table border="1" style="font-size: 11pt!important;" cellspacing="5">
    <tbody>
    <tr>
        <td valign="center" colspan="2" style="text-align: left!important;width: 300px!important;height: 100px;">
            <h2>FACTURE N° {{ propertie.numeroFacture }}</h2>
            <h5 style="margin: 8px 0;">{{ context.get['app'].facturePdfSignature }} {{ propertie.cautionGestionnaire }}</h5>
            <h5 style="margin: 8px 0;">{{ context.get['app'].facturePdfLibelleClient }} {{ locataire.name }}</h5>
        </td>
        <td valign="center" colspan="2" align="right" style="text-align: right!important;height: 100px;">
            {{ context.get['app'].facturePdfLibelleDate }} {{ propertie.cautionDate|date("d/m/Y") }}
        </td>
    </tr>
    </tbody>
</table>


<table  style="font-size: 11pt!important;" cellspacing="5">
    <thead>
    <tr valign="center">
        <th valign="center" style="color: #fff!important;border: 1px solid #ccc!important;width: 300px;height: 40px;" bgcolor="#ffffff">
            {{ context.get['app'].facturePdfTheadLibelle }}
        </th>
        <th valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc!important;width: 100px;height: 40px;" bgcolor="#ffffff">
            {{ context.get['app'].facturePdfTheadPrice }}
        </th>
        <th valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc!important;width: 100px;height: 40px;" bgcolor="#ffffff">
            {{ context.get['app'].facturePdfTheadTaux }}
        </th>
        <th valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc!important;width: 100px;height: 40px;" bgcolor="#ffffff">
            {{ context.get['app'].facturePdfTheadMontant }}
        </th>
    </tr>
    </thead>
    <tbody>
    {% if propertie.cautionMontant > 0 %}
        {% set totalCaution = propertie.cautionMontant %}
        {% set totalPeriode = propertie.cautionMontant %}
    {% else %}
        {% set totalCaution = (propertie.cautionMois * propertie.montantLoyer) %}
        {% set totalPeriode = (propertie.cautionPeriode * propertie.montantLoyer) %}
    {% endif %}


    {% set subtotal = 0 %}
    {% set total = 0 %}
    <tr>
        <td valign="center" style="color: #fff!important;border: 1px solid #ccc!important;border-bottom: 0!important;width: 300px;height: 40px;" bgcolor="#ffffff">
            <strong>{{ propertie.cautionLibelle }}</strong>
        </td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
    </tr>
    <tr>
        <td valign="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 300px;height: 40px;" bgcolor="#ffffff">
            <strong>{{ propertie.name }}</strong>
        </td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
    </tr>
    <tr>
        <td valign="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 300px;height: 40px;" bgcolor="#ffffff">
            Période: {{ pluralize(propertie.cautionPeriode, 'Mois', 'Mois') }}
        </td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
    </tr>
    <tr>
        <td valign="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 300px;height: 40px;" bgcolor="#ffffff">
            Loyer mensuel: {{ propertie.montantLoyer|number_format(0, ' ', ' ') }}
        </td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff">
            {{ propertie.cautionPeriode }}
        </td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff">
            {% if propertie.cautionMontant > 0 %}
                {{ propertie.cautionMontant|number_format(0, ' ', ' ')  }}
            {% else %}
                {{ totalPeriode|number_format(0, ' ', ' ')  }}
            {% endif %}
        </td>
    </tr>
    <tr>
        <td valign="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 300px;height: 40px;" bgcolor="#ffffff">
            Caution: {{ pluralize(propertie.cautionMois, 'Mois', 'Mois') }}
        </td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff"></td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff">
            {{ propertie.cautionMois }}
        </td>
        <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff">
            {% if propertie.cautionMontant > 0 %}
                {{ propertie.cautionMontant|number_format(0, ' ', ' ')  }}
            {% else %}
                {{ totalCaution|number_format(0, ' ', ' ')  }}
            {% endif %}
        </td>
    </tr>
    {% for chargescaution in chargescautions %}
        <tr>
            <td valign="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 300px;height: 40px;" bgcolor="#ffffff">
                {{ chargescaution.name }}
            </td>
            <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff">
                {{ chargescaution.montant|number_format(0, ' ', ' ') }}
            </td>
            <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff">
                {{ chargescaution.taux }}
            </td>
            <td valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;border-bottom: 0!important;width: 100px;height: 40px;" bgcolor="#ffffff">
                {{ (chargescaution.taux * chargescaution.montant)|number_format(0, ' ', ' ') }}
            </td>
        </tr>
        {% set subtotal = subtotal + chargescaution.montant %}
        {% set total = total + (chargescaution.taux * chargescaution.montant) %}
    {% endfor %}
    </tbody>
    <tfoot>
    <tr style="font-size: 12pt!important;font-weight: bold!important;">
        <th valign="center" style="color: #fff!important;border: 1px solid #ccc;width: 300px;height: 40px;" bgcolor="#ffffff">
            TOTAL
        </th>
        <th valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;width: 100px;height: 40px;" bgcolor="#ffffff">
            {{ subtotal|number_format(0, ' ', ' ') }}
        </th>
        <th valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;width: 100px;height: 40px;" bgcolor="#ffffff">
            --
        </th>
        <th valign="center" align="center" style="color: #fff!important;border: 1px solid #ccc;width: 100px;height: 40px;" bgcolor="#ffffff">
            {{ (total + totalCaution + totalPeriode)|number_format(0, ' ', ' ') }}
        </th>
    </tr>
    </tfoot>
</table>

<table border="1" style="font-size: 11pt!important;" cellspacing="5">
    <tbody>
    <tr>
        <td valign="center" colspan="4" style="white-space: normal; text-align: left!important;height: 100px;">
                    <span class="text-muted">
                        {{ context.get['app'].facturePdfLibelle }}
                        <strong>
                            <u>{{ (total + totalCaution + totalPeriode)|towords|upper }}</u>
                            ({{ (total + totalCaution + totalPeriode)|number_format(0, ' ', ' ') }})
                        </strong>
                        {{ devise }}.
                    </span>
            {{ context.get['app'].facturePdfText1|raw }}
        </td>
    </tr>
    </tbody>
</table>

<table border="1" style="font-size: 11pt!important;" cellspacing="5">
    <tbody>
    <tr>
        <td valign="center" colspan="4" style="white-space: normal; text-align: left!important;height: 100px;">
            {{ context.get['app'].facturePdfText2|raw }}
        </td>
    </tr>
    </tbody>
</table>

<table border="1" style="font-size: 11pt!important;" cellspacing="5">
    <tbody>
    <tr>
        <td valign="center" align="right" colspan="4" style="white-space: normal; text-align: right!important;height: 100px;">
            <h4 style="margin-right: 100px!important;"><u>{{ context.get['app'].facturePdfSignature }}</u></h4>
        </td>
    </tr>
    </tbody>
</table>