@php
$get_user_data=\Illuminate\Support\Facades\Session::get('user');
$meta_model=new \App\Users_meta();
$picture=$meta_model->get_user_field($get_user_data['id'],'profil_picture');
$id=$get_user_data['slug'];
@endphp
@php
$privilegecheck=new \App\Users_controle();
$check_privilege=$privilegecheck->has_privilege($get_user_data['id'],'super_administrateur');
$check_user_privilege=$privilegecheck->has_privilege($get_user_data['id'],'utilisateur');
$check_productor_privilege=$privilegecheck->has_privilege($get_user_data['id'],'producteur');
@endphp

<style>
:root {
    --sidebar-bg: #FFFFFF;
    --sidebar-primary: #6d8f1a;
    --sidebar-primary-dark: #5a7515;
    --sidebar-primary-light: #88b121;
    --sidebar-text: #2c3e50;
    --sidebar-text-muted: #6c757d;
    --sidebar-hover-bg: rgba(109, 143, 26, 0.08);
    --sidebar-active-bg: #6d8f1a;
    --sidebar-active-text: #FFFFFF;
    --sidebar-border: rgba(0, 0, 0, 0.1);
    --sidebar-transition: all 0.3s ease;
}

/* Modern Fluid Sidebar - NO ROUNDED CORNERS */
#sidebar-menu {
    background: var(--sidebar-bg);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
    border-right: 1px solid var(--sidebar-border) !important;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Sidebar Header / Logo Area */
.sidebar-header {
    background: var(--sidebar-primary);
    padding: 25px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #FFFFFF;
    text-decoration: none;
}

.sidebar-brand-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: var(--sidebar-transition);
}

.sidebar-brand:hover .sidebar-brand-icon {
    background: #FFFFFF;
    color: var(--sidebar-primary);
    border-color: #FFFFFF;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
}

.sidebar-brand-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    line-height: 1.2;
}

.sidebar-brand-subtitle {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* Menu Section */
.menu_section {
    padding: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Side Menu */
.side-menu {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    list-style: none;
}

/* Custom Scrollbar - Sharp Design */
.side-menu::-webkit-scrollbar {
    width: 4px;
}

.side-menu::-webkit-scrollbar-track {
    background: rgba(109, 143, 26, 0.05);
}

.side-menu::-webkit-scrollbar-thumb {
    background: var(--sidebar-primary);
}

.side-menu::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-primary-dark);
}

/* Section Labels */
.menu-section-label {
    padding: 20px 20px 10px 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sidebar-text-muted);
    margin-top: 10px;
}

.menu-section-label:first-child {
    margin-top: 0;
}

/* Menu Items - NO ROUNDED CORNERS */
.side-menu li {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: var(--sidebar-transition) !important;
    position: relative;
    list-style: none;
}

/* Left Border Accent for Active Item */
.side-menu li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--sidebar-primary);
    transform: scaleY(0);
    transition: var(--sidebar-transition);
}

.side-menu li:hover::before,
.side-menu li.active::before {
    transform: scaleY(1);
}

/* Menu Links - Sharp Rectangular Design */
.side-menu li a {
    color: var(--sidebar-text) !important;
    padding: 16px 20px 16px 24px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border: none !important;
    transition: var(--sidebar-transition) !important;
    position: relative;
    letter-spacing: 0.3px;
    background: transparent !important;
}

/* Hover State */
.side-menu li:hover {
    background: var(--sidebar-hover-bg) !important;
}

.side-menu li:hover a {
    color: var(--sidebar-primary) !important;
    padding-left: 28px !important;
}

/* Active State - Green Background, White Text */
.side-menu li.active {
    background: var(--sidebar-active-bg) !important;
    box-shadow: inset 0 0 0 1px rgba(109, 143, 26, 0.2);
}

.side-menu li.active a {
    color: var(--sidebar-active-text) !important;
    font-weight: 600 !important;
}

