@props(['open' => true])

@php
use Illuminate\Support\Facades\Route;

$user = auth()->user();
$role = $user ? $user->roles->first() : null;
$roleName = $role ? $role->name : 'User';
$roleSlug = Str::slug($roleName);
$themeColor = "var(--color-role-{$roleSlug})";

$roleColors = [
    'Super Manager'  => 'bg-purple-500',
    'Manager'        => 'bg-blue-600',
    'Members'        => 'bg-green-500',
    'Trainers'       => 'bg-orange-500',
    'Trainees'       => 'bg-yellow-500',
    'Mentor'         => 'bg-teal-500',
    'Mentee'         => 'bg-cyan-500',
    'Partners'       => 'bg-indigo-500',
    'Contributor'    => 'bg-pink-500',
    'Health Marketor'=> 'bg-red-500',
];
$roleBadgeClass = $roleColors[$roleName] ?? 'bg-gray-500';
@endphp

<style>
    /* Forest green sidebar base */
    .sidebar-bg {
        background-color: #1a4731;
    }
    .role-themed-active {
        color: #ffffff;
        background-color: rgba(255,255,255,0.15);
        border-left-color: #e53e3e;
    }
    .role-themed-hover:hover {
        background-color: rgba(255,255,255,0.08);
    }
    /* Group label: forest-green → red gradient as a pill/banner */
    .sidebar-group-label {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #ffffff;
        padding: 0.35rem 0.75rem;
        margin: 0.5rem 0 0.25rem;
        border-radius: 0.375rem;
        background: linear-gradient(90deg, #1a4731 0%, #276749 40%, #c53030 100%);
    }
    /* Sub-menu items stay on the main sidebar bg */
    .sidebar-nav-link {
        color: rgba(255,255,255,0.82);
    }
    .sidebar-nav-link:hover {
        background-color: rgba(255,255,255,0.08);
        color: #ffffff;
    }
    .sidebar-nav-link.active {
        background-color: rgba(255,255,255,0.15);
        border-left-color: #e53e3e;
        color: #ffffff;
    }
    /* Profile section border */
    .sidebar-profile-border {
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    /* Collapse button */
    .sidebar-collapse-btn {
        background-color: rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.7);
    }
    .sidebar-collapse-btn:hover {
        background-color: rgba(255,255,255,0.15);
        color: #ffffff;
    }
    /* Pulse ring on profile avatar to hint it's clickable */
    .avatar-hint-ring {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 0 4px rgba(229,62,62,0.35);
    }
</style>

<!-- Sidebar Container
     KEY RULES for scrollable nav inside a fixed flex-col container:
     1. <aside> must have a fixed height (h-screen) AND overflow:hidden
        so the flex container itself does not grow beyond the viewport.
     2. <nav> must have flex:1 1 0% AND min-height:0 so it can shrink
        below its natural content height and trigger overflow-y:auto.
     Without min-height:0, flex children default to min-height:auto
     which means they expand to fit all content and never scroll.
-->
<aside
    x-data="sidebarProfileData()"
    :class="{
        'w-64': sidebarOpen,
        'w-20': !sidebarOpen && !isMobile,
        '-translate-x-full': !sidebarOpen && isMobile,
        'translate-x-0': sidebarOpen || !isMobile
    }"
    class="sidebar-bg fixed left-0 top-0 z-40 shadow-xl transition-all duration-300 ease-in-out flex flex-col"
    style="height: 100vh; overflow: hidden;"
