<aside class="bg-white border-r border-slate-200 w-64 min-h-screen fixed left-0 top-0 bottom-0 z-50 shadow-xl">
    <!-- Header -->
    <div class="bg-gradient-to-r from-slate-900 to-slate-800 p-4 text-white">
        <div class="flex items-center gap-3">
            <div class="flex flex-col">
                <span class="font-bold text-white text-xl">PAC Technologies</span>
                <span class="text-xs text-white/80 font-medium">ENTERPRISE v2.0</span>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 p-4 space-y-1 h-[calc(100vh-200px)] overflow-y-auto">

        <!-- Core Modules -->
        <div class="px-3 py-2">
            <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">CORE MODULES</span>
        </div>

        <!-- Dashboard -->
        <a href="{{ route('asset.dashboard') }}"
           class="flex items-center gap-3 px-3 py-3 rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 text-white shadow-lg hover:opacity-90 group">
            <i class="fas fa-chart-pie text-white text-lg w-6 text-center"></i>
            <span class="font-semibold text-sm">Dashboard</span>
            <span class="ml-auto bg-white/20 text-white text-xs px-2 py-1 rounded-full font-medium">Home</span>
        </a>
      
        <!-- Employee Directory -->
        <a href="{{ route('asset.employees.index') }}"
           class="flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gradient-to-r hover:from-green-50 hover:to-emerald-50 text-slate-700 border border-transparent hover:border-green-200 transition-all duration-200 group">
            <div class="h-8 w-8 rounded-lg bg-gradient-to-r from-green-500 to-emerald-600 flex items-center justify-center">
                <i class="fas fa-users text-white text-sm"></i>
            </div>
            <span class="font-medium text-sm">Employee Directory</span>
            <span class="ml-auto bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full font-semibold">
                {{ $employeeCount ?? 0 }}
            </span>
        </a>

        <!-- Asset Registry -->
        <a href="{{ route('asset.assets.index') }}"
           class="flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 text-slate-700 border border-transparent hover:border-blue-200 transition-all duration-200 group">
            <div class="h-8 w-8 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center">
                <i class="fas fa-laptop-code text-white text-sm"></i>
            </div>
            <span class="font-medium text-sm">Asset Registry</span>
            <span class="ml-auto bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full font-semibold">
                {{ $assetCount ?? 0 }}
            </span>
        </a>

        <!-- Lifecycle -->
        <div class="px-3 py-2 mt-6">
            <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">LIFECYCLE</span>
        </div>

        <!-- Assignments -->
        <a href="{{ route('asset.assignments.index') }}"
           class="flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50 text-slate-700 border border-transparent hover:border-purple-200 transition-all duration-200 group">
            <div class="h-8 w-8 rounded-lg bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center">
                <i class="fas fa-handshake text-white text-sm"></i>
            </div>
            <span class="font-medium text-sm">Assignments</span>
            <span class="ml-auto bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded-full font-semibold">
                {{ $assignmentCount ?? 0 }}
            </span>
        </a>

        <!-- Repair Center -->
        <a href="{{ route('asset.repairs.index') }}"
           class="flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gradient-to-r hover:from-amber-50 hover:to-orange-50 text-slate-700 border border-transparent hover:border-amber-200 transition-all duration-200 group">
            <div class="h-8 w-8 rounded-lg bg-gradient-to-r from-amber-500 to-orange-600 flex items-center justify-center">
                <i class="fas fa-tools text-white text-sm"></i>
            </div>
            <span class="font-medium text-sm">Repair Center</span>
            <span class="ml-auto bg-amber-100 text-amber-700 text-xs px-2 py-1 rounded-full font-semibold">
                {{ $repairCount ?? 0 }}
            </span>
        </a>

        <!-- Scrap Management -->
        <a href="{{ route('asset.scraps.index') }}"
           class="flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gradient-to-r hover:from-red-50 hover:to-rose-50 text-slate-700 border border-transparent hover:border-red-200 transition-all duration-200 group">
            <div class="h-8 w-8 rounded-lg bg-gradient-to-r from-red-500 to-rose-600 flex items-center justify-center">
                <i class="fas fa-recycle text-white text-sm"></i>
            </div>
            <span class="font-medium text-sm">Scrap Management</span>
            <span class="ml-auto bg-red-100 text-red-700 text-xs px-2 py-1 rounded-full font-semibold">
                {{ $scrapCount ?? 0 }}
            </span>
        </a>

        <!-- Administration -->
        <div class="px-3 py-2 mt-6">
            <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">ADMINISTRATION</span>
        </div>

        <!-- Departments -->
        <a href="{{ route('asset.empdeps.index') }}"
           class="flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gradient-to-r hover:from-cyan-50 hover:to-sky-50 text-slate-700 border border-transparent hover:border-cyan-200 transition-all duration-200 group">
            <div class="h-8 w-8 rounded-lg bg-gradient-to-r from-cyan-500 to-sky-600 flex items-center justify-center">
                <i class="fas fa-building text-white text-sm"></i>
            </div>
            <span class="font-medium text-sm">Departments</span>
        </a>

        <!-- Vendor Portal -->
        <a href="#"
           class="flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gradient-to-r hover:from-teal-50 hover:to-emerald-50 text-slate-700 border border-transparent hover:border-teal-200 transition-all duration-200 group">
            <div class="h-8 w-8 rounded-lg bg-gradient-to-r from-teal-500 to-emerald-600 flex items-center justify-center">
                <i class="fas fa-truck text-white text-sm"></i>
            </div>
            <span class="font-medium text-sm">Vendor Portal</span>
        </a>

        <!-- Cost Ledger -->
        <a href="#"
           class="flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gradient-to-r hover:from-violet-50 hover:to-purple-50 text-slate-700 border border-transparent hover:border-violet-200 transition-all duration-200 group">
            <div class="h-8 w-8 rounded-lg bg-gradient-to-r from-violet-500 to-purple-600 flex items-center justify-center">
                <i class="fas fa-file-invoice-dollar text-white text-sm"></i>
            </div>
            <span class="font-medium text-sm">Cost Ledger</span>
        </a>
    </nav>

    <!-- Footer -->
    <div class="p-4 border-t border-slate-100 bg-slate-50 absolute bottom-0 w-full">
        <div class="flex items-center gap-3 p-3 rounded-lg bg-white border border-slate-200 shadow-sm">
            <div class="h-10 w-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
                <span class="text-white font-semibold text-sm">PAC</span>
            </div>
            <div class="flex-1 min-w-0">
                <div class="font-semibold text-slate-800 text-sm truncate">Admin</div>
                <div class="text-xs text-slate-500 truncate">Asset Manager</div>
            </div>
            <form method="POST" action="{{ route('logout') }}" id="logout-form">@csrf</form>
            <button class="p-2 hover:bg-slate-100 rounded-lg transition-colors"
                    onclick="document.getElementById('logout-form').submit()">
                <i class="fas fa-arrow-right-from-bracket text-slate-400 text-sm"></i>
            </button>
        </div>
    </div>
</aside>
