{% extends 'base.html.twig' %}

{% block stylesheets %}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
{% endblock %}

{% block body %}
    <div class="row">
        {% if app.user.isOwner == false %}
            <div class="mr-t-3 filter-link">
                <div class="width-5 float-left m-r-30 text-align">
                    <a href="{{ path('properties-list', {'filter' : 'agent'}) }}">
                        <img src="{{ asset('images/Icon/mes_biens.png') }}" alt="Mes Biens" class="part-logo m-r-30">
                        {% if app.request.query.get('filter') %}
                            <p class="second-color">Mes biens</p>
                        {% else %}
                            <p class="color-bl">Mes biens</p>
                        {% endif %}
                    </a>
                </div>
                <div class="width-5 float-left m-r-30 text-align">
                    <a href="{{ path('properties-list') }}" class="text-initial">
                        <img src="{{ asset('images/Icon/tout_les_biens.png') }}" alt="Tous les biens" class="part-logo m-r-30">
                        {% if app.request.query.get('filter') == false%}
                            <p class="second-color">Tous les biens</p>
                        {% else %}
                            <p class="color-bl">Tous les biens</p>
                        {% endif %}
                    </a>
                </div>
                <div class="width-5 float-left m-r-30 text-align">
                    <a href="{{ path('properties-add') }}">
                        <img src="{{ asset('images/Icon/add_properties.png') }}" alt="Ajouter" class="part-logo">
                        <p class="color-bl">Ajouter un bien</p>
                    </a>
                </div>
            </div>
            {% if app.request.query.get('filter') %}
                <h1 class="f-s-title m-l-41">Mes biens</h1>
            {% else %}
                <h1 class="f-s-title m-l-39">Tous les biens</h1>
            {% endif %}
        {% else %}
            <div class="width-5 float-left m-r-30 text-align">
                <a href="{{ path('properties-add') }}">
                    <img src="{{ asset('images/Icon/add_properties.png') }}" alt="Ajouter" class="size-icon-house">
                    <p class="color-bl">Ajouter un bien</p>
                </a>
            </div>
            <h1 class="f-s-title m-l-41">Mes biens</h1>
        {% endif %}
    </div>

    {% if properties|length %}
        <div class="container">
            <div class="rents">
                {% for property in properties %}
                    <div class="properties-show col-6 col-md-4">
                        <img src="{{ asset('images/Icon/add_properties.png') }}" alt="Avatar" class="image-bien">
                        <div class="middle">
                            <div class="modal-show" style="cursor: pointer;" data-toggle="modal" data-target="#myModal{{property.id}}">
                                <div class="title summary-text">
                                    <h2>{{ property.owner }}</h2>
                                    <p>
                                        {{ property.street }}
                                        {% if property.streetAdd|length %}
                                            {{ property.streetAdd }},
                                        {% endif %}
                                        {{ property.zipCode }}
                                        {{ property.city }}
                                        {{ property.state }}
                                    </p>
                                </div>
                            </div>
                            <div class="show-action">
                                <div class="hover-show inline">
                                    {% if app.user.isOwner == false %}
                                        <a href="{{ path('rents-add', {id: property.id}) }}" class="m-r-10">
                                            <img src="{{ asset('images/Icon/ajouter.png') }}" alt="Ajouter" class="size-icon-house">
                                        </a>
                                        <div class="position-absolute t-65 l-20">
                                            <div class="show-me">
                                                <span>Ajouter un loyer</span>
                                            </div>
                                        </div>|
                                    {% endif %}
                                </div>
                                <div class="hover-show inline"><a href="{{ path('properties-modify', {id: property.id }) }}" class="m-r-10"><img src="{{ asset('images/Icon/edit.png') }}" alt="Modifier" class="size-icon-house"></a><div class="position-absolute t-65 l-20"><div class="show-me"><span>Modifier le bien</span></div></div></div> |
                                <div class="hover-show inline">
                                        <a href="" data-toggle="modal" data-target="#deleteProperty{{ property.id }}">
                                        <img src="{{ asset('images/Icon/delete.png') }}" alt="Supprimer" class="size-icon-house">
                                        <div class="position-absolute t-65 l-20">
                                            <div class="show-me">
                                                <span>Supprimer le bien</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="myModal{{property.id}}" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-lg" id="{{property.id}}">
                                <div class="modal-content" >
                                    <div class="modal-header summary-text">
                                        <div class="title ">
                                            <h2>{{ property.owner }}</h2>
                                            <p>
                                                {{ property.street }}
                                                {% if property.streetAdd|length %}
                                                    {{ property.streetAdd }},
                                                {% endif %}
                                                {{ property.zipCode }}
                                                {{ property.city }}
                                                {{ property.state }}
                                            </p>

                                            <div class="text-center">
                                                {% set total = 0 %}
                                                {% for tenant in property.tenants %}
                                                    {% set total = total + tenant.price %}
                                                {% endfor %}
                                                Estimation: {{ total }}
                                            </div>
                                        </div>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                        {% 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>
                                                                {% if app.user.isOwner == true %}
                                                                    <td>
                                                                        <a href="{{ path('rents-modify', {id: rent.id}) }}" class="m-r-10">
                                                                            <img src="{{ asset('images/Icon/edit.png') }}" style="width:20px;">
                                                                        </a>
                                                                        <a href="{{ path('rents-delete', {id: rent.id}) }}" class="delete-rent">
                                                                            <img src="{{ asset('images/Icon/delete.png') }}" style="width:20px;">
                                                                        </a>
                                                                    </td>
                                                                {% endif %}
                                                            {% 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 class="col-6 col-md-4">Total: {{ getRents }}</div>
                                                <div class="col-6 col-md-4">Comission: {{ property.agent.commission }}</div>
                                                {% if nap < 0 %}
                                                    <div class="col-6 col-md-4 color-danger">NAP: {{ nap }} </div>
                                                {% else %}
                                                    <div class="col-6 col-md-4 color-succes">NAP: {{ nap }} </div>
                                                {% endif %}
                                            </div>
                                        {% else %}
                                            <p class="text-danger"> Pas de locataire pour ce bien</p>

                                        {% endif %}
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary">
                                            <a href="{{ path('loyer_list', {id: property.id }) }}" target="_blank">Imprimer</a>
                                        </button>
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal confirm delete -->
                        <div class="modal fade" id="deleteProperty{{ property.id }}" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header summary-text">
                                        <h5 class="modal-title" id="exampleModalLabel">Suppression d'une dépense</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        Voulez-vous vraiment supprimer ce bien: {{ property }} ?
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Non</button>
                                        <a href="{{ path('properties-delete', {id: property.id }) }}" >
                                            <button type="button" class="btn btn-danger">Oui</button></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}
{% endblock %}