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

{% block title %}{% block page_title %}Mon compte{% 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, #667eea, #764ba2);
                -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, #667eea, #764ba2);
                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">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_recommendations') }}"
                        class="{{ app.request.attributes.get('_route') == 'app_account_recommendations' ? 'active' : '' }}">
                        <span class="icon">🤝</span>
                        Mes recommandations
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_hebergement_list') }}"
                        class="{{ app.request.attributes.get('_route') starts with 'app_hebergement' ? 'active' : '' }}">
                        <span class="icon">📡</span>
                        Abonnements
                    </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_change_password') }}"
                        class="{{ app.request.attributes.get('_route') == 'app_account_change_password' ? 'active' : '' }}">
                        <span class="icon">🔒</span>
                        Mot de passe
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_account_mes_donnees') }}"
                        class="{{ (
                            app.request.attributes.get('_route') == 'app_account_mes_donnees' or
                            app.request.attributes.get('_route') == 'app_account_preferences_page' or
                            app.request.attributes.get('_route') == 'app_account_data_export' or
                            app.request.attributes.get('_route') starts with 'rgpd_'
                        ) ? 'active' : '' }}">
                        <span class="icon">🛡️</span>
                        Mes données personnelles
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_logout') }}">
                        <span class="icon">🔐</span>
                        Déconnexion
                    </a>
                </li>
            </ul>
        </div>

        {% if is_granted('ROLE_ADMIN') %}
        <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_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_rgpd_index') }}"
                        class="{{ app.request.attributes.get('_route') starts with 'app_admin_rgpd' ? 'active' : '' }}">
                        <span class="icon">🔒</span>
                        Demandes RGPD
                    </a>
                </li>
            </ul>
        </div>
        {% endif %}
    </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 (partagé entre Plus et QR) ── #}
<div class="bottom-nav-more-overlay" id="moreOverlay"></div>

