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

{% block body %}
<div class="w-full h-full flex flex-col">
    <div class="flex flex-row items-center w-full h-[7vh] p-3 border-b text-white bg-bungalow-yellow">
        <div class="flex flex-row w-full justify-between items-center">
            <a class="text-white text-lg">
                <i class="{{ icon.get('calendrier') }}" style="color: #FFFF;"></i>
                Calendrier des Réservations
            </a>
        </div>
    </div>

    <div class="w-full h-[93vh] flex flex-col px-5 py-2 overflow-hidden">
        <div class="w-full grid grid-cols-3 gap-4 h-[10vh] shrink-0">
            <div class="w-full p-3 mb-2 bg-gray-100 flex flex-row items-center rounded-xl border-4">
                <div class="flex justify-between w-full">
                    <input id="select-date" type="date" class="border w-full rounded-lg px-4 py-2 mr-2 text-sm" />
                    <button id="goto-date" class="bg-bungalow-blue text-white font-medium px-4 py-2 rounded-lg text-sm">Aller</button>
                </div>
            </div>
            <div class="col-span-2 p-3 mb-2 bg-gray-100 flex flex-row items-center justify-between rounded-xl border-4">
                <div class="flex col-span-2 w-1/3">
                    <select id="event-select" class="border w-full rounded-lg px-4 py-2 text-sm">
                        <option value="" hidden selected disabled>Evenement</option>
                        {% for event in events %}
                            <option value="{{ event.id }}">{{event.title}}</option>
                        {% endfor %}
                    </select>
                </div>
                <hr class="h-full w-0.5 mx-4 bg-gray-300">
                <div class="flex w-1/5">
                    <input type="number" id="capacity" min="1" max="{{max_capacity}}" class="border min-w-full rounded-lg px-4 py-2 text-sm" placeholder="Capacité" />
                </div>
                <hr class="h-full w-0.5 mx-4 bg-gray-300">
                <div class="flex justify-evenly w-1/3">
                    <button type="button" id="remove" class="mx-1 text-white bg-red-500 font-medium px-4 py-2 rounded-lg text-sm">
                        Supprimer
                    </button>
                    <button type="button" id="reload" class="mx-1 text-white bg-blue-700 font-medium px-4 py-2 rounded-lg text-sm">
                        <i class="{{ icon.get('reload') }}"></i>
                    </button>
                    <button id="search-button" class="mx-1 bg-bungalow-blue text-white font-medium px-4 py-2 rounded-lg text-sm">Rechercher</button>
                </div>
            </div>
        </div>
        <div class="w-full grid grid-cols-5 gap-4 py-2 mb-2 bg-gray-100 items-center rounded-xl border-4 flex-none">
            <h2 class="underline font-bold text-center">Légende</h2>
            <div class="flex items-center justify-center">
                <i class="{{ icon.get('lock') }} text-red-700"></i>
                <p class="ml-3">Inscriptions closes</p>
            </div>
            <div class="flex items-center justify-center">
                <div class="w-4 h-4 rounded-full bg-green-400"></div>
                <p class="ml-3">En ligne</p>
            </div>
            <div class="flex items-center justify-center">
                <div class="w-4 h-4 rounded-full bg-orange-400"></div>
                <p class="ml-3">En cours de réservation</p>
            </div>
            <div class="flex items-center justify-center">
                <div class="w-4 h-4 rounded-full bg-blue-400"></div>
                <p class="ml-3">Complet</p>
            </div>
        </div>
        <div id="calendar-wrapper" class="relative w-full flex-1 overflow-hidden">
            <div id="calendar-holder" class="p-4 rounded-xl w-full border-4 h-full overflow-y-auto"></div>
            <span id="calendar-loader" class="hidden absolute top-0 left-0 w-full h-full bg-white bg-opacity-70 z-50 flex items-center justify-center">
                <span class="calendar-loader"></span>
            </span>
        </div>
    </div>
</div>
{% endblock %}

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

{% block stylesheets %}
    <style>
        /* Style des événements externes */
        .fc-event {
            cursor: grab;
            padding: 5px;
            text-align: center;
        }

        .calendar-loader {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: inline-block;
            border-top: 4px solid #2D7979;
            border-right: 4px solid transparent;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
            position: relative;
        }

        .calendar-loader::after {
            content: '';
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border-bottom: 4px solid #E7B40E;
            border-left: 4px solid transparent;
        }

        @keyframes rotation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

    </style>
{% endblock %}