<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>TicketDesk24</title>

  <!-- Font Awesome -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_green.css">
  <!-- Optional DataTables CSS -->
  <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet" />
  <link href="css/sb-admin.css" rel="stylesheet" />
  <link href="css/sb-style.css" rel="stylesheet" />

  <style>
  
/* Agar aap fixed nahi chahte aur footer content ke baad aaye to 'position: fixed' hata dein */
.spinner {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border: 6px solid #ccc; /* light gray background */
    border-top-color: #2d89ef; /* Bitrix24 blue color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  </style>
</head>

<body id="page-top">

<div id="wrapper">
  <!-- Sidebar -->
  <div class="sidebar" id="sidebar">
    <div class="logo-section">
      <span class="logo-text"><img src="./logo/TicketDesk Logo White.png" width="150px" height="40px" alt=""></span>
      <button class="dark-toggle" id="toggleDark" title="Toggle Dark Mode"><i class="fas fa-moon"></i></button>
      <span class="toggle-btn" id="toggleSidebar" title="Toggle Sidebar"><i class="fas fa-bars"></i></span>
    </div>

    <ul>
      <li class="nav-item active" title="Dashboard">
        <a class="nav-link" href="./dashboard.php">
          <i class="fas fa-fw fa-tachometer-alt" ></i>
          <span>Dashboard</span>
        </a>
      </li>
      <li class="nav-item active"title="Users">
        <a class="nav-link" href="./users.php">
          <i class="fa fa-fw fa-users"></i>
          <span>Users</span>
        </a>
      </li>
      <li class="nav-item active" title="Webhook">
        <a class="nav-link" href="./webhook.php">
          <i class="fa fa-fw fa-plug"></i>
          <span>Webhook</span>
        </a>
      </li>
      <li class="nav-item active" title="My Ticket">
        <a class="nav-link" href="./intrnal_ticket.php">
          <i class="fa fa-fw fa-ticket-alt"></i>
          <span>My Ticket</span>
        </a>
      </li>
      <li class="nav-item active" title="Settings">
        <a class="nav-link" href="./aplication-setting.php">
          <i class="fa fa-fw fa-cog"></i>
          <span>Settings</span>
        </a>
      </li>
    </ul>
  </div>
<!-- Header me loader div add karen -->
<div id="pageLoader" style="
  display:none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.8);
  z-index: 9999;
  text-align: center;
  padding-top: 40vh; /* vertically center */
">
  <div class="spinner"></div>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Sab nav-item ke andar a tags select karo
    const navLinks = document.querySelectorAll('.nav-item a');

    navLinks.forEach(function(link) {
      link.addEventListener('click', function(e) {
        // Agar link new tab me open hota hai ya external link hai, loader nahi chahiye
        if (link.target === '_blank' || link.hostname !== window.location.hostname) {
          return;
        }

        // Loader show karo
        const loader = document.getElementById('pageLoader');
        if (loader) loader.style.display = 'block';

        // Sab links disable karo pointer events
        navLinks.forEach(function(l) {
          l.style.pointerEvents = 'none';
        });
      });
    });
  });
  const sidebar = document.getElementById('sidebar');
  const toggleSidebarBtn = document.getElementById('toggleSidebar');
  const darkBtn = document.getElementById('toggleDark');

  toggleSidebarBtn.addEventListener('click', () => {
    sidebar.classList.toggle('collapsed');
  });

  darkBtn.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    sidebar.classList.toggle('dark');
     darkBtn.classList.toggle('active');
  });
  
</script>
