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

{% block body %}
<div class="w-full flex flex-col h-full overflow-y-auto">
    <div class="flex flex-row items-center w-full p-3 border-b text-white bg-bungalow-yellow">
        <span class="text-white text-lg w-full">
            <i class="{{ icon.get('database') }}" style="color: #FFFF;"></i>
            Mes réservations
        </span>
    </div>
    <div class="p-2">
        {% include "./layouts/message_flash.html.twig" %}
    </div>

    {% if reservations['resa_be_today']|length == 0 and reservations['resa_af_today']|length == 0 %}
        <div class="max-h-[80vh] min-h-[50vh] w-full items-center flex flex-col justify-center">
            <p class="text-gray-600 text-center text-5xl">Aucune réservations</p>
        </div>
    {% else %}
    <div class="p-4 max-h-[80vh] min-h-[50vh] overflow-y-auto">
        <div class="flex items-center justify-between bg-bungalow-blue text-white p-4 border-b-2 rounded-t-md">
            <div class="flex flex-row w-full justify-between items-center cursor-pointer" data-dropdown-toggle="reservation_af">
                <h2 class="text-xl font-semibold">
                    <i class="{{ icon.get('calendrier') }}"></i> Mes prochaines réservations
                </h2>
                <i class="fas fa-chevron-up dropdown-icon"></i>
            </div>
        </div>

        <div id="reservation_af" class="p-4 w-full border-b rounded-lg shadow-md ">
            <div id="datatable" class="rounded-lg">
                <table id="reservation_af" class="min-w-full bg-white border border-gray-300 shadow-lg rounded-lg">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Hotel</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Session</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Participant</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for plageGroup in reservations['resa_af_today'] %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ plageGroup.hotel.getNom() }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ plageGroup.evenement.getTitle() }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">
                                        {{ plageGroup.plage.getStartAt()|date("d/m/Y") }}<br>
                                        {{ plageGroup.plage.getStartAt()|date("H:i") }} - {{ plageGroup.plage.getEndAt()|date("H:i") }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">
                                        {% for r in plageGroup.reservations %}
                                            {{ r.getPrenom }} {{ r.getNom }}<br>
                                        {% endfor %}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    {% if (plageGroup.plage.bloque == false) %}
                                        <a href="{{ path('app_evenement_plage_reservation_edit', {'plage_id': plageGroup.plage.id }) }}" class="text-indigo-600 hover:text-indigo-900">
                                            <i class="{{ icon.get('pen') }}"></i>
                                        </a>
                                    {% else %}
                                        <div class="text-red-600">
                                            <i class="{{ icon.get('lock') }}"></i>
                                        </div>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="flex items-center justify-between bg-bungalow-blue text-white p-4 mt-4 border-b-2 rounded-t-md">
            <div class="flex flex-row w-full justify-between items-center cursor-pointer" data-dropdown-toggle="reservation_be">
                <h2 class="text-xl font-semibold">
                    <i class="{{ icon.get('calendrier') }}"></i> Mes anciennes réservations
                </h2>
                <i class="fas fa-chevron-up dropdown-icon"></i>
            </div>
        </div>

        <div id="reservation_be" class="p-4 w-full border-b rounded-lg shadow-md ">
            <div id="datatable" class="rounded-lg">
                <table id="reservation_be" class="min-w-full bg-white border border-gray-300 shadow-lg rounded-lg">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Hotel</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Session</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Participants</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for plageGroup in reservations['resa_be_today'] %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ plageGroup.hotel.getNom() }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ plageGroup.evenement.getTitle() }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">
                                        {{ plageGroup.plage.getStartAt()|date("d/m/Y") }}<br>
                                        {{ plageGroup.plage.getStartAt()|date("H:i") }} - {{ plageGroup.plage.getEndAt()|date("H:i") }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">
                                        {% for r in plageGroup.reservations %}
                                            {{ r.getPrenom }} {{ r.getNom }}<br>
                                        {% endfor %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('referents_reservation') }}
{% endblock %}