<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <title>{% block title %}Administration — SALSABIL TRAVEL{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Backoffice SALSABIL TRAVEL" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('assets/back/images/favicon_sal.png') }}">

    {# CSS (garde tes assets back) #}
    <link href="{{ asset('assets/back/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" id="bootstrap-stylesheet" />
    <link href="{{ asset('assets/back/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/back/css/app.min.css') }}" rel="stylesheet" type="text/css" id="app-stylesheet" />
    <link href="{{ asset('assets/back/css/salsabil-premium-admin.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/back/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

    <style>
        :root{
            --st-blue:#8c6b2d;
            --st-blue-dark:#6f5322;
            --st-white:#ffffff;
        }

        .admin-page-header{
            flex-direction: column;
            align-items: flex-start !important;
        }

        .admin-page-actions{
            margin-top: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .admin-page-actions .btn,
        .admin-page-actions form{
            margin-right: 0 !important;
            margin-bottom: 0 !important;
        }

        /* Force layout horizontal du thème */
        body[data-layout="horizontal"] #wrapper { min-height: 100vh; }

        /* TOPNAV (barre haute bleue) */
        #topnav .navbar-custom{
            background: var(--st-blue);
            min-height: 72px;
            padding: 0 18px;
            display:flex;
            align-items:center;
        }

        /* Bloc logo : fond blanc + pas de débordement */
        #topnav .logo-box{
            background: var(--st-white);
            border-radius: 10px;
            padding: 8px 14px;
            display:flex;
            align-items:center;
            justify-content:center;
            height: 56px;            /* maîtrise la hauteur */
            max-width: 220px;        /* empêche l’étalement */
            overflow: hidden;        /* stop débordement */
            box-shadow: 0 6px 18px rgba(0,0,0,.08);
            margin-right: 16px;
        }
        #topnav .logo-box img{
            height: 40px;
            width: auto;
            display:block;
        }

        /* Search box (comme ton rendu SALSABILAPP) */
        .app-search .app-search-box .form-control{
            border-radius: 999px;
            height: 40px;
            border: 0;
            background: rgba(255,255,255,.16);
            color:#fff;
            padding-left: 16px;
        }
        .app-search .app-search-box .form-control::placeholder{ color: rgba(255,255,255,.75); }
        .app-search .app-search-box .input-group-append .btn{
            border-radius: 999px;
            background: rgba(255,255,255,.16);
            color:#fff;
            border:0;
        }

        /* Deuxième barre (menu horizontal) - BLANC comme image 2 */
        #topnav .topbar-menu{
            background: #fff;
            border-top: 1px solid #e9ecef;
            box-shadow: 0 2px 4px rgba(0,0,0,.05);
        }
        #topnav .topbar-menu .navigation-menu > li > a{
            color: #495057;
            font-weight: 500;
            padding: 15px 20px;
        }
        #topnav .topbar-menu .navigation-menu > li > a:hover{
            color: var(--st-blue);
            background-color: rgba(44, 133, 199, 0.05);
        }
        #topnav .topbar-menu .navigation-menu > li.active > a{
            color: var(--st-blue);
            background-color: rgba(44, 133, 199, 0.08);
            border-bottom: 2px solid var(--st-blue);
        }
        #topnav .topbar-menu .navigation-menu > li > a i{
            margin-right: 8px;
        }

        /* Badge SUPER */
        .superadmin-badge{
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: .72rem;
            font-weight: 700;
            margin-left: 8px;
        }

        /* Contenu : évite “marges Left sidebar” */
        .content-page{
            margin-left: 0 !important;
            padding-left: 0 !important;
        }
        /* Layout boxed : contenu centré avec marges (comme image 2) */
        body[data-layout="horizontal"] .content-page .container-fluid {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }
        @media (min-width: 1200px) {
            body[data-layout="horizontal"] .content-page .container-fluid {
                max-width: 90%;
            }
        }

        /* Petites cartes / bloc pages */
        .card-box{
            border-radius: 10px;
            box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.06);
            border: 1px solid #eef2f6;
            background-color: #fff;
            padding: 1.25rem;
            margin-bottom: 20px;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1rem rgba(18,38,63,.1);
        }
        .quick-access-card {
            border-left: 4px solid var(--st-blue);
            cursor: pointer;
            transition: all 0.3s;
        }
        .quick-access-card:hover {
            border-left-color: var(--st-blue-dark);
            transform: translateX(5px);
        }

        /* Responsive : espace logo */
        @media (max-width: 991px){
            #topnav .logo-box{ height: 52px; padding: 8px 12px; }
            #topnav .logo-box img{ height: 36px; }
        }

        /* Méga-menu pour Paramètres */
        .navigation-menu > li.mega-menu-item {
            position: static;
        }
        .topbar-menu {
            position: relative;
        }
        .navigation-menu > li.mega-menu-item > .mega-menu {
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            background: #fff;
            box-shadow: 0 4px 12px rgba(0,0,0,.15);
            border-top: 2px solid var(--st-blue);
            padding: 30px 40px;
            display: none;
            z-index: 1000;
            margin-top: 0;
            width: 100%;
        }
        .navigation-menu > li.mega-menu-item:hover > .mega-menu {
            display: flex;
        }
        .mega-menu {
            display: flex;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            justify-content: flex-start;
        }
        .mega-menu-column {
            flex: 0 1 auto;
            min-width: 220px;
        }
        .mega-menu-column h6 {
            color: var(--st-blue);
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9ecef;
        }
        .mega-menu-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .mega-menu-column ul li {
            margin-bottom: 10px;
        }
        .mega-menu-column ul li a {
            color: #495057;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            transition: all 0.2s;
            font-size: 14px;
            border-radius: 6px;
        }
        .mega-menu-column ul li a:hover {
            color: var(--st-blue);
            background-color: rgba(44, 133, 199, 0.08);
            transform: translateX(4px);
        }
        .mega-menu-column ul li a i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
            font-size: 18px;
            display: inline-block !important;
            vertical-align: middle;
            visibility: visible !important;
            opacity: 1 !important;
        }
        /* Assurer que les icônes dans le menu principal s'affichent */
        .navigation-menu > li > a i,
        .navigation-menu > li.has-submenu > a i,
        .navigation-menu > li.mega-menu-item > a i {
            display: inline-block !important;
            margin-right: 8px;
            font-size: 18px;
            vertical-align: middle;
            visibility: visible !important;
            opacity: 1 !important;
        }
        .submenu li a i {
            display: inline-block !important;
            margin-right: 8px;
            font-size: 16px;
            vertical-align: middle;
            visibility: visible !important;
            opacity: 1 !important;
        }
        /* Forcer l'affichage des icônes Material Design */
        .mdi:before,
        i.mdi:before {
            display: inline-block !important;
            font-family: "Material Design Icons" !important;
            font-style: normal !important;
            font-weight: normal !important;
            font-variant: normal !important;
            text-transform: none !important;
            line-height: 1 !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        /* S'assurer que les icônes ne sont pas cachées */
        i.mdi {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            font-size: inherit !important;
        }

        /* Boutons Primary avec couleur thème SALSABIL TRAVEL */
        .btn-primary {
            background-color: #8c6b2d !important;
            border-color: #8c6b2d !important;
            color: #fff !important;
        }
        .btn-primary:hover,
        .btn-primary:focus,
        .btn-primary:active,
        .btn-primary.active {
            background-color: #6f5322 !important;
            border-color: #6f5322 !important;
            color: #fff !important;
        }
        .btn-primary:not(:disabled):not(.disabled):active,
        .btn-primary:not(:disabled):not(.disabled).active {
            background-color: #6f5322 !important;
            border-color: #6f5322 !important;
        }

        /* Classes border-primary avec couleur thème */
        .border-primary {
            border-color: #8c6b2d !important;
        }

        /* Classes text-primary avec couleur thème */
        .text-primary {
            color: #8c6b2d !important;
        }

        /* Classes bg-primary et bg-soft-primary avec couleur thème */
        .bg-primary,
        .bg-soft-primary {
            background-color: #8c6b2d !important;
        }
        .bg-soft-primary {
            background-color: rgba(140, 107, 45, 0.1) !important;
        }

        /* Classes table-primary avec couleur thème */
        .table-primary,
        .table-primary > th,
        .table-primary > td {
            background-color: rgba(140, 107, 45, 0.1) !important;
            border-color: rgba(140, 107, 45, 0.2) !important;
            color: #8c6b2d !important;
        }
    </style>

    {% block stylesheet %}{% endblock %}
</head>

<body data-layout="horizontal">

<div id="wrapper">

    {# ========== TOP NAV ========== #}
    <header id="topnav">

        {# TOP BAR #}
        <div class="navbar-custom">
            <div class="container-fluid d-flex align-items-center">

                {# Mobile toggle #}
                <a class="navbar-toggle nav-link d-inline-block d-lg-none">
                    <div class="lines">
                        <span></span><span></span><span></span>
                    </div>
                </a>

                {# LOGO (fond blanc) #}
                <div class="logo-box">
                    <a href="{{ path('app_admin_dashboard') }}" class="logo text-center">
                        <img src="{{ asset('assets/back/images/logo_travel_web.png') }}" alt="SALSABIL TRAVEL">
                    </a>
                </div>

                {# Search #}
                <ul class="list-unstyled topnav-menu topnav-menu-left m-0 d-none d-md-block">
                    <li>
                        <form class="app-search">
                            <div class="app-search-box">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Recherche...">
                                    <div class="input-group-append">
                                        <button class="btn" type="submit">
                                            <i class="mdi mdi-magnify"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </li>
                </ul>

                <div class="ml-auto"></div>

                {# Right menu (Langue, QR, Profil, Settings) #}
                <ul class="list-unstyled topnav-menu float-right mb-0">
                    <li class="dropdown notification-list">
                        <a class="nav-link text-white" href="{{ path('app_front_index') }}" target="_blank" role="button" title="Voir le site web">
                            <i class="mdi mdi-home"></i>
                            <span class="d-none d-md-inline-block">Site web</span>
                        </a>
                    </li>
                    <li class="dropdown notification-list">
                        <a class="nav-link dropdown-toggle arrow-none text-white" data-toggle="dropdown" href="#" role="button">
                            <i class="mdi mdi-web"></i>
                            <span>Français</span>
                        </a>
                    </li>
                    <li class="dropdown notification-list">
                        <a class="nav-link dropdown-toggle nav-user mr-0" data-toggle="dropdown" href="#" role="button">
                            <span class="account-user-avatar">
                                <i class="mdi mdi-account-circle" style="font-size: 28px; color:#fff;"></i>
                            </span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
                            <div class="dropdown-header noti-title">
                                <h6 class="text-overflow m-0">Bienvenue {{ app.user.noms ?? 'Admin' }}!</h6>
                            </div>
                            <a href="{{ path('app_admin_dashboard') }}" class="dropdown-item notify-item">
                                <i class="mdi mdi-account-outline"></i> <span>Mon profil</span>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="{{ path('app_logout') }}" class="dropdown-item notify-item">
                                <i class="mdi mdi-logout-variant"></i> <span>Déconnexion</span>
                            </a>
                        </div>
                    </li>
                    <li class="dropdown notification-list">
                        <a class="nav-link" href="#" title="Paramètres">
                            <i class="mdi mdi-cog"></i>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
        {# END TOP BAR #}

        {# MENU HORIZONTAL #}
        <div class="topbar-menu">
            <div class="container-fluid">
                <div id="navigation">
                    <ul class="navigation-menu">

                        {# Tableau de bord #}
                        <li class="{{ app.request.get('_route') == 'app_admin_dashboard' ? 'active' : '' }}">
                            <a href="{{ path('app_admin_dashboard') }}">
                                <i class="mdi mdi-view-dashboard"></i>Tableau de bord
                            </a>
                        </li>

                        {# SALSABIL TRAVEL - Clients #}
                        <li class="has-submenu {{ app.request.get('_route') starts with 'app_admin_client' ? 'active' : '' }}">
                            <a href="#"><i class="mdi mdi-account-group"></i>Clients <div class="arrow-down"></div></a>
                            <ul class="submenu">
                                <li><a href="{{ path('app_admin_client_index') }}"><i class="mdi mdi-format-list-bulleted"></i> Liste</a></li>
                                <li><a href="{{ path('app_admin_client_new') }}"><i class="mdi mdi-account-plus"></i> Nouveau client</a></li>
                            </ul>
                        </li>


                        {# SALSABIL TRAVEL - Programmes vitrine #}
                        <li class="has-submenu {{ app.request.get('_route') starts with 'app_admin_programme_travel' ? 'active' : '' }}">
                            <a href="#"><i class="mdi mdi-earth"></i>Programmes <div class="arrow-down"></div></a>
                            <ul class="submenu">
                                <li><a href="{{ path('app_admin_programme_travel_index') }}"><i class="mdi mdi-format-list-bulleted"></i> Liste</a></li>
                                <li><a href="{{ path('app_admin_programme_travel_new') }}"><i class="mdi mdi-plus-circle"></i> Nouveau programme</a></li>
                            </ul>
                        </li>



                        {# SALSABIL TRAVEL - Préinscriptions #}
                        <li class="has-submenu {{ app.request.get('_route') starts with 'app_admin_preinscription_travel' ? 'active' : '' }}">
                            <a href="#"><i class="mdi mdi-clipboard-check"></i>Préinscriptions <div class="arrow-down"></div></a>
                            <ul class="submenu">
                                <li><a href="{{ path('app_admin_preinscription_travel_index') }}"><i class="mdi mdi-format-list-bulleted"></i> Liste</a></li>
                            </ul>
                        </li>

                        {# SALSABIL TRAVEL - Packages #}
                        <li class="has-submenu {{ app.request.get('_route') starts with 'app_admin_package' ? 'active' : '' }}">
                            <a href="#"><i class="mdi mdi-package-variant"></i>Packages Oumra <div class="arrow-down"></div></a>
                            <ul class="submenu">
                                <li><a href="{{ path('app_admin_package_index') }}"><i class="mdi mdi-format-list-bulleted"></i> Liste</a></li>
                                <li><a href="{{ path('app_admin_package_new') }}"><i class="mdi mdi-package-variant-plus"></i> Nouveau package</a></li>
                            </ul>
                        </li>

                        {# SALSABIL TRAVEL - Dossiers #}
                        <li class="has-submenu {{ app.request.get('_route') starts with 'app_admin_dossier' ? 'active' : '' }}">
                            <a href="#"><i class="mdi mdi-folder-multiple"></i>Dossiers <div class="arrow-down"></div></a>
                            <ul class="submenu">
                                <li><a href="{{ path('app_admin_dossier_index') }}"><i class="mdi mdi-format-list-bulleted"></i> Liste</a></li>
                                <li><a href="{{ path('app_admin_dossier_new') }}"><i class="mdi mdi-folder-plus"></i> Nouveau dossier</a></li>
                            </ul>
                        </li>

                        {# SALSABIL TRAVEL - Factures #}
                        <li class="has-submenu {{ app.request.get('_route') starts with 'app_admin_facture' ? 'active' : '' }}">
                            <a href="#"><i class="mdi mdi-file-document-box"></i>Factures <div class="arrow-down"></div></a>
                            <ul class="submenu">
                                <li><a href="{{ path('app_admin_facture_index') }}"><i class="mdi mdi-format-list-bulleted"></i> Liste</a></li>
                                <li><a href="{{ path('app_admin_facture_new') }}"><i class="mdi mdi-file-document-plus"></i> Nouvelle facture</a></li>
                            </ul>
                        </li>

                        {# SALSABIL TRAVEL - Paiements #}
                        <li class="has-submenu {{ app.request.get('_route') starts with 'app_admin_paiement' ? 'active' : '' }}">
                            <a href="#"><i class="mdi mdi-cash-multiple"></i>Paiements <div class="arrow-down"></div></a>
                            <ul class="submenu">
                                <li><a href="{{ path('app_admin_paiement_index') }}"><i class="mdi mdi-format-list-bulleted"></i> Liste</a></li>
                                <li><a href="{{ path('app_admin_paiement_new') }}"><i class="mdi mdi-cash-plus"></i> Nouveau paiement</a></li>
                            </ul>
                        </li>

                        {# SALSABIL TRAVEL - Partenaires #}
                        <li class="has-submenu {{ app.request.get('_route') starts with 'app_admin_partenaire' ? 'active' : '' }}">
                            <a href="#"><i class="mdi mdi-handshake"></i>Partenaires <div class="arrow-down"></div></a>
                            <ul class="submenu">
                                <li><a href="{{ path('app_admin_partenaire_index') }}"><i class="mdi mdi-format-list-bulleted"></i> Liste</a></li>
                                <li><a href="{{ path('app_admin_partenaire_new') }}"><i class="mdi mdi-handshake-outline"></i> Nouveau partenaire</a></li>
                            </ul>
                        </li>

                        {# Paramètres - Utilisateurs (ROLE_SUPER_ADMIN uniquement) #}
                        {% if is_granted('ROLE_SUPER_ADMIN') %}
                        <li class="has-submenu {{ app.request.get('_route') starts with 'app_user' ? 'active' : '' }}">
                            <a href="#"><i class="mdi mdi-account-settings"></i>Utilisateurs <div class="arrow-down"></div></a>
                            <ul class="submenu">
                                <li><a href="{{ path('app_user_index') }}"><i class="mdi mdi-format-list-bulleted"></i> Liste</a></li>
                                <li><a href="{{ path('app_user_new') }}"><i class="mdi mdi-account-plus"></i> Nouvel utilisateur</a></li>
                            </ul>
                        </li>
                        {% endif %}

                    </ul>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        {# END MENU #}

    </header>

    {# ========== CONTENT ========== #}
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">

                {% block breadcrumb %}
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="{{ path('app_admin_dashboard') }}">SALSABIL TRAVEL</a></li>
                                        <li class="breadcrumb-item active">{% block breadcrumb_title %}Administration{% endblock %}</li>
                                    </ol>
                                </div>
                                <h4 class="page-title">{% block page_title %}SALSABIL TRAVEL{% endblock %}</h4>
                            </div>
                        </div>
                    </div>
                {% endblock %}

                {% block body %}{% endblock %}
            </div>
        </div>

        {% block modals %}{% endblock %}

        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        {{ "now"|date("Y") }} &copy; SALSABIL TRAVEL
                    </div>
                </div>
            </div>
        </footer>
    </div>

</div>

{# JS #}
<script src="{{ asset('assets/back/js/vendor.min.js') }}"></script>
<script src="{{ asset('assets/back/js/app.min.js') }}"></script>
<script src="{{ asset('assets/back/libs/select2/select2.min.js') }}"></script>
<script>
    // Initialiser Select2 pour tous les selects
    $(document).ready(function() {
        function initSelect2() {
            // Initialiser Select2 sur tous les selects avec la classe form-control
            $('select.form-control').each(function() {
                if (!$(this).hasClass('select2-hidden-accessible') && !$(this).hasClass('no-select2')) {
                    // Ajouter la classe select2 si elle n'est pas déjà présente
                    if (!$(this).hasClass('select2')) {
                        $(this).addClass('select2');
                    }
                    $(this).select2({
                        width: '100%',
                        language: 'fr',
                        placeholder: $(this).find('option[value=""]').text() || 'Sélectionner...',
                        allowClear: $(this).find('option[value=""]').length > 0
                    });
                }
            });
        }
        
        // Initialiser au chargement
        initSelect2();
        
        // Réinitialiser après les modifications DOM (pour les formulaires dynamiques)
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length) {
                    $(mutation.addedNodes).find('select.form-control').each(function() {
                        if (!$(this).hasClass('select2-hidden-accessible') && !$(this).hasClass('no-select2')) {
                            if (!$(this).hasClass('select2')) {
                                $(this).addClass('select2');
                            }
                            $(this).select2({
                                width: '100%',
                                language: 'fr',
                                placeholder: $(this).find('option[value=""]').text() || 'Sélectionner...',
                                allowClear: $(this).find('option[value=""]').length > 0
                            });
                        }
                    });
                }
            });
        });
        
        // Observer les changements dans le body
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
</script>
{% block javascripts %}{% endblock %}
</body>
</html>
