<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Home Page </title>
  <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"
    integrity="sha512-9xKTRVabjVeZmc+GUW8GgSmcREDunMM+Dt/GrzchfN8tkwHizc5RP4Ok/MXFFy5rIjJjzhndFScTceq5e6GvVQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    /* CSS Styles */
    body {
      margin: 0;
      padding-left: 260px;
      /* Initial padding for the sidebar */
      font-size: 13px;
      /* Set font size for the body */
      transition: padding-left 0.3s ease;
      /* Smooth transition for padding adjustment */
    }

    /* Modern Header Styles */
    #header {
      background-color: #1c1c1c;
      /* Ubah warna menjadi hitam */
      color: #ffffff;
      padding: 0px 0;
      border-bottom: 10px solid #495057;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1000;
      /* Ensure header is above other content */
    }

    #header .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      /* Set height to vertically center content */
      padding: 0 10px;
      /* Ensure some padding for content inside header */
    }

    #header .logo {
      font-size: 18px;
      /* Set a consistent font size for logo */
      display: flex;
      align-items: center;
    }

    #header .logo .sidebar-toggle {
      background-color: #007bff;
      /* Button background color */
      color: #ffffff;
      /* Button text color */
      border: none;
      border-radius: 5px;
      /* Rounded corners */
      padding: 6px 10px;
      /* Adjust padding for a smaller button */
      cursor: pointer;
      font-size: 12px;
      /* Smaller font size */
      margin-left: 10px;
      /* Space between logo and button */
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s, transform 0.3s;
      /* Smooth transitions */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      /* Subtle shadow for 3D effect */
      height: 30px;
      /* Button height */
    }

    #header .logo .sidebar-toggle:hover {
      background-color: #0056b3;
      /* Darker background on hover */
      transform: scale(1.05);
      /* Slightly enlarge button on hover */
    }

    #header .header-date {
      font-size: 18px;
      /* Set a consistent font size for date */
    }

    #header .profile-menu {
      position: relative;
      font-size: 18px;
      /* Set a consistent font size for profile menu */
    }

    #header .profile-menu a {
      color: #ffffff;
      text-decoration: none;
      display: flex;
      align-items: center;
    }

    #header .profile-menu img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }

    #header .dropdown-menu a {
      color: #343a40;
      text-decoration: none;
      display: block;
      padding: 10px;
      font-size: 16px;
      /* Set a consistent font size for dropdown items */
    }

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

    #header .profile-menu:hover .dropdown-menu {
      display: block;
    }

    /* Sidebar Styles */
    .sidebar {
      background-color: #1c1c1c;
      /* Ubah warna menjadi hitam */
      color: #ffffff;
      overflow-y: auto;
      position: fixed;
      top: 50px;
      /* Fixed to the top */
      left: 0;
      width: 250px;
      height: calc(100vh - 50px);
      /* Full height minus top offset */
      padding: 10px 5px;
      /* Padding for better spacing */
      z-index: 999;
      /* Ensure sidebar is above content */
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease;
      /* Smooth transition for hiding/showing */
      bottom: 0;
      /* Align the sidebar to the bottom of the viewport */
    }


    /* Sidebar Link Styles */
    .sidebar a {
      color: #ffffff;
      /* Ensure sidebar links are visible */
      text-decoration: none;
    }

    .sidebar a:hover {
      background-color: #495057;
      /* Slightly lighter color on hover */
    }

    /* Hide sidebar */
    .sidebar.hidden {
      transform: translateX(-250px);
      /* Move sidebar out of view */
    }

    /* Page Content Styles */
    .page-content {
      padding: 20px;
      margin-top: 65px;
      /* Adjust to fit the header height */
      margin-left: 250px;
      /* Adjust to fit the sidebar width */
      transition: margin-left 0.3s ease;
      /* Smooth transition for content adjustment */
    }

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

