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

{% block head %}
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Index FestinHegre!{% endblock %}</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
    <link href="https://fonts.cdnfonts.com/css/brittany-signature" rel="stylesheet">
</head>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/index.css') }}"> <!-- Ajout du fichier CSS -->
    <link rel="stylesheet" href="{{ asset('css/GestionUser.css') }}"> <!-- Ajout du fichier CSS -->
{% endblock %}

{% block body %}
    <style>
    </style>

    <!-- Top Bar -->
    <div class="top-bar">
        <div>
            Bonjour, {{ app.user.prenom }}
        </div>
        <div class="user-role">
            Rôle : {{ app.user.getRolesAsString() }}
        </div>
    </div>

    <!-- Left Menu -->
    <div class="left-background">
        <img class="LogoHegre" src="{{ asset('asset/image/LogoHegre.png') }}">

        <div class="nav-bar">
            <ul>
                <li>
                    <div class="btn-custom icon-container">
                        <i class="icon-medium"> {{ ux_icon('grommet-icons:group') }}</i>
                        <span data-modal="userModal">Gérer Utilisateur</span>
                    </div>
                </li>
                <li>
                    <div class="btn-custom icon-container">
                        <i class="icon-medium"> {{ ux_icon('ic:outline-table-bar') }}</i>
                        <span data-modal="tableModal">Gérer Table</span>
                    </div>
                </li>
                <li>
                    <div class="btn-custom icon-container">
                        <i class="icon-medium"> {{ ux_icon('bx:food-menu') }}</i>
                        <span>Gestion Menu</span>
                    </div>
                </li>
                <li>
                    <div class="btn-custom icon-container">
                        <i class="icon-medium"> {{ ux_icon('lsicon:badge-promotion-outline') }}</i>
                        <span>Gestion Promotion</span>
                    </div>
                </li>
                <li>
                    <div class="btn-custom icon-container">
                        <i class="icon-medium"> {{ ux_icon('fluent-emoji-high-contrast:ten-oclock') }}</i>
                        <span>Voir tendances</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="Information-perso">
            <div class="btn-info-compte icon-container">
                <i class="icon-medium"> {{ ux_icon('ph:user-circle-fill') }}</i>
                <span>Compte</span>
            </div>
            <div class="btn-info-exit icon-container">
                <a href="{{ path('app_logout') }}" class="icon-medium">
                    {{ ux_icon('iconamoon:exit-bold') }}
                </a>
            </div>
        </div>
    </div>

    <div id="container_gestion_user">
        <!-- Contenu par défaut, ou vous pouvez laisser vide -->
    </div>

    <script>
        document.querySelector('.btn-info-Compte').addEventListener('click', function(event) {
            event.preventDefault();

            const contentContainer = document.getElementById('container-gestion-user');

            // Vérifie si le contenu est déjà affiché
            if (container_gestion_user.style.display === 'block') {
                // Masquer la section "Compte" si elle est déjà affichée
                container_gestion_user.style.display = 'none';
                container_gestion_user.innerHTML = ''; // On efface le contenu pour éviter la réutilisation
            } else {
                // Afficher le conteneur et charger le contenu via AJAX
                fetch('/gestion-user')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Erreur de chargement de la section Compte');
                        }
                        return response.text();
                    })
                    .then(html => {
                        // Insérer le HTML dans le conteneur et l'afficher
                        container_gestion_user.innerHTML = html;
                        container_gestion_user.style.display = 'block';
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                    });
            }
        });
    </script>

    <!-- Include modals -->
    {% include 'Modals/gestionUtilisateurModal.html.twig' %}
    {% include 'Modals/gestionTableModal.html.twig' %}
    {% include 'Modals/gestionCompteModal.html.twig' %}
    {% include 'Modals/gestionUtilisateurModal.html.twig' %}

{% endblock %}

{%  block javascripts %}
    <script src="{{ asset('js/modal.js') }}"></script> <!-- Ajout du fichier JS -->
{% endblock %}
