<?php
include "global.php";

$login = $webClass->userLoginCheck();
if (!$login) {
  header('Location: ' . WEB_URL . '/login');
}
?>
<!doctype html>
<html lang="en" data-bs-theme="dark">

<head>
  <!-- Meta Tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description"
    content="Interactive Media is the leading website development company in Pakistan, providing affordable web designing and development services.">
  <meta name="keywords" content="">
  <meta name="author" content="Interactive Media Pakistan">

  <!-- Page Title -->
  <title><?php if (!empty($pageTitle)) {
            echo $pageTitle;
          }
          echo $functions->ibms_setting('Site Name'); ?></title>

  <!-- Favicon -->
  <link rel="icon" href="<?php echo WEB_URL; ?>/webImages/favicon.ico" type="image/x-icon">

  <!-- Preconnect for Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

  <!-- Loader CSS and JS -->
  <link href="<?php echo WEB_URL; ?>/css/pace.min.css" rel="stylesheet">
  <script src="<?php echo WEB_URL; ?>/js/pace.min.js" defer></script>

  <!-- Core CSS -->
  <link href="<?php echo WEB_URL; ?>/css/bootstrap.min.css" rel="stylesheet">
  <link href="<?php echo WEB_URL; ?>/css/bootstrap-extended.css" rel="stylesheet">

  <!-- Plugin Styles -->
  <link href="<?php echo WEB_URL; ?>/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet">
  <link href="<?php echo WEB_URL; ?>/plugins/fullcalendar/css/main.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="<?php echo WEB_URL; ?>/plugins/metismenu/metisMenu.min.css">
  <link rel="stylesheet" type="text/css" href="<?php echo WEB_URL; ?>/plugins/metismenu/mm-vertical.css">
  <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="<?php echo WEB_URL; ?>/plugins/simplebar/css/simplebar.css">
  <link href="<?php echo WEB_URL; ?>/plugins/datatable/css/dataTables.bootstrap5.min.css" rel="stylesheet" />

  <!-- Select2 -->
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
    rel="stylesheet">

  <!-- Intl-Tel-Input -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js" defer></script>

  
  <!-- Custom Styles with Cache Busting -->
  <link href="<?php echo WEB_URL; ?>/sass/main.css?ver=<?php echo filemtime(__DIR__ . '/sass/main.css'); ?>" rel="stylesheet">
  <link href="<?php echo WEB_URL; ?>/sass/dark-theme.css?ver=<?php echo filemtime(__DIR__ . '/sass/dark-theme.css'); ?>" rel="stylesheet">
  <link href="<?php echo WEB_URL; ?>/sass/responsive.css?ver=<?php echo filemtime(__DIR__ . '/sass/responsive.css'); ?>" rel="stylesheet">

  <!-- jQuery -->
  <script src="<?php echo WEB_URL; ?>/js/jquery.min.js"></script>
</head>


