<?php
// Only (re)start the session if it's safe to do so -- see sidebar.php for why.
if (session_status() === PHP_SESSION_NONE && !headers_sent()) {
    session_start();
}
$username = $_SESSION['username'] ?? 'Guest';
$role = strtolower(trim($_SESSION['role'] ?? ''));
$base = '/ivm/public/';

// Active Route Resolver
$currentScript = $_SERVER['SCRIPT_NAME'];
function isRouteActive($pagePath, $currentScript) {
    return strpos($currentScript, $pagePath) !== false;
}
?>

<!-- Import Mulish Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-- Dynamic Browser Favicon Tag -->
<link id="dynamic-favicon" rel="icon" type="image/x-icon" href="<?= $base ?>assets/images/favicon.ico">

<div id="sidebar"
     class="sidebar fixed left-0 top-0 h-screen z-50 w-64
            transform -translate-x-full md:translate-x-0 transition-all duration-300 ease-out transform-gpu
            bg-white flex flex-col overflow-hidden shadow-xl border-r border-slate-200 selection:bg-indigo-500 selection:text-white">
    
    <!-- Header/Logo Brand Zone -->
    <div class="p-4 border-b border-slate-200 shrink-0 bg-white">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3 overflow-hidden w-full">
                <!-- DYNAMIC BRAND LOGO & ICON CONTAINER -->
                <div class="h-10 max-h-12 flex items-center justify-start overflow-hidden">
                    <!-- 1. FULL LOGO (Shows when Sidebar is Expanded) -->
                    <img src="<?= $base ?>assets/logo.png" 
                         alt="Company Logo" 
                         class="brand-logo-full h-full w-auto object-contain transition-all duration-300">
                    
                    <!-- 2. SMALL ICON (Shows when Sidebar is Collapsed) -->
                    <img src="<?= $base ?>assets/icon.png" 
                         alt="Icon" 
                         class="brand-icon-small h-8 w-8 object-contain hidden transition-all duration-300">
                </div>
            </div>
            <button onclick="toggleSidebar()" class="md:hidden bg-slate-100 hover:bg-slate-200 border border-slate-200 w-8 h-8 rounded-lg transition flex items-center justify-center text-slate-700 active:scale-95 shrink-0">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
        </div>
    </div>

    <!-- User Profile Badge Area -->
    <div class="px-4 py-3 border-b border-slate-200 shrink-0 bg-slate-50/80">
        <div class="flex items-center gap-3 overflow-hidden">
            <div class="w-9 h-9 min-w-[36px] rounded-lg bg-indigo-100 border border-indigo-200 flex items-center justify-center font-black text-sm text-indigo-700 shadow-sm uppercase tracking-wider select-none">
                <?= strtoupper(substr($username, 0, 1)); ?>
            </div>
            <div class="sidebar-info transition-all duration-300 overflow-hidden whitespace-nowrap">
                <p class="user-name font-bold text-sm text-slate-900 tracking-wide truncate"><?= htmlspecialchars($username); ?></p>
                <div class="flex items-center gap-1.5 mt-0.5">
                    <span class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_6px_rgba(16,185,129,0.5)]"></span>
                    <span class="text-[10px] text-slate-700 font-extrabold tracking-wider uppercase bg-white border border-slate-300 px-1.5 py-0.5 rounded shadow-2xs"><?= htmlspecialchars($role ?: 'Staff'); ?></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Scrollable Navigation -->
    <div class="flex-1 overflow-y-auto px-3 py-4 space-y-6 custom-scrollbar">
        
        <!-- Core Operations Segment -->
        <div>
            <p class="sidebar-info section-label text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2 px-2 whitespace-nowrap select-none">
                Core Operations
            </p>
            <div class="space-y-1">
                <?php if($role === 'admin' || $role === 'superadmin' || $role === 'hr'): 
                    $dashboardActive = isRouteActive('dashboard.php', $currentScript) && !isRouteActive('ess/', $currentScript); 
                    $employeesActive = isRouteActive('employees/employees.php', $currentScript) || (isRouteActive('employees/', $currentScript) && isRouteActive('employees.php', $currentScript));
                ?>
                    <a href="<?= $base ?>dashboard.php" 
                       class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 group <?= $dashboardActive ? 'bg-indigo-50 text-indigo-700 font-bold active shadow-2xs' : 'text-slate-700 hover:bg-slate-100/90 hover:text-slate-900' ?>">
                        <svg class="w-5 h-5 <?= $dashboardActive ? 'text-indigo-600' : 'text-slate-500 group-hover:text-slate-800' ?> transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"></path>
                        </svg>
                        <span class="sidebar-info text-sm tracking-wide">Dashboard</span>
                    </a>

                    <a href="<?= $base ?>employees/employees.php" 
                       class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 group <?= $employeesActive ? 'bg-indigo-50 text-indigo-700 font-bold active shadow-2xs' : 'text-slate-700 hover:bg-slate-100/90 hover:text-slate-900' ?>">
                        <svg class="w-5 h-5 <?= $employeesActive ? 'text-indigo-600' : 'text-slate-500 group-hover:text-slate-800' ?> transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"></path>
                        </svg>
                        <span class="sidebar-info text-sm tracking-wide">Employees</span>
                    </a>
                <?php endif; ?>                       

                <?php if($role === 'admin' || $role === 'superadmin' || $role === 'hr'): ?>
                <div>
                    <button onclick="toggleSubmenu('attendance-sub', 'attendance-arrow')" 
                            class="w-full sidebar-link flex items-center justify-between px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100/90 hover:text-slate-900 transition-all duration-150 text-left group">
                        <div class="flex items-center gap-3 overflow-hidden shrink-0">
                            <svg class="w-5 h-5 text-slate-500 group-hover:text-slate-800 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span class="sidebar-info text-sm tracking-wide font-medium">Attendance</span>
                        </div>
                        <svg id="attendance-arrow" class="w-4 h-4 text-slate-500 transition-transform duration-200 transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div id="attendance-sub" class="hidden ml-5 mt-1 pl-3 border-l-2 border-slate-200 space-y-1">
                        <?php if($role === 'admin' || $role === 'superadmin'): ?>
                        <a href="<?= $base ?>attendance.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('attendance.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Daily Logs</a>
                        <?php endif; ?>
                        <a href="<?= $base ?>attendance/attendance_records.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('attendance_records.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Historical Matrix</a>
                        <a href="<?= $base ?>attendance/fix-logs.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('fix-logs.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Fix Logs</a>
                        <a href="<?= $base ?>shift.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('shift.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Shift Configuration</a>
                    </div>
                </div> 
                <?php endif; ?>

                <?php if(in_array($role, ['admin', 'superadmin', 'manager', 'supervisor','hr'])): ?>
                <div>
                    <button onclick="toggleSubmenu('department-sub', 'department-arrow')" 
                            class="w-full sidebar-link flex items-center justify-between px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100/90 hover:text-slate-900 transition-all duration-150 text-left group">
                        <div class="flex items-center gap-3 overflow-hidden shrink-0">
                            <svg class="w-5 h-5 text-slate-500 group-hover:text-slate-800 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5s0 0 0 0M13.5 6.75h1.5M9 10.5h1.5M13.5 10.5h1.5M9 14.25h1.5M13.5 14.25h1.5M9 18h6v3H9v-3z"></path>
                            </svg>
                            <span class="sidebar-info text-sm tracking-wide font-medium">Department</span>
                        </div>
                        <svg id="department-arrow" class="w-4 h-4 text-slate-500 transition-transform duration-200 transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div id="department-sub" class="hidden ml-5 mt-1 pl-3 border-l-2 border-slate-200 space-y-1">
                        <a href="<?= $base ?>department/department_schedule.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('department_schedule.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Roster Schedules</a>
                        <?php if(in_array($role, ['admin', 'superadmin'])): ?>
                            <a href="<?= $base ?>department/departments.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('departments.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Manage Division</a>
                            <a href="<?= $base ?>department/department_settings.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('department_settings.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Staff Assignment</a>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Employee Hub Segment -->
        <div>
            <p class="sidebar-info section-label text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2 px-2 whitespace-nowrap select-none">
                Employee Hub
            </p>
            <div class="space-y-1">
                <div>
                    <button onclick="toggleSubmenu('employee-sub', 'employee-arrow')" 
                            class="w-full sidebar-link flex items-center justify-between px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100/90 hover:text-slate-900 transition-all duration-150 text-left group">
                        <div class="flex items-center gap-3 overflow-hidden shrink-0">
                            <svg class="w-5 h-5 text-slate-500 group-hover:text-slate-800 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <span class="sidebar-info text-sm tracking-wide font-medium">My Portal</span>
                        </div>
                        <svg id="employee-arrow" class="w-4 h-4 text-slate-500 transition-transform duration-200 transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div id="employee-sub" class="hidden ml-5 mt-1 pl-3 border-l-2 border-slate-200 space-y-1">
                        <?php 
                        $ess_pages = [
                            'dashboard.php' => 'ESS Dashboard',
                            'my_schedule.php' => 'My Schedule',
                            'my_attendance.php' => 'My Attendance',
                            'my_leave.php' => 'Leave Requests',
                            'my_overtime.php' => 'Overtime Logs',
                            'my_payslips.php' => 'My Payslips',
                            'my_loans.php' => 'Loan Matrix',
                            'my_assets.php' => 'Assigned Assets'
                        ];
                        foreach($ess_pages as $page => $label): ?>
                            <a href="<?= $base ?>ess/<?= $page ?>" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('ess/'.$page, $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">
                                <span class="sidebar-info whitespace-nowrap"><?= $label ?></span>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Leave Operations Segment -->
        <?php if(in_array($role, ['admin', 'superadmin', 'hr'])): ?>
        <div>
            <p class="sidebar-info section-label text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2 px-2 whitespace-nowrap select-none">
                Leave Operations
            </p>
            <div class="space-y-1">
                <div>
                    <button onclick="toggleSubmenu('leave-sub', 'leave-arrow')" 
                            class="w-full sidebar-link flex items-center justify-between px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100/90 hover:text-slate-900 transition-all duration-150 text-left group">
                        <div class="flex items-center gap-3 overflow-hidden shrink-0">
                            <svg class="w-5 h-5 text-slate-500 group-hover:text-slate-800 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"></path>
                            </svg>
                            <span class="sidebar-info text-sm tracking-wide font-medium">Leave Manager</span>
                        </div>
                        <svg id="leave-arrow" class="w-4 h-4 text-slate-500 transition-transform duration-200 transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div id="leave-sub" class="hidden ml-5 mt-1 pl-3 border-l-2 border-slate-200 space-y-1">
                        <a href="<?= $base ?>leave_managment/index.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('leave_managment/index.php', $currentScript) || (isRouteActive('leave_managment/', $currentScript) && isRouteActive('index.php', $currentScript)) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Leave Application</a>
                        <a href="<?= $base ?>leave_managment/leave_approval.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('leave_managment/leave_approval.php', $currentScript) || (isRouteActive('leave_managment/', $currentScript) && isRouteActive('leave_approval.php', $currentScript)) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Leave Approval</a>
                        <a href="<?= $base ?>leave_managment/leave_balance.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('leave_balance.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Leave Balance</a>
                        <a href="<?= $base ?>leave_managment/leave_types.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('leave_types.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Leave Policy</a>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- Loan Operations Segment -->
        <?php if(in_array($role, ['admin', 'superadmin', 'hr','gm','opm'])): ?>
        <div>
            <p class="sidebar-info section-label text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2 px-2 whitespace-nowrap select-none">
                Loan Operations
            </p>
            <div class="space-y-1">
                <div>
                    <button onclick="toggleSubmenu('loan-sub', 'loan-arrow')" 
                            class="w-full sidebar-link flex items-center justify-between px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100/90 hover:text-slate-900 transition-all duration-150 text-left group">
                        <div class="flex items-center gap-3 overflow-hidden shrink-0">
                            <!-- Better Icon: Banknotes / Money -->
                            <svg class="w-5 h-5 text-slate-500 group-hover:text-slate-800 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5h16.5a1.5 1.5 0 011.5 1.5v9a1.5 1.5 0 01-1.5 1.5H3.75a1.5 1.5 0 01-1.5-1.5v-9a1.5 1.5 0 011.5-1.5zm10.5 6a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
                            </svg>
                            <span class="sidebar-info text-sm tracking-wide font-medium">Loan Manager</span>
                        </div>
                        <svg id="loan-arrow" class="w-4 h-4 text-slate-500 transition-transform duration-200 transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div id="loan-sub" class="hidden ml-5 mt-1 pl-3 border-l-2 border-slate-200 space-y-1">
                        <a href="<?= $base ?>loan_management/loan_request.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('loan_management/loan_request.php', $currentScript) || (isRouteActive('loan_management/', $currentScript) && isRouteActive('loan_request.php', $currentScript)) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Loan Request</a>
                        <a href="<?= $base ?>loan_management/loan_history.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('loan_management/loan_history.php', $currentScript) || (isRouteActive('loan_management/', $currentScript) && isRouteActive('loan_history.php', $currentScript)) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Loan History</a>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- Financial Operations Segment -->
        <?php if(in_array($role, ['admin', 'superadmin', 'hr'])): ?>
        <div>
            <p class="sidebar-info section-label text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2 px-2 whitespace-nowrap select-none">
                Financial Operations
            </p>
            <div class="space-y-1">
                <div>
                    <button onclick="toggleSubmenu('payroll-sub', 'payroll-arrow')" 
                            class="w-full sidebar-link flex items-center justify-between px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100/90 hover:text-slate-900 transition-all duration-150 text-left group">
                        <div class="flex items-center gap-3 overflow-hidden shrink-0">
                            <!-- Better Icon: Wallet / Cash -->
                            <svg class="w-5 h-5 text-slate-500 group-hover:text-slate-800 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0zM12 7.5v9m3-6H9.75a1.5 1.5 0 000 3h4.5a1.5 1.5 0 010 3H9"></path>
                            </svg>
                            <span class="sidebar-info text-sm tracking-wide font-medium">Payroll Hub</span>
                        </div>
                        <svg id="payroll-arrow" class="w-4 h-4 text-slate-500 transition-transform duration-200 transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div id="payroll-sub" class="hidden ml-5 mt-1 pl-3 border-l-2 border-slate-200 space-y-1">
                        <a href="<?= $base ?>payroll/cycles.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('payroll/cycles.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Cycle Runs</a>
                        <a href="<?= $base ?>payroll/employee_payroll.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('payroll/employee_payroll.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Payroll</a>
                        <a href="<?= $base ?>payroll/group_payroll.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('group_payroll.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Group Payroll</a>
                        <a href="<?= $base ?>payroll/components.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('components.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Components</a>
                        <a href="<?= $base ?>payroll/settings.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('settings.php', $currentScript) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Settings</a>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- Card Management Segment -->
        <?php if(in_array($role, ['admin', 'superadmin', 'hr'])): ?>
        <div>
            <p class="sidebar-info section-label text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2 px-2 whitespace-nowrap select-none">
                Card Management
            </p>
            <div class="space-y-1">
                <div>
                    <button onclick="toggleSubmenu('card-sub', 'card-arrow')" 
                            class="w-full sidebar-link flex items-center justify-between px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100/90 hover:text-slate-900 transition-all duration-150 text-left group">
                        <div class="flex items-center gap-3 overflow-hidden shrink-0">
                            <!-- Better Icon: Credit Card / RFID ID Badge -->
                            <svg class="w-5 h-5 text-slate-500 group-hover:text-slate-800 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5pt18.75A2.25 2.25 0 0021 6.75H3A2.25 2.25 0 00.75 9v9A2.25 2.25 0 003 20.25h18A2.25 2.25 0 0023.25 18V9M6 15h.008v.008H6V15zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm3 0h.008v.008H9.375V15zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
                            </svg>
                            <span class="sidebar-info text-sm tracking-wide font-medium">Card Manager</span>
                        </div>
                        <svg id="card-arrow" class="w-4 h-4 text-slate-500 transition-transform duration-200 transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div id="card-sub" class="hidden ml-5 mt-1 pl-3 border-l-2 border-slate-200 space-y-1">
                        <a href="<?= $base ?>card_management/index.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('card_management/index.php', $currentScript) || (isRouteActive('card_management/', $currentScript) && isRouteActive('index.php', $currentScript)) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Dashboard</a>
                        <a href="<?= $base ?>card_management/settings.php" class="flex items-center py-2 px-2.5 rounded-md text-xs font-semibold tracking-wide transition <?= isRouteActive('card_management/settings.php', $currentScript) || (isRouteActive('card_management/', $currentScript) && isRouteActive('settings.php', $currentScript)) ? 'text-indigo-600 font-bold bg-indigo-50/80' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/60' ?>">Settings</a>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- System Administration Segment -->
        <?php if($role === 'superadmin'): ?>
            <div class="pt-2 border-t border-slate-100">
                <a href="<?= $base ?>settings.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 group <?= isRouteActive('settings.php', $currentScript) ? 'bg-indigo-50 text-indigo-700 font-bold active shadow-2xs' : 'text-slate-700 hover:bg-slate-100/90 hover:text-slate-900' ?>">
                    <svg class="w-5 h-5 text-slate-500 group-hover:text-slate-800 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.281zM12 15a3 3 0 100-6 3 3 0 000 6z"></path>
                    </svg>
                    <span class="sidebar-info text-sm tracking-wide font-semibold">System Settings</span>
                </a>
            </div>
        <?php endif; ?>

    </div>

    <!-- Footer Logout Zone -->
    <div class="p-3 border-t border-slate-200 shrink-0 bg-white">
        <a href="<?= $base ?>logout.php" class="flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg bg-rose-50 hover:bg-rose-100 border border-rose-200 font-bold text-xs text-rose-700 tracking-wider uppercase transition active:scale-[0.98] shadow-2xs">
            <svg class="w-4 h-4 shrink-0 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"></path>
            </svg>
            <span class="sidebar-info whitespace-nowrap">Terminate</span>
        </a>
    </div>
</div>

<script src="<?= $base ?>components/ajax-nav.js" defer></script>