@php
    // Define route patterns for each menu section
    $taxpayerRoutes = ['capture.individual.*', 'capture.corporate.*', 'capture.government.*', 'capture.special.*'];
    $assetRoutes = ['profile.business.*', 'profile.land.*', 'profile.building.*', 'profile.vehicle.*'];
    $revenueRoutes = ['profile.paye*', 'profile.direct-assessment*', 'profile.waste-management*', 'profile.land-use-charge*', 'profile.vehicle-licence*', 'profile.consumption-tax*', 'profile.business-premises*', 'profile.presumptive-taxes*', 'profile.pools-betting*', 'profile.withholding-tax*', 'mda-service.*'];
    $approvalsRoutes = ['pending', 'declined'];
    $assessmentRoutes = ['assessment.*'];
    $settlementsRoutes = ['settle.*'];
    $adminRoutes = ['staff.*', 'central-menu.*', 'user.*', 'screen.*', 'operation-manager.*', 'api.*'];

    // Check if any route in section is active
    $isTaxpayerActive = collect($taxpayerRoutes)->contains(fn($pattern) => request()->routeIs($pattern));
    $isAssetActive = collect($assetRoutes)->contains(fn($pattern) => request()->routeIs($pattern));
    $isRevenueActive = collect($revenueRoutes)->contains(fn($pattern) => request()->routeIs($pattern));
    $isApprovalsActive = collect($approvalsRoutes)->contains(fn($pattern) => request()->routeIs($pattern));
    $isAssessmentActive = collect($assessmentRoutes)->contains(fn($pattern) => request()->routeIs($pattern));
    $isSettlementsActive = collect($settlementsRoutes)->contains(fn($pattern) => request()->routeIs($pattern));
    $isAdminActive = collect($adminRoutes)->contains(fn($pattern) => request()->routeIs($pattern));

    // Active classes
    $parentActiveClass = 'bg-teal-50 text-teal-700';
    $parentInactiveClass = 'text-gray-600 hover:bg-gray-100';
    $childActiveClass = 'bg-teal-50 text-teal-700 font-medium';
    $childInactiveClass = 'text-gray-600 hover:bg-gray-100';
