<?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>

  <!-- CDN & Local CSS -->
  <script src="zxing-master/docs/apidocs/script-dir/jquery-3.6.1.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.7.0/css/all.min.css" />
  <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>
    body {
      margin: 0;
      padding-left: 250px;
      font-size: 13px;
      transition: padding-left 0.3s ease;
    }

    /* Header */
    #header {
      background-color: #1c1c1c;
      color: #fff;
      border-bottom: 10px solid #495057;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1000;
    }
    #header .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 0 10px;
    }
    #header .logo .sidebar-toggle {
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 6px 10px;
      cursor: pointer;
      font-size: 12px;
      margin-left: 10px;
      transition: background-color 0.3s, transform 0.3s;
    }
    #header .logo .sidebar-toggle:hover {
      background-color: #0056b3;
      transform: scale(1.05);
    }

    /* Sidebar */
    .sidebar {
      background-color: #1c1c1c;
      color: #fff;
      position: fixed;
      top: 50px;
      left: 0;
      width: 250px;
      height: calc(100vh - 50px);
      padding: 10px 5px;
      transition: transform 0.3s ease;
      overflow-y: auto;
    }
    .sidebar.hidden {
      transform: translateX(-250px);
    }
    .sidebar a {
      color: #fff;
      text-decoration: none;
      display: block;
      padding: 5px;
    }
    .sidebar a:hover {
      background-color: #495057;
    }

    /* Page content */
    .page-content {
      padding: 20px;
      margin-top: 65px;
      margin-left: 250px;
      transition: margin-left 0.3s ease;
    }
    .page-content.sidebar-hidden {
      margin-left: 0;
    }
  </style>
</head>

<body>
<?php
if (!$session->isUserLoggedIn(true)) {
    $session->msg('d', "harap login terlebih dahulu.");
    echo '<script>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 <?php echo ENVIRONMENT; ?>
    </div>
    <div class="header-date">
      <?php
        date_default_timezone_set("Asia/Jakarta");
        echo "<strong>" . date("F j, Y, g:i a") . "</strong>";
      ?>
    </div>
    <div class="profile-menu">
      <a href="#" data-toggle="dropdown">
        <img src="uploads/users/<?php echo $user['image']; ?>" alt="user-image" style="width:40px;height:40px;border-radius:50%;margin-right:10px;">
        <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="glyphicon glyphicon-user"></i> Profile</a></li>
        <li><a href="edit_account.php"><i class="glyphicon glyphicon-cog"></i> Settings</a></li>
        <li><a href="logout.php"><i class="glyphicon glyphicon-off"></i> Logout</a></li>
      </ul>
    </div>
  </div>
</header>

<div class="sidebar">
  <?php
    if ($user['user_level'] === '1') include_once('admin_menu.php');
    elseif ($user['user_level'] === '2') include_once('special_menu.php');
    elseif ($user['user_level'] === '3') include_once('user_menu.php');
    elseif ($user['user_level'] === '5') include_once('rnd_menu.php');
    elseif ($user['user_level'] === '6') include_once('jakarta_warehouse.php');
    elseif ($user['user_level'] === '7') include_once('makassar_warehouse.php');
    elseif ($user['user_level'] === '8') include_once('bali_warehouse.php');
    elseif ($user['user_level'] === '9') include_once('semarang_warehouse.php');
    elseif ($user['user_level'] === '10') include_once('bandung_warehouse.php');
  ?>
</div>

<div class="page-content">
  <!-- Isi halaman -->
<?php endif; ?>

<script src="assets/js/function.js"></script>
<script>
function toggleSidebar() {
  var sidebar = document.querySelector('.sidebar');
  var content = document.querySelector('.page-content');
  sidebar.classList.toggle('hidden');
  content.classList.toggle('sidebar-hidden');
}
</script>
</body>
</html>