.side-menu li.active:hover {
    background: var(--sidebar-primary-dark) !important;
}

/* Icons - Linear and Aligned */
.side-menu li a i {
    margin-right: 15px !important;
    font-size: 14px !important;
    width: 20px !important;
    text-align: center !important;
    opacity: 0.8;
    transition: var(--sidebar-transition);
}

.side-menu li:hover a i,
.side-menu li.active a i {
    opacity: 1;
}

/* Menu Divider - Subtle Line */
.menu-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--sidebar-border) 50%, transparent 100%);
    margin: 15px 20px;
}

/* Menu Section Label Hover Effect */
.menu-section-label {
    position: relative;
}

.menu-section-label::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--sidebar-primary) 0%, transparent 100%);
    opacity: 0.3;
}

/* Sidebar Footer / User Profile */
.sidebar-footer {
    background: linear-gradient(180deg, rgba(109, 143, 26, 0.02) 0%, rgba(109, 143, 26, 0.05) 100%);
    border-top: 1px solid var(--sidebar-border);
    padding: 0;
    margin-top: auto;
}

.sidebar-user {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: var(--sidebar-transition);
    text-decoration: none;
    color: var(--sidebar-text);
    position: relative;
}

.sidebar-user:hover {
    background: var(--sidebar-hover-bg);
}

.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--sidebar-primary) 0%, var(--sidebar-primary-dark) 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    border: 2px solid var(--sidebar-border);
    transition: var(--sidebar-transition);
}

.sidebar-user:hover .sidebar-user-avatar {
    border-color: var(--sidebar-primary);
    transform: scale(1.05);
}

.sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 11px;
    color: var(--sidebar-text-muted);
    margin: 0;
}

.sidebar-user-toggle {
    color: var(--sidebar-text-muted);
    transition: var(--sidebar-transition);
}

.sidebar-user:hover .sidebar-user-toggle {
    color: var(--sidebar-primary);
}

/* User Dropdown Menu */
.user-dropdown {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(109, 143, 26, 0.03);
    border-top: 1px solid var(--sidebar-border);
}

.user-dropdown li {
    margin: 0 !important;
}

.user-dropdown li a {
    padding: 12px 20px 12px 40px !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.user-dropdown li:hover {
    background: var(--sidebar-hover-bg) !important;
}

.user-dropdown li:hover a {
    color: var(--sidebar-primary) !important;
    padding-left: 44px !important;
}

/* ========================================
   MODERN FLUID HEADER - NO ROUNDED CORNERS
   ======================================== */

/* Top Navigation Container */
.top_nav {
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border-bottom: 2px solid var(--sidebar-primary);
    position: fixed;
    top: 0;
    right: 0;
    left: 15px;
    z-index: 100;
    height: 60px;
    transition: left 0.3s ease;
}

.nav_menu {
    background: transparent !important;
    box-shadow: none !important;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 30px;
}

.nav_menu nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Left Section - Menu Toggle & Branding */
.nav-left-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav.toggle {
    margin: 0 !important;
}

/* Menu Toggle Button - Sharp Rectangle */
#menu_toggle {
    color: var(--sidebar-text) !important;
    font-size: 18px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--sidebar-border) !important;
    transition: var(--sidebar-transition) !important;
    background: transparent !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu_toggle:hover {
    background: var(--sidebar-primary) !important;
    border-color: var(--sidebar-primary) !important;
    color: #FFFFFF !important;
}

/* Page Title / Breadcrumb */
.header-page-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sidebar-text);
    letter-spacing: -0.3px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-page-title i {
    color: var(--sidebar-primary);
    font-size: 14px;
}

/* Center Section - Search Bar (Optional) */
.nav-center-section {
    flex: 1;
    max-width: 600px;
    margin: 0 30px;
    display: flex;
    align-items: center;
}

.header-search {
    width: 100%;
    position: relative;
}

