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

{% block body %}
<div class="flex flex-col w-full min-h-full max-h-[94vh] overflow-auto p-6">
    {% include "layouts/message_flash.html.twig" %}
    <div class="w-full flex flex-col">
        {% if not is_granted('ROLE_USER') %}
            <div class="w-full h-[70vh] flex flex-col items-center justify-center my-5">
                <h1 class="text-gray-600 text-center w-full text-5xl">Bienvenue sur BUNGALOW</h1>
                <p>Vous êtes connecté en tant que {{ app.user.presentation }}</p>
            </div>
        {% else %}
            <div class="w-full flex flex-col items-center my-5">
                <h1 class="text-gray-600 text-center w-full text-3xl">Bienvenue sur BUNGALOW</h1>
                <p class="text-bungalow-blue text-center text-xl">Totaux des hôtels : {{ hotelsWithSignature }} / {{totalHotels}}</h1>
            </div>
            <div id="maps" class="w-full">
                <div class="w-full flex flex-row">
                    <div class="w-1/2 m-5">
                        <div id="reunion" class="rounded-xl border-2 border-bungalow-yellow" style="height: 400px;"></div>
                        <input type="hidden" id="hotels_reunion" value="{{ reunion.hotels|json_encode }}">
                        <p class="text-center text-bungalow-blue">{{ reunion.numberOfHotelsWithSignature }} / {{ reunion.hotels|length }} hôtel(s) signé(s)</p>
                        <p class="text-center text-bungalow-blue">{{ reunion.hotels|length > 0 ? ((reunion.numberOfHotelsWithSignature / reunion.hotels|length) * 100)|round(2) : 0 }}%</p>
                    </div>
                    <div class="w-1/2 m-5">
                        <div id="martinique" class="rounded-xl border-2 border-bungalow-yellow" style="height: 400px;"></div>
                        <input type="hidden" id="hotels_martinique" value="{{ martinique.hotels|json_encode }}">
                        <p class="text-center text-bungalow-blue">{{ martinique.numberOfHotelsWithSignature }} / {{ martinique.hotels|length }} hôtel(s) signé(s)</p>
                        <p class="text-center text-bungalow-blue">{{ martinique.hotels|length > 0 ? ((martinique.numberOfHotelsWithSignature / martinique.hotels|length) * 100)|round(2) : 0 }}%</p>
                    </div>
                </div>
                <div class="w-full flex flex-row">
                    <div class="w-1/2 m-5">
                        <div id="guyane" class="rounded-xl border-2 border-bungalow-yellow" style="height: 400px;"></div>
                        <input type="hidden" id="hotels_guyane" value="{{ guyane.hotels|json_encode }}">
                        <p class="text-center text-bungalow-blue">{{ guyane.numberOfHotelsWithSignature }} / {{ guyane.hotels|length }} hôtel(s) signé(s)</p>
                        <p class="text-center text-bungalow-blue">{{ guyane.hotels|length > 0 ? ((guyane.numberOfHotelsWithSignature / guyane.hotels|length) * 100)|round(2) : 0 }}%</p>
                    </div>
                    <div class="w-1/2 m-5">
                        <div id="guadeloupe" class="rounded-xl border-2 border-bungalow-yellow" style="height: 400px;"></div>
                        <input type="hidden" id="hotels_guadeloupe" value="{{ guadeloupe.hotels|json_encode }}">
                        <p class="text-center text-bungalow-blue">{{ guadeloupe.numberOfHotelsWithSignature }} / {{ guadeloupe.hotels|length }} hôtel(s) signé(s)</p>
                        <p class="text-center text-bungalow-blue">{{ guadeloupe.hotels|length > 0 ? ((guadeloupe.numberOfHotelsWithSignature / guadeloupe.hotels|length) * 100)|round(2) : 0 }}%</p>
                    </div>
                </div>
                <div class="w-full flex flex-row justify-center">
                    <div class="w-1/2 m-5">
                        <div id="mayotte" class="rounded-xl border-2 border-bungalow-yellow" style="height: 400px;"></div>
                        <input type="hidden" id="hotels_mayotte" value="{{ mayotte.hotels|json_encode }}">
                        <p class="text-center text-bungalow-blue">{{ mayotte.numberOfHotelsWithSignature }} / {{ mayotte.hotels|length }} hôtel(s) signé(s)</p>
                        <p class="text-center text-bungalow-blue">{{ mayotte.hotels|length > 0 ? ((mayotte.numberOfHotelsWithSignature / mayotte.hotels|length) * 100)|round(2) : 0 }}%</p>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

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