<?php
if (!isset($_SESSION['role_id'])) return;

$user_role = $_SESSION['role_id'];
$current_page = basename($_SERVER['PHP_SELF']);

function isActive($pageNames, $current_page) {
    return in_array($current_page, (array)$pageNames) ? 'active' : '';
}

function isDropdownOpen($pages, $current_page) {
    return in_array($current_page, $pages) ? 'open' : '';
}
?>

<style>
/* Hamburger toggle for mobile */
#sidebarToggle {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1201;
    background: rgba(0,0,0,0.6);
    border: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}

.sidebar {
    position: fixed;
    top: 65px;
    left: 0;
    width: 220px;
    height: calc(100% - 70px);
    background: rgba(23, 23, 23, 0.71);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 2px 0 10px rgba(0,0,0,0.25);
    overflow-y: auto;
    z-index: 100; /* Behind header/footer */
    font-family: 'Segoe UI', sans-serif;
    transition: transform 0.3s ease;
}

.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.sidebar ul li {
    position: relative;
}

.sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    border-left: 4px solid transparent;
    border-radius: 0 20px 20px 0;
    transition: background 0.3s, border-left-color 0.3s;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: #ffa500;
}

.sidebar ul li a svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

.menu-group {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ccc;
    padding: 15px 20px 5px;
}

.dropdown-toggle::after {
    content: "▸";
    margin-left: auto;
    transition: transform 0.3s;
    font-size: 12px;
}

.dropdown.open > .dropdown-toggle::after {
    transform: rotate(90deg);
}