{# ── PANNEAU QR CODE ── #}
<div class="bottom-nav-more-panel" id="qrPanel">
    <div class="bottom-nav-more-panel__handle"></div>
    <div class="bottom-nav-more-panel__title">Partager ma carte</div>
    {% for commande in app.user.commandes %}
        {% if commande.isPaid %}
            {% for beneficiaire in commande.beneficiaires %}
                {% set slug = (beneficiaire.prenom ~ '-' ~ beneficiaire.nom)|lower|replace({' ': '-', 'é': 'e', 'è': 'e', 'ê': 'e', 'à': 'a', 'â': 'a', 'ô': 'o', 'û': 'u', 'ù': 'u', 'î': 'i', 'ï': 'i', 'ç': 'c'}) %}
                {% set carteUrl = 'https://' ~ slug ~ '.num-ecard.com' %}
                <div style="padding: 16px 20px; border-bottom: 1px solid #f5f5f5;">
                    <p style="font-size: 13px; font-weight: 600; color: #1a1a1a; margin: 0 0 12px;">
                        {{ beneficiaire.prenom }} {{ beneficiaire.nom }}
                        <span style="font-size: 11px; font-weight: 400; color: #999;">— {{ commande.packType }}</span>
                    </p>
                    <div id="qr-{{ beneficiaire.id }}" style="display:flex; justify-content:center; margin-bottom: 10px;"></div>
                    <p style="font-size: 11px; color: #999; text-align: center; margin: 0; word-break: break-all;">{{ carteUrl }}</p>
                    <div style="display:flex; gap: 8px; margin-top: 12px;">
                        <a href="{{ carteUrl }}" target="_blank" rel="noopener noreferrer"
                           style="flex:1; text-align:center; padding: 8px; background: #f5f5f7; border-radius: 8px; font-size: 12px; color: #1a1a1a; text-decoration: none;">
                            🔗 Ouvrir
                        </a>
                        <button onclick="if(navigator.share){navigator.share({title:'{{ beneficiaire.prenom }} {{ beneficiaire.nom }}',url:'{{ carteUrl }}'})}else{navigator.clipboard.writeText('{{ carteUrl }}');alert('Lien copié !')}"
                                style="flex:1; padding: 8px; background: #667eea; border-radius: 8px; font-size: 12px; color: #fff; border: none; cursor: pointer;">
                            📤 Partager
                        </button>
                    </div>
                </div>
                <script>
                document.addEventListener('DOMContentLoaded', function() {
                    if (typeof QRCode !== 'undefined') {
                        new QRCode(document.getElementById('qr-{{ beneficiaire.id }}'), {
                            text: '{{ carteUrl }}',
                            width: 160, height: 160,
                            colorDark: '#1a1a1a',
                            colorLight: '#ffffff',
                            correctLevel: QRCode.CorrectLevel.M
                        });
                    }
                });
                </script>
            {% endfor %}
        {% endif %}
    {% endfor %}
</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">Plus</div>

    <a href="{{ path('app_account_profil') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">👤</span>
        Mon profil
    </a>

    {# ── Liste de toutes les cartes payées ── #}
    {% for commande in app.user.commandes %}
        {% if commande.isPaid %}
            {% for beneficiaire in commande.beneficiaires %}
                {% if 'multi' in commande.packType %}
                    {% set cardSlug = 'multi-' ~ commande.id %}
                {% else %}
                    {% set cardSlug = (beneficiaire.prenom ~ '-' ~ beneficiaire.nom)|lower|replace({' ': '-', 'é': 'e', 'è': 'e', 'ê': 'e', 'à': 'a', 'â': 'a', 'ô': 'o', 'û': 'u', 'ù': 'u', 'î': 'i', 'ï': 'i', 'ç': 'c'}) %}
                {% endif %}
                <a href="{{ path('app_account_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 %}

    {# Recommandations si carte Force de Vente payée #}
    {% set has_fdv = false %}
    {% for commande in app.user.commandes %}
        {% if commande.packType in ['force-vente', 'forcevente'] and commande.isPaid %}
            {% set has_fdv = true %}
        {% endif %}
    {% endfor %}
    {% if has_fdv %}
    <a href="{{ path('app_account_recommendations') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🤝</span>
        Recommandations
    </a>
    {% endif %}

    {% if is_granted('ROLE_ADMIN') %}
    <a href="{{ path('app_admin_dashboard') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">📊</span>
        Dashboard Admin
    </a>
    {% endif %}

    <a href="{{ path('app_hebergement_list') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">📡</span>
        Abonnements
    </a>

    <a href="{{ path('app_account_change_password') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🔒</span>
        Mot de passe
    </a>

    <a href="{{ path('app_account_mes_donnees') }}" class="bottom-nav-more-panel__item">
        <span class="bottom-nav-more-panel__icon">🛡️</span>
        Mes données personnelles
    </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 ── #}
{% set current_route = app.request.attributes.get('_route') %}
<nav class="bottom-nav" aria-label="Navigation principale">

    <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_account_dashboard') }}"
       class="bottom-nav__item {{ current_route starts with 'app_account_commande' ? 'active' : '' }}"
       title="Dashboard">
        <span class="bottom-nav__icon">📊</span>
        <span class="bottom-nav__label">Dashboard</span>
    </a>

    <button class="bottom-nav__item" id="qrBtn" title="Partager ma carte">
        <span class="bottom-nav__icon">📲</span>
        <span class="bottom-nav__label">Partager</span>
    </button>

    {# Bouton utilisateur — visible uniquement sur les pages qui masquent #qrBtn
       (analytics, dashboard). Activé via CSS : .hide-qr-show-user #userNavBtn #}
    <a href="{{ path('app_account_profil') }}"
       id="userNavBtn"
       class="bottom-nav__item"
       title="Mon profil"
       style="display:none;">
        <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,#667eea,#764ba2);color:white;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;">
                {{ app.user ? (app.user.initiales ?? '?') : '?' }}
            </span>
        </span>
        <span class="bottom-nav__label">{{ app.user ? (app.user.prenom ?? 'Profil') : 'Profil' }}</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 src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
(function() {
    var moreBtn  = document.getElementById('moreBtn');
    var qrBtn    = document.getElementById('qrBtn');
    var morePanel  = document.getElementById('morePanel');
    var qrPanel    = document.getElementById('qrPanel');
    var overlay    = document.getElementById('moreOverlay');

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

    function openPanel(panel, btn) {
        closeAll();
        panel.classList.add('open');
        overlay.classList.add('open');
        btn.classList.add('open');
    }

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

    if (qrBtn) {
        qrBtn.addEventListener('click', function() {
            qrPanel.classList.contains('open') ? closeAll() : openPanel(qrPanel, qrBtn);
        });
    }

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

<script>
/* ===== DATES LOCALES — affiche les dates dans le fuseau du visiteur ===== */
/* Fonctionne partout : Guadeloupe (UTC-4), Réunion (UTC+4), Métropole, etc. */
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.local-datetime').forEach(function (el) {
        var utc = el.dataset.utc;
        if (!utc) return;
        try {
            var d = new Date(utc);
            if (isNaN(d.getTime())) return;
            el.textContent = d.toLocaleString('fr-FR', {
                day:    '2-digit',
                month:  '2-digit',
                year:   'numeric',
                hour:   '2-digit',
                minute: '2-digit'
            });
        } catch (e) { /* garde le fallback serveur si erreur */ }
    });
});
</script>

{% endblock %}