<?php 
$company_id = $_SESSION['company_id'] ?? 0;
$company = fetch("SELECT name, logo, currency FROM companies WHERE id = ?", [$company_id]) ?: ['name' => 'NexCore', 'logo' => '', 'currency' => '$'];
$_SESSION['company_currency'] = $company['currency'] ?? '$';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $company['name'] ?? 'NexCore'; ?> - Apparel Management</title>
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👕</text></svg>">
    <link rel="stylesheet" href="<?php echo url('assets/css/style.css'); ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        window.APP_CONFIG = {
            BASE_URL: '<?php echo BASE_URL; ?>',
            BASE_PATH: '<?php echo defined('APP_BASE_PATH') ? APP_BASE_PATH : '/'; ?>',
            COMPANY_CURRENCY: '<?php echo $_SESSION['company_currency'] ?? '$'; ?>'
        };
    </script>
    <style>
        /* Notification Bell and Dropdown Styles */
        .notification-container {
            position: relative;
            display: inline-block;
            margin-right: 0.5rem;
        }

        .notification-bell-btn {
            background: transparent;
            border: none;
            font-size: 1.15rem;
            color: var(--text-muted);
            cursor: pointer;
            position: relative;
            padding: 0.5rem;
            border-radius: 50%;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .notification-bell-btn:hover {
            color: var(--primary);
            background: rgba(124, 58, 237, 0.08);
        }

        .notification-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            background: var(--danger);
            color: white;
            font-size: 0.65rem;
            font-weight: 800;
            min-width: 15px;
            height: 15px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            border: 2px solid var(--bg-card);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .notification-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 320px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: none;
            flex-direction: column;
            overflow: hidden;
            animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .notification-dropdown.show {
            display: flex;
        }

        .notification-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            background: rgba(124, 58, 237, 0.02);
        }

        .notification-header h3 {
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--text-main);
            margin: 0;
        }

        .mark-all-read-btn {
            background: transparent;
            border: none;
            color: var(--primary);
            font-size: 0.75rem;
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.2s;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }

        .mark-all-read-btn:hover {
            background: rgba(124, 58, 237, 0.06);
        }

        .notification-list {
            max-height: 280px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .notification-item {
            display: flex;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            text-decoration: none;
            color: inherit;
            transition: background-color 0.2s;
            position: relative;
        }

        .notification-item:hover {
            background-color: rgba(124, 58, 237, 0.02);
        }

        .notification-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
        }

        .notification-item.type-inventory::before {
            background: var(--warning);
        }

        .notification-item.type-inventory-out::before {
            background: var(--danger);
        }

        .notification-item.type-production::before {
            background: var(--success);
        }

        .notification-item.type-system::before {
            background: var(--primary);
        }

        .notification-icon-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .notification-item.type-inventory .notification-icon-wrapper {
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }

        .notification-item.type-inventory-out .notification-icon-wrapper {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }

        .notification-item.type-production .notification-icon-wrapper {
            background: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }

        .notification-item.type-system .notification-icon-wrapper {
            background: rgba(124, 58, 237, 0.1);
            color: var(--primary);
        }

        .notification-content {
            flex-grow: 1;
            min-width: 0;
        }

        .notification-title {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 0.15rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .notification-message {
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.3;
            margin-bottom: 0.25rem;
            word-wrap: break-word;
        }

        .notification-time {
            font-size: 0.65rem;
            color: var(--text-muted);
            opacity: 0.8;
        }

        .notification-empty {
            padding: 2rem 1rem;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.8rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }
    </style>
    <script>
        async function fetchNotifications() {
            if (!document.getElementById('notificationBellBtn')) return;
            try {
                const basePath = window.APP_CONFIG ? window.APP_CONFIG.BASE_PATH : '/';
                const res = await fetch(`${basePath}api/notifications.php?action=list`);
                const json = await res.json();
                if (json.success) {
                    updateNotificationUI(json.data);
                }
            } catch (e) {
                console.error("Failed to fetch notifications:", e);
            }
        }

        function updateNotificationUI(notifications) {
            const badge = document.getElementById('notificationBadge');
            const list = document.getElementById('notificationList');
            if (!badge || !list) return;

            if (notifications.length > 0) {
                badge.innerText = notifications.length;
                badge.style.display = 'flex';
                
                let html = '';
                notifications.forEach(item => {
                    const basePath = window.APP_CONFIG ? window.APP_CONFIG.BASE_PATH : '/';
                    let typeClass = 'type-system';
                    let iconClass = 'fa-info-circle';
                    if (item.type === 'inventory') {
                        typeClass = item.title.toLowerCase().includes('out of stock') ? 'type-inventory-out' : 'type-inventory';
                        iconClass = item.title.toLowerCase().includes('out of stock') ? 'fa-ban' : 'fa-triangle-exclamation';
                    } else if (item.type === 'production') {
                        typeClass = 'type-production';
                        iconClass = 'fa-industry';
                    }
                    
                    const targetUrl = item.target_url ? (basePath + item.target_url.replace(/^\//, '')) : '#';
                    const timeAgo = formatTimeAgo(new Date(item.created_at));

                    html += `
                        <a href="${targetUrl}" class="notification-item ${typeClass}" onclick="markNotificationRead(${item.id}, event, '${targetUrl}')">
                            <div class="notification-icon-wrapper">
                                <i class="fas ${iconClass}"></i>
                            </div>
                            <div class="notification-content">
                                <div class="notification-title">${escapeHTML(item.title)}</div>
                                <div class="notification-message">${escapeHTML(item.message)}</div>
                                <div class="notification-time">${timeAgo}</div>
                            </div>
                        </a>
                    `;
                });
                list.innerHTML = html;
            } else {
                badge.innerText = '0';
                badge.style.display = 'none';
                list.innerHTML = `
                    <div class="notification-empty">
                        <i class="far fa-bell-slash" style="font-size: 1.25rem; opacity: 0.5;"></i>
                        <div>No new notifications</div>
                    </div>
                `;
            }
        }

        function formatTimeAgo(date) {
            const seconds = Math.floor((new Date() - date) / 1000);
            let interval = Math.floor(seconds / 31536000);
            if (interval >= 1) return interval + "y ago";
            interval = Math.floor(seconds / 2592000);
            if (interval >= 1) return interval + "mo ago";
            interval = Math.floor(seconds / 86400);
            if (interval >= 1) return interval + "d ago";
            interval = Math.floor(seconds / 3600);
            if (interval >= 1) return interval + "h ago";
            interval = Math.floor(seconds / 60);
            if (interval >= 1) return interval + "m ago";
            return seconds < 10 ? "Just now" : Math.floor(seconds) + "s ago";
        }

        async function markNotificationRead(id, event, targetUrl) {
            if (targetUrl && targetUrl !== '#') {
                event.preventDefault();
            }
            try {
                const basePath = window.APP_CONFIG ? window.APP_CONFIG.BASE_PATH : '/';
                await fetch(`${basePath}api/notifications.php?action=mark_read`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id: id })
                });
                if (targetUrl && targetUrl !== '#') {
                    window.location.href = targetUrl;
                } else {
                    fetchNotifications();
                }
            } catch (e) {
                console.error("Failed to mark notification read:", e);
                if (targetUrl && targetUrl !== '#') {
                    window.location.href = targetUrl;
                }
            }
        }

        async function markAllNotificationsRead(event) {
            event.stopPropagation();
            try {
                const basePath = window.APP_CONFIG ? window.APP_CONFIG.BASE_PATH : '/';
                const res = await fetch(`${basePath}api/notifications.php?action=mark_read`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });
                const json = await res.json();
                if (json.success) {
                    fetchNotifications();
                }
            } catch (e) {
                console.error("Failed to mark all notifications read:", e);
            }
        }

        function escapeHTML(str) {
            if (!str) return '';
            return str.replace(/&/g, '&amp;')
                      .replace(/</g, '&lt;')
                      .replace(/>/g, '&gt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&#039;');
        }

        document.addEventListener('DOMContentLoaded', () => {
            const profileBtn = document.getElementById('userProfileBtn');
            const profileDropdown = document.getElementById('userProfileDropdown');
            const profileContainer = document.getElementById('userProfileContainer');

            if (profileBtn && profileDropdown) {
                profileBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    profileDropdown.classList.toggle('show');
                });

                document.addEventListener('click', (e) => {
                    if (profileContainer && !profileContainer.contains(e.target)) {
                        profileDropdown.classList.remove('show');
                    }
                });
            }

            const userRole = '<?php echo $_SESSION['user_role'] ?? ""; ?>';
            const isNotificationsEnabled = <?php echo (hasRole(['owner', 'manager']) && isModuleEnabled('notifications')) ? 'true' : 'false'; ?>;
            if (!isNotificationsEnabled) return;

            const bellBtn = document.getElementById('notificationBellBtn');
            const dropdown = document.getElementById('notificationDropdown');
            const container = document.getElementById('notificationContainer');

            if (bellBtn && dropdown) {
                bellBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    dropdown.classList.toggle('show');
                });

                document.addEventListener('click', (e) => {
                    if (container && !container.contains(e.target)) {
                        dropdown.classList.remove('show');
                    }
                });
            }

            fetchNotifications();
            setInterval(fetchNotifications, 60000);
        });
    </script>