<body>
  <header id="header">
    <div class="header-content">
      <div class="logo">
        <button class="sidebar-toggle mr-3" onclick="toggleSidebar()">☰</button>
        Resource Planning
      </div>
      <div class="header-date">
        <strong>December 11, 2024, 10:05 am</strong>
      </div>
      <div class="profile-menu">
        <a href="#" data-toggle="dropdown" class="toggle" aria-expanded="false">
          <img src="uploads/users/8hvwkz8t28.jpg" alt="user-image">
          <span>Nanda <i class="caret"></i></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="profile.php?id=28"><i class="glyphicon glyphicon-user"></i>
              Profile</a></li>
          <li><a href="edit_account.php" title="Edit account"><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">
    <ul>
      <li>
        <a href="admin.php">
          <i class="glyphicon glyphicon-home"></i>
          <span>Dashboard</span>
        </a>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-inbox"></i>
          <span>Master</span>
        </a>
        <ul class="nav submenu">
          <li><a href="list_branch_office.php">Branch Office</a></li>
          <li><a href="list_shop.php">Shop</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-user"></i>
          <span>User Management</span>
        </a>
        <ul class="nav submenu">
          <li><a href="group.php">Manage Groups</a> </li>
          <li><a href="users.php">Manage Users</a> </li>
        </ul>
      </li>
      <li>
        <a href="categorie.php">
          <i class="glyphicon glyphicon-indent-left"></i>
          <span>Categories</span>
        </a>
      </li>

      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-inbox"></i>
          <span>Warehouse Jakarta</span>
        </a>
        <ul class="nav submenu">
          <li><a href="wh_jakarta.php">Warehouse Jakarta</a></li>
          <li><a href="etalase_jakarta.php">Etalase Jakarta</a></li>
          <li><a href="transfer_etalase_jakarta.php">Transfer etalase Jakarta</a></li>
          <li><a href="transfer_record_etalase_jakarta.php">List Transfer Etalase</a></li>
          <li><a href="scan_in_jakarta.php">Scan In Jakarta</a></li>
          <li><a href="scan_awb_jakarta.php">Scan Out Jakarta</a></li>
          <li><a href="add_sales_jakarta.php">Add Outgoing</a></li>
          <li><a href="sales_jakarta.php">List Outgoing Jakarta</a></li>
          <li><a href="upload_resi.php">Print Resi Area</a></li>
        </ul>
      </li>

      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-inbox"></i>
          <span>Warehouse Pusat</span>
        </a>
        <ul class="nav submenu">
          <li><a href="product.php">Warehouse Surabaya</a></li>
          <li><a href="online_product.php">Etalase Online</a> </li>
          <li><a href="transfer_etalase.php">Transfer Etalase</a> </li>
          <li><a href="transfer_online.php">Transfer List Etalase</a> </li>
          <li><a href="upload_resi.php">Print Resi Area</a></li>
          <li><a href="wh_transfer.php">Warehouse Transfer</a></li>
          <li><a href="list_wh_transfer.php">List Transfer</a></li>
          <li><a href="inventory_amount.php">Nilai Inventory</a></li>
        </ul>
      </li>

      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-inbox"></i>
          <span>Warehouse Makassar</span>
        </a>
        <ul class="nav submenu">
          <li><a href="wh_makassar.php">Warehouse Makassar</a></li>
          <li><a href="etalase_makassar.php">Etalase Makassar</a></li>
          <li><a href="transfer_etalase_makassar.php">Transfer Etalase Makassar</a></li>
          <li><a href="transfer_record_etalase_makassar.php">Record Etalase Makassar</a></li>
          <li><a href="scan_in_makassar.php">Scan In Makassar</a></li>
          <li><a href="scan_awb_makassar.php">Scan out Makassar</a></li>
          <li><a href="add_sales_makassar.php">add Outgoing Makassar</a></li>
          <li><a href="sales_makassar.php">List Outgoing Makassar</a></li>
          <li><a href="upload_resi_makassar.php">Upload Resi Makassar</a></li>

        </ul>
      </li>

      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-inbox"></i>
          <span>Warehouse Bali</span>
        </a>
        <ul class="nav submenu">
          <li><a href="wh_bali.php">Warehouse Bali</a></li>
          <li><a href="etalase_bali.php">Etalase Bali</a></li>
          <li><a href="transfer_etalase_bali.php">Transfer Etalase Bali</a></li>
          <li><a href="transfer_record_etalase_bali.php">Record Etalase Bali</a></li>
          <li><a href="scan_in_bali.php">Scan In Bali</a></li>
          <li><a href="scan_awb_bali.php">Scan out Bali</a></li>
          <li><a href="sales_bali.php">Outgoing Bali</a></li>
          <li><a href="upload_resi_bali.php">Upload Resi Bali</a></li>

        </ul>
      </li>

      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-shopping-cart"></i>
          <span>Purchasing</span>
        </a>
        <ul class="nav submenu">
          <li><a href="create_po.php">Create Purchase Order</a></li>
          <li><a href="view_po.php">View Purchase Orders</a></li>
          <li><a href="register_vendor.php">Vendor Register</a></li>
          <li><a href="vendor_list.php">Supplier List</a></li>
          <li><a href="receive_goods.php">Receive Goods</a></li>
          <li><a href="purchase_report.php">Purchase Report</a></li>
        </ul>
      </li>


      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-th-large"></i>
          <span>Products</span>
        </a>
        <ul class="nav submenu">
          <li><a href="list_product.php">List</a> </li>
          <li><a href="create_bom.php">Create Bom</a> </li>
          <li><a href="view_bom.php">Bom structure</a> </li>
          <li><a href="paket_bundling.php">Paket Bundling</a> </li>
          <li><a href="stock_taking.php">Stock Opname</a> </li>
        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-credit-card"></i>
          <span>Outgoing goods</span>
        </a>
        <ul class="nav submenu">
          <li><a href="sales.php">Report Outgoing</a> </li>
          <li><a href="add_sale.php">Add Outgoing Warehouse</a> </li>
          <li><a href="add_sale_online_products.php">Add Outgoing Etalase</a> </li>

        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-import"></i>
          <span>Incoming Goods</span>
        </a>
        <ul class="nav submenu">
          <li><a href="incoming_goods.php">Report Incoming</a> </li>
          <li><a href="add_incoming_goods.php">Add Incoming Goods</a> </li>
        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-shopping-cart"></i>
          <span>Purchase Request</span>
        </a>
        <ul class="nav submenu">
          <li><a href="purchase_requests.php">Purchase Request</a> </li>
          <li><a href="list_purchase_request.php">List Requested</a> </li>
          <li><a href="mrp_forecasting.php">Material Forecast</a> </li>
          <li><a href="list_purchase_item.php">Requested Material</a> </li>
        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-wrench"></i>
          <span>Production</span>
        </a>
        <ul class="nav submenu">
          <li><a href="production_schedule.php">Schedule</a> </li>
          <li><a href="mrp_forecasting.php">Material Plan</a> </li>
          <li><a href="mrp_baru.php">Stock on Hand</a> </li>
          <li><a href="prod_loc.php">Production Inventory</a> </li>
          <li><a href="add_prod_loc.php">Transfer to Production</a> </li>
          <li><a href="production_output.php">Production Output</a> </li>
          <li><a href="consume_output.php">Material Consumed</a> </li>
          <li><a href="std_time_list.php">Standard Time</a> </li>
        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-stats"></i>
          <span>Reporting</span>
        </a>
        <ul class="nav submenu">
          <li><a href="productivity.php">Daily Report Prod</a> </li>
          <li><a href="view_productivity_data.php">All Output Data</a> </li>
        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-barcode"></i>
          <span>AWB</span>
        </a>
        <ul class="nav submenu">
          <li><a href="awb.php">List AWB</a></li>
          <li><a href="scan_awb.php">Scan Out AWB</a></li>
          <li><a href="scan_in.php">Scan In AWB</a></li>
          <li><a href="list_awb.php">List Scan Out</a></li>
          <li><a href="scan_in_list.php">List Scan In</a></li>
          <li><a href="summary_scan_in.php">Rekap Scan In</a></li>
          <li><a href="result_scan.php">awb count</a></li>
          <li><a href="check_packer.php">Packer Count</a></li>
          <li><a href="serah_terima.php">Serah terima AWB</a></li>
          <li><a href="kurir.php">Kurir </a></li>
          <li><a href="checklist_awb.php">AWB checklist </a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-remove-circle"></i>
          <span>Reject Management</span>
        </a>
        <ul class="nav submenu">
          <li><a href="reject.php">Add Reject</a></li>
          <li><a href="reject_list.php">Reject Reporting</a></li>
        </ul>
      </li>

      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-repeat"></i>
          <span>Retur</span>
        </a>
        <ul class="nav submenu">
          <li><a href="scan_retur.php">Retur Scan</a></li>
          <li><a href="list_retur.php">List Retur</a></li>
        </ul>
      </li>

      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-list-alt"></i>
          <span>Material Request</span>
        </a>
        <ul class="nav submenu">
          <li><a href="list_material_request.php">List Request</a></li>
          <li><a href="request_material.php">Request Material</a></li>
          <li><a href="approval_request.php">Warehouse Approval</a></li>
          <li><a href="calculator_bom.php">Material Calculator</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-inbox"></i>
          <span>MarketPlace</span>
        </a>
        <ul class="nav submenu">
          <li><a href="list_order.php">List Order</a></li>
          <li><a href="list_antrian_packing.php">List Antrian Packing</a></li>
          <li><a href="list_packing.php">List Packing</a></li>
          <li><a href="report_sales.php">Sales Report</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="submenu-toggle">
          <i class="glyphicon glyphicon-th-large"></i>
          <span>Order Activity</span>
        </a>
        <ul class="nav submenu">
          <li><a href="picker-activity.php">Picker Activity</a> </li>
          <li><a href="packer-activity.php">Packer Activity</a> </li>
        </ul>
      </li>
      <li>
        <a href="list_setting.php">
          <i class="glyphicon glyphicon-cog"></i>
          <span>APP Setting</span>
        </a>
      </li>
  </div>
  <div class="page-content">
    <!-- Page content will be included here -->
  </div>
  <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');
      document.body.style.paddingLeft = sidebar.classList.contains('hidden') ? '0' : '250px';
    }
  </script>
