@php
    $user = Auth::user();
    $isSuperAdmin = $user->hasRole(\App\Enums\RoleEnum::SUPER_ADMIN->value);
    // Dynamic logout icon - can be changed from settings or config
    $logoutIcon = config('app.logout_icon', 'logout');
    
    // Get logos from company settings
    $companySettings = \App\Models\CompanySetting::getSettings();
    // Full logo for expanded state
    $logoUrl = $companySettings->company_logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_logo) 
        ? asset('storage/' . $companySettings->company_logo) 
        : asset('logo.svg');
    // Collapsed logo/icon for collapsed state - prioritize company_icon_collapsed if available
    $collapsedLogoUrl = ($companySettings->company_icon_collapsed ?? null) && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_icon_collapsed) 
        ? asset('storage/' . $companySettings->company_icon_collapsed) 
        : (($companySettings->company_icon ?? null) && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_icon) 
            ? asset('storage/' . $companySettings->company_icon) 
            : ($companySettings->company_logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_logo) 
                ? asset('storage/' . $companySettings->company_logo) 
                : asset('logo.svg')));
@endphp

<!-- Mobile Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay fixed inset-0 bg-black/50 z-40 md:hidden opacity-0 invisible transition-opacity duration-300" onclick="toggleSidebar()"></div>