</head>
<body>
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar" id="sidebar">
            <a href="<?php echo url(); ?>" class="logo-section" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 0.75rem; width: 100%;">
                <div class="logo-icon" style="<?php echo ($company['logo'] ?? '') ? 'background: none; box-shadow: none;' : ''; ?>">
                    <?php if ($company['logo'] ?? ''): ?>
                        <img src="<?php echo $company['logo'] ?? ''; ?>" style="width: 100%; height: 100%; object-fit: contain; border-radius: 8px;">
                    <?php else: ?>
                        <i class="fas fa-layer-group text-white"></i>
                    <?php endif; ?>
                </div>
                <span class="logo-text"><?php echo $company['name'] ?? 'NexCore'; ?></span>
                <button class="collapse-toggle" onclick="event.preventDefault(); toggleSidebarCollapse()" title="Toggle Navigation" style="margin-left: auto;">
                    <i class="fas fa-bars" id="collapseIcon"></i>
                </button>
            </a>
            
            <nav class="nav-links">
                <?php if (hasRole(['supervisor', 'operator']) && isModuleEnabled('worklist')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('worklist'); ?>" class="nav-link <?php echo $page === 'worklist' ? 'active' : ''; ?>">
                        <i class="fas fa-tasks"></i>
                        <span>My Work List</span>
                    </a>
                </li>
                <?php endif; ?>

                <?php if (hasRole('superadmin')): ?>
                <li style="padding: 1.5rem 1rem 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;">
                    System Administration
                </li>
                <?php 
                $admin_tables = [
                    'users' => ['icon' => 'fa-users', 'label' => 'Users'],
                    'roles' => ['icon' => 'fa-user-tag', 'label' => 'Roles'],
                    'dashboards' => ['icon' => 'fa-tachometer-alt', 'label' => 'Dashboards'],
                    'workflow_stages' => ['icon' => 'fa-project-diagram', 'label' => 'Workflow Stages'],
                    'workflow_statuses' => ['icon' => 'fa-stream', 'label' => 'Workflow Statuses'],
                    'task_statuses' => ['icon' => 'fa-tasks', 'label' => 'Task Statuses'],
                    'skills' => ['icon' => 'fa-star', 'label' => 'Skills'],
                    'units' => ['icon' => 'fa-ruler-combined', 'label' => 'Units'],
                    'companies' => ['icon' => 'fa-building', 'label' => 'Companies'],
                    'system_modules' => ['icon' => 'fa-cubes', 'label' => 'Modules'],
                    'payment_terms' => ['icon' => 'fa-hand-holding-dollar', 'label' => 'Payment Terms']
                ];
                $current_tab = $_GET['table'] ?? 'users';
                foreach ($admin_tables as $tbl => $meta): 
                ?>
                <li class="nav-item">
                    <a href="<?php echo url('superadmin', ['table' => $tbl]); ?>" class="nav-link <?php echo ($page === 'superadmin' && $current_tab === $tbl) ? 'active' : ''; ?>">
                        <i class="fas <?php echo $meta['icon']; ?>"></i>
                        <span><?php echo $meta['label']; ?></span>
                    </a>
                </li>
                <?php endforeach; ?>
                <li class="nav-item">
                    <a href="<?php echo url('settings'); ?>" class="nav-link <?php echo ($page === 'settings') ? 'active' : ''; ?>">
                        <i class="fas fa-cog"></i>
                        <span>Settings</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if (hasRole(['owner', 'admin'])): ?>
                <?php if (isModuleEnabled('dashboard')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('dashboard'); ?>" class="nav-link <?php echo $page === 'dashboard' ? 'active' : ''; ?>">
                        <i class="fas fa-chart-pie"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php endif; ?>
                
                <?php if (hasRole('admin') && isModuleEnabled('orders')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('orders'); ?>" class="nav-link <?php echo $page === 'orders' ? 'active' : ''; ?>">
                        <i class="fas fa-file-invoice"></i>
                        <span>Orders</span>
                    </a>
                </li>
                <?php endif; ?>

                <?php if (hasRole(['owner', 'admin'])): ?>
                <li class="nav-item">
                    <a href="<?php echo url('company-settings'); ?>" class="nav-link <?php echo $page === 'company-settings' ? 'active' : ''; ?>">
                        <i class="fas fa-building-circle-check"></i>
                        <span>Company Profile</span>
                    </a>
                </li>
                <?php if (isModuleEnabled('branches')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('branches'); ?>" class="nav-link <?php echo $page === 'branches' ? 'active' : ''; ?>">
                        <i class="fas fa-code-branch"></i>
                        <span>Branches</span>
                    </a>
                </li>
                <?php endif; ?>

                <?php if (isModuleEnabled('audit-logs')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('audit-logs'); ?>" class="nav-link <?php echo $page === 'audit-logs' ? 'active' : ''; ?>">
                        <i class="fas fa-shield-halved"></i>
                        <span>Audit Logs</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php endif; ?>

                <?php if (hasRole('owner') && isModuleEnabled('reports')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('reports'); ?>" class="nav-link <?php echo $page === 'reports' ? 'active' : ''; ?>">
                        <i class="fas fa-chart-line"></i>
                        <span>Reports</span>
                    </a>
                </li>
                <?php endif; ?>


                <?php if (hasRole('manager')): ?>

                <?php if (isModuleEnabled('suppliers')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('suppliers'); ?>" class="nav-link <?php echo $page === 'suppliers' ? 'active' : ''; ?>">
                        <i class="fas fa-truck-ramp-box"></i>
                        <span>Supplies</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if (isModuleEnabled('buyers')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('buyers'); ?>" class="nav-link <?php echo $page === 'buyers' ? 'active' : ''; ?>">
                        <i class="fas fa-building"></i>
                        <span>Buyers</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if (isModuleEnabled('inventory')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('inventory'); ?>" class="nav-link <?php echo $page === 'inventory' ? 'active' : ''; ?>">
                        <i class="fas fa-boxes-stacked"></i>
                        <span>Inventory</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if (isModuleEnabled('products')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('products'); ?>" class="nav-link <?php echo $page === 'products' ? 'active' : ''; ?>">
                        <i class="fas fa-shirt"></i>
                        <span>Products</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if (isModuleEnabled('machinery')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('machinery'); ?>" class="nav-link <?php echo $page === 'machinery' ? 'active' : ''; ?>">
                        <i class="fas fa-gears"></i>
                        <span>Machinery</span>
                    </a>
                </li>
                <?php endif; ?>

                <?php if (hasRole('manager') && isModuleEnabled('reports')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('reports'); ?>" class="nav-link <?php echo $page === 'reports' ? 'active' : ''; ?>">
                        <i class="fas fa-chart-line"></i>
                        <span>Reports</span>
                    </a>
                </li>
                <?php endif; ?>
                
                <li style="padding: 1.5rem 1rem 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;">
                    Work Flows
                </li>
                <?php if (isModuleEnabled('production-lines')): ?>
                <li class="nav-item">
                    <a href="<?php echo url('production-lines'); ?>" class="nav-link <?php echo $page === 'production-lines' ? 'active' : ''; ?>">
                        <i class="fas fa-industry"></i>
                        <span>Production Line</span>
                    </a>
                <?php endif; ?>
                <?php endif; ?>

                <!-- HR & Time Tracking Modules -->
                <?php 
                $show_employees = isModuleEnabled('employees') && hasRole(['owner', 'admin', 'manager']);
                $show_shifts = isModuleEnabled('shifts') && hasRole(['owner', 'manager']);
                $show_attendance = isModuleEnabled('attendance') && !hasRole('finance executive');
                $show_leaves = isModuleEnabled('leaves') && !hasRole('finance executive');
                
                if (!hasRole('superadmin') && ($show_employees || $show_shifts || $show_attendance || $show_leaves)): 
                ?>
                <li style="padding: 1.5rem 1rem 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;">
                    HR & Time Tracking
                </li>
                <?php if ($show_employees): ?>
                <li class="nav-item">
                    <a href="<?php echo url('employees'); ?>" class="nav-link <?php echo $page === 'employees' ? 'active' : ''; ?>">
                        <i class="fas fa-users"></i>
                        <span>Employees</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if ($show_shifts): ?>
                <li class="nav-item">
                    <a href="<?php echo url('shifts'); ?>" class="nav-link <?php echo $page === 'shifts' ? 'active' : ''; ?>">
                        <i class="fas fa-calendar-alt"></i>
                        <span>Shifts</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if ($show_attendance): ?>
                <li class="nav-item">
                    <a href="<?php echo url('attendance'); ?>" class="nav-link <?php echo $page === 'attendance' ? 'active' : ''; ?>">
                        <i class="fas fa-clock-rotate-left"></i>
                        <span>Attendance</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if ($show_leaves): ?>
                <li class="nav-item">
                    <a href="<?php echo url('leaves'); ?>" class="nav-link <?php echo $page === 'leaves' ? 'active' : ''; ?>">
                        <i class="fas fa-calendar-day"></i>
                        <span>Leaves</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php endif; ?>

                <!-- Finance & Payments Modules -->
                <?php 
                $show_payroll = hasRole(['owner', 'finance executive']) && isModuleEnabled('payroll');
                $show_invoices = hasRole(['owner', 'finance executive']) && isModuleEnabled('invoices');
                
                if (!hasRole('superadmin') && ($show_payroll || $show_invoices)): 
                ?>
                <li style="padding: 1.5rem 1rem 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;">
                    Finance & Payments
                </li>
                <?php if ($show_payroll): ?>
                <li class="nav-item">
                    <a href="<?php echo url('payroll'); ?>" class="nav-link <?php echo $page === 'payroll' ? 'active' : ''; ?>">
                        <i class="fas fa-file-invoice-dollar"></i>
                        <span>Payroll</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if ($show_invoices): ?>
                <li class="nav-item">
                    <a href="<?php echo url('invoices'); ?>" class="nav-link <?php echo $page === 'invoices' ? 'active' : ''; ?>">
                        <i class="fas fa-file-invoice"></i>
                        <span>Invoices</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php endif; ?>

                <!-- HR & Time Tracking Modules for Finance Executive -->
                <?php 
                if (hasRole('finance executive')): 
                    $show_attendance_fe = isModuleEnabled('attendance');
                    $show_leaves_fe = isModuleEnabled('leaves');
                    if ($show_attendance_fe || $show_leaves_fe):
                ?>
                <li style="padding: 1.5rem 1rem 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;">
                    HR & Time Tracking
                </li>
                <?php if ($show_attendance_fe): ?>
                <li class="nav-item">
                    <a href="<?php echo url('attendance'); ?>" class="nav-link <?php echo $page === 'attendance' ? 'active' : ''; ?>">
                        <i class="fas fa-clock-rotate-left"></i>
                        <span>Attendance</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php if ($show_leaves_fe): ?>
                <li class="nav-item">
                    <a href="<?php echo url('leaves'); ?>" class="nav-link <?php echo $page === 'leaves' ? 'active' : ''; ?>">
                        <i class="fas fa-calendar-day"></i>
                        <span>Leaves</span>
                    </a>
                </li>
                <?php endif; ?>
                <?php 
                    endif;
                endif; 
                ?>

            </nav>


        </aside>

        <!-- Main Content Area -->
        <main class="main-content" id="mainContent">
            <header class="top-header">
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <button class="menu-toggle" onclick="toggleSidebar()">
                        <i class="fas fa-bars"></i>
                    </button>
                    <div class="page-title">
                        <h1>
                            <?php 
                            if ($page === 'dashboard' && hasRole('finance executive')) {
                                echo 'Finance';
                            } else {
                                echo ucfirst(str_replace('-', ' ', $page)); 
                            }
                            ?>
                        </h1>
                        <p>Welcome back, <?php echo $_SESSION['user_name']; ?>. Here's what's happening.</p>
                    </div>
                </div>
                
                <div style="display: flex; align-items: center; gap: 0.5rem;">
                    <?php if (hasRole(['owner', 'manager']) && isModuleEnabled('notifications')): ?>
                    <!-- Notification Bell -->
                    <div class="notification-container" id="notificationContainer">
                        <button class="notification-bell-btn" id="notificationBellBtn" title="Notifications">
                            <i class="fas fa-bell"></i>
                            <span class="notification-badge" id="notificationBadge" style="display: none;">0</span>
                        </button>
                        <div class="notification-dropdown" id="notificationDropdown">
                            <div class="notification-header">
                                <h3>Notifications</h3>
                                <button class="mark-all-read-btn" onclick="markAllNotificationsRead(event)">Mark all as read</button>
                            </div>
                            <div class="notification-list" id="notificationList">
                                <div class="notification-empty">
                                    <i class="far fa-bell-slash" style="font-size: 1.25rem; opacity: 0.5;"></i>
                                    <div>No new notifications</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <div class="user-profile">
                        <div class="user-profile-container" id="userProfileContainer" style="position: relative;">
                            <div id="userProfileBtn" style="cursor: pointer; display: flex; align-items: center; gap: 0.75rem;">
                                <div class="user-info">
                                    <div style="font-weight: 600; font-size: 0.875rem;"><?php echo $_SESSION['user_name']; ?></div>
                                    <div style="font-size: 0.75rem; color: var(--text-muted);"><?php echo strtoupper($_SESSION['user_role']); ?></div>
                                </div>
                                <div class="user-avatar">
                                    <?php echo strtoupper(substr($_SESSION['user_name'], 0, 1)); ?>
                                </div>
                            </div>
                            <div class="notification-dropdown" id="userProfileDropdown" style="width: 200px;">
                                <div class="notification-list">
                                    <a href="#" onclick="document.getElementById('userProfileDropdown').classList.remove('show'); document.getElementById('changePasswordModal').classList.add('active'); return false;" class="notification-item">
                                        <div class="notification-icon-wrapper" style="width: 24px; height: 24px; background: transparent; color: var(--text-main);">
                                            <i class="fas fa-key"></i>
                                        </div>
                                        <div class="notification-content">
                                            <div class="notification-title" style="font-size: 0.85rem; font-weight: 500;">Change Password</div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <a href="<?php echo url('logout'); ?>" class="logout-btn" title="Logout">
                            <i class="fas fa-sign-out-alt"></i>
                        </a>
                    </div>
                </div>
            </header>
            <div class="animate-fade-in">
