<?php
$user = current_user();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?php 
        if (!empty($page_title)) {
            echo htmlspecialchars(remove_junk($page_title), ENT_QUOTES, 'UTF-8');
        } elseif (!empty($user)) {
            echo htmlspecialchars(ucfirst($user['name']), ENT_QUOTES, 'UTF-8');
        } else {
            echo "Inventory Management System";
        }
        ?>
    </title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="layouts/header_1.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
    <?php if ($session->isUserLoggedIn(true)): ?>
    <div class="d-flex" id="wrapper">

        <!-- Sidebar -->
        <div class="bg-dark text-light" id="sidebar">
            <div class="sidebar-header p-3 d-flex justify-content-between align-items-center">
                <h4 class="sidebar-title">Resource Planning</h4>
                <!-- Toggle Sidebar Button (for small screens) -->
                <button class="btn btn-light d-md-none" id="sidebarToggle">
                    <i class="bi bi-list"></i>
                </button>
            </div>
            <div class="sidebar-content p-3">
                <?php 
                switch ($user['user_level']) {
                    case '1':
                        include_once('admin_menu.php');
                        break;
                    case '2':
                        include_once('special_menu.php');
                        break;
                    case '3':
                        include_once('user_menu.php');
                        break;
                    case '4':
                        include_once('vendor_menu.php');
                        break;
                    default:
                        // Optional: Include a default menu or message if user level is unknown
                        break;
                }
                ?>
            </div>
        </div>

        <!-- Page Content -->
        <div id="page-content-wrapper" class="w-100">
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">Resource Planning</a>
                <!-- Toggle Sidebar Button (for small screens) -->
                <button class="btn btn-primary d-md-none" id="menuToggle">
                    <i class="bi bi-list"></i>
                </button>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <!-- Add more nav items here -->
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <img src="uploads/users/<?php echo htmlspecialchars($user['image'], ENT_QUOTES, 'UTF-8'); ?>" alt="user-image" class="img-circle img-inline" style="width: 30px; height: 30px;">
                                <?php echo htmlspecialchars(ucfirst($user['name']), ENT_QUOTES, 'UTF-8'); ?>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="profile.php?id=<?php echo (int)$user['id']; ?>"><i class="bi bi-person"></i> Profile</a></li>
                                <li><a class="dropdown-item" href="edit_account.php"><i class="bi bi-gear"></i> Settings</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="logout.php"><i class="bi bi-box-arrow-right"></i> Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- Content -->
            <div class="container-fluid p-4">
                <!-- Page content goes here -->
                <!-- Ensure to add your actual page content here -->
            </div> <!-- End of Content -->

        </div> <!-- End of Page Content Wrapper -->

    </div> <!-- End of Wrapper -->
    <?php endif; ?>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const sidebarToggle = document.getElementById('sidebarToggle');
            const menuToggle = document.getElementById('menuToggle');

            // Toggle sidebar visibility
            sidebarToggle.addEventListener('click', function() {
                sidebar.classList.toggle('collapsed');
                document.getElementById('page-content-wrapper').classList.toggle('collapsed');
            });

            // Toggle menu on small screens
            menuToggle.addEventListener('click', function() {
                sidebar.classList.toggle('collapsed');
                document.getElementById('page-content-wrapper').classList.toggle('collapsed');
            });
        });
    </script>
</body>
</html>
