<?php
session_start();
?>

<!doctype html>
<html lang="en" data-bs-theme="dark">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Parcel Pigeon</title>
  <link rel="manifest" href="/manifest.json">
  <link rel="icon" type="image/x-icon" href="./assets/parcel_pigeon_app_icon.png">

  <!-- bootstrap node module -->
  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
  <!-- bootstrap-icons node module -->
  <link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.min.css">

  <!-- font-awesome 6.2.0 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer">

  <!-- jquery -->
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" type="text/javascript"></script>

  <!-- https://datatables.net -->
  <!-- This  version is running sp-2.3.4 which for some reason has a bug causing "Loading Search Panes" text to be insertted and never removed after the panes finish loading
    to fix this I remade the cdn and hashed using SRI generator to maintain the 2.3.3 version until the issue is fixed. 
  -->
  <link href="./lib/datatables.net/css/datatables.min.css?v1.0.5" rel="stylesheet">
  <script defer src="./lib/datatables.net/js/datatables.min.js?v1.0.5"></script>

  <!-- https://www.npmjs.com/package/interactjs  used for resizable offcanvas-->
  <script defer src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

  <!-- html5-qrcode qr code reader -->
  <script defer src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

  <!-- qrcodejs for qr code generator -->
  <script defer src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>

  <!-- sigature pad -->
  <!-- <script defer src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script> -->
  <script defer src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.10/dist/signature_pad.umd.min.js"></script>

  <script defer type="module" src="js/script.js?v3.2.8.0"></script>
  <link href="css/styles.css?v2.0.0" rel="stylesheet" type"text/css">

</head>

<body>
  <div class="d-flex text-light d-none" id="wrapper">
    <!-- Sidebar-->
    <div class="border-end" id="sidebar-wrapper">
      <div id=sidebar-group>
        <div class="sidebar-heading border-bottom "><img style="height: 1.5rem;" src="/assets/parcel_pigeon_light.svg" /> Parcel Pigeon</div>
        <div class="list-group list-group-flush list-group-dark ">
          <a class="list-group-item list-group-item-action list-group-item-dark p-3" href="#/packages.php" data-page-target="packages.php"><i class="bi bi-box2-fill"></i>Packages</a>
          <a class="list-group-item list-group-item-action list-group-item-dark p-3" href="#/scanner.php" data-page-target="scanner.php"><i class="bi bi-qr-code-scan"></i>Scanner</a>
          <a class="list-group-item list-group-item-action list-group-item-dark p-3" href="#/settings.php" data-page-target="settings.php"><i class="bi bi-gear-fill"></i>Settings</a>
          <a class="list-group-item list-group-item-action list-group-item-dark p-3" href="#/profile.php" data-page-target="profile.php"><i class="bi bi-person-fill"></i>Profile</a>
          <a class="list-group-item list-group-item-action list-group-item-dark p-3 d-none" href="#/users.php" data-page-target="users.php"><i class="bi bi-people-fill"></i></i>Users</a>

          <a class="list-group-item list-group-item-action list-group-item-dark p-3" href="#/signout.php"><i class="bi bi-box-arrow-left"></i>Sign out</a>
        </div>
      </div>

    </div>
    <!-- Page content wrapper-->
    <div id="page-content-wrapper">

      <!-- Top navigation-->
      <nav class="navbar navbar-expand-lg border-bottom">
        <div class="container-fluid">
          <button class="btn btn-outline-primary" id="sidebarToggle"><i class="fa-solid fa-bars"></i></button>

        </div>
      </nav>


      <div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasRight" aria-labelledby="package-info-canvas-label">
        <div class="offcanvas-header">
          <h5 id="offcanvas-label">Package Info</h5>
          <button id="offcanvas-close-btn" type="button" class="btn-close btn-close-white" aria-label="Close"></button>

        </div>
        <div>

        </div>
        <div class="offcanvas-body" id="offcanvas-body">

          <div class="nav nav-tabs mb-3" id="canvas-nav-tabs" role="tablist">
            <!-- Populated programatically -->
          </div>


          <div id="offcanvas-data">
            <img class="img-fluid img-thumbnail" width="100%" src="./assets/test-package.jpg"></img>
            <table class="table">
            </table>
          </div>

        </div>
      </div>


      <!-- Page content-->
      <div>
        <div id="page-content">


        </div>
      </div>


      <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
        <p class="col-md-4 ms-3 text-body-secondary">© 2025 Parcel Pigeon, Inc. <br>Powered by Novus Insight</p>
      </footer>
    </div>
  </div>
</body>

</html>