@endphp
<aside id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-white p-6 shadow-md z-50 transform transition-transform duration-300 ease-in-out -translate-x-full md:relative md:translate-x-0 md:shadow-none overflow-y-auto">
    <div class="flex justify-between items-center mb-10">
        <div class="flex items-center">
            <img src="{{ asset('images/image.png') }}" alt="EDO REVENUE ADMINISTRATION SYSTEM" class="h-12 w-auto">
        </div>
        <button id="close-sidebar" class="text-gray-600 md:hidden">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
        </button>
    </div>

    <nav>
        <ul class="space-y-2">
            <!-- Dashboard -->
            <li>
                <a href="{{ route('dashboard') }}" class="flex items-center space-x-3 p-3 rounded-lg font-small transition-colors duration-200 {{ request()->routeIs('dashboard') ? $parentActiveClass : $parentInactiveClass }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="7" height="9" rx="1"/>
                        <rect x="14" y="3" width="7" height="5" rx="1"/>
                        <rect x="14" y="12" width="7" height="9" rx="1"/>
                        <rect x="3" y="16" width="7" height="5" rx="1"/>
                    </svg>
                    <span>Dashboard</span>
                </a>
            </li>

            <!-- Taxpayer -->
            <li>
                <button class="flex items-center justify-between w-full p-3 rounded-lg font-small transition-colors duration-200 {{ $isTaxpayerActive ? $parentActiveClass : $parentInactiveClass }}" onclick="toggleSidebarDropdown('taxpayer')" data-menu="taxpayer">
                    <div class="flex items-center space-x-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
                            <circle cx="12" cy="7" r="4"/>
                        </svg>
                        <span>Taxpayer</span>
                    </div>
                    <svg class="transition-transform duration-200 chevron {{ $isTaxpayerActive ? 'rotate-90' : '' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
                <ul id="taxpayer-dropdown" class="{{ $isTaxpayerActive ? '' : 'hidden' }} pl-8 mt-2 space-y-1">
                    <li>
                        <a href="{{ route('capture.individual.list') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('capture.individual.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Individual</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('capture.corporate.list') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('capture.corporate.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Corporate</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('capture.government.list') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('capture.government.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Government</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('capture.special.list') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('capture.special.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Special</span>
                        </a>
                    </li>
                </ul>
            </li>

            <!-- Asset -->
            <li>
                <button class="flex items-center justify-between w-full p-3 rounded-lg font-small transition-colors duration-200 {{ $isAssetActive ? $parentActiveClass : $parentInactiveClass }}" onclick="toggleSidebarDropdown('asset')" data-menu="asset">
                    <div class="flex items-center space-x-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 21V10a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v11"/>
                            <path d="M19 12h-5"/>
                            <path d="M12 21H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h7"/>
                            <path d="M12 12H5"/>
                            <path d="M12 16H5"/>
                        </svg>
                        <span>Asset</span>
                    </div>
                    <svg class="transition-transform duration-200 chevron {{ $isAssetActive ? 'rotate-90' : '' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
                <ul id="asset-dropdown" class="{{ $isAssetActive ? '' : 'hidden' }} pl-8 mt-2 space-y-1">
                    <li>
                        <a href="{{ route('profile.business.list') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.business.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Business</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.land.list') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.land.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Land</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.building.list') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.building.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Building</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.vehicle.list') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.vehicle.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Vehicle</span>
                        </a>
                    </li>
                </ul>
            </li>

            <!-- Revenue Stream -->
            <li>
                <button class="flex items-center justify-between w-full p-3 rounded-lg font-small transition-colors duration-200 {{ $isRevenueActive ? $parentActiveClass : $parentInactiveClass }}" onclick="toggleSidebarDropdown('revenue')" data-menu="revenue">
                    <div class="flex items-center space-x-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="12" y1="1" x2="12" y2="23"/>
                            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                        </svg>
                        <span>Revenue Stream</span>
                    </div>
                    <svg class="transition-transform duration-200 chevron {{ $isRevenueActive ? 'rotate-90' : '' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
                <ul id="revenue-dropdown" class="{{ $isRevenueActive ? '' : 'hidden' }} pl-8 mt-2 space-y-1">
                    <li>
                        <a href="{{ route('profile.paye') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.paye*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Pay As You Earn (PAYE)</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.direct-assessment') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.direct-assessment*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Direct Assessment</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.waste-management') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.waste-management*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Waste Management</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.land-use-charge') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.land-use-charge*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Land Use Charge</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.vehicle-licence') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.vehicle-licence*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Vehicle License</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.consumption-tax') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.consumption-tax*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Consumption Taxes</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.business-premises') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.business-premises*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Business Premises</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.presumptive-taxes') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.presumptive-taxes*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Presumptive Taxes</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.pools-betting') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.pools-betting*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Pools Betting</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('profile.withholding-tax') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('profile.withholding-tax*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Withholding Taxes</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('mda-service.list') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('mda-service.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>MDA Services</span>
                        </a>
                    </li>
                    {{-- <li>
                        <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100 font-normal transition-colors duration-200">
                            <span>Special</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100 font-normal transition-colors duration-200">
                            <span>Capital Gains Taxes</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100 font-normal transition-colors duration-200">
                            <span>Lottery & Gaming</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100 font-normal transition-colors duration-200">
                            <span>Stamp Duty</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100 font-normal transition-colors duration-200">
                            <span>Development Levy</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100 font-normal transition-colors duration-200">
                            <span>LGA Collection</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100 font-normal transition-colors duration-200">
                            <span>Ministry of Transport - Commercial colour code</span>
                        </a>
                    </li> --}}
                </ul>
            </li>

            <!-- Approvals -->
            <li>
                <button class="flex items-center justify-between w-full p-3 rounded-lg font-small transition-colors duration-200 {{ $isApprovalsActive ? $parentActiveClass : $parentInactiveClass }}" onclick="toggleSidebarDropdown('approvals')" data-menu="approvals">
                    <div class="flex items-center space-x-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M9 11l3 3L22 4"/>
                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                        </svg>
                        <span>Approvals</span>
                    </div>
                    <svg class="transition-transform duration-200 chevron {{ $isApprovalsActive ? 'rotate-90' : '' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
                <ul id="approvals-dropdown" class="{{ $isApprovalsActive ? '' : 'hidden' }} pl-8 mt-2 space-y-1">
                    <li>
                        <a href="{{ route('pending') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('pending') ? $childActiveClass : $childInactiveClass }}">
                            <span>Pending</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('declined') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('declined') ? $childActiveClass : $childInactiveClass }}">
                            <span>Declined</span>
                        </a>
                    </li>
                </ul>
            </li>

            <!-- Assessment -->
            <li>
                <button class="flex items-center justify-between w-full p-3 rounded-lg font-small transition-colors duration-200 {{ $isAssessmentActive ? $parentActiveClass : $parentInactiveClass }}" onclick="toggleSidebarDropdown('assessment')" data-menu="assessment">
                    <div class="flex items-center space-x-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                            <path d="M14 2v6h6"/>
                            <line x1="16" y1="13" x2="8" y2="13"/>
                            <line x1="16" y1="17" x2="8" y2="17"/>
                            <line x1="10" y1="9" x2="8" y2="9"/>
                        </svg>
                        <span>Assessment</span>
                    </div>
                    <svg class="transition-transform duration-200 chevron {{ $isAssessmentActive ? 'rotate-90' : '' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
                <ul id="assessment-dropdown" class="{{ $isAssessmentActive ? '' : 'hidden' }} pl-8 mt-2 space-y-1">
                    <li>
                        <a href="{{ route('assessment.list')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('assessment.list') ? $childActiveClass : $childInactiveClass }}">
                            <span>Bills</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('assessment.settled')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('assessment.settled') ? $childActiveClass : $childInactiveClass }}">
                            <span>Settled Bills</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('assessment.unsettled') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('assessment.unsettled') ? $childActiveClass : $childInactiveClass }}">
                            <span>Unsettled Bills</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('assessment.partial-settled') }}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('assessment.partial-settled') ? $childActiveClass : $childInactiveClass }}">
                            <span>Partially Settled Bills</span>
                        </a>
                    </li>
                </ul>
            </li>

            <!-- Settlements -->
            <li>
                <button class="flex items-center justify-between w-full p-3 rounded-lg font-small transition-colors duration-200 {{ $isSettlementsActive ? $parentActiveClass : $parentInactiveClass }}" onclick="toggleSidebarDropdown('settlements')" data-menu="settlements">
                    <div class="flex items-center space-x-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
                            <line x1="1" y1="10" x2="23" y2="10"/>
                        </svg>
                        <span>Settlements</span>
                    </div>
                    <svg class="transition-transform duration-200 chevron {{ $isSettlementsActive ? 'rotate-90' : '' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
                <ul id="settlements-dropdown" class="{{ $isSettlementsActive ? '' : 'hidden' }} pl-8 mt-2 space-y-1">
                    <li>
                        <a href="{{ route('settle.list')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('settle.list') ? $childActiveClass : $childInactiveClass }}">
                            <span>Settlements</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('settle.transaction-list')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('settle.transaction-list') ? $childActiveClass : $childInactiveClass }}">
                            <span>Transactions</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('settle.payment-account')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('settle.payment-account') ? $childActiveClass : $childInactiveClass }}">
                            <span>Payments on Account</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('settle.receipt')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('settle.receipt') ? $childActiveClass : $childInactiveClass }}">
                            <span>Treasury Receipt</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('settle.demand-notice')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('settle.demand-notice') ? $childActiveClass : $childInactiveClass }}">
                            <span>Demand Notice</span>
                        </a>
                    </li>
                </ul>
            </li>

            <!-- Admin -->
            <li>
                <button class="flex items-center justify-between w-full p-3 rounded-lg font-small transition-colors duration-200 {{ $isAdminActive ? $parentActiveClass : $parentInactiveClass }}" onclick="toggleSidebarDropdown('admin')" data-menu="admin">
                    <div class="flex items-center space-x-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
                        </svg>
                        <span>Admin</span>
                    </div>
                    <svg class="transition-transform duration-200 chevron {{ $isAdminActive ? 'rotate-90' : '' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
                <ul id="admin-dropdown" class="{{ $isAdminActive ? '' : 'hidden' }} pl-8 mt-2 space-y-1">
                    <li>
                        <a href="{{ route('staff.sign-tcc-list')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('staff.sign-tcc-list') ? $childActiveClass : $childInactiveClass }}">
                            <span>My Operations - Certificates</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('central-menu.list')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('central-menu.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Menu Manager</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('user.list')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('user.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>User Manager</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('screen.list')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('screen.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Screen Manager</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('operation-manager.list')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('operation-manager.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>Operation Manager</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('api.list')}}" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->routeIs('api.*') ? $childActiveClass : $childInactiveClass }}">
                            <span>API Manager</span>
                        </a>
                    </li>
                    <li>
                        <a href="/Staff/SignTCCList" class="flex items-center p-2 rounded-lg font-normal transition-colors duration-200 {{ request()->is('Staff/SignTCCList') ? $childActiveClass : $childInactiveClass }}">
                            <span>My Operations - Sign eTCC</span>
                        </a>
                    </li>
                </ul>
            </li>

            <!-- Reports & Analytics -->
            <li>
                <a href="{{ route('reports') }}" class="flex items-center space-x-3 p-3 rounded-lg font-small transition-colors duration-200 {{ request()->routeIs('reports*') ? $parentActiveClass : $parentInactiveClass }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="20" x2="18" y2="10"/>
                        <line x1="12" y1="20" x2="12" y2="4"/>
                        <line x1="6" y1="20" x2="6" y2="14"/>
                    </svg>
                    <span>Reports & Analytics</span>
                </a>
            </li>
        </ul>

        <div class="mt-16 space-y-2">
            <h2 class="text-xs text-gray-500 font-semibold uppercase tracking-wider mb-2">My account</h2>
            <ul class="space-y-1">
                <li>
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-100 font-small transition-colors duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                        </svg>
                        <span>Notifications</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-100 font-small transition-colors duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.26.43a2 2 0 0 0 .73 2.73l.08.15a2 2 0 0 1 0 2l-.08.15a2 2 0 0 0-.73 2.73l.26.43a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.26-.43a2 2 0 0 0-.73-2.73l-.08-.15a2 2 0 0 1 0-2l.08-.15a2 2 0 0 0 .73-2.73l-.26-.43a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
                            <circle cx="12" cy="12" r="3"/>
                        </svg>
                        <span>Settings</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-100 font-small transition-colors duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
                        </svg>
                        <span>Support</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="mt-auto absolute bottom-6 w-full pr-12">
        <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50">
            <div class="text-sm">
                <p class="text-gray-500">Welcome back</p>
                <p class="font-semibold text-gray-800">{{ session('ContactName', 'User') }}</p>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
                <path d="M9 18l6-6-6-6"/>
            </svg>
        </div>
    </div>
</aside>