</body>

</html>
<style>
  /* Reset styling for consistency */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }

  .form-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 10px;
  }

  .form-container form {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .form-container label {
    margin-right: 10px;
  }

  .form-container select,
  .form-container input[type="date"],
  .form-container button {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
  }

  .form-container button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
  }

  .form-container button:hover {
    background-color: #0056b3;
  }

  .chart-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 10px;
  }

  .chart {
    flex: 1 1 calc(50% - 20px);
    margin-bottom: 20px;
    min-width: 300px;
    box-sizing: border-box;
  }

  .google-visualization-background rect {
    fill: #f5f5f5 !important;
    /* Change background color to gray */
  }

  @media (max-width: 768px) {
    .form-container {
      flex-direction: column;
    }

    .form-container form {
      margin-bottom: 15px;
    }

    .chart-container {
      flex-direction: column;
    }

    .chart {
      flex: 1 1 100%;
      margin-bottom: 20px;
    }
  }
</style>



<!-- Form untuk memilih bulan -->
<div class="form-container">
  <form method="POST" action="/admin.php">
    <label for="month">Select Month:</label>
    <select name="month" id="month">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12" selected="selected">December</option>
    </select>
    <button type="submit">Submit</button>
  </form>

  <!-- Form untuk memilih tanggal -->
  <form method="POST" action="/admin.php">
    <label for="daily_date">Select Date:</label>
    <input type="date" id="daily_date" name="daily_date" value="2024-12-11">
    <button type="submit">Submit</button>
  </form>