.header-search input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid var(--sidebar-border);
    background: rgba(109, 143, 26, 0.02);
    font-size: 13px;
    transition: var(--sidebar-transition);
    outline: none;
}

.header-search input:focus {
    border-color: var(--sidebar-primary);
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--sidebar-primary);
}

.header-search input::placeholder {
    color: var(--sidebar-text-muted);
}

.header-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sidebar-text-muted);
    font-size: 14px;
}

.header-search input:focus ~ .header-search-icon {
    color: var(--sidebar-primary);
}

/* Right Section - User Actions */
.nav-right-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Header Action Buttons */
.header-action-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sidebar-border);
    background: transparent;
    color: black !important;
    cursor: pointer;
    transition: var(--sidebar-transition);
    position: relative;
    text-decoration: none;
}

.header-action-btn:hover {
    background: var(--sidebar-primary);
    border-color: var(--sidebar-primary);
    color: #FFFFFF !important;
}

.header-action-btn i {
    font-size: 16px;
    color: black !important;
}

.header-action-btn i:hover {
    color: white !important;
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #dc3545;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
}

/* User Profile Dropdown */
.navbar-nav {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.navbar-nav li {
    list-style: none;
}

.navbar-nav .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 16px 8px 8px !important;
    border: 1px solid var(--sidebar-border) !important;
    transition: var(--sidebar-transition) !important;
    background: transparent !important;
    color: var(--sidebar-text) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    cursor: pointer;
    height: 38px;
}

.navbar-nav .dropdown-toggle:hover {
    background: var(--sidebar-primary) !important;
    border-color: var(--sidebar-primary) !important;
    color: #FFFFFF !important;
}

/* User Avatar - Sharp Rectangle */
.user-avatar {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--sidebar-border);
    background: linear-gradient(135deg, var(--sidebar-primary) 0%, var(--sidebar-primary-dark) 100%);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 12px;
    transition: var(--sidebar-transition);
}

.navbar-nav .dropdown-toggle:hover .user-avatar {
    border-color: #FFFFFF;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Username Text */
.user-name {
    font-weight: 500;
    font-size: 13px;
}

/* Dropdown Arrow */
.dropdown-arrow {
    font-size: 12px;
    transition: var(--sidebar-transition);
}

.navbar-nav .dropdown-toggle:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu - Sharp Design */
.dropdown-menu {
    border: 1px solid var(--sidebar-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
    min-width: 200px !important;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-left: 1px solid var(--sidebar-border);
    border-top: 1px solid var(--sidebar-border);
    transform: rotate(45deg);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu li a {
    padding: 12px 20px !important;
    transition: var(--sidebar-transition) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--sidebar-text) !important;
    text-decoration: none !important;
}

.dropdown-menu li a i {
    font-size: 14px;
    width: 18px;
    text-align: center;
    opacity: 0.7;
}

.dropdown-menu li a:hover {
    background: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-primary) !important;
    padding-left: 24px !important;
}

.dropdown-menu li a:hover i {
    opacity: 1;
}

/* Dropdown Divider */
.dropdown-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 8px 0;
}