<!-- Sidebar -->
<aside id="sidebar" class="sidebar-transition fixed md:static inset-y-0 left-0 z-50 w-64 md:w-64 flex flex-col shadow-lg md:shadow-none transition-all duration-300 ease-in-out -translate-x-full md:translate-x-0" style="background-color: #340080;" onmouseenter="if(window.innerWidth >= 768) expandSidebarOnHover()" onmouseleave="if(window.innerWidth >= 768) collapseSidebarOnHover()">
    <!-- Sidebar Header with Toggle -->
    <div class="flex items-center justify-center h-20 px-4 border-b border-white/10 bg-primary" style="gap: 30px;">
        <div class="flex items-center gap-3 sidebar-logo-container">
            <!-- Full Logo (shown when expanded) -->
            <img src="{{ $logoUrl }}" alt="{{ $companySettings->company_name ?? config('app.name', 'ProInvoice') }}" class="h-10 w-auto sidebar-logo-full" style="width: 150px;">
            <!-- Collapsed Logo (shown when collapsed) -->
            <img src="{{ $collapsedLogoUrl }}" alt="{{ $companySettings->company_name ?? config('app.name', 'ProInvoice') }}" class="h-8 w-8 rounded sidebar-logo-collapsed hidden">
        </div>
        <button onclick="toggleSidebar()" class="text-white/70 hover:text-white transition-colors" title="Toggle Sidebar">
            <span class="material-symbols-outlined md:hidden p-5 text-xl">close</span>
            <span class="material-symbols-outlined hidden md:block sidebar-toggle-icon">menu</span>
        </button>
    </div>

    <!-- Sidebar Content -->
    <div class="flex-1 overflow-y-auto py-4 px-3">
        @if($isSuperAdmin)
            <!-- Super Admin Menu -->
            <nav class="flex flex-col gap-1">
                <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg {{ request()->routeIs('admin.dashboard') ? 'bg-sidebar-active text-primary' : 'text-white/90 hover:bg-white/5' }} transition-colors group">
                    <span class="material-symbols-outlined text-lg">dashboard</span>
                    <span class="text-sm font-medium">DASHBOARD</span>
                    @if(request()->routeIs('admin.dashboard'))
                        <span class="material-symbols-outlined text-xs ml-auto">chevron_right</span>
                    @endif
                </a>
                
                <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors">
                    <span class="material-symbols-outlined text-lg">business</span>
                    <span class="text-sm font-medium">Companies</span>
                </a>
                
                <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors">
                    <span class="material-symbols-outlined text-lg">subscriptions</span>
                    <span class="text-sm font-medium">Subscription</span>
                </a>
                
                <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors">
                    <span class="material-symbols-outlined text-lg">inventory_2</span>
                    <span class="text-sm font-medium">Packages</span>
                </a>
                
                <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors">
                    <span class="material-symbols-outlined text-lg">receipt_long</span>
                    <span class="text-sm font-medium">Purchase Transaction</span>
                </a>
            </nav>
        @else
            <!-- Admin Menu -->
            <nav class="flex flex-col gap-1">
                <!-- MAIN Section -->
                <div class="mt-2">
                    <p class="text-white/50 text-xs font-semibold uppercase tracking-wider px-3 mb-2 sidebar-section-label">{{ __('common.main') }}</p>
                    
                    <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg {{ request()->routeIs('admin.dashboard') ? 'bg-[#ff2cff] text-white' : 'text-white/90 hover:bg-white/5' }} transition-colors group">
                        <span class="material-symbols-outlined text-lg {{ request()->routeIs('admin.dashboard') ? 'text-white' : '' }}">dashboard</span>
                        <span class="text-sm font-medium sidebar-menu-label">{{ __('common.dashboard') }}</span>
                        @if(request()->routeIs('admin.dashboard'))
                            <span class="material-symbols-outlined text-xs ml-auto sidebar-menu-chevron">chevron_right</span>
                        @endif
                    </a>
                </div>

                <!-- SALES Section -->
                <div class="mt-1">
                    <button onclick="toggleSubmenu('sales')" class="w-full flex items-center justify-between px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors group">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-lg">point_of_sale</span>
                            <span class="text-sm font-medium sidebar-menu-label">{{ __('common.sales') }}</span>
                        </div>
                        <span class="material-symbols-outlined text-xs transition-transform sidebar-menu-arrow" id="sales-arrow">expand_less</span>
                    </button>
                    <div id="sales-submenu" class="mt-1 ml-4 space-y-1 border-l-2 border-white/10 pl-4 sidebar-submenu">
                        <a href="{{ route('admin.invoices.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.invoices.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.invoices.*') ? 'text-white' : '' }}">description</span>
                            <span class="sidebar-menu-label">{{ __('common.invoices') }}</span>
                        </a>
                        <a href="{{ route('admin.quotations.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.quotations.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.quotations.*') ? 'text-white' : '' }}">receipt_long</span>
                            <span>{{ __('common.quotations') }}</span>
                        </a>
                        <a href="{{ route('admin.receipts.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.receipts.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.receipts.*') ? 'text-white' : '' }}">receipt</span>
                            <span>{{ __('common.payment_receipt') }}</span>
                        </a>
                        <a href="{{ route('admin.customers.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.customers.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.customers.*') ? 'text-white' : '' }}">group</span>
                            <span>{{ __('common.customers') }}</span>
                        </a>
                        <a href="{{ route('admin.invoice-templates.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.invoice-templates.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.invoice-templates.*') ? 'text-white' : '' }}">article</span>
                            <span>{{ __('common.template') }}</span>
                        </a>
                    </div>
                </div>

                <!-- INVENTORY Section -->
                <div class="mt-1">
                    <button onclick="toggleSubmenu('inventory')" class="w-full flex items-center justify-between px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors group">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-lg">inventory_2</span>
                            <span class="text-sm font-medium sidebar-menu-label uppercase">{{ __('common.inventory') }}</span>
                        </div>
                        <span class="material-symbols-outlined text-xs transition-transform sidebar-menu-arrow" id="inventory-arrow">expand_less</span>
                    </button>
                    <div id="inventory-submenu" class="mt-1 ml-4 space-y-1 border-l-2 border-white/10 pl-4">
                        <a href="{{ route('admin.products.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.products.index') || request()->routeIs('admin.products.create') || request()->routeIs('admin.products.edit') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.products.index') || request()->routeIs('admin.products.create') || request()->routeIs('admin.products.edit') ? 'text-white' : '' }}">category</span>
                            <span>Product / Services</span>
                        </a>
                        <a href="{{ route('admin.products.categories.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.products.categories.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.products.categories.*') ? 'text-white' : '' }}">label</span>
                            <span>Category</span>
                        </a>
                        <a href="{{ route('admin.products.brands.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.products.brands.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.products.brands.*') ? 'text-white' : '' }}">branding_watermark</span>
                            <span>Brand</span>
                        </a>
                        <a href="{{ route('admin.products.units.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.products.units.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.products.units.*') ? 'text-white' : '' }}">straighten</span>
                            <span>Units</span>
                        </a>
                        <a href="{{ route('admin.inventory.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.inventory.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.inventory.*') ? 'text-white' : '' }}">warehouse</span>
                            <span>Inventory</span>
                        </a>
                        <a href="{{ route('admin.delivery-challans.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.delivery-challans.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.delivery-challans.*') ? 'text-white' : '' }}">local_shipping</span>
                            <span>Delivery Challans</span>
                        </a>
                        <a href="{{ route('admin.credit-notes.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.credit-notes.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.credit-notes.*') ? 'text-white' : '' }}">receipt</span>
                            <span>Credit Notes</span>
                        </a>
                    </div>
                </div>


                                <!-- PURCHASE Section -->
                <div class="mt-1">
                    <button onclick="toggleSubmenu('purchase')" class="w-full flex items-center justify-between px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors group">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-lg">shopping_cart</span>
                            <span class="text-sm font-medium sidebar-menu-label">PURCHASE</span>
                        </div>
                        <span class="material-symbols-outlined text-xs transition-transform sidebar-menu-arrow" id="purchase-arrow">expand_less</span>
                    </button>
                    <div id="purchase-submenu" class="mt-1 ml-4 space-y-1 border-l-2 border-white/10 pl-4">
                        <a href="{{ route('admin.purchases.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.purchases.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.purchases.*') ? 'text-white' : '' }}">shopping_cart</span>
                            <span>Purchases</span>
                        </a>
                        <a href="{{ route('admin.purchase-orders.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.purchase-orders.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.purchase-orders.*') ? 'text-white' : '' }}">receipt_long</span>
                            <span>Purchases Order</span>
                        </a>
                        <a href="{{ route('admin.debit-notes.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.debit-notes.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.debit-notes.*') ? 'text-white' : '' }}">warehouse</span>
                            <span>Debit Notes</span>
                        </a>
                        <a href="{{ route('admin.suppliers.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.suppliers.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.suppliers.*') ? 'text-white' : '' }}">local_shipping</span>
                            <span>Suppliers</span>
                        </a>
                        <a href="{{ route('admin.supplier-payments.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.supplier-payments.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.supplier-payments.*') ? 'text-white' : '' }}">receipt</span>
                            <span>Suppliers Payments</span>
                        </a>
                    </div>
                </div>
                

                <!-- FINANCE & ACCOUNTS Section -->
                <div class="mt-1">
                    <button onclick="toggleSubmenu('finance')" class="w-full flex items-center justify-between px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors group">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-lg">account_balance</span>
                            <span class="text-sm font-medium sidebar-menu-label">FINANCE & ACCOUNTS</span>
                        </div>
                        <span class="material-symbols-outlined text-xs transition-transform sidebar-menu-arrow" id="finance-arrow">expand_less</span>
                    </button>
                    <div id="finance-submenu" class="mt-1 ml-4 space-y-1 border-l-2 border-white/10 pl-4">
                        <a href="{{ route('admin.banking.overview') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.banking.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.banking.*') ? 'text-white' : '' }}">account_balance</span>
                            <span>Banking</span>
                        </a>
                        <a href="{{ route('admin.expenses.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.expenses.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.expenses.*') ? 'text-white' : '' }}">receipt</span>
                            <span>Expenses</span>
                        </a>
                        <a href="{{ route('admin.banking.transactions.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.banking.transactions.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.banking.transactions.*') ? 'text-white' : '' }}">swap_horiz</span>
                            <span>Transactions</span>
                        </a>
                        <a href="{{ route('admin.petty-cash.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.petty-cash.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.petty-cash.*') ? 'text-white' : '' }}">wallet</span>
                            <span>Petty Cash</span>
                        </a>
                    </div>
                </div>

                <!-- REPORTS Section -->
                <div class="mt-1">
                    <button onclick="toggleSubmenu('reports')" class="w-full flex items-center justify-between px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors group">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-lg">bar_chart</span>
                            <span class="text-sm font-medium sidebar-menu-label">REPORTS</span>
                        </div>
                        <span class="material-symbols-outlined text-xs transition-transform sidebar-menu-arrow" id="reports-arrow">expand_less</span>
                    </button>
                    <div id="reports-submenu" class="mt-1 ml-4 space-y-1 border-l-2 border-white/10 pl-4">
                        <a href="{{ route('admin.reports.transactions.sales') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.reports.transactions.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.reports.transactions.*') ? 'text-white' : '' }}">assessment</span>
                            <span>Transaction Reports</span>
                        </a>
                        <a href="{{ route('admin.reports.accounting.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.reports.accounting.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.reports.accounting.*') ? 'text-white' : '' }}">calculate</span>
                            <span>Accounting Reports</span>
                        </a>
                        <a href="{{ route('admin.reports.inventory.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.reports.inventory.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.reports.inventory.*') ? 'text-white' : '' }}">inventory</span>
                            <span>Inventory Reports</span>
                        </a>
                        @if($user->hasPermission('view_reminder_logs') || $isSuperAdmin)
                        <a href="{{ route('admin.reports.reminder-logs.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.reports.reminder-logs.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.reports.reminder-logs.*') ? 'text-white' : '' }}">mark_email_read</span>
                            <span>Reminder Logs</span>
                        </a>
                        @endif
                    </div>
                </div>

                <!-- SETTINGS & CONFIGURATIONS Section -->
                <div class="mt-1">
                    <button onclick="toggleSubmenu('settings')" class="w-full flex items-center justify-between px-3 py-2.5 rounded-lg text-white/90 hover:bg-white/5 transition-colors group">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-lg">settings</span>
                            <span class="text-sm font-medium sidebar-menu-label">SETTINGS & CONFIGURATIONS</span>
                        </div>
                        <span class="material-symbols-outlined text-xs transition-transform sidebar-menu-arrow" id="settings-arrow">expand_less</span>
                    </button>
                    <div id="settings-submenu" class="mt-1 ml-4 space-y-1 border-l-2 border-white/10 pl-4">
                        <a href="{{ route('admin.settings.general', ['tab' => 'company']) }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.settings.*') ? 'bg-[#ff2cff] text-white' : 'text-white/70 hover:text-white hover:bg-white/5' }} transition-colors text-sm">
                            <span class="material-symbols-outlined text-base {{ request()->routeIs('admin.settings.*') ? 'text-white' : '' }}">tune</span>
                            <span>General Settings</span>
                        </a>
                        <button onclick="toggleSubmenu('system-settings')" class="w-full flex items-center justify-between px-3 py-2 rounded-lg text-white/70 hover:text-white hover:bg-white/5 transition-colors text-sm">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-base">settings_applications</span>
                                <span>System Settings</span>
                            </div>
                            <span class="material-symbols-outlined text-xs transition-transform" id="system-settings-arrow">expand_less</span>
                        </button>
                        <div id="system-settings-submenu" class="mt-1 ml-4 space-y-1 border-l-2 border-white/20 pl-4">
                            <a href="{{ route('admin.settings.roles') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.settings.roles') ? 'bg-[#ff2cff] text-white' : 'text-white/60 hover:text-white hover:bg-white/5' }} transition-colors text-xs">
                                <span class="material-symbols-outlined text-sm {{ request()->routeIs('admin.settings.roles') ? 'text-white' : '' }}">admin_panel_settings</span>
                                <span>Roles & Permissions</span>
                            </a>
                            <a href="{{ route('admin.settings.users') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.settings.users*') ? 'bg-[#ff2cff] text-white' : 'text-white/60 hover:text-white hover:bg-white/5' }} transition-colors text-xs">
                                <span class="material-symbols-outlined text-sm {{ request()->routeIs('admin.settings.users*') ? 'text-white' : '' }}">people</span>
                                <span>Users</span>
                            </a>
                            <a href="{{ route('admin.settings.email') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.settings.email') ? 'bg-[#ff2cff] text-white' : 'text-white/60 hover:text-white hover:bg-white/5' }} transition-colors text-xs">
                                <span class="material-symbols-outlined text-sm {{ request()->routeIs('admin.settings.email') ? 'text-white' : '' }}">email</span>
                                <span>Email Settings</span>
                            </a>
                            @if($user->hasPermission('manage_reminders') || $isSuperAdmin)
                            <a href="{{ route('admin.reminders.settings') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.reminders.settings') ? 'bg-[#ff2cff] text-white' : 'text-white/60 hover:text-white hover:bg-white/5' }} transition-colors text-xs">
                                <span class="material-symbols-outlined text-sm {{ request()->routeIs('admin.reminders.settings') ? 'text-white' : '' }}">schedule_send</span>
                                <span>Billing Reminders</span>
                            </a>
                            @endif
                            @if($user->hasPermission('manage_email_templates') || $isSuperAdmin)
                            <a href="{{ route('admin.reminders.email-templates.index') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.reminders.email-templates.index') || request()->routeIs('admin.reminders.email-templates.edit') ? 'bg-[#ff2cff] text-white' : 'text-white/60 hover:text-white hover:bg-white/5' }} transition-colors text-xs">
                                <span class="material-symbols-outlined text-sm {{ request()->routeIs('admin.reminders.email-templates.index') || request()->routeIs('admin.reminders.email-templates.edit') ? 'text-white' : '' }}">edit_note</span>
                                <span>Reminder Email Templates</span>
                            </a>
                            @endif
                            <a href="{{ route('admin.settings.sms') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.settings.sms') ? 'bg-[#ff2cff] text-white' : 'text-white/60 hover:text-white hover:bg-white/5' }} transition-colors text-xs">
                                <span class="material-symbols-outlined text-sm {{ request()->routeIs('admin.settings.sms') ? 'text-white' : '' }}">sms</span>
                                <span>SMS Settings</span>
                            </a>
                            <a href="{{ route('admin.settings.whatsapp') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.settings.whatsapp') ? 'bg-[#ff2cff] text-white' : 'text-white/60 hover:text-white hover:bg-white/5' }} transition-colors text-xs">
                                <span class="material-symbols-outlined text-sm {{ request()->routeIs('admin.settings.whatsapp') ? 'text-white' : '' }}">chat</span>
                                <span>WhatsApp Settings</span>
                            </a>
                            <a href="{{ route('admin.settings.finance') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.settings.finance') ? 'bg-[#ff2cff] text-white' : 'text-white/60 hover:text-white hover:bg-white/5' }} transition-colors text-xs">
                                <span class="material-symbols-outlined text-sm {{ request()->routeIs('admin.settings.finance') ? 'text-white' : '' }}">account_balance_wallet</span>
                                <span>Finance Settings</span>
                            </a>
                            <a href="{{ route('admin.settings.modules') }}" class="flex items-center gap-3 px-3 py-2 rounded-lg {{ request()->routeIs('admin.settings.modules') ? 'bg-[#ff2cff] text-white' : 'text-white/60 hover:text-white hover:bg-white/5' }} transition-colors text-xs">
                                <span class="material-symbols-outlined text-sm {{ request()->routeIs('admin.settings.modules') ? 'text-white' : '' }}">extension</span>
                                <span>Module Settings</span>
                            </a>
                        </div>
                    </div>
                </div>
            </nav>
        @endif
    </div>

    <!-- Sidebar Footer -->
    <div class="p-4 border-t border-white/10">
        <form method="POST" action="{{ route('logout') }}" class="mb-3">
            @csrf
            <button type="submit" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg bg-[#ff2cff] text-white/90 transition-colors">
                <span class="material-symbols-outlined text-lg">{{ $logoutIcon }}</span>
                <span class="text-sm font-medium sidebar-menu-label">{{ __('common.logout') }}</span>
            </button>
        </form>
        <div class="flex items-center gap-3 px-3 py-2">
            <div class="bg-white/10 rounded-full size-10 flex items-center justify-center">
                <span class="text-white text-sm font-bold">{{ strtoupper(substr(Auth::user()->name, 0, 1)) }}</span>
            </div>
            <div class="flex flex-col flex-1 min-w-0 sidebar-user-info">
                <p class="text-white text-sm font-medium truncate" style="font-size: 16px;">{{ Auth::user()->name }}</p>
                <p class="text-white/70 text-xs truncate" style="font-size: 13px;">{{ Auth::user()->email }}</p>
            </div>
        </div>
    </div>
</aside>