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

{% block title %}Mes locations {{ parent() }}{% endblock %}

{% block body %}
    <h1 class="text-2xl font-bold mb-6">Mes locations</h1>

    <div class="mb-4" role="group" aria-label="Filtrer les locations">
        <button id="show-all" class="px-4 py-2 bg-blue-500 text-white rounded" aria-pressed="false">
            Toutes les locations
        </button>
        <button id="show-upcoming" class="px-4 py-2 bg-green-500 text-white rounded" aria-pressed="false">
            Locations à venir
        </button>
        <button id="show-ongoing" class="px-4 py-2 bg-yellow-500 text-white rounded" aria-pressed="true">
            Locations en cours
        </button>
        <button id="show-past" class="px-4 py-2 bg-gray-500 text-white rounded" aria-pressed="false">
            Locations passées
        </button>
    </div>

    <div class="grid grid-cols-1 gap-6">
        {% set filters = {
            'all': { 'label': 'Toutes les locations' },
            'upcoming': { 'label': 'Locations à venir', 'condition': 'startDate > now' },
            'ongoing': { 'label': 'Locations en cours', 'condition': 'startDate <= now and endDate >= now' },
            'past': { 'label': 'Locations passées', 'condition': 'endDate < now' }
        } %}
        {% set now = "now"|date("Y-m-d") %}

        {% for key, filter in filters %}
            <section id="section-{{ key }}" class="{{ key != 'ongoing' ? 'hidden' : '' }}">
                <h2 class="text-xl font-semibold mb-4">{{ filter.label }}</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {% set filter_found = false %}
                    {% for rental in rentals %}
                        {% set startDate = rental.startDate|date("Y-m-d") %}
                        {% set endDate = rental.endDate|date("Y-m-d") %}
                        {% if (key == 'upcoming' and startDate > now) or
                               (key == 'ongoing' and startDate <= now and endDate >= now) or
                               (key == 'past' and endDate < now) or
                               (key == 'all') %}
                            {% set filter_found = true %}
                            <div class="border rounded-lg p-4 shadow-lg bg-white">
                                <h3 class="text-lg font-semibold mb-2">Location #{{ rental.id }}</h3>
                                <p><span class="font-bold">Début :</span> {{ rental.startDate|date('d/m/Y') }}</p>
                                <p><span class="font-bold">Fin :</span> {{ rental.endDate|date('d/m/Y') }}</p>
                                <p><span class="font-bold">Produit :</span>
                                    <a href="{{ path('app_product_show', {'id': rental.product.id}) }}" class="text-blue-500 hover:underline">
                                        {{ rental.product.name }}
                                    </a>
                                </p>
                                <div class="mt-4 flex justify-between">
                                    <a href="{{ path('app_rental_show', {'id': rental.id}) }}" class="text-blue-500 hover:underline">Consulter</a>
<a href="{{ path('app_rental_generate_pdf', {'id': rental.id}) }}" class="text-green-500 hover:underline">Générer une facture</a>
   <button>Rendre ma location</button>                             
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                    {% if not filter_found %}
                        <p class="text-gray-500 col-span-full">Aucune {{ filter.label|lower }} trouvée.</p>
                    {% endif %}
                </div>
            </section>
        {% endfor %}
    </div>

    {# Inclusion de jQuery #}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Fonction pour réinitialiser l'état des boutons
            function resetButtonStates() {
                $('#show-all, #show-upcoming, #show-ongoing, #show-past').attr('aria-pressed', 'false');
            }

            // Afficher les sections en fonction du filtre sélectionné
            function showSection(filter) {
                $('#section-upcoming').toggle(filter === 'upcoming' || filter === 'all');
                $('#section-ongoing').toggle(filter === 'ongoing' || filter === 'all');
                $('#section-past').toggle(filter === 'past' || filter === 'all');
                resetButtonStates();
                $(`#show-${filter}`).attr('aria-pressed', 'true');
            }

            // Événements des boutons
            $('#show-all').click(() => showSection('all'));
            $('#show-upcoming').click(() => showSection('upcoming'));
            $('#show-ongoing').click(() => showSection('ongoing'));
            $('#show-past').click(() => showSection('past'));

            // Afficher les locations en cours par défaut
            showSection('ongoing');
        });
    </script>
{% endblock %}