<?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 remove_junk($page_title);
        elseif (!empty($user))
            echo ucfirst($user['name']);
        else
            echo "Inventory Management System";
        ?>
    </title>
    
    <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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
    <link rel="stylesheet" href="libs/css/main.css" />
    <link rel="stylesheet" href="/assets/css/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLwQk6f0zK1J4wH4K31/5O9nK0cK/jX5k/vKxJ+8rG1oR8T2b1rL+f6GgKkPq" crossorigin="anonymous"
        referrerpolicy="no-referrer" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.4/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
    <script src="js/FileSaver.js-master/src/FileSaver.js"></script>
    <script type="module" src="https://unpkg.com/emoji-picker-element@^1.0.0"></script>

    <style>
        /* Modern CSS Styles */
        body {
            margin: 0;
            padding-left: 290px; /* Lebar baru + 10px margin */
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            color: #495057;
            background-color: #f4f7f9;
            transition: padding-left 0.3s ease;
        }

        /* Modern Header Styles */
        #header {
            background-color: #ffffff;
            color: #343a40;
            padding: 0;
            border-bottom: 1px solid #dee2e6;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        #header .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            padding: 0 20px;
        }

        #header .logo {
            font-size: 20px;
            font-weight: 600;
            color: #007bff;
            display: flex;
            align-items: center;
        }

        #header .logo .sidebar-toggle {
            background-color: #e9ecef;
            color: #495057;
            border: none;
            border-radius: 5px;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 15px;
            transition: background-color 0.3s, transform 0.3s;
            line-height: 1;
        }

        #header .logo .sidebar-toggle:hover {
            background-color: #dee2e6;
            transform: scale(1.05);
        }

        #header .header-date {
            font-size: 14px;
            color: #6c757d;
        }

        #header .profile-menu {
            position: relative;
        }

        #header .profile-menu a {
            color: #495057;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-size: 16px;
        }

        #header .profile-menu img {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin-right: 10px;
            border: 2px solid #007bff;
        }

        #header .profile-menu span {
            font-weight: 500;
        }
        
        /* Dropdown Menu */
        #header .dropdown-menu {
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 8px 0;
        }

        #header .dropdown-menu a {
            font-weight: 400;
            padding: 10px 20px;
            transition: background-color 0.2s ease;
        }

        #header .dropdown-menu a:hover {
            background-color: #f1f3f5;
        }

        /* Modern Dark Sidebar Styles */
        .sidebar {
            background-color: #2c3e50; /* Dark background */
            color: #ecf0f1; /* Light text color */
            overflow-y: auto;
            position: fixed;
            top: 60px;
            left: 0;
            width: 280px; /* Lebar sidebar baru */
            height: calc(100vh - 60px);
            padding: 20px 15px;
            z-index: 999;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
            bottom: 0;
            border-right: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.15);
        }
        
        .sidebar-header {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            padding-left: 10px;
            color: #3498db; /* Blue accent color */
        }

        /* Sidebar Navigation Menu */
        .sidebar ul,
        .sidebar li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar .list-group {
            margin-bottom: 0;
        }

        .sidebar .list-group-item {
            display: flex;
            align-items: center;
            border: none;
            background-color: transparent;
            color: #ecf0f1; /* Light text color */
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 8px;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }
        
        .sidebar .list-group-item i {
            margin-right: 12px;
            font-size: 16px;
            width: 20px;
            text-align: center;
            color: #7f8c8d; /* Muted icon color */
            transition: color 0.2s ease;
        }
        
        .sidebar .list-group-item:hover,
        .sidebar .list-group-item.active {
            background-color: #34495e; /* Slightly lighter dark background on hover */
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .sidebar .list-group-item:hover i,
        .sidebar .list-group-item.active i {
            color: #3498db; /* Blue accent color on hover */
        }

        /* Hide sidebar */
        .sidebar.hidden {
            transform: translateX(-280px); /* Sesuaikan transform dengan lebar baru */
        }

        /* Page Content Styles */
        .page-content {
            padding: 20px;
            margin-top: 60px;
            margin-left: 280px; /* Sesuaikan margin dengan lebar baru */
            transition: margin-left 0.3s ease;
        }

        /* Adjust content margin when sidebar is hidden */
        .page-content.sidebar-hidden {
            margin-left: 0;
        }
    </style>
</head>

<body>
    <?php
    if (!$session->isUserLoggedIn(true)) {
        $session->msg('d', "harap login terlebih dahulu.");
        echo '<script language="javascript">window.location.assign("index.php")</script>';
    }
    ?>
    <?php if ($session->isUserLoggedIn(true)): ?>
    <header id="header">
        <div class="header-content">
            <div class="logo">
                <button class="sidebar-toggle" onclick="toggleSidebar()">☰</button>
                Resource Planning System
            </div>
            <div class="header-date">
                <?php
                date_default_timezone_set("Asia/Jakarta");
                $gmt7Date = new DateTime();
                $gmt7Date->setTimezone(new DateTimeZone("Asia/Jakarta"));
                $formattedDate = $gmt7Date->format("F j, Y, g:i a");
                ?>
                <strong><?php echo $formattedDate; ?></strong>
            </div>
            <div class="profile-menu dropdown">
                <a href="#" class="toggle" data-toggle="dropdown" aria-expanded="false">
                    <img src="uploads/users/<?php echo $user['image']; ?>" alt="user-image">
                    <span><?php echo remove_junk(ucfirst($user['name'])); ?> <i class="caret"></i></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="profile.php?id=<?php echo (int)$user['id']; ?>"><i class="fas fa-user-circle"></i> Profile</a></li>
                    <li><a href="edit_account.php" title="Edit account"><i class="fas fa-cog"></i> Settings</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="sidebar">
        <?php if ($user['user_level'] === '1'): ?>
        <?php include_once('admin_menu.php'); ?>
        <?php elseif ($user['user_level'] === '2'): ?>
        <?php include_once('special_menu.php'); ?>
        <?php elseif ($user['user_level'] === '3'): ?>
        <?php include_once('user_menu.php'); ?>
        <?php elseif ($user['user_level'] === '4'): ?>
        <?php include_once('hr_menu.php'); ?>
        <?php endif; ?>
    </div>
    <div class="page-content">
    </div>
    <?php endif; ?>
    <script src="assets/js/function.js"></script>
    <script>
        function toggleSidebar() {
            var sidebar = document.querySelector('.sidebar');
            var content = document.querySelector('.page-content');
            var body = document.body;
            
            sidebar.classList.toggle('hidden');
            content.classList.toggle('sidebar-hidden');
            body.style.paddingLeft = sidebar.classList.contains('hidden') ? '0' : '290px'; /* Sesuaikan dengan lebar baru */
        }
    </script>
</body>
</html>