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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/hotel/first_level/reception.scss') }}">
    <link rel="stylesheet" href="{{ asset('styles/hotel/modal.scss') }}">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ importmap('modal') }}
    {{ importmap('reception') }}
    {% if session.isInit %}
        {{ importmap('sectionCarousel') }}
    {% endif %}
{% endblock %}

{% block navbar_title %}{{ 'hotel.reception.title'|trans }}{% endblock %}

{% block navbar_backdoor %}
{% endblock %}

{% block hotel_music %}
    {% if session.isInit %}
        <audio id="bgmusic" loop>
            <source src="{{ asset('music/RECEPTION.mp3') }}" type="audio/mp3">
        </audio>
    {% endif %}
{% endblock %}

{% block content %}
    {#

        Rappel fonctions twig pour la session en court :
        has_exp_session() : bool
        session.id
        session.username ?? 'Not set'
        session.rooms|join(', ') ?: 'None'


        Propos de cette pièce :
        - accueil, point de départ
        - montre à quoi s'attendre pour la suite ?
        - reception... donne une chambre, selon le besoin... donner le besoin ? récup une clé ? nb de personnes, petit dej, quels symbols, quelles métaphores, quels messages ??
            -->> le propos, c'est... "tout est prêt pour vous", mettez vous à l'aise, tout le monde est bienvenu
            -->> en html/web, ça se traduit par : un form ? rentrer son nom (stocké) ?? animation avec clé random ?

        TODO
        - bosser des images dreamcore (sans but, juste pour comprendre la technique)
        - bosser technique de créa de gifs rapide
        - bosser quelques idées de js/css utilisables et déclinables un peu partout
        - faire des aquarelles et autres pour textures/murs/sols/objets

        OK- détourer bureau
        OK- form html nom au clic sur reception
            - modal au clic avec form
            -> controler handle form, système de session
            - puis affichage du nom après
        ok- système de flèches pour défiler les sections
        ok- mettre condition session.username != null dans une fct
        ok- test sans username, import carousel conditionnel !!
        ok- faire 2e section : porte vers couloir

        -> go couloir, chercher bonne DA et tout

        ok?- animations css/js (trouver quoi) et/ou gif
        - élément random
        - élément caché ? ou statue interactive
            -> 5 clicks sur la statue affiche un bout du texte de parménides
        - si le temps, faire un mobilier en bois derrière la cabine, avec des plantes dessus

        - retravailler background : plus symétrique et centré
            + version mobile si motiv

        - lecture musique et bouton !

        PLUS_TARD- 3e : porte vers restaurant
    #}
    <div class="hotel-reception">
        <div class="floor-room-grid">
            {#{% if session.isInit %}
                <div class="wave-text">{{ 'hotel.reception.wave_title'|trans }}</div>
            {% endif %}#}

            <div class="room-content" data-carousel>
                <section class="booth-section">
                    <div class="pos-bottom-center booth">
                        {% if session.isInit == false %}
                            <button class="booth-button main-btn" data-modal="reception-modal" data-modal-content-id="reception-modal-content">
                                {{ 'hotel.reception.action'|trans }}
                            </button>
                        {% else %}
                            <div class="wave-text booth-name main-btn">{{ 'hotel.reception.welcome'|trans }} {{ session.username }}, {{ 'hotel.reception.welcome2'|trans }}</div>
                        {% endif %}
                    </div>
                </section>
                {% if session.isInit %}
                    <section class="corridor-section">
                        <div class="pos-bottom-center corridor">
                            <a href="{{ path('hotel_corridor') }}" class="door-link">
                                <img src="{{ asset('images/hotel/floor1/reception/door1.png') }}" alt="">
                            </a>
                        </div>
                    </section>

                    {#<section class="restaurant-section">
                        <div class="pos-bottom-center restaurant">
                            <a href="{{ path('hotel_restaurant') }}" class="door-link">
                                <img src="{{ asset('images/hotel/floor1/reception/door2.png') }}" alt="">
                            </a>
                        </div>
                    </section>#}

                    {#<section class="corridor-section">
                        <div class="pos-bottom-center corridor">
                            <a href="" class="door-link">
                                <img src="{{ asset('images/hotel/floor1/reception/door1.png') }}" alt="">
                            </a>
                        </div>
                    </section>#}

                    <div class="carousel-buttons">
                        <button class="carousel-arrow carousel-prev" type="button" aria-label="Previous">&#10094;</button>
                        <button class="carousel-arrow carousel-next" type="button" aria-label="Next">&#10095;</button>
                    </div>
                {% endif %}
            </div>
            <div class="floor">{{ 'hotel.reception.easteregg'|trans }}</div>
        </div>
    </div>
{% endblock %}

{% block modal %}
    {% if session.isInit == false %}
        <div id="reception-modal-content" style="display: none;">
            <div class="modal-title">{{ 'hotel.reception.action'|trans }}</div>
            {#<div class="modal-subtitle">{{ 'hotel.reception.welcome_message'|trans }}</div>#}
            <form class="reception-form" action="{{ path('hotel_reception_form') }}" method="post">
                <div class="form-group">
                    <label for="guest-name">{{ 'hotel.reception.name_label'|trans }}</label>
                    <input type="text" id="guest-name" name="guest_name" placeholder="{{ 'hotel.reception.name_placeholder'|trans }}" required>
                </div>
                {#<div class="form-group">
                    <label for="guest-count">{{ 'hotel.reception.guests_label'|trans }}</label>
                    <select id="guest-count" name="guest_count">
                        <option value="1">1 {{ 'hotel.reception.guest'|trans }}</option>
                        <option value="2">2 {{ 'hotel.reception.guests'|trans }}</option>
                        <option value="3">3 {{ 'hotel.reception.guests'|trans }}</option>
                        <option value="4">4 {{ 'hotel.reception.guests'|trans }}</option>
                    </select>
                </div>
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="breakfast" value="1">
                        {{ 'hotel.reception.breakfast_option'|trans }}
                    </label>
                </div>#}
                <div class="modal-actions">
                    <button type="button" class="btn main-btn" onclick="window.modalManager.closeModal()">{{ 'hotel.modal.cancel'|trans }}</button>
                    <button type="submit" class="btn main-btn">{{ 'hotel.reception.check_in'|trans }}</button>
                </div>
            </form>
        </div>
    {% endif %}
{% endblock %}