</div>

<!-- Load Google Charts -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(drawCharts);

  function drawCharts() {
    // Create data table for top 5 products sales
    var dataSales = new google.visualization.DataTable();
    dataSales.addColumn('string', 'Product Name');
    dataSales.addColumn('number', 'Total Quantity');
    dataSales.addRows([
      ['Cloth Stain Remover 500ml', 12968.00],
      ['Pembersih Mesin Cuci 500gr', 7614.00],
      ['ANTI TIKUS 250 ML', 6545.00],
      ['Anti Kucing 250ml', 3469.00],
      ['Anti Semut 250ml', 3434.00],
      ['Anti Tikus Bacuya 250ml', 3412.00],
      ['Linen Cotton Spray 250ml', 2281.00],
      ['Pillow Mist 60ml', 1708.00],
      ['Kain Lap Kacamata', 1545.00],
      ['Anti Semut 100ml', 1472.00],
    ]);

    // Set options for top 5 products sales chart
    var optionsSales = {
      title: 'Top 5 Out Goods by Quantity for Jan',
      width: 650,
      height: 450,
      chartArea: {
        width: '70%',
        height: '70%'
      },
      colors: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099'], // Menentukan warna balok atau batang grafik
    };

    // Instantiate and draw chart for top 5 products sales
    var chartSales = new google.visualization.ColumnChart(document.getElementById('productSalesChart'));
    chartSales.draw(dataSales, optionsSales);

    // Create data table for top 5 incoming goods
    var dataIncoming = new google.visualization.DataTable();
    dataIncoming.addColumn('string', 'Product Name');
    dataIncoming.addColumn('number', 'Total Quantity');
    dataIncoming.addRows([
      ['Alkohol 96%', 4000000.00],
      ['Caustic Soda ', 3850000.00],
      ['Iso-Propyl Alkohol', 460000.00],
      ['PEG 40 (Hydrogenated Castor Oil)', 400000.00],
      ['Fragrance Super Lime', 400000.00],
      ['Bkc Murni', 300000.00],
      ['Essential Oil Eucalyptus', 225000.00],
      ['TWEEN 80', 200000.00],
      ['Gliserin', 155000.00],
      ['Silicon Oil', 150000.00],
    ]);

    // Set options for top 5 incoming goods chart
    var optionsIncoming = {
      title: 'Top 5 In Goods by Quantity for Jan',
      width: 650,
      height: 450,
      chartArea: {
        width: '70%',
        height: '70%'
      }
    };

    // Instantiate and draw chart for top 5 incoming goods
    var chartIncoming = new google.visualization.ColumnChart(document.getElementById('incomingGoodsChart'));
    chartIncoming.draw(dataIncoming, optionsIncoming);

    // Create data table for daily sales
    var dataDailySales = new google.visualization.DataTable();
    dataDailySales.addColumn('string', 'Product Name');
    dataDailySales.addColumn('number', 'Total Quantity');
    dataDailySales.addRows([
      ['Pembersih Mesin Cuci 500gr', 137.00],
      ['Cloth Stain Remover 500ml', 76.00],
      ['Anti Tikus Bacuya 250ml', 70.00],
      ['ANTI TIKUS 250 ML', 36.00],
      ['Anti Kucing 250ml', 28.00],
      ['Anti Cicak 100ml', 7.00],
      ['Anti Cicak 250ml', 7.00],
      ['Kain Lap Kacamata', 4.00],
      ['Linen Cotton Spray 250ml', 3.00],
      ['Anti Rayap 250ml', 2.00],
    ]);

    // Set options for daily sales chart
    var optionsDailySales = {
      title: 'Daily Out Goods by Quantity for Dec 11, 2024',
      width: 650,
      height: 450,
      chartArea: {
        width: '70%',
        height: '70%'
      }
    };

    // Instantiate and draw chart for daily sales
    var chartDailySales = new google.visualization.ColumnChart(document.getElementById('dailySalesChart'));
    chartDailySales.draw(dataDailySales, optionsDailySales);

    // Create data table for top 5 stock
    var dataTopStock = new google.visualization.DataTable();
    dataTopStock.addColumn('string', 'Product Name');
    dataTopStock.addColumn('number', 'Quantity');
    dataTopStock.addRows([
      ['Caustic Soda ', 3225000.00],
      ['SLES', 1154954.00],
      ['Cypermetrhin 300 EC', 840000.00],
      ['PEG 40 (Hydrogenated Castor Oil)', 649990.00],
      ['Bkc Murni', 564769.00],
      ['Fragrance Super Lime', 549874.00],
      ['Essential Oil Eucalyptus', 324900.00],
      ['CDEA', 304926.00],
      ['TWEEN 80', 249932.00],
      ['Gliserin', 204876.00],
    ]);

    // Set options for top 5 stock chart
    var optionsTopStock = {
      title: 'Top 10 Inventory Material',
      width: 650,
      height: 450,
      chartArea: {
        width: '70%',
        height: '70%'
      }
    };

    // Instantiate and draw chart for top 5 stock
    var chartTopStock = new google.visualization.ColumnChart(document.getElementById('topStockChart'));
    chartTopStock.draw(dataTopStock, optionsTopStock);

    // Create data table for top 5 products with categorie_id 7
    var dataTopProductsCat7 = new google.visualization.DataTable();
    dataTopProductsCat7.addColumn('string', 'Product Name');
    dataTopProductsCat7.addColumn('number', 'Quantity');
    dataTopProductsCat7.addRows([
      ['Kain Lap Kacamata', 5800.00],
      ['Anti Tungau 100ml', 4772.00],
      ['Kain Lap Kacamata Premium', 4670.00],
      ['Anti Sumbat Pipa 500gr', 4320.00],
      ['Toilet Spray 60ml', 3963.00],
      ['Anti Cicak 250ml', 3828.00],
      ['Anti Semut 100ml', 3805.00],
      ['Anti Cicak Bacuya 250ml', 3700.00],
      ['Anti Semut 250ml', 3521.00],
      ['Lens Cleaner 100ml', 3254.00],
    ]);

    // Set options for top 5 products with categorie_id 7 chart
    var optionsTopProductsCat7 = {
      title: 'Top 5 Products with Category ID 7',
      width: 650,
      height: 450,
      chartArea: {
        width: '70%',
        height: '70%'
      }
    };

    // Instantiate and draw chart for top 5 products with categorie_id 7
    var chartTopProductsCat7 = new google.visualization.ColumnChart(document.getElementById('topProductsCat7Chart'));
    chartTopProductsCat7.draw(dataTopProductsCat7, optionsTopProductsCat7);

    // Create data table for top 5 outbound goods
    var dataTopOutbound = new google.visualization.DataTable();
    dataTopOutbound.addColumn('string', 'Product Name');
    dataTopOutbound.addColumn('number', 'Total Quantity');
    dataTopOutbound.addRows([
      ['HC-MESINCUCI-500', 177],
      ['PC-TIKUS-250', 93],
      ['PC-TIKUS-250-BCY', 84],
      ['HC-CSR-500', 73],
      ['PC-SEMUT-250', 55],
    ]);

    // Set options for top 5 outbound goods chart
    var optionsTopOutbound = {
      title: 'Top 5 Outbound Goods by Quantity for Dec 11, 2024',
      width: 650,
      height: 450,
      chartArea: {
        width: '70%',
        height: '70%'
      }
    };

    // Instantiate and draw chart for top 5 outbound goods
    var chartTopOutbound = new google.visualization.ColumnChart(document.getElementById('topOutboundChart'));
    chartTopOutbound.draw(dataTopOutbound, optionsTopOutbound);
  }
</script>

<!-- Chart containers -->
<div class="chart-container">
  <div class="chart" id="productSalesChart"></div>
  <div class="chart" id="incomingGoodsChart"></div>
</div>

<div class="chart-container">
  <div class="chart" id="dailySalesChart"></div>
  <div class="chart" id="topStockChart"></div>
</div>

<div class="chart-container">
  <div class="chart" id="topProductsCat7Chart"></div>
  <div class="chart" id="topOutboundChart"></div>
</div>

</div>
</div>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="libs/js/functions.js"></script>
</body>

</html>