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

{% block body %}
<div class="w-full flex flex-col min-h-full overflow-y-auto">
    <div class="flex flex-row w-full p-3 border-b items-center justify-between text-white bg-bungalow-yellow">
        <span class="text-white text-lg">
            <i class="{{ icon.get('layer-group') }}" style="color: #FFFF;"></i>
            Groupes
        </span>
        <div class="w-fit text-right text-sm">
            <button class="bg-bungalow-blue mx-2 p-2 px-4 rounded-full" data-modal-target="create_groupe"><i class="{{ icon.get('plus') }}" ></i> Ajouter</button>
        </div>
    </div>

    <div class="mx-2">
        {% include "./layouts/message_flash.html.twig" %}
    </div>

    {% if groupes|length == 0 %}
        <div class="min-h-[80vh] w-full items-center flex flex-col justify-evenly">
            <p class="text-gray-600 text-center text-5xl">Aucun Groupes</p>
        </div>
    {% else %}
    <div class="p-4 max-h-[80vh] min-h-[80vh] overflow-y-auto">
        <div id="datatable" class="shadow-xl rounded-lg">
            <table class="w-full text-md text-left rtl:text-right text-gray-500">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-2 py-3 border-r">Nom</th>
                        <th scope="col" class="px-2 py-3 border-r">Departement(s)</th>
                        <th scope="col" class="px-2 py-3 border-r">Hôtels signés</th>
                        <th scope="col" class="px-2 py-3 border-r">Hôtels prospection</th>
                        <th scope="col" class="px-2 py-3">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for groupe in groupes %}
                    <tr class="odd:bg-white even:bg-gray-100 border-b">
                        <th scope="row" class="px-2 py-4 font-medium text-gray-900 whitespace-nowrap border-r text-wrap">{{ groupe.nom }}</th>
                        <td class="px-2 py-4 border-r text-wrap text-center">
                            {% if groupe.getDepartementsHotels()|length > 0 %}
                                {% for item in groupe.getDepartementsHotels() %}
                                    <p>{{ item }}</p>
                                {% endfor %}
                            {% else %}
                                <p>---<p>
                            {% endif %}
                        </td>
                        <td class="px-2 py-4 border-r text-wrap text-center">
                            {% if groupe.getHotels(true)|length > 0 %}
                                {% for item in groupe.getHotels(true) %}
                                    <p>{{ item.nom }}</p>
                                {% endfor %}
                            {% else %}
                                <p>---<p>
                            {% endif %}
                        </td>
                        <td class="px-2 py-4 border-r text-wrap text-center">
                            {% if groupe.getHotels(false)|length > 0 %}
                                {% for item in groupe.getHotels(false) %}
                                    <p>{{ item.nom }}</p>
                                {% endfor %}
                            {% else %}
                                <p>---<p>
                            {% endif %}
                        </td>
                        <td class="px-2 py-4 text-center">
                            {# <a href="{{ path('vue_hotel', {id: hotel.id}) }}" class="bg-green-500 text-white font-medium p-2 rounded hover:bg-green-700 inline-flex items-center"> #}
                            <a href="{{ path('groupe_index', {id: groupe.id}) }}" class="bg-green-500 text-white font-medium p-2 rounded hover:bg-green-700 inline-flex items-center">
                                <i class="{{ icon.get('eye') }}"></i>
                            </a>
                            <a class="bg-blue-500 text-white font-medium p-2 rounded hover:bg-blue-700 inline-flex items-center edit" data-modal-target="edit_groupe" data-groupe="{{groupe.toArray()|json_encode}}">
                                <i class="{{ icon.get('pen') }}"></i>
                            </a>
                            <a href="{{ path('groupe_delete', {id: groupe.id}) }}" class="bg-red-500 text-white font-medium p-2 rounded hover:bg-red-700 inline-flex items-center delete-btn" data-id="{{ groupe.id }}">
                                <i class="{{ icon.get('trash') }}"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block modals %}
    {% include "./index/groupes_modals/create.html.twig" %}
    {% include "./index/groupes_modals/edit.html.twig" %}
{% endblock %}

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