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

{% block title %}{% block page_title %}Administration{% endblock %} - NUM-ECARD{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/_variables.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/_account.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/_mobile_nav.css') }}">
    <style>
        @media (max-width: 768px) {
            .navbar { display: none !important; }
            body { padding-top: 0 !important; }
            .account-header-mobile {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 14px 16px 10px;
                background: rgba(255,255,255,0.95);
                backdrop-filter: saturate(180%) blur(20px);
                -webkit-backdrop-filter: saturate(180%) blur(20px);
                border-bottom: 1px solid rgba(0,0,0,0.06);
                position: sticky;
                top: 0;
                z-index: 100;
            }
            .account-header-mobile__logo {
                font-size: 16px;
                font-weight: 700;
                background: linear-gradient(135deg, #e74c3c, #c0392b);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                flex: 1;
                text-align: center;
            }
            .account-header-mobile__user {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: linear-gradient(135deg, #e74c3c, #c0392b);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 12px;
                font-weight: 700;
                text-decoration: none;
                flex-shrink: 0;
            }
            .account-header-mobile__home {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 8px;
                background: #f5f5f7;
                text-decoration: none;
                flex-shrink: 0;
            }
            .account-header-mobile__home img {
                width: 22px;
                height: 22px;
                object-fit: contain;
            }
            /* Couleur admin = rouge */
            .bottom-nav__item.active { color: #e74c3c !important; }
            .bottom-nav__item.active::before,
            .bottom-nav__item--more.open::before {
                background: rgba(231, 76, 60, 0.1) !important;
            }
            .bottom-nav__item:hover { color: #e74c3c !important; }
            .bottom-nav__item--more.open { color: #e74c3c !important; }
        }
        @media (min-width: 769px) {
            .account-header-mobile { display: none !important; }
        }
    </style>
{% endblock %}

{% block body %}

{# ── HEADER MOBILE ADMIN ── #}
<header class="account-header-mobile">
    <a href="{{ path('app_home') }}" class="account-header-mobile__home" title="Retour au site">
        <img src="{{ asset('favicon2.png') }}" alt="logo">
    </a>
    <div class="account-header-mobile__logo">⚙️ ADMIN — NUM-ECARD</div>
    <a href="{{ path('app_account_profil') }}" class="account-header-mobile__user" title="Mon profil">
        {{ app.user ? (app.user.initiales ?? '?') : '?' }}
    </a>
</header>

<div class="account-layout">
    <!-- SIDEBAR (desktop) -->
    <aside class="sidebar">
        <div class="sidebar-section">
            <div class="sidebar-title">Mon compte</div>
            <ul class="sidebar-menu">
                <li>
                    <a href="{{ path('app_account_dashboard') }}"
                        class="{{ app.request.attributes.get('_route') == 'app_account_dashboard' ? 'active' : '' }}">
                        <span class="icon">🏠</span>
                        Tableau de bord
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_account_commandes') }}"
                        class="{{ app.request.attributes.get('_route') starts with 'app_account_commande' ? 'active' : '' }}">
                        <span class="icon">📦</span>
                        Mes commandes
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_account_recommendations') }}"
                        class="{{ app.request.attributes.get('_route') == 'app_account_recommendations' ? 'active' : '' }}">
                        <span class="icon">🤝</span>
                        Mes recommandations
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_account_profil') }}"
                        class="{{ app.request.attributes.get('_route') == 'app_account_profil' ? 'active' : '' }}">
                        <span class="icon">👤</span>
                        Mon profil
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_account_password') }}"
                        class="{{ app.request.attributes.get('_route') == 'app_account_password' ? 'active' : '' }}">
                        <span class="icon">🔒</span>
                        Mot de passe
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_logout') }}">
                        <span class="icon">🔐</span>
                        Déconnexion
                    </a>
                </li>
            </ul>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-title">Administration</div>
            <ul class="sidebar-menu">
                <li>
                    <a href="{{ path('app_admin_dashboard') }}"
                        class="{{ app.request.attributes.get('_route') == 'app_admin_dashboard' ? 'active' : '' }}">
                        <span class="icon">📊</span>
                        Dashboard Admin
                        <span class="admin-badge">ADMIN</span>
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_admin_commandes') }}"
                        class="{{ app.request.attributes.get('_route') starts with 'app_admin_commande' ? 'active' : '' }}">
                        <span class="icon">📋</span>
                        Toutes les commandes
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_admin_recommendations') }}"
                        class="{{ app.request.attributes.get('_route') starts with 'app_admin_recommendation' ? 'active' : '' }}">
                        <span class="icon">🤝</span>
                        Recommandations
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_admin_users') }}"
                        class="{{ app.request.attributes.get('_route') starts with 'app_admin_user' ? 'active' : '' }}">
                        <span class="icon">👥</span>
                        Utilisateurs
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_admin_hebergement_index') }}"
                        class="{{ app.request.attributes.get('_route') starts with 'app_admin_hebergement' ? 'active' : '' }}">
                        <span class="icon">📡</span>
                        Hébergements
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_admin_actu_index') }}"
                        class="{{ app.request.attributes.get('_route') starts with 'app_admin_actu' ? 'active' : '' }}">
                        <span class="icon">📣</span>
                        Mon Actu
                    </a>
                </li>
            </ul>
        </div>
    </aside>

    <!-- CONTENU PRINCIPAL -->
    <main class="main-content">
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ label == 'success' ? 'success' : (label == 'error' ? 'error' : 'warning') }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}

        {% block content %}{% endblock %}
    </main>
</div>

{# ── OVERLAY fond sombre ── #}
<div class="bottom-nav-more-overlay" id="moreOverlay"></div>

{# ── PANNEAU "Plus" ADMIN ── #}
{% set current_route = app.request.attributes.get('_route') %}
<div class="bottom-nav-more-panel" id="morePanel">
    <div class="bottom-nav-more-panel__handle"></div>

    <div class="bottom-nav-more-panel__title">Administration</div>
    <a href="{{ path('app_admin_recommendations') }}" class="bottom-nav-more-panel__item {{ current_route starts with 'app_admin_recommendation' ? 'active' : '' }}">
        <span class="bottom-nav-more-panel__icon">🤝</span>
        Recommandations
    </a>
    <a href="{{ path('app_admin_hebergement_index') }}" class="bottom-nav-more-panel__item {{ current_route starts with 'app_admin_hebergement' ? 'active' : '' }}">
        <span class="bottom-nav-more-panel__icon">📡</span>
        Hébergements
    </a>
    <a href="{{ path('app_admin_actu_index') }}" class="bottom-nav-more-panel__item {{ current_route starts with 'app_admin_actu' ? 'active' : '' }}">
        <span class="bottom-nav-more-panel__icon">📣</span>
        Mon Actu
    </a>

    <div class="bottom-nav-more-panel__title" style="margin-top: 8px; border-top: 1px solid #f5f5f5; padding-top: 12px;">Mon compte</div>
    <a href="{{ path('app_account_dashboard') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🏠</span>
        Espace client
    </a>
    <a href="{{ path('app_account_profil') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">👤</span>
        Mon profil
    </a>
    <a href="{{ path('app_account_password') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🔒</span>
        Mot de passe
    </a>
    <a href="{{ path('app_logout') }}" class="bottom-nav-more-panel__item bottom-nav-more-panel__item--danger">
        <span class="bottom-nav-more-panel__icon">🔐</span>
        Déconnexion
    </a>
</div>

{# ── BOTTOM NAVIGATION BAR ADMIN ── #}
<nav class="bottom-nav" aria-label="Navigation admin">

    <a href="{{ path('app_home') }}"
       class="bottom-nav__item"
       title="Accueil">
        <span class="bottom-nav__icon">🏠</span>
        <span class="bottom-nav__label">Accueil</span>
    </a>

    <a href="{{ path('app_admin_dashboard') }}"
       class="bottom-nav__item {{ current_route == 'app_admin_dashboard' ? 'active' : '' }}"
       title="Dashboard Admin">
        <span class="bottom-nav__icon">📊</span>
        <span class="bottom-nav__label">Dashboard</span>
    </a>

    <a href="{{ path('app_admin_commandes') }}"
       class="bottom-nav__item {{ current_route starts with 'app_admin_commande' ? 'active' : '' }}"
       title="Commandes">
        <span class="bottom-nav__icon">📋</span>
        <span class="bottom-nav__label">Commandes</span>
    </a>

    <a href="{{ path('app_admin_users') }}"
       class="bottom-nav__item {{ current_route starts with 'app_admin_user' ? 'active' : '' }}"
       title="Utilisateurs">
        <span class="bottom-nav__icon">👥</span>
        <span class="bottom-nav__label">Utilisateurs</span>
    </a>

    <button class="bottom-nav__item bottom-nav__item--more" id="moreBtn" title="Plus">
        <span class="bottom-nav__icon">⋯</span>
        <span class="bottom-nav__label">Plus</span>
    </button>

</nav>

<script>
(function() {
    var btn     = document.getElementById('moreBtn');
    var panel   = document.getElementById('morePanel');
    var overlay = document.getElementById('moreOverlay');

    function openMore() {
        panel.classList.add('open');
        overlay.classList.add('open');
        btn.classList.add('open');
    }

    function closeMore() {
        panel.classList.remove('open');
        overlay.classList.remove('open');
        btn.classList.remove('open');
    }

    btn.addEventListener('click', function() {
        panel.classList.contains('open') ? closeMore() : openMore();
    });

    overlay.addEventListener('click', closeMore);
})();
</script>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% block admin_javascripts %}{% endblock %}
{% endblock %}