{% block stylesheets %}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
{% endblock %}

{% block body %}
    {% if property|length %}
        <div class="container" style="position: relative;">

            <div class="row">
                <div class="col"><strong>FICHE DE VERSEMENT N° <br>
                        Mois: {{ property.createdAt|date('m-Y') }} <br><br>
                    </strong>
                </div>
            </div>
            <div class="row">
                <div class="col" style="float: left;">
                    Nom de l'agent: {{ property.agent }}<br>
                    {% if property.agent.user.phoneNumber %}
                        Tél: {{ property.agent.user.phoneNumber }}
                    {% endif %}
                </div>
                <div class="col" style="float: right;">
                    {% if property.owner.user.phoneNumber %}
                    Nom du propriétaire: {{ property.owner }}
                    / Tél: {{ property.owner.user.phoneNumber }}
                    {% endif %}<br>
                    N° de la parcelle: {{ property.street }} {{ property.streetAdd }} {{ property.city }}
                    {{ property.zipcode }}  {{ property.state }}
                </div>
            </div>

            <div style="margin: 20px;">
                <div class="properties-show col-6 col-md-4">
                    <div class="text-center">
                        {% set total = 0 %}
                        {% for tenant in property.tenants %}
                            {% set total = total + tenant.price %}
                        {% endfor %}
                        Estimation: {{ total }}
                    </div>
                    {% if property.tenants|length %}
                        {% set getRents = 0 %}
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">Prénom</th>
                                <th scope="col">Nom</th>
                                <th scope="col">Sommes versées</th>
                                <th scope="col">Arriérés</th>
                                <th scope="col">Dépenses</th>
                                {% if app.user.isOwner == true %}
                                    <th scope="col">ACTIONS</th>
                                {% endif %}
                            </tr>
                            </thead>
                            <tbody>
                            {% for tenant in property.tenants %}
                                <tr>
                                    <td>{{ tenant.firstname }}</td>
                                    <td>{{ tenant.lastname }}</td>
                                    {% for rent in tenant.rents %}
                                        {% if rent.dateFocus|date('Y-m') == dateNow %}
                                            {% if tenant.price > rent.amount %}
                                                <td class="color-danger">
                                                    {{ rent.amount }} €
                                                </td>
                                            {% else %}
                                                <td>{{ rent.amount }} €</td>
                                            {% endif %}
                                            <td >
                                                {% if tenant.totalDebtToPay > 0 %}
                                                    <p class="color-danger">Dette :
                                                        {{ tenant.totalDebtToPay(tenant.getLastRentByDate(dateObject)) }} €</p>
                                                {% endif %}
                                                {% if tenant.totalDebtToPay + tenant.price > tenant.price %}
                                                    <p class="text-success">Loyer à payer :
                                                        {{ tenant.totalDebtToPay + tenant.price }} €</p>
                                                {% endif %}
                                            </td>
                                            <td> </td>
                                        {% endif %}

                                    {% endfor %}
                                </tr>
                                {% for rent in tenant.rents %}
                                    {% if rent.dateFocus|date('Y-m') == dateNow %}
                                        {% set getRents = getRents + rent.amount %}
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}
                            </tbody>
                        </table>
                        <div class="row">
                            {% set nap = getRents -  property.agent.commission %}
                            <div style="float: left;">Total: {{ getRents }}</div>
                            <div style="float: left; margin-left: 150px;">Comission: {{ property.agent.commission }}</div>
                            {% if nap < 0 %}
                                <div style="float: right;">NAP: {{ nap }} </div>
                            {% else %}
                                <div style="float: right;">NAP: {{ nap }} </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>

            </div>
            <div style="position: absolute; bottom: 0;">
                Fait le {{ "now"|date("d/m/Y") }}
            </div>
        </div>
    {% endif %}
{% endblock %}