{# templates/layouts/admin_layout.html.twig #}
{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    {# 1. Fichiers CSS spécifiques à l'Admin #}
    <link href="{{ asset('assets/css/theme-entreprise.min.css') }}" type="text/css" rel="stylesheet" />
    <link href="{{ asset('assets/css/theme-entreprise-main.css') }}" type="text/css" rel="stylesheet" />

    <style>
        :root {
           
            --sidebar-bg: #1e293b;
            --luxim-primary: #0d6efd; /* Couleur personnalisable par interface */
        }

        body { 
            font-family: 'Manrope', sans-serif; 
            background-color: #f4f7f6; 
            margin: 0;
        }

        /* Styles du Loader spécifique à l'Admin */
        #global-loader {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(40, 39, 39, 0.3);
            z-index: 9999; 
            display: none; /* Caché par défaut */
            justify-content: center; align-items: center; flex-direction: column;
            transition: opacity 0.3s ease;
            
        }
        
        /* Conteneur de l'image GIF */
        .loader-img {
            width: 40px; /* À ajuster selon votre GIF */
            height: auto;
            margin-bottom: 15px;
        }

        /* Structure de mise en page Admin */
        .app-wrapper { display: flex; min-height: 100vh; }
        .sidebar-professional { width: 280px; background: var(--sidebar-bg); flex-shrink: 0; }
        .main-content { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
    </style>
{% endblock %}

{% block body %}
    <div id="global-loader">
        <div class="loader-content text-center">
            <img src="{{ asset('images/loader.gif') }}" alt="Chargement..." class="loader-img">
            <p class="" style="color: var(--sidebar-bg); letter-spacing: 1px;font-size:8px;font-transform:italic">Patientez...</p>
        </div>
    </div>

    <div class="app-wrapper">
        <aside class="sidebar-professional d-none d-lg-block">
            {% include '_sidebar.html.twig' %}
        </aside>

        <div class="main-content">
            {% include '_header.html.twig' %}

            <main class="flex-grow-1">
                {% include 'breadcrumb.html.twig' %}
                <div class="container-fluid " style="padding:0 20px">
                    

                    {# Messages Flash #}
                    {% for label, messages in app.flashes %}
                        {% for message in messages %}
                            <div class="alert alert-{{ label }} alert-dismissible fade show shadow-sm border-0 mb-4">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endfor %}

                    {# Contenu de la page #}
                    {% block content %}{% endblock %}
                </div>
            </main>

            {% include '_footer.html.twig' %}
        </div>
    </div>

    <div class="offcanvas offcanvas-start bg-dark text-white" tabindex="-1" id="sidebarOffcanvas">
        <div class="offcanvas-body p-0">
            {% include '_sidebar.html.twig' %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loader = document.getElementById('global-loader');

            // 1. Cacher le loader quand la page est totalement chargée
            if(loader) {
                loader.style.opacity = '0';
                setTimeout(() => { 
                    loader.style.display = 'none'; 
                }, 300);
            }

            // 2. Déclencher le loader sur les éléments spécifiques
            // On cible les liens <a> et boutons <button> ayant la classe 'show-loader'
            const triggerElements = document.querySelectorAll('.show-loader, form[data-loader]');

            triggerElements.forEach(element => {
                element.addEventListener('click', function(e) {
                    // On vérifie que ce n'est pas un clic droit ou une touche spéciale
                    if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey) return;

                    if(loader) {
                        loader.style.display = 'flex';
                        loader.style.opacity = '1';
                    }
                });
            });

            // 3. Cas particulier : Soumission de formulaire
            // Si vous voulez l'afficher au clic sur "Enregistrer"
            document.querySelectorAll('form').forEach(form => {
                form.addEventListener('submit', function() {
                    if(loader) {
                        loader.style.display = 'flex';
                        loader.style.opacity = '1';
                    }
                });
            });
        });
    </script>
{% endblock %}