.dropdown ul {
    display: none;
    padding-left: 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.dropdown.open ul {
    display: block;
}

.sidebar ul li ul li a {
    font-size: 14px;
    padding: 10px 26px;
    font-weight: 400;
    color: #eee;
}

/* Responsive collapse & toggle */
@media (max-width: 768px) {
    #sidebarToggle {
        display: block;
    }

    .sidebar {
        transform: translateX(-100%);
        z-index: 1200;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar ul li a {
        padding: 10px 16px;
    }
}
</style>

<!-- Sidebar Toggle Button -->
<button id="sidebarToggle">&#9776;</button>

<aside class="sidebar" id="sidebar">
    <ul>
        <div class="menu-group">User Access</div>
        <li><a href="/digital_pos/pages/shared/profile.php" class="<?= isActive('profile.php', $current_page) ?>"><svg viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2.3c-3.1 0-9.3 1.6-9.3 4.9v2.3h18.6v-2.3c0-3.3-6.2-4.9-9.3-4.9z"/></svg>My Profile</a></li>
        <li><a href="/digital_pos/pages/shared/users_list.php" class="<?= isActive('users_list.php', $current_page) ?>"><svg viewBox="0 0 24 24"><path d="M16 13v-2H7V8l-5 4 5 4v-3z"/></svg>Users</a></li>

        <?php if ($user_role == 1): ?>
            <div class="menu-group">Admin Panel</div>
            <li class="dropdown <?= isDropdownOpen(['admin_dashboard.php'], $current_page) ?>">
                <a href="javascript:void(0);" class="dropdown-toggle"><svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zM3 21h8v-6H3zm10 0h8V11h-8zm0-18v6h8V3z"/></svg>Admin</a>
                <ul>
                    <li><a href="/digital_pos/pages/admin/admin_dashboard.php" class="<?= isActive('admin_dashboard.php', $current_page) ?>">Dashboard</a></li>
                    <li><a href="/digital_pos/pages/admin/user_management.php" class="<?= isActive('user_management.php', $current_page) ?>">Users</a></li>
                    <li><a href="/digital_pos/pages/admin/store_management.php" class="<?= isActive('store_management.php', $current_page) ?>">Stores</a></li>
                    <li><a href="/digital_pos/pages/admin/settings.php" class="<?= isActive('settings.php', $current_page) ?>">Settings</a></li>
                    <li><a href="/digital_pos/pages/admin/reports.php" class="<?= isActive('reports.php', $current_page) ?>">Reports</a></li>
                    <li><a href="/digital_pos/pages/admin/audit_logs.php" class="<?= isActive('audit_logs.php', $current_page) ?>">Audit Logs</a></li>
                    <li><a href="/digital_pos/pages/admin/session_log.php" class="<?= isActive('session_log.php', $current_page) ?>">Session Logs</a></li>
                </ul>
            </li>
        <?php elseif ($user_role == 2): ?>
            <div class="menu-group">Manager Tools</div>
            <li class="dropdown <?= isDropdownOpen(['manager_dashboard.php'], $current_page) ?>">
                <a href="javascript:void(0);" class="dropdown-toggle"><svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zM3 21h8v-6H3zm10 0h8V11h-8zm0-18v6h8V3z"/></svg>Inventory</a>
                <ul>
                    <li><a href="/digital_pos/pages/manager/manager_dashboard.php" class="<?= isActive('manager_dashboard.php', $current_page) ?>">Dashboard</a></li>
                    <li><a href="/digital_pos/pages/manager/inventory.php" class="<?= isActive('inventory.php', $current_page) ?>">Inventory</a></li>
                    <li><a href="/digital_pos/pages/manager/categories.php" class="<?= isActive('categories.php', $current_page) ?>">Categories</a></li>
                    <li><a href="/digital_pos/pages/manager/suppliers.php" class="<?= isActive('suppliers.php', $current_page) ?>">Suppliers</a></li>
                    <li><a href="/digital_pos/pages/manager/reports.php" class="<?= isActive('reports.php', $current_page) ?>">Reports</a></li>
                </ul>
            </li>
        <?php elseif ($user_role == 3): ?>
            <div class="menu-group">Cashier Tools</div>
            <li class="dropdown <?= isDropdownOpen(['cashier_dashboard.php'], $current_page) ?>">
                <a href="javascript:void(0);" class="dropdown-toggle"><svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zM3 21h8v-6H3zm10 0h8V11h-8zm0-18v6h8V3z"/></svg>Sales</a>
                <ul>
                    <li><a href="/digital_pos/pages/cashier/cashier_dashboard.php" class="<?= isActive('cashier_dashboard.php', $current_page) ?>">Dashboard</a></li>
                    <li><a href="/digital_pos/pages/cashier/sales.php" class="<?= isActive('sales.php', $current_page) ?>">New Sale</a></li>
                    <li><a href="/digital_pos/pages/cashier/my_sales.php" class="<?= isActive('my_sales.php', $current_page) ?>">My Sales</a></li>
                </ul>
            </li>
        <?php elseif ($user_role == 4): ?>
            <div class="menu-group">Finance Dept</div>
            <li class="dropdown <?= isDropdownOpen(['accountant_sales.php','bank_reconciliation.php'], $current_page) ?>">
                <a href="javascript:void(0);" class="dropdown-toggle"><svg viewBox="0 0 24 24"><path d="M4 4h16v4H4zM4 10h16v10H4z"/></svg>Transactions</a>
                <ul>
                    <li><a href="/digital_pos/pages/accountant/accountant_sales.php" class="<?= isActive('accountant_sales.php', $current_page) ?>">Sales</a></li>
                    <li><a href="/digital_pos/pages/accountant/accountant_expenses.php" class="<?= isActive('accountant_expenses.php', $current_page) ?>">Expenses</a></li>
                    <li><a href="/digital_pos/pages/accountant/bank_transaction_approvals.php" class="<?= isActive('bank_transaction_approvals.php', $current_page) ?>">Bank Approvals</a></li>
                    <li><a href="/digital_pos/pages/accountant/bank_reconciliation.php" class="<?= isActive('bank_reconciliation.php', $current_page) ?>">Reconciliation</a></li>
                </ul>
            </li>
            <li class="dropdown <?= isDropdownOpen(['variance_report.php'], $current_page) ?>">
                <a href="javascript:void(0);" class="dropdown-toggle"></svg>📊 Reports Hub</a>
                <ul>
                    <li><a href="/digital_pos/pages/accountant/variance_report.php" class="<?= isActive('variance_report.php', $current_page) ?>">Variance</a></li>
                    <li><a href="/digital_pos/pages/accountant/reports_dashboard.php" class="<?= isActive('accountant_reports.php', $current_page) ?>">More Reports</a></li>
                </ul>
            </li>
        <?php endif; ?>

        <div class="menu-group">System</div>
        <li><a href="/digital_pos/pages/shared/logout.php"><svg viewBox="0 0 24 24"><path d="M16 13v-2H7V8l-5 4 5 4v-3z"/></svg>Logout</a></li>
    </ul>
</aside>

<script>
document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
    toggle.addEventListener('click', () => {
        toggle.closest('.dropdown').classList.toggle('open');
    });
});

document.getElementById('sidebarToggle').addEventListener('click', () => {
    document.getElementById('sidebar').classList.toggle('show');
});
</script>
