<html lang="fr">
<head>
    <title>{{ title }}</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ absolute_url(asset('pdf/pdf.css')) }}">
</head>
<div id="body" class="teacherPage">
<div id="section_header"></div>
<div id="content">
    <div class="page" style="font-size: 11pt;margin: 0 auto;">
        <!--Header section-->
        <table style="width: 100%;text-align: left!important;">
            <tbody>
            <tr>
                <td style="height: 30px!important;text-align: left!important;width: 200px!important;">
                    <img style="width: 100%!important;" src="{{ absolute_url(asset('pdf/logo.png')) }}" alt="logo">
                </td>
                <td style="height: 30px!important;text-align: left!important;"></td>
            </tr>
            </tbody>
        </table>

        <!--Header Infos section-->
        <table style="width: 100%;text-align: left!important;margin-top: 20px!important;">
            <tbody>
            <tr>
                <td valign="top" style="height: 30px!important;text-align: left!important;width: 400px!important;">
                    <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="top" style="height: 30px!important;text-align: right!important;">
                    {{ context.get['app'].facturePdfLibelleDate }} {{ propertie.cautionDate|format_datetime(pattern="d MMMM Y") }}
                </td>
            </tr>
            </tbody>
        </table>

        <!--Body Infos section-->
        <table class="change_order_items" style="width: 100%;text-align: left!important;margin-top: 30px!important;">
            <thead>
                <tr>
                    <th valign="top" style="height: 30px!important;text-align: center!important;width: 40%!important;">
                        {{ context.get['app'].facturePdfTheadLibelle }}
                    </th>
                    <th valign="top" style="height: 30px!important;text-align: center!important;width: 20%!important;">
                        {{ context.get['app'].facturePdfTheadPrice }}
                    </th>
                    <th valign="top" style="height: 30px!important;text-align: center!important;width: 20%!important;">
                        {{ context.get['app'].facturePdfTheadTaux }}
                    </th>
                    <th valign="top" style="height: 30px!important;text-align: center!important;width: 20%!important;">
                        {{ context.get['app'].facturePdfTheadMontant }}
                    </th>
                </tr>
            </thead>
            <tbody>
            {% set totalCaution = (propertie.cautionMois * propertie.montantLoyer) %}
            {% set totalPeriode = (propertie.cautionPeriode * propertie.montantLoyer) %}
            {% set subtotal = 0 %}
            {% set total = 0 %}
            <tr>
                <td style="height: 30px!important;text-align: left!important;width: 40%!important;">
                    <strong>{{ propertie.cautionLibelle }}</strong>
                </td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
                <td class="change_order_total_col" style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
            </tr>
            <tr>
                <td style="height: 30px!important;text-align: left!important;width: 40%!important;">
                    <strong>{{ propertie.name }}</strong>
                </td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
                <td class="change_order_total_col" style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
            </tr>
            <tr>
                <td style="height: 30px!important;text-align: left!important;width: 40%!important;">
                    Période: {{ pluralize(propertie.cautionPeriode, 'Mois', 'Mois') }}
                </td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
                <td class="change_order_total_col" style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
            </tr>
            <tr>
                <td style="height: 30px!important;text-align: left!important;width: 40%!important;">
                    Loyer mensuel: {{ propertie.montantLoyer|number_format(0, ' ', ' ') }}
                </td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;">
                    {{ propertie.cautionPeriode }}
                </td>
                <td class="change_order_total_col" style="height: 30px!important;text-align: center!important;width: 20%!important;">
                    {{ totalPeriode|number_format(0, ' ', ' ')  }}
                </td>
            </tr>
            <tr>
                <td style="height: 30px!important;text-align: left!important;width: 40%!important;">
                    Caution: {{ pluralize(propertie.cautionMois, 'Mois', 'Mois') }}
                </td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;"></td>
                <td style="height: 30px!important;text-align: center!important;width: 20%!important;">
                    {{ propertie.cautionMois }}
                </td>
                <td class="change_order_total_col" style="height: 30px!important;text-align: center!important;width: 20%!important;">
                    {% if propertie.cautionMontant > 0 %}
                        {{ propertie.cautionMontant|number_format(0, ' ', ' ')  }}
                    {% else %}
                        {{ totalCaution|number_format(0, ' ', ' ')  }}
                    {% endif %}
                </td>
            </tr>
            {% for chargescaution in chargescautions %}
                <tr>
                    <td style="height: 30px!important;text-align: left!important;width: 40%!important;">
                        {{ chargescaution.name }}
                    </td>
                    <td style="height: 30px!important;text-align: center!important;width: 20%!important;">
                        {{ chargescaution.montant|number_format(0, ' ', ' ') }}
                    </td>
                    <td style="height: 30px!important;text-align: center!important;width: 20%!important;">
                        {{ chargescaution.taux }}
                    </td>
                    <td class="change_order_total_col" style="height: 30px!important;text-align: center!important;width: 20%!important;">
                        {{ (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="top" style="height: 30px!important;text-align: center!important;width: 40%!important;">
                        TOTAL
                    </th>
                    <th valign="top" style="height: 30px!important;text-align: center!important;width: 20%!important;">
                        {{ subtotal|number_format(0, ' ', ' ') }}
                    </th>
                    <th valign="top" style="height: 30px!important;text-align: center!important;width: 20%!important;">
                        --
                    </th>
                    <th valign="top" style="height: 30px!important;text-align: center!important;width: 20%!important;">
                        {{ (total + totalCaution + totalPeriode)|number_format(0, ' ', ' ') }}
                    </th>
                </tr>
            </tfoot>
        </table>

        <table style="width: 100%; font-size: 10pt;">
            <tbody>
            <tr>
                <td style="white-space: normal; text-align: left!important;">
                    <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 style="width: 100%; font-size: 10pt;margin-top: 20px">
            <tbody>
            <tr>
                <td style="white-space: normal; text-align: left!important;">
                    {{ context.get['app'].facturePdfText2|raw }}
                </td>
            </tr>
            </tbody>
        </table>

        <table style="width: 100%; font-size: 10pt;margin-top: 20px">
            <tbody>
            <tr>
                <td style="white-space: normal; text-align: right!important;">
                    <h4 style="margin-right: 100px!important;"><u>{{ context.get['app'].facturePdfSignature }}</u></h4>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
</html>