<!DOCTYPE html>
<html lang="en">
  <head>
    <title>SMT Event Tracker</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="robots" content="noindex" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-console" content="yes" />
    <!-- <link rel="manifest" href="/manifest.json"> -->

    <meta
      name="Keywords"
      content=""
    />
    <meta
      name="Description"
      content=""
    />
    <meta name="theme-color" content="#ef4224" />
    <!-- <link rel="icon" href="favicon.ico" type="image/x-icon" /> -->

    <link
      rel="stylesheet"
      href="css/code.jquery.com_ui_1.13.2_themes_base_jquery-ui.css"
    />
    <link
      href="vendor/fontawesome-free/css/all.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet" />
    <link href="css/responsive.dataTables.min.css" rel="stylesheet" />

    <link href="css/admin.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />

     <!-- Bootstrap core JavaScript-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/datatables/bootstrap-table.js"></script>

    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Page level plugin JavaScript-->
    <script src="vendor/datatables/jquery.dataTables.js"></script>
    <script src="vendor/datatables/dataTables.bootstrap4.js"></script>
    <script src="js/dataTables.responsive.min.js"></script>
    <script src="js/code.jquery.com_ui_1.13.2_jquery-ui.js"></script>

    <!-- <script src="vendor/chart/Chart.min.js"></script>-->
    <script src="vendor/js/admin.min.js"></script>

    <!-- Demo scripts for this page-->
    <!--script src="vendor/chart/chart-area.js"></script -->

    <!-- html2canvas library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <!--jsPDF  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <!--QRCode  -->
    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>



    <script src="js/webSocket.js"></script>
    <script>
       $(document).ready(async function() {
        const user = sessionStorage.getItem("user")
        if(!user){
          window.location.href = "login.html";
        }
       })
    </script>
    

    
  </head>

  <body id="page-top" class="themed-scrollbar">
    <?php 
    
    extract($_GET);
    
    $dashboardActive = "";
    $checkinActive = "";
    $checkoutActive = "";
    $incidentsActive = "";       
    if (isset($page)) {
      switch($page){
        case "dashboard":{
          $dashboardActive = "active";
          break;
        }
        case "checkin":{
          $checkinActive = "active";
          break;
        }
        case "checkout":{
          $checkoutActive = "active";
          break;
        }
        case "incidents":{
          $incidentsActive = "active";
          break;
        }
      }
    } 
    
    ?>
    <nav class="navbar navbar-expand navbar-dark bg-dark static-top">
      <a class="navbar-brand mr-1" href="index.html">
        <img src="img/Sedi_MT.jpg" alt="" height="30px" />
        <!--- <h5>QUICKLOC<span class="logo-text">8</span></h5> -->
      </a>

      <button
        class="btn btn-link btn-sm text-white order-1 order-sm-0"
        id="sidebarToggle"
        href="#"
      >
        <i class="fas fa-bars"></i>
      </button>

      <form
        class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0"
      ></form>

      <ul class="navbar-nav ml-auto ml-md-0">
        <li class="nav-item dropdown no-arrow">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="userDropdown"
            role="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i class="fas fa-user-circle fa-fw"></i>
          </a>
          <div
            class="dropdown-menu dropdown-menu-right"
            aria-labelledby="userDropdown"
          >
            <a class="dropdown-item" href="#">Settings</a>
            <a class="dropdown-item" href="#">Activity Log</a>
            <div class="dropdown-divider"></div>
            <a
              class="dropdown-item"
              href="#"
              data-toggle="modal"
              data-target="#logoutModal"
              >Logout</a
            >
          </div>
        </li>
      </ul>
      <div class="user">
        <span id="name"></span>
        <span id="surname"></span>
      </div>
    </nav>

    <div id="wrapper">
      <ul class="sidebar navbar-nav toggled">
        <li class="nav-item <?php  echo $dashboardActive; ?>">
          <a class="nav-link" href="?page=dashboard">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Dashboard</span>
          </a>
        </li>
        
        <li class="nav-item <?php  echo $checkinActive; ?>">
          <a class="nav-link" href="?page=checkin">
            <i class="fa-solid fa-truck-pickup"></i>
            <span>Check in</span></a
          >
        </li>
        <li class="nav-item <?php  echo $checkoutActive; ?>">
          <a class="nav-link" href="?page=checkout">
            <i class="fa-solid fa-truck-field"></i>
            <span>Check Out</span></a
          >
        </li>
        <li class="nav-item <?php  echo $incidentsActive; ?>">
          <a class="nav-link" href="?page=incidents">
            <i class="fa-solid fa-road-circle-xmark"></i>
            <span>Incidents</span></a
          >
        </li>
        
      </ul>

      <div id="content-wrapper">
        <div class="container-fluid">
          <!-- Breadcrumbs-->
          <!-- <ol class="breadcrumb">
            <li class="breadcrumb-item active">Clients</li>
            <li class="breadcrumb-item">
              <a href="#" data-toggle="modal" onclick="showSerialCheckDialog()"
                >Add New Client</a
              >
            </li>
            <li class="breadcrumb-item">
              <a href="#" data-toggle="modal" data-target="#messageModal"
                >Send SMS</a
              >
            </li>
          </ol> -->

          <div class="card mb-3 ">
            <div class="card-body">
              
              <?php

              extract($_GET);
            
              $thefile = "pages/";
              if (isset($page)) {
                $thefile .= "$page.php";
              } else {
                $thefile .= "home.php";
              }
            
              if (file_exists($thefile)) {
                include($thefile);
              } else {
                include("pages/invalid.php");
              }
            
              ?>
            </div>
          </div>
        </div>
        <!-- /.container-fluid -->

        <!-- Sticky Footer -->
        <footer class="sticky-footer">
          <div class="container my-auto">
            <div class="copyright text-center my-auto">
              <span
                >Copyright © 2025 |  All rights reserved</span
              >
            </div>
          </div>
        </footer>
      </div>
    </div>
    <!-- /#wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
      <i class="fas fa-angle-up"></i>
    </a>

    <!-- Logout Modal-->
    <div
      class="modal fade"
      id="logoutModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Logout</h5>
            <button
              class="close"
              type="button"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">Are you sure you want to logout?</div>
          <div class="modal-footer">
            <button
              class="btn btn-secondary"
              type="button"
              data-dismiss="modal"
            >
              Cancel
            </button>
            <a class="btn btn-primary" href="index.html">Confirm</a>
          </div>
        </div>
      </div>
    </div>

   

 
  </body>
</html>