>
    <!-- ── TOP BAR: Mobile close button + optional collapse toggle ── -->
    <div class="flex items-center justify-between px-3 pt-2 pb-1 flex-shrink-0">
        <!-- App brand / logo text -->
        <span x-show="sidebarOpen" x-transition class="text-xs font-bold tracking-widest text-green-300 uppercase select-none">Menu</span>
        <span x-show="!sidebarOpen && !isMobile" class="w-full flex justify-center">
            <i class="fa-solid fa-bars text-green-300 text-sm"></i>
        </span>

        <!-- Mobile: close (×) button — only visible on mobile -->
        <button
            x-show="isMobile"
            @click="toggleSidebar()"
            class="ml-auto flex items-center justify-center w-8 h-8 rounded-lg sidebar-collapse-btn transition-colors duration-200"
            aria-label="Close Sidebar"
        >
            <i class="fa-solid fa-xmark text-sm"></i>
        </button>

        <!-- Desktop: collapse/expand button -->
        <button
            x-show="!isMobile"
            @click="toggleSidebar()"
            class="ml-auto flex items-center justify-center w-8 h-8 rounded-lg sidebar-collapse-btn transition-colors duration-200"
            aria-label="Toggle Sidebar"
        >
            <i class="fa-solid transition-transform duration-300"
               :class="sidebarOpen ? 'fa-chevron-left' : 'fa-chevron-right'"></i>
        </button>
    </div>

    <!-- Profile Avatar Section -->
    <div class="sidebar-profile-border flex-shrink-0 px-3 pb-3">
        <div class="relative" x-data="{ profileOpen: false }">
            <!-- Avatar button with visual hint -->
            <button
                @click="profileOpen = !profileOpen"
                class="w-full flex items-center gap-3 p-2 rounded-lg role-themed-hover transition-colors duration-200 group"
                aria-label="User Menu"
                :title="sidebarOpen ? '' : '{{ $user->name }} — click for menu'"
            >
                <!-- Avatar with ring hint -->
                <div class="relative flex-shrink-0">
                    <div class="w-9 h-9 rounded-full overflow-hidden bg-gradient-to-br from-green-400 to-green-700 flex items-center justify-center avatar-hint-ring">
                        <img
                            src="{{ $user->avatar_url }}"
                            alt="{{ $user->name }}"
                            class="w-full h-full object-cover"
                            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                        />
                        <span
                            class="absolute inset-0 flex items-center justify-center text-white font-semibold text-xs"
                            style="display:none;"
                        >{{ $user->initials }}</span>
                    </div>
                    <!-- Small dropdown indicator dot on avatar -->
                    <span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-400 border-2 border-[#1a4731] rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-caret-down text-[6px] text-[#1a4731]"></i>
                    </span>
                </div>

                <!-- Name + role (visible when expanded) -->
                <div x-show="sidebarOpen" x-transition class="flex-1 min-w-0 text-left">
                    <p class="text-sm font-semibold text-white truncate leading-tight">{{ $user->name }}</p>
                    <p class="text-xs text-green-200 truncate leading-tight">{{ $roleName }}</p>
                </div>

                <!-- Animated chevron indicator -->
                <i
                    x-show="sidebarOpen"
                    x-transition
                    class="fa-solid fa-chevron-down text-xs text-green-300 flex-shrink-0 transition-transform duration-200"
                    :class="profileOpen ? 'rotate-180' : 'rotate-0'"
                ></i>
            </button>

            <!-- Profile dropdown -->
            <div
                x-show="profileOpen"
                x-transition:enter="transition ease-out duration-150"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-100"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                @click.outside="profileOpen = false"
                class="absolute left-0 top-full mt-1 w-64 z-[9999] bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200/60 dark:border-gray-700/60 overflow-hidden"
                style="display:none;"
            >
                <!-- User info -->
                <div class="px-4 py-4 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center gap-3">
                        <div class="relative w-10 h-10 rounded-full overflow-hidden bg-gradient-to-br from-green-400 to-green-700 flex items-center justify-center flex-shrink-0">
                            <img
                                src="{{ $user->avatar_url }}"
                                alt="{{ $user->name }}"
                                class="w-full h-full object-cover"
                                onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                            />
                            <span
                                class="absolute inset-0 flex items-center justify-center text-white font-semibold text-sm"
                                style="display:none;"
                            >{{ $user->initials }}</span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{{ $user->name }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $user->email }}</p>
                            <span class="inline-block mt-1 px-2 py-0.5 text-[10px] font-semibold text-white rounded-full {{ $roleBadgeClass }}">
                                {{ $roleName }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Menu items -->
                <div class="py-1">
                    <a href="{{ route('profile.edit') }}"
                       class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                        <i class="fa-solid fa-user w-4 text-gray-400"></i>
                        Edit Profile
                    </a>
                    <a href="{{ $user->getDashboardUrl() }}"
                       class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                        <i class="fa-solid fa-gauge w-4 text-gray-400"></i>
                        Dashboard
                    </a>
                    @if($user->hasSelfPacedPortalAccess())
                    <a href="{{ route($user->getSelfPacedPortalRoute()) }}"
                       class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                        <i class="fa-solid fa-graduation-cap w-4 text-indigo-500"></i>
                        {{ $user->hasRole('Trainees') ? 'My Courses' : 'Self-Paced Portal' }}
                    </a>
                    @endif
                    @role('Super Manager')
                    <a href="{{ route('roles.index') }}"
                       class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                        <i class="fa-solid fa-user-shield w-4 text-gray-400"></i>
                        Role Management
                    </a>
                    @endrole
                </div>

                <!-- Logout -->
                <div class="border-t border-gray-200 dark:border-gray-700">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit"
                            class="flex items-center gap-3 w-full px-4 py-3 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
                            <i class="fa-solid fa-right-from-bracket w-4"></i>
                            Logout
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation — scrollable, fills remaining sidebar height -->
    <nav class="sidebar-nav-scroll py-2 px-2" style="flex:1 1 0%; min-height:0; overflow-y:auto; overflow-x:hidden;">

        {{-- ================================================================ --}}
        {{-- GROUP 1: CORE --}}
        {{-- ================================================================ --}}
        <div x-show="sidebarOpen" class="sidebar-group-label">Core</div>

        @php $isActive = request()->routeIs('dashboard') || request()->routeIs('dashboard.*'); @endphp
        <a href="{{ route('dashboard') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-gauge-high fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Dashboard</span>
        </a>

        @php $isActive = request()->routeIs('profile.edit'); @endphp
        <a href="{{ route('profile.edit') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-user-circle fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Profile</span>
        </a>

        @php $isActive = request()->routeIs('settings.sessions'); @endphp
        <a href="{{ route('settings.sessions') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-laptop fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Active Sessions</span>
        </a>

        @php $isActive = request()->routeIs('settings.security'); @endphp
        <a href="{{ route('settings.security') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-shield-halved fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Security</span>
        </a>

        {{-- ================================================================ --}}
        {{-- GROUP 2: ADMINISTRATION --}}
        {{-- ================================================================ --}}
        @if($user->can('view users') || $user->can('assign roles') || $user->hasRole('Super Manager'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Administration</div>

        @can('view users')
        @php $isActive = request()->routeIs('users.index') || request()->routeIs('users.*'); @endphp
        <a href="{{ route('users.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-users fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Users</span>
        </a>
        @endcan

        @if($user->hasRole('Super Manager'))
        @php $isActive = request()->routeIs('roles.*'); @endphp
        <a href="{{ route('roles.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-shield-halved fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Roles & Permissions</span>
        </a>

        @php $isActive = request()->routeIs('otp.*'); @endphp
        <a href="{{ route('otp.settings') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-gear fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">System Settings</span>
        </a>

        @php $isActive = request()->routeIs('admin.themes.*'); @endphp
        <a href="{{ route('admin.themes.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-palette fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Themes</span>
        </a>

        @role('Super Manager')
        <a href="/telescope" target="_blank"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link">
            <i class="fa-solid fa-magnifying-glass-chart fa-fw text-base text-green-300"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Audit Log</span>
        </a>
        @endrole
        @endif
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 3: MEMBERSHIP & LOANS --}}
        {{-- ================================================================ --}}
        @if($user->can('view members') || $user->can('view membership categories') || $user->can('view loan products') || $user->can('view loan applications') || $user->hasRole('Members'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Membership & Loans</div>

        @can('view members')
        @php $isActive = request()->routeIs('admin.membership.dashboard'); @endphp
        <a href="{{ route('admin.membership.dashboard') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-id-card fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Membership Dashboard</span>
        </a>
        @endcan

        @can('view membership categories')
        @php $isActive = request()->routeIs('admin.membership-categories.*'); @endphp
        <a href="{{ route('admin.membership-categories.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-layer-group fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Membership Categories</span>
        </a>
        @endcan

        @can('view members')
        @php $isActive = request()->routeIs('admin.members.index') || request()->routeIs('admin.members.*'); @endphp
        <a href="{{ route('admin.members.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-users-rectangle fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Members</span>
        </a>
        @endcan

        @can('approve members')
        @php $isActive = request()->routeIs('admin.members.applications.*'); @endphp
        <a href="{{ route('admin.members.applications.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-file-pen fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Applications</span>
        </a>
        @endcan

        @can('manage renewal configs')
        @php $isActive = request()->routeIs('admin.renewal-configs.*'); @endphp
        <a href="{{ route('admin.renewal-configs.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-rotate fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Renewal Config</span>
        </a>
        @endcan

        @can('view loan products')
        @php $isActive = request()->routeIs('admin.loan-products.*'); @endphp
        <a href="{{ route('admin.loan-products.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-hand-holding-dollar fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Loan Products</span>
        </a>
        @endcan

        @can('view loan applications')
        @php $isActive = request()->routeIs('admin.loan-applications.*'); @endphp
        <a href="{{ route('admin.loan-applications.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-file-invoice-dollar fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Loan Applications</span>
        </a>
        @endcan

        @if($user->hasRole('Members'))
        @php $isActive = request()->routeIs('member.dashboard'); @endphp
        <a href="{{ route('member.dashboard') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-address-card fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Membership</span>
        </a>

        @php $isActive = request()->routeIs('member.contributions') || request()->routeIs('member.contributions.*'); @endphp
        <a href="{{ route('member.contributions') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-coins fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Contributions</span>
        </a>

        @php $isActive = request()->routeIs('member.loans.*'); @endphp
        <a href="{{ route('member.loans.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-money-bill-wave fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Loans</span>
        </a>

        @can('view membership certificate')
        @php $isActive = request()->routeIs('member.certificate.*'); @endphp
        <a href="{{ route('member.certificate.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-certificate fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Certificate</span>
        </a>
        @endcan

        @can('renew membership')
        @php $isActive = request()->routeIs('member.renewal.settings') || request()->routeIs('member.renewal.settings.update'); @endphp
        <a href="{{ route('member.renewal.settings') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-rotate fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Renew Membership</span>
        </a>
        @endcan

        @can('view renewal history')
        @php $isActive = request()->routeIs('member.renewal.index'); @endphp
        <a href="{{ route('member.renewal.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-clock-rotate-left fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Renewal History</span>
        </a>
        @endcan
        @endif
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 4: HEALTH DIRECTORY --}}
        {{-- ================================================================ --}}
        @if($user->can('view institutions') || $user->can('manage institutions') || $user->can('view machines') || $user->can('manage machines'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Health Directory</div>

        @php $isActive = request()->routeIs('dashboard.institutions.*') || request()->routeIs('admin.institutions.*'); @endphp
        <a href="{{ $user->can('manage institutions') ? route('admin.institutions.index') : route('dashboard.institutions.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-hospital fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Health Institutions</span>
        </a>

        @php $isActive = request()->routeIs('dashboard.machines.*') || request()->routeIs('admin.machines.*'); @endphp
        <a href="{{ $user->can('manage machines') ? route('admin.machines.index') : route('dashboard.machines.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-computer fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Digital Machines</span>
        </a>
        @endif


        {{-- ================================================================ --}}
        {{-- PAYMENTS GROUP (Health Directory Payments) --}}
        {{-- Super Manager & Manager: full payment history + configure --}}
        {{-- Health Marketor: own payment history only --}}
        {{-- ================================================================ --}}
        @if($user->can('view payments') || $user->can('manage payments') || $user->can('configure payments'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Payments</div>

        @if($user->can('manage payments') || $user->hasAnyRole(['Super Manager', 'Manager']))
        @php $isActive = request()->routeIs('admin.payments.index') || request()->routeIs('admin.payments.*'); @endphp
        <a href="{{ route('admin.payments.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-credit-card fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">All Payments</span>
        </a>
        @endif

        @can('configure payments')
        @php $isActive = request()->routeIs('admin.payments.configure'); @endphp
        <a href="{{ route('admin.payments.configure') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-sliders fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Payment Settings</span>
        </a>
        @endcan

        @can('view payments')
        @if(!$user->can('manage payments') && !$user->hasAnyRole(['Super Manager', 'Manager']))
        @php $isActive = request()->routeIs('dashboard.payments.index'); @endphp
        <a href="{{ route('dashboard.payments.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-receipt fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Payments</span>
        </a>
        @endif
        @endcan
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 5: TRAINING --}}
        {{-- ================================================================ --}}
        @if($user->can('view training sessions') || $user->can('view training packages') || $user->can('view training registrations') || $user->can('view training reports') || $user->can('register for training'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Training</div>

        {{-- Training Packages — visible to all with view permission --}}
        @can('view training packages')
        @php $isActive = request()->routeIs('training.packages.*'); @endphp
        <a href="{{ route('training.packages.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-box-open fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Training Packages</span>
        </a>
        @endcan

        {{-- Training Sessions — visible to managers, trainers, and trainees --}}
        @can('view training sessions')
        @php $isActive = request()->routeIs('training.sessions.*'); @endphp
        <a href="{{ route('training.sessions.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-chalkboard-user fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Training Sessions</span>
        </a>
        @endcan

        {{-- All Registrations — admin/manager view --}}
        @can('view training registrations')
        @php $isActive = request()->routeIs('training.registrations.index') || request()->routeIs('training.registrations.pending'); @endphp
        <a href="{{ route('training.registrations.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-clipboard-list fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Registrations</span>
        </a>
        @endcan

        {{-- Attendance — trainers and managers --}}
        @can('view training attendance')
        @php $isActive = request()->routeIs('training.sessions.attendance*'); @endphp
        <a href="{{ route('training.sessions.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-clipboard-check fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Attendance</span>
        </a>
        @endcan

        {{-- All Certificates — admin/manager view --}}
        @can('view training certificates')
        @if($user->can('generate training certificates') || $user->can('revoke training certificates'))
        @php $isActive = request()->routeIs('training.certificates.index'); @endphp
        <a href="{{ route('training.certificates.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-certificate fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Certificates</span>
        </a>
        @endif
        @endcan

        {{-- Training Reports — managers only --}}
        @can('view training reports')
        @php $isActive = request()->routeIs('training.reports.*'); @endphp
        <a href="{{ route('training.reports.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-chart-bar fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Training Reports</span>
        </a>
        @endcan

        {{-- My Training — trainees, members, and anyone who can register --}}
        @can('register for training')
        @php $isActive = request()->routeIs('training.registrations.my') || request()->routeIs('training.registrations.create') || request()->routeIs('training.registrations.show'); @endphp
        <a href="{{ route('training.registrations.my') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-graduation-cap fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Training</span>
        </a>
        @endcan

        {{-- My Certificates — trainees, members, and anyone who can view/download certificates --}}
        @can('view training certificates')
        @php $isActive = request()->routeIs('training.certificates.my') || request()->routeIs('training.certificates.show'); @endphp
        <a href="{{ route('training.certificates.my') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-award fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Certificates</span>
        </a>
        @endcan
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 6: MENTORSHIP --}}
        {{-- ================================================================ --}}
        @if($user->can('view mentorship programmes') || $user->can('view mentorship applications') || $user->can('view mentorship assignments') || $user->can('view mentorship sessions') || $user->can('view mentorship certificates') || $user->can('view mentorship payments') || $user->can('view mentorship categories') || $user->hasRole('Mentee') || $user->hasRole('Mentor'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Mentorship</div>

        @can('view mentorship programmes')
        @php $isActive = request()->routeIs('mentorship.programmes.*'); @endphp
        <a href="{{ route('mentorship.programmes.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-people-arrows fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Programmes</span>
        </a>
        @endcan

        @can('view mentorship applications')
        @php $isActive = request()->routeIs('mentorship.applications.*'); @endphp
        <a href="{{ route('mentorship.applications.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-file-circle-check fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Applications</span>
        </a>
        @endcan

        @can('view mentorship assignments')
        @php $isActive = request()->routeIs('mentorship.assignments.*'); @endphp
        <a href="{{ route('mentorship.assignments.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-link fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Assignments</span>
        </a>
        @endcan

        @can('view mentorship sessions')
        @php $isActive = request()->routeIs('mentorship.sessions.*'); @endphp
        <a href="{{ route('mentorship.sessions.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-calendar-check fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Sessions</span>
        </a>
        @endcan

        @can('view mentorship certificates')
        @php $isActive = request()->routeIs('mentorship.certificates.*'); @endphp
        <a href="{{ route('mentorship.certificates.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-certificate fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Certificates</span>
        </a>
        @endcan

        @can('view mentorship payments')
        @php $isActive = request()->routeIs('mentorship.payments.*'); @endphp
        <a href="{{ route('mentorship.payments.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-credit-card fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Payments</span>
        </a>
        @endcan

        @can('view mentorship categories')
        @php $isActive = request()->routeIs('mentorship.categories.*'); @endphp
        <a href="{{ route('mentorship.categories.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-folder fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Categories</span>
        </a>
        @endcan
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 7: RESEARCH & ADVOCACY --}}
        {{-- ================================================================ --}}
        @if($user->can('view publications') || $user->can('review publications') || $user->can('view campaigns') || $user->can('view polls') || $user->can('view stories'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Research & Advocacy</div>

        @can('view publications')
        @php $isActive = request()->routeIs('research.index') || (request()->routeIs('research.*') && !request()->routeIs('research.review.*')); @endphp
        <a href="{{ route('research.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-flask fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Research Publications</span>
        </a>
        @endcan

        @can('review publications')
        @php $isActive = request()->routeIs('research.review.*'); @endphp
        <a href="{{ route('research.review.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-microscope fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Review Queue</span>
        </a>
        @endcan

        @can('view campaigns')
        @php $isActive = request()->routeIs('advocacy.campaigns.*'); @endphp
        <a href="{{ route('advocacy.campaigns.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-bullhorn fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Campaigns</span>
        </a>
        @endcan

        @can('view polls')
        @php $isActive = request()->routeIs('advocacy.polls.*'); @endphp
        <a href="{{ route('advocacy.polls.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-square-poll-vertical fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Polls</span>
        </a>
        @endcan

        @can('view stories')
        @php $isActive = request()->routeIs('advocacy.stories.*'); @endphp
        <a href="{{ route('advocacy.stories.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-newspaper fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Health Stories</span>
        </a>
        @endcan
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 8: PARTNERS & FORUM --}}
        {{-- ================================================================ --}}
        @if($user->can('view partners') || $user->can('view forum'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Partners & Forum</div>

        @can('view partners')
        @php $isActive = request()->routeIs('partners.index') || (request()->routeIs('partners.*') && !request()->routeIs('partners.forum.*')); @endphp
        <a href="{{ route('partners.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-handshake fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Partners</span>
        </a>
        @endcan

        @can('view forum')
        @php $isActive = request()->routeIs('partners.forum.*'); @endphp
        <a href="{{ route('partners.forum.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-comments fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Forum</span>
        </a>
        @endcan
        @endif


        {{-- ================================================================ --}}
        {{-- GROUP 9: KNOWLEDGE SHARING --}}
        {{-- ================================================================ --}}
        @if($user->can('view discussion topics') || $user->can('view discussions') || $user->can('manage knowledge base categories') || $user->can('view knowledge base questions') || $user->hasRole('Contributor'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Knowledge Sharing</div>

        @can('view discussion topics')
        @php $isActive = request()->routeIs('knowledge-sharing.discussions.topics.*'); @endphp
        <a href="{{ route('knowledge-sharing.discussions.topics.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-lightbulb fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Discussion Topics</span>
        </a>
        @endcan

        @can('view discussions')
        @php $isActive = request()->routeIs('knowledge-sharing.discussions.index') || (request()->routeIs('knowledge-sharing.discussions.*') && !request()->routeIs('knowledge-sharing.discussions.topics.*')); @endphp
        <a href="{{ route('knowledge-sharing.discussions.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-message fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Discussions</span>
        </a>
        @endcan

        @can('manage knowledge base categories')
        @php $isActive = request()->routeIs('knowledge-sharing.knowledge-base.categories.*'); @endphp
        <a href="{{ route('knowledge-sharing.knowledge-base.categories.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-book-open fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">KB Categories</span>
        </a>
        @endcan

        @can('view knowledge base questions')
        @php $isActive = request()->routeIs('knowledge-sharing.knowledge-base.index') || (request()->routeIs('knowledge-sharing.knowledge-base.*') && !request()->routeIs('knowledge-sharing.knowledge-base.categories.*')); @endphp
        <a href="{{ route('knowledge-sharing.knowledge-base.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-circle-question fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Knowledge Base Q&A</span>
        </a>
        @endcan

        @if($user->hasRole('Contributor'))
        @php $isActive = request()->routeIs('contributor.dashboard'); @endphp
        <a href="{{ route('contributor.dashboard') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-pen-nib fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Contributor Dashboard</span>
        </a>

        @php $isActive = request()->routeIs('contributor.discussions'); @endphp
        <a href="{{ route('contributor.discussions') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-comments fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Discussions</span>
        </a>

        @php $isActive = request()->routeIs('contributor.replies'); @endphp
        <a href="{{ route('contributor.replies') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-reply fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Replies</span>
        </a>
        @endif
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 10: COMMUNICATION --}}
        {{-- ================================================================ --}}
        @if($user->can('create emails') || $user->can('view emails') || $user->can('manage email templates') || $user->can('create sms') || $user->can('view sms') || $user->can('manage sms templates') || $user->can('view tickets') || $user->can('view chats'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Communication</div>

        @can('create emails')
        @php $isActive = request()->routeIs('emails.compose') || request()->routeIs('emails.create'); @endphp
        <a href="{{ route('emails.compose') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-envelope fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Email Compose</span>
        </a>
        @endcan

        @can('view emails')
        @php $isActive = request()->routeIs('emails.history'); @endphp
        <a href="{{ route('emails.history') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-envelope-open-text fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Email History</span>
        </a>
        @endcan

        @can('manage email templates')
        @php $isActive = request()->routeIs('emails.templates') || request()->routeIs('emails.*template*'); @endphp
        <a href="{{ route('emails.templates') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-file-lines fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Email Templates</span>
        </a>
        @endcan

        @can('create sms')
        @php $isActive = request()->routeIs('sms.compose') || request()->routeIs('sms.create'); @endphp
        <a href="{{ route('sms.compose') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-comment-sms fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">SMS Compose</span>
        </a>
        @endcan

        @can('view sms')
        @php $isActive = request()->routeIs('sms.history'); @endphp
        <a href="{{ route('sms.history') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-clock-rotate-left fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">SMS History</span>
        </a>
        @endcan

        @can('manage sms templates')
        @php $isActive = request()->routeIs('sms.templates'); @endphp
        <a href="{{ route('sms.templates') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-file-code fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">SMS Templates</span>
        </a>
        @endcan

        @can('view tickets')
        @php $isActive = request()->routeIs('tickets.*'); @endphp
        <a href="{{ route('tickets.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-ticket fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Support Tickets</span>
        </a>
        @endcan

        @can('view chats')
        @php $isActive = request()->routeIs('chat.index'); @endphp
        <a href="{{ route('chat.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-headset fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Chat</span>
        </a>
        @endcan

        @can('manage chat categories')
        @php $isActive = request()->routeIs('chat.categories'); @endphp
        <a href="{{ route('chat.categories') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-tags fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Chat Categories</span>
        </a>
        @endcan

        @can('appoint chat agents')
        @php $isActive = request()->routeIs('chat.agents'); @endphp
        <a href="{{ route('chat.agents') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-user-headset fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Chat Agents</span>
        </a>
        @endcan

        @can('handle chats')
        @php $isActive = request()->routeIs('chat.conversations') || request()->routeIs('chat.conversation.*'); @endphp
        <a href="{{ route('chat.conversations') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-comments fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Chat Conversations</span>
        </a>
        @endcan

        @can('view chats')
        @if($user->hasRole('Super Manager') || $user->hasRole('Manager') || $user->can('appoint chat agents'))
        @php $isActive = request()->routeIs('chat.agent-dashboard'); @endphp
        <a href="{{ route('chat.agent-dashboard') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-gauge fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Agent Dashboard</span>
        </a>
        @endif
        @endcan
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 11: ORGANIZATION & GOVERNANCE --}}
        {{-- ================================================================ --}}
        @if($user->can('view organizations') || $user->can('view leadership positions') || $user->can('view leadership history') || $user->can('view staff history') || $user->can('view election cycles') || $user->can('view voting procedures') || $user->can('view organogram'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Organization & Governance</div>

        @can('view organizations')
        @php $isActive = request()->routeIs('organization.details.*'); @endphp
        <a href="{{ route('organization.details.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-building fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Organization Details</span>
        </a>
        @endcan

        @can('view leadership positions')
        @php $isActive = request()->routeIs('organization.leadership-positions.*'); @endphp
        <a href="{{ route('organization.leadership-positions.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-sitemap fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Leadership Positions</span>
        </a>
        @endcan

        @can('view leadership history')
        @php $isActive = request()->routeIs('organization.leadership-history.*'); @endphp
        <a href="{{ route('organization.leadership-history.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-timeline fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Leadership History</span>
        </a>
        @endcan

        @can('view staff history')
        @php $isActive = request()->routeIs('organization.staff-history.*'); @endphp
        <a href="{{ route('organization.staff-history.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-user-clock fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Staff History</span>
        </a>
        @endcan

        @can('view election cycles')
        @php $isActive = request()->routeIs('organization.election-cycles.*'); @endphp
        <a href="{{ route('organization.election-cycles.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-person-booth fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Election Cycles</span>
        </a>
        @endcan

        @can('view voting procedures')
        @php $isActive = request()->routeIs('organization.voting-procedures.*'); @endphp
        <a href="{{ route('organization.voting-procedures.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-check-to-slot fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Voting Procedures</span>
        </a>
        @endcan

        @can('view organogram')
        @php $isActive = request()->routeIs('organization.organogram.*'); @endphp
        <a href="{{ route('organization.organogram.show') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-diagram-project fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Organogram</span>
        </a>
        @endcan
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 12: CONTENT MANAGEMENT (Super Manager & Manager) --}}
        {{-- Hero Slider, Hero Cards, What We Do Images, Publishing Pages --}}
        {{-- Topbar Notifications, Email Subscribers --}}
        {{-- ================================================================ --}}
        @if($user->hasRole('Super Manager') || $user->hasRole('Manager'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Content Management</div>

        @php $isActive = request()->routeIs('admin.sliders.*'); @endphp
        <a href="{{ route('admin.sliders.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-images fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Hero Slider</span>
        </a>

        @php $isActive = request()->routeIs('admin.hero-cards.*'); @endphp
        <a href="{{ route('admin.hero-cards.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-th-large fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Hero Cards</span>
        </a>

        @if($user->can('manage what we do images'))
        @php $isActive = request()->routeIs('admin.what-we-do-images.*'); @endphp
        <a href="{{ route('admin.what-we-do-images.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-image fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">What We Do Images</span>
        </a>
        @endif

        @can('manage pages')
        @php $isActive = request()->routeIs('admin.pages.*'); @endphp
        <a href="{{ route('admin.pages.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-file-alt fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Publishing Pages</span>
        </a>
        @endcan

        @can('view topbar notifications')
        @php $isActive = request()->routeIs('topbar-notifications.*'); @endphp
        <a href="{{ route('topbar-notifications.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-bell fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Topbar Notifications</span>
        </a>
        @endcan

        @can('view email subscribers')
        @php $isActive = request()->routeIs('email-subscribers.*'); @endphp
        <a href="{{ route('email-subscribers.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-envelope-open fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Email Subscribers</span>
        </a>
        @endcan
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 14: SELF-PACED LEARNING PORTAL --}}
        {{-- Super Manager / Manager / Trainers → management dashboard + learner portal link --}}
        {{-- Trainees → My Learning (enrolled courses) + Course Catalogue --}}
        {{-- ================================================================ --}}
        @if($user->hasSelfPacedPortalAccess())
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">Self-Paced Learning</div>

        @if($user->hasRole('Trainees'))
            {{-- Trainees: My Learning (enrolled courses) --}}
            @php $spActive = request()->routeIs('self-paced.learn.my-courses'); @endphp
            <a href="{{ route('self-paced.learn.my-courses') }}"
               class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
                   {{ $spActive ? 'active border-l-4' : '' }}">
                <i class="fa-solid fa-book-reader fa-fw text-base {{ $spActive ? 'text-white' : 'text-green-300' }}"></i>
                <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">My Learning</span>
            </a>

            {{-- Trainees: Course Catalogue (public browse) --}}
            @php $catActive = request()->routeIs('self-paced.public.index') || request()->routeIs('self-paced.public.courses.*'); @endphp
            <a href="{{ route('self-paced.public.index') }}"
               class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
                   {{ $catActive ? 'active border-l-4' : '' }}">
                <i class="fa-solid fa-graduation-cap fa-fw text-base {{ $catActive ? 'text-white' : 'text-green-300' }}"></i>
                <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Course Catalogue</span>
            </a>
        @else
            {{-- Super Manager / Manager / Trainers: Portal Dashboard --}}
            @php $spActive = request()->routeIs('self-paced.dashboard.*'); @endphp
            <a href="{{ route('self-paced.dashboard.index') }}"
               class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
                   {{ $spActive ? 'active border-l-4' : '' }}">
                <i class="fa-solid fa-graduation-cap fa-fw text-base {{ $spActive ? 'text-white' : 'text-green-300' }}"></i>
                <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Self-Paced Portal</span>
            </a>

            {{-- Super Manager / Manager / Trainers: Learner Portal (browse as learner) --}}
            @php $pubActive = request()->routeIs('self-paced.public.*') || request()->routeIs('self-paced.learn.*'); @endphp
            <a href="{{ route('self-paced.public.index') }}"
               class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
                   {{ $pubActive ? 'active border-l-4' : '' }}">
                <i class="fa-solid fa-chalkboard-user fa-fw text-base {{ $pubActive ? 'text-white' : 'text-green-300' }}"></i>
                <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Learner Portal</span>
            </a>
        @endif
        @endif

        {{-- ================================================================ --}}
        {{-- GROUP 15: SYSTEM CONFIGURATION --}}
        {{-- ================================================================ --}}
        @if($user->hasRole('Super Manager'))
        <div x-show="sidebarOpen" class="sidebar-group-label mt-2">System Config</div>

        @php $isActive = request()->routeIs('config.email.*'); @endphp
        <a href="{{ route('config.email.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-envelope-circle-check fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Email Config</span>
        </a>

        @php $isActive = request()->routeIs('config.sms.*'); @endphp
        <a href="{{ route('config.sms.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-mobile-screen fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">SMS Config</span>
        </a>

        @php $isActive = request()->routeIs('config.payment.*'); @endphp
        <a href="{{ route('config.payment.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-credit-card fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Payment Config</span>
        </a>

        @php $isActive = request()->routeIs('config.google-meet.*'); @endphp
        <a href="{{ route('config.google-meet.index') }}"
           class="flex items-center px-3 py-2.5 rounded-lg transition-all duration-200 role-themed-hover mb-0.5 sidebar-nav-link
               {{ $isActive ? 'active border-l-4' : '' }}">
            <i class="fa-solid fa-video fa-fw text-base {{ $isActive ? 'text-white' : 'text-green-300' }}"></i>
            <span x-show="sidebarOpen" x-transition class="ml-3 font-medium text-sm text-inherit">Google Meet Config</span>
        </a>
        @endif

        <!-- Bottom padding -->
        <div class="h-4"></div>

    </nav>
</aside>

<!-- Mobile Overlay -->
<div
    x-show="sidebarOpen && isMobile"
    x-transition:enter="transition-opacity ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition-opacity ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    @click="toggleSidebar()"
    class="fixed inset-0 bg-black/50 z-30"
    aria-hidden="true"
></div>

<script>
function sidebarProfileData() {
    return {
        profileOpen: false,
    };
}
</script>