<body>
  <div class="modal fade" id="addNoteModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header border-bottom-0 py-2 bg-grd-success">
          <h5 class="modal-title">Add Note</h5>
          <a href="javascript:;" class="primaery-menu-close" data-bs-dismiss="modal">
            <i class="material-icons-outlined">close</i>
          </a>
        </div>
        <div class="modal-body">
          <div class="form-body">
            <form class="row g-3" id="addNoteForm" method="post">
              <input type="hidden" id="noteTargetId">
              <input type="hidden" id="noteTargetType">
              <div class="col-md-12">
                <textarea id="noteText" class="form-control" rows="5" placeholder="Write your note here..."></textarea>
              </div>
              <div class="col-md-12">
                <textarea id="noteTextEmail" class="form-control" rows="5"
                  placeholder="Email (client will receive this)"></textarea>
              </div>
              <div class="col-md-12">
                <button type="submit" class="btn btn-grd-danger px-4">Submit</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="viewNotesModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-grd-success py-2">
          <h5 class="modal-title">Notes</h5>
          <a href="javascript:;" class="primaery-menu-close" data-bs-dismiss="modal">
            <i class="material-icons-outlined">close</i>
          </a>
        </div>
        <div class="modal-body">
          <div class="text-center">
            <div id="ticketDesc" class="p-4 text-white rounded"></div>
          </div>
          <div id="notesContent" class="p-2">
            <!-- Notes will be loaded here -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="createGroupModal" tabindex="-1">
    <div class="modal-dialog">
      <form id="createGroupForm" method="post">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Create Group</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label for="groupName" class="form-label">Group Name</label>
              <input type="text" class="form-control" id="groupName" name="groupName" required>
            </div>
            <div class="mb-3">
              <label for="groupMembers" class="form-label">Select Members</label>
              <select id="groupMembers" name="groupMembers[]" class="multiple-select-field"
                data-placeholder="Select Members" multiple required>
                <?php
                $users = $productClass->getStaffArray();
                foreach ($users as $u) {
                  echo "<option value='{$u['acc_id']}'>{$u['acc_name']}</option>";
                }
                ?>
              </select>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Create</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="modal fade" id="eventEditModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header border-bottom-0 py-2 bg-grd-success">
          <h5 class="modal-title">My Event Edit</h5>
          <a href="javascript:;" class="primaery-menu-close" data-bs-dismiss="modal">
            <i class="material-icons-outlined">close</i>
          </a>
        </div>
        <div class="modal-body">

        </div>
      </div>
    </div>
  </div>

  <div id="spinner-overlay">
    <button class="btn btn-dark" type="button" disabled>
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      Loading...
    </button>
  </div>
  <div id="alertMessage" class="alert alert-dark border-0 bg-dark alert-dismissible fade" role="alert">
    <div class="text-white" id="alertText"></div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>

  <!--start header-->
  <header class="top-header">
    <nav class="navbar navbar-expand align-items-center gap-4">
      <div class="btn-toggle">
        <a href="javascript:;"><i class="material-icons-outlined">menu</i></a>
      </div>
      <div class="search-bar flex-grow-1">
        <div class="position-relative">
          <input id="search" class="form-control rounded-5 px-5 search-control d-lg-block d-none" type="text"
            placeholder="Search">
          <span
            class="material-icons-outlined position-absolute d-lg-block d-none ms-3 translate-middle-y start-0 top-50">search</span>
          <span
            class="material-icons-outlined position-absolute me-3 translate-middle-y end-0 top-50 search-close">close</span>
          <div class="search-popup p-3">
            <div class="card rounded-4 overflow-hidden">
              <div class="card-header d-lg-none">
                <div class="position-relative">
                  <input class="form-control rounded-5 px-5 mobile-search-control" type="text" id="searchMobile"
                    placeholder="Search">
                  <span
                    class="material-icons-outlined position-absolute ms-3 translate-middle-y start-0 top-50">search</span>
                  <span
                    class="material-icons-outlined position-absolute me-3 translate-middle-y end-0 top-50 mobile-search-close">close</span>
                </div>
              </div>
              <div class="card-body search-content">

              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="navbar-nav gap-1 nav-right-links align-items-center">
        <li class="nav-item d-lg-none mobile-search-btn">
          <a class="nav-link" href="javascript:;"><i class="material-icons-outlined">search</i></a>
        </li>


        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle dropdown-toggle-nocaret position-relative" data-bs-auto-close="outside"
            data-bs-toggle="dropdown" href="javascript:;">
            <i class="material-icons-outlined">notifications</i>
            <span class="badge-notify" id="notification-count">0</span>
          </a>
          <div class="dropdown-menu dropdown-notify dropdown-menu-end shadow">
            <div class="px-3 py-1 d-flex align-items-center justify-content-between border-bottom">
              <h5 class="notiy-title mb-2">Notifications</h5>
            </div>
            <div class="notify-list" id="notification-list">
            </div>
          </div>
        </li>


        <li class="nav-item dropdown">
          <a href="javascrpt:;" class="dropdown-toggle dropdown-toggle-nocaret" data-bs-toggle="dropdown">
            <img src="<?php echo $productClass->getUserImage(); ?>" class="rounded-circle p-1 border" width="45"
              height="45" alt="photo">
          </a>
          <div class="dropdown-menu dropdown-user dropdown-menu-end shadow">
            <a class="dropdown-item  gap-2 py-2" href="javascript:;">
              <div class="text-center">
                <img src="<?php echo $productClass->getUserImage(); ?>" class="rounded-circle p-1 shadow mb-3"
                  width="90" height="90" alt="photo">
                <h5 class="user-name mb-0 fw-bold">
                  <?php echo $functions->webUserName($_SESSION["webUser"]["id"], 'acc_name'); ?>
                </h5>
              </div>
            </a>
            <hr class="dropdown-divider">
            <a class="dropdown-item d-flex align-items-center gap-2 py-2"
              href="useredit?id=<?php echo $functions->encode($_SESSION["webUser"]["id"]); ?>">
              <i class="material-icons-outlined">person_outline</i>Profile</a>
            <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="update_password">
              <i class="material-icons-outlined">lock_reset</i>Change Password</a>
            <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="<?php echo WEB_URL; ?>">
              <i class="material-icons-outlined">dashboard</i>Dashboard</a>
            <hr class="dropdown-divider">
            <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="logout"><i
                class="material-icons-outlined">power_settings_new</i>Logout</a>
          </div>
        </li>
      </ul>

    </nav>
  </header>
  <!--end top header-->
  <?php
  include_once 'sidebar.php';
  ?>

  <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">