{# templates/admin/base_admin.html.twig
   ─────────────────────────────────────────────────────────────────────────────
   Squelette partagé par toutes les pages d'administration NUM-ECARD.
   ─────────────────────────────────────────────────────────────────────────────
#}

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

{% block title %}{% block page_title %}Administration{% endblock %} - NUM-ECARD Admin{% 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, #ef4444, #dc2626);
                -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, #ef4444, #dc2626);
                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;
            }
        }
        @media (min-width: 769px) {
            .account-header-mobile { display: none !important; }
        }
    </style>
{% endblock %}

{% block body %}

{# ── HEADER MOBILE ── #}
<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</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">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
                        <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>
                        Commandes
                    </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('admin_vendeur_index') }}"
                       class="{{ app.request.attributes.get('_route') starts with 'admin_vendeur' ? 'active' : '' }}">
                        <span class="icon">🤝</span>
                        Vendeurs
                    </a>
                </li>
                <li>
                    <a href="{{ path('admin_code_promo_index') }}"
                       class="{{ app.request.attributes.get('_route') starts with 'admin_code_promo' ? 'active' : '' }}">
                        <span class="icon">🏷️</span>
                        Codes promo
                    </a>
                </li>
                <li>
                    <a href="{{ path('admin_vendeur_taux_index') }}"
                       class="{{ app.request.attributes.get('_route') == 'admin_vendeur_taux_index' ? 'active' : '' }}">
                        <span class="icon">💹</span>
                        Taux de commission
                    </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_actu_index') }}"
                       class="{{ app.request.attributes.get('_route') starts with 'app_admin_actu' ? 'active' : '' }}">
                        <span class="icon">📣</span>
                        Mon Actu
                    </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ébergement
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_admin_logs') }}"
                       class="{{ app.request.attributes.get('_route') starts with 'app_admin_logs' ? 'active' : '' }}">
                        <span class="icon">🔍</span>
                        Logs RGPD
                    </a>
                </li>
                 <li>
                    <a href="{{ path('admin_audit_index') }}"
                       class="{{ app.request.attributes.get('_route') starts with 'admin_audit' ? 'active' : '' }}">
                        <span class="icon">🛡️</span>
                        Audit Logs RGPD
                    </a>
                </li>
                <li>
                    <a href="{{ path('admin_consent_index') }}"
                       class="{{ app.request.attributes.get('_route') starts with 'admin_consent' ? 'active' : '' }}">
                        <span class="icon">🔏</span>
                        Consentements RGPD
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_admin_deletion_logs') }}"
                       class="{{ app.request.attributes.get('_route') starts with 'app_admin_deletion' ? 'active' : '' }}">
                        <span class="icon">🗑️</span>
                        Suppressions RGPD
                    </a>
                </li>
            </ul>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-title">Mon compte</div>
            <ul class="sidebar-menu">
                <li>
                    <a href="{{ path('app_account_dashboard') }}">
                        <span class="icon">🏠</span>
                        Espace client
                    </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_logout') }}">
                        <span class="icon">🔐</span>
                        Déconnexion
                    </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" ── #}
<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_commandes') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">📦</span>
        Commandes
    </a>
    <a href="{{ path('app_admin_users') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">👥</span>
        Utilisateurs
    </a>
    <a href="{{ path('admin_vendeur_index') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🤝</span>
        Vendeurs
    </a>
    <a href="{{ path('admin_code_promo_index') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🏷️</span>
        Codes promo
    </a>
    <a href="{{ path('admin_vendeur_taux_index') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">💹</span>
        Taux de commission
    </a>
    <a href="{{ path('app_admin_actu_index') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">📣</span>
        Mon Actu
    </a>
    <a href="{{ path('app_admin_hebergement_index') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">📡</span>
        Hébergement
    </a>
    <a href="{{ path('app_admin_recommendations') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🤝</span>
        Recommandations
    </a>
    <a href="{{ path('app_admin_logs') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🔍</span>
        Logs RGPD
    </a>
    <a href="{{ path('admin_consent_index') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🔏</span>
        Consentements RGPD
    </a>
    <a href="{{ path('app_admin_deletion_logs') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🗑️</span>
        Suppressions RGPD
    </a>

    {# ── Liste des cartes de l'admin connecté ── #}
    {% for commande in app.user.commandes %}
        {% if commande.isPaid %}
            {% for beneficiaire in commande.beneficiaires %}
                <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}"
                   class="bottom-nav-more-panel__item">
                    <span class="bottom-nav-more-panel__icon">💳</span>
                    <span>
                        {{ beneficiaire.prenom }} {{ beneficiaire.nom }}
                        <span style="font-size:10px;color:#86868b;display:block;">{{ commande.packType|capitalize }}</span>
                    </span>
                </a>
            {% endfor %}
        {% endif %}
    {% endfor %}

    <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_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 (mobile) ── #}
{% set current_route = app.request.attributes.get('_route') %}
<nav class="bottom-nav" aria-label="Navigation admin">

    <a href="{{ path('app_home') }}"
       class="bottom-nav__item"
       title="Accueil site">
        <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>

    {# Utilisateur à la place du bouton Partager (pas de QR en admin) #}
    <a href="{{ path('app_account_profil') }}"
       class="bottom-nav__item"
       title="Mon profil"
       style="color:#1d1d1f;">
        <span class="bottom-nav__icon" style="display:flex;align-items:center;justify-content:center;">
            <span style="width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#dc2626);color:white;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;">
                {{ app.user ? (app.user.initiales ?? '?') : '?' }}
            </span>
        </span>
        <span class="bottom-nav__label">{{ app.user ? (app.user.prenom ?? 'Admin') : 'Admin' }}</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 moreBtn   = document.getElementById('moreBtn');
    var morePanel = document.getElementById('morePanel');
    var overlay   = document.getElementById('moreOverlay');

    function closeAll() {
        morePanel.classList.remove('open');
        overlay.classList.remove('open');
        moreBtn.classList.remove('open');
    }

    moreBtn.addEventListener('click', function() {
        morePanel.classList.contains('open') ? closeAll() : (function() {
            closeAll();
            morePanel.classList.add('open');
            overlay.classList.add('open');
            moreBtn.classList.add('open');
        })();
    });

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

{% endblock %}