{% extends 'renter/index.html.twig' %}



{% block sidebard %}
    <li class="nav-item">
        <a class="nav-link" href="{{ path("renter_panel") }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
            <span class="ml-2">Accueil</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ path('renter_cars') }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
            <span class="ml-2">Véhicules</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ path('renter_rents') }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
            <span class="ml-2">Locations</span>
        </a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="{{ path('renter_customers') }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
            <span class="ml-2">Clients</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ path('app_logout') }}">
            <i class="fas fa-sign-out-alt"></i>
            <span class="ml-2">Déconnexion</span>
        </a>
    </li>
{% endblock %}
{% block dashboard_current %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('renter_panel') }}">Panel</a></li>
            <li class="breadcrumb-item"><a href="{{ path('renter_customers') }}">Clients</a></li>
        {#    <li class="breadcrumb-item active" aria-current="page">{{ customer.id }}</li> #}
        </ol>
    </nav>
{% endblock %}
{% block dashboard_body %}
   {# <h1 class="h2">Facturation client "{{ customer.name }}" pour le mois courant</h1> #}
    <h1>renter/billing.html.twig</h1>
    <div class="row equal my-4">

       {% set finalTotalCurrentMonth = 0 %}
        {% set totalToPay = 0 %}
        {% set onGoing = 0 %}
        {% for r in rentals %}

            {% set finalTotalCurrentMonth = finalTotalCurrentMonth + r.totalCurrentMonth %}
            {% set totalToPay = totalToPay + r.toPay %}

            {% if r.ongoing %}
                {% set onGoing = onGoing + 1 %}
            {% endif %}
        {% endfor %}

        <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
            <div class="card rounded shadow-sm border-0">
                <div class="card-body p-4 text-center">
                    <p class="card-title">Réservations</p>
                    <h2 class="card-text">{{ rentals|length }}</h2>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
            <div class="card rounded shadow-sm border-0">
                <div class="card-body p-4 text-center">
                    <p class="card-title">En cours</p>
                    <h2 class="card-text">{{ onGoing }}</h2>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
            <div class="card rounded border-0">
                <div class="card-body p-4 text-center">
                    <p class="card-title">Total Paye month</p>
					<h2 class="card-text">{{ finalTotalCurrentMonth - totalToPay }} €</h2>
                 </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
            <div class="card rounded border-0">
                <div class="card-body p-4 text-center">
                    <p class="card-title">Restant à payer</p>
                    <h2 class="card-text">{{ totalToPay }} €</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="card rounded border-0">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Modèle</th>
                                <th scope="col">Dates</th>
                                <th scope="col">Montant</th>
                                <th scope="col">Paiement</th>
                                <th scope="col">Statut</th>
                                <th scope="col"></th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for r in rentals %}
                                <tr class='clickable-row' data-href='{{ path('renter_rent_details', { 'id': r.getRent.id }) }}' style="cursor: pointer;">
                                    <th scope="row">{{ r.getRent.id }}</th>
                                    <td>{{ r.getRent.caro.carType.name }}</td>
                                    <td>{{ r.getRent.startDate|date("m/d/Y") }}
                                        {% if not r.getRent.isMonthlyRecurring %}
                                            - {{ r.getRent.endDate|date("m/d/Y") }}
                                        {% else %}
                                            <span class="warning">Mensuel</span>
                                        {% endif %}</td>
                                    <td>
                                        {{ r.getRent.price }} €
                                        {% if r.getRent.isMonthlyRecurring %}
                                            /mois
                                        {% endif %}
                                    </td>
                                    <td>

                                        {% if r.getRent.isMonthlyRecurring %}
                                            {% if r.toPay > 0 %}
                                                <span class="danger">En attente du paiement de {{ r.toPay }} €</span>
                                            {% else %}
                                                <span class="success">Payée ce mois</span>
                                            {% endif %}
                                        {% else %}
                                            {% if r.getRent.isPaid %}
                                                <span class="success">Payée</span>
                                            {% else %}
                                                {% if r.toPay > 0 %}
                                                    <span class="danger">En attente du paiement de {{ r.toPay }} €</span>
                                                {% else %}
                                                    <span class="success">Payée</span>
                                                {% endif %}
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if r.ongoing%}
                                            <span class="primary">En cours</span>
                                        {% else %}
                                            <span class="secondary">Terminée</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if r.ongoing%}
                                            <span><a href="{{ path('renter_rent_details', { 'id': r.getRent.id }) }}" class="btn btn-sm btn-primary">Détails <i class="fas fa-plus-square"></i></a></span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}