/* Responsive Header */
@media (max-width: 768px) {
    .top_nav {
        left: 70px;
    }

    .nav_menu {
        padding: 0 15px;
    }

    .nav-center-section {
        display: none;
    }

    .header-page-title {
        display: none;
    }

    .nav-right-section {
        gap: 10px;
    }

    .user-name {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-action-btn {
        width: 34px;
        height: 34px;
    }

    .navbar-nav .dropdown-toggle {
        padding: 6px !important;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar-brand-text {
        display: none;
    }

    .menu-section-label {
        padding: 15px 15px 8px 15px;
        font-size: 10px;
    }

    .side-menu li a {
        padding: 14px 15px 14px 19px !important;
        font-size: 12px !important;
    }

    .side-menu li:hover a {
        padding-left: 23px !important;
    }

    .sidebar-user-info {
        display: none;
    }

    .top_nav {
        left: 70px;
    }
}

/* Smooth Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.side-menu li {
    animation: fadeInLeft 0.3s ease-out;
    animation-fill-mode: both;
}

.side-menu li:nth-child(1) { animation-delay: 0.05s; }
.side-menu li:nth-child(2) { animation-delay: 0.08s; }
.side-menu li:nth-child(3) { animation-delay: 0.11s; }
.side-menu li:nth-child(4) { animation-delay: 0.14s; }
.side-menu li:nth-child(5) { animation-delay: 0.17s; }
.side-menu li:nth-child(6) { animation-delay: 0.20s; }
.side-menu li:nth-child(7) { animation-delay: 0.23s; }
.side-menu li:nth-child(8) { animation-delay: 0.26s; }
.side-menu li:nth-child(9) { animation-delay: 0.29s; }
.side-menu li:nth-child(10) { animation-delay: 0.32s; }
</style>

<!-- Modern Fluid Sidebar - Sharp Edges -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
    <!-- Sidebar Header / Logo -->
    <div class="sidebar-header">
        <a href="{{ route('home') }}" class="sidebar-brand">
            <div class="sidebar-brand-icon">
                <i class="fas fa-store"></i>
            </div>
            <div class="sidebar-brand-text">
                <div class="sidebar-brand-title">SunGrocery</div>
                <div class="sidebar-brand-subtitle">E-Commerce Platform</div>
            </div>
        </a>
    </div>

    <!-- Menu Section -->
    <div class="menu_section">
        <ul class="nav side-menu">
            <!-- Dashboard -->
            <li class="menu-section-label">Navigation</li>
            <li class=""><a href="{{ route('home') }}"><i class="fas fa-tachometer-alt"></i>Tableau de bord</a></li>

            @if($check_privilege)
            <!-- Admin Section -->
            <li class="menu-section-label">Administration</li>
            <li><a href="{{ route('list.user') }}"><i class="fas fa-users"></i>Utilisateurs</a></li>
            <li><a href="{{ route('mes_metiers') }}"><i class="fas fa-briefcase"></i>Domaines d'activité</a></li>
            <li><a href="{{ route('categorie_index',1) }}"><i class="fas fa-tags"></i>Catégories</a></li>
            <li><a href="{{ route('article_index',1) }}"><i class="fas fa-box"></i>Articles</a></li>

            <li class="menu-section-label">Abonnements</li>
            <li><a href="{{ route('abonnementBoutique') }}"><i class="fas fa-credit-card"></i>Pricing boutique</a></li>
            <li><a href="{{ route('abonnementCatalogue') }}"><i class="fas fa-book"></i>Pricing catalogue</a></li>
            <li><a href="{{ route('allAbonnementBoutique') }}"><i class="fas fa-store"></i>Boutiques abonnées</a></li>

            <li class="menu-section-label">Gestion Boutiques</li>
            <li><a href="{{ route('general_list_boutique') }}"><i class="fas fa-list"></i>Toutes les boutiques</a></li>
            <li><a href="{{ route('list.gestion.admin.command') }}"><i class="fas fa-shopping-cart"></i>Commandes Market</a></li>
            <li><a href="{{ route('admin.market.setting') }}"><i class="fas fa-cogs"></i>Paramètres Market</a></li>
            <li><a href="{{ route('generale.command.admin') }}"><i class="fas fa-clipboard-list"></i>Commandes global</a></li>

            <li class="menu-section-label">Finance</li>
            <li><a href="{{ route('portefeuille_admin') }}"><i class="fas fa-wallet"></i>Portefeuilles</a></li>
            <li><a href="{{ route('retrait_index') }}"><i class="fas fa-money-bill-wave"></i>Demandes retrait</a></li>
            <li><a href="{{ route('admin.paiement') }}"><i class="fas fa-coins"></i>Recettes admin</a></li>
            <li><a href="{{ route('recette.index') }}"><i class="fas fa-chart-bar"></i>Recettes</a></li>

            <li class="menu-section-label">Services</li>
            <li><a href="{{ route('livraisons.index') }}"><i class="fas fa-truck"></i>Livraisons</a></li>
            <li><a href="{{ route('investment.allPermissionProject') }}"><i class="fas fa-chart-line"></i>Financement projets</a></li>
            <li><a href="{{ route('promotion.index') }}"><i class="fas fa-percent"></i>Promotions</a></li>
            <li><a href="{{ route('reclamation.index') }}"><i class="fas fa-exclamation-triangle"></i>Réclamations</a></li>
            <li><a href="{{ route('panier.index') }}"><i class="fas fa-shopping-basket"></i>Panier d'achat</a></li>

            <li class="menu-section-label">Marketing</li>
            <li><a href="{{ route('demandeGestionnaireAdmin') }}"><i class="fas fa-user-tie"></i>SunMarketers</a></li>
            <li><a href="{{ route('mib.index') }}"><i class="fas fa-cube"></i>MIB</a></li>
            <li><a href="{{ route('usercatalogue.princing') }}"><i class="fas fa-dollar-sign"></i>Prix catalogue</a></li>
            <li><a href="{{ route('actorcategory.category') }}"><i class="fas fa-user-tag"></i>Catégories acteurs</a></li>

            <li class="menu-section-label">Contenu</li>
            <li><a href="{{ url('blog_admin') }}"><i class="fas fa-blog"></i>Blog</a></li>
            <li><a href="{{ route('abonnement.news.options') }}"><i class="fas fa-envelope"></i>Options newsletters</a></li>
            <li><a href="{{ route('all_abonne') }}"><i class="fas fa-users"></i>Abonnés newsletters</a></li>
            @endif

            @if($check_productor_privilege)
            <!-- Producer Section -->
            <li class="menu-section-label">Producteur</li>
            <li><a href="{{ route('article_supplier_index') }}"><i class="fas fa-box-open"></i>Catalogue produits</a></li>
            <li><a href="{{ route('supplier_history') }}"><i class="fas fa-chart-line"></i>Historique gains</a></li>
            @else
            <!-- User Section -->
            <li class="menu-section-label">Mon compte</li>
            <li><a href="{{ route('boutique') }}"><i class="fas fa-store"></i>Mes boutiques</a></li>
            <li><a href="{{ route('investment.index') }}"><i class="fas fa-hand-holding-usd"></i>Investissements</a></li>
            <li><a href="{{ route('generale.command') }}"><i class="fas fa-dollar-sign"></i>Mes ventes</a></li>
            <li><a href="{{ route('generale.achat') }}"><i class="fas fa-shopping-cart"></i>Mes achats</a></li>

            @if(!$check_privilege)
            <li><a href="{{ route('admin.logs.paiement') }}"><i class="fas fa-file-invoice-dollar"></i>Logs paiements</a></li>
            <li><a href="{{ route('list_retrait_user') }}"><i class="fas fa-wallet"></i>Retrait</a></li>
            @endif

            <li class="menu-section-label">Services</li>
            <li><a href="{{ route('annonce.index') }}"><i class="fas fa-bullhorn"></i>Annonces</a></li>
            <li><a href="{{ route('actualite.index') }}"><i class="far fa-newspaper"></i>Actualités</a></li>
            <li><a href="{{ route('sunmarketers') }}"><i class="fas fa-users-cog"></i>Gestionnaires</a></li>

            @if(!$check_privilege)
            <li><a href="{{ route('code_promo.gainCodePromo') }}"><i class="fas fa-gift"></i>Gain parrainage</a></li>
            @endif

            <li class="menu-section-label">Support</li>
            <li><a href="{{ route('abonnement.news.user') }}"><i class="fas fa-envelope-open-text"></i>Newsletters</a></li>
            <li><a href="{{ route('documentation') }}"><i class="fas fa-question-circle"></i>FAQ</a></li>
            @endif
        </ul>
    </div>

    <!-- Sidebar Footer / User Profile -->
    <div class="sidebar-footer">
        <div class="sidebar-user" onclick="toggleUserDropdown()">
            <div class="sidebar-user-avatar">
                @if(isset($picture) && $picture!="")
                    <img src="{{ asset('Profil_picture/'.$picture) }}" alt="">
                @else
                    {{ strtoupper(substr($get_user_data['username'], 0, 1)) }}
                @endif
            </div>
            <div class="sidebar-user-info">
                <div class="sidebar-user-name">{{ \Illuminate\Support\Str::limit($get_user_data['username'], 15) }}</div>
                <div class="sidebar-user-role">
                    @if($check_privilege)
                        Administrateur
                    @elseif($check_productor_privilege)
                        Producteur
                    @else
                        Utilisateur
                    @endif
                </div>
            </div>
            <i class="fas fa-chevron-up sidebar-user-toggle" id="userToggleIcon"></i>
        </div>
        <ul class="user-dropdown" id="userDropdown" style="display: none;">
            <li><a href="{{ route('update_view') }}"><i class="fas fa-user"></i> Mon profil</a></li>
            <li><a href="{{ route('logout') }}"><i class="fas fa-sign-out-alt"></i> Déconnexion</a></li>
        </ul>
    </div>
</div>

<!-- Modern Fluid Header - Sharp Edges -->
<div class="top_nav">
    <div class="nav_menu">
        <nav>
            <!-- Left Section: Menu Toggle & Page Title -->
            <div class="nav-left-section">
                <h1 class="header-page-title">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>Dashboard</span>
                </h1>
            </div>

            <!-- Center Section: Search Bar (Optional) -->
            <div class="nav-center-section" style="display: none;">
                <div class="header-search">
                    <i class="fas fa-search header-search-icon"></i>
                    <input type="text" placeholder="Rechercher dans SunGrocery...">
                </div>
            </div>

            <!-- Right Section: Actions & User Profile -->
            <div class="nav-right-section">
                <!-- Notifications -->
                <a href="#" class="header-action-btn" title="Notifications">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </a>

                <!-- Settings -->
                <a href="{{ route('update_view') }}" class="header-action-btn" title="Paramètres">
                    <i class="fas fa-cog"></i>
                </a>

                <!-- User Dropdown -->
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            <div class="user-avatar">
                                @if(isset($picture) && $picture!="")
                                    <img src="{{ asset('Profil_picture/'.$picture) }}" alt="">
                                @else
                                    {{ strtoupper(substr($get_user_data['username'], 0, 1)) }}
                                @endif
                            </div>
                            <span class="user-name">{{ \Illuminate\Support\Str::limit($get_user_data['username'], 12) }}</span>
                            <i class="fas fa-chevron-down dropdown-arrow"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-usermenu pull-right">
                            <li>
                                <a href="{{ route('update_view') }}">
                                    <i class="fas fa-user"></i> Mon profil
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('home') }}">
                                    <i class="fas fa-tachometer-alt"></i> Dashboard
                                </a>
                            </li>
                            <li><div class="dropdown-divider"></div></li>
                            <li>
                                <a href="{{ route('logout') }}">
                                    <i class="fas fa-sign-out-alt"></i> Déconnexion
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

<script>
function toggleUserDropdown() {
    const dropdown = document.getElementById('userDropdown');
    const icon = document.getElementById('userToggleIcon');

    if (dropdown.style.display === 'none') {
        dropdown.style.display = 'block';
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
    } else {
        dropdown.style.display = 'none';
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
    }
}

// Add active class to current page
document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.pathname;
    const menuItems = document.querySelectorAll('.side-menu li a');

    menuItems.forEach(item => {
        if (item.getAttribute('href') === currentPath || item.getAttribute('href') === window.location.href) {
            item.parentElement.classList.add('active');
        }
    });
});
</script>