<?php
if (!isset($_SESSION['user_id']) || !isset($_SESSION['user_fname'])) {
  redirect("/login");
} else {
  $user_id = $_SESSION['user_id'];
  $user_fname = $_SESSION['user_fname'];
  $user_lname = $_SESSION['user_lname'];
  $user_role = $_SESSION['user_role'];
  $user_phone = $_SESSION['user_phone'];
}
?>
<!DOCTYPE html>
<html lang="mn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="" />
  <meta name="keyword" content="" />
  <meta name="author" content="theme_ocean" />
  <!--! The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags !-->
  <!--! BEGIN: Apps Title-->
  <title><?= $pageTitle ?></title>
  <link rel="shortcut icon" type="image/x-icon" href="<?= $favi ?>">
  <!--! END: Favicon-->
  <!--! BEGIN: Bootstrap CSS-->
  <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css" />
  <!--! END: Bootstrap CSS-->
  <!--! BEGIN: Vendors CSS-->
  <link rel="stylesheet" type="text/css" href="/assets/vendors/css/vendors.min.css" />
  <link rel="stylesheet" type="text/css" href="/assets/vendors/css/daterangepicker.min.css" />
  <!--! END: Vendors CSS-->
  <!--! BEGIN: Custom CSS-->
  <link rel="stylesheet" type="text/css" href="/assets/css/theme.min.css" />
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    .user-avtar {
      height: 40px;
      object-fit: cover;
    }

    .table>:not(caption)>*>* {
      padding: 0.3rem 0.8rem;
    }

    .active_row {
      background-color: #d1b2f7;
    }

    .editcell {
      background-color: #dddddd;
      padding: 5px 10px 5px 10px;
      border-radius: 10px;
    }

    .hovercell td:hover {
      background-color: azure !important;
    }

    /* HTML: <div class="loader"></div> */
    .loader {
      width: 50px;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 8px solid #e65451;
      border-right-color: #4352cf;
      animation: l2 1s infinite linear;
      margin: auto;
    }

    .loadText {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .cover {
      object-fit: cover;
    }

    @keyframes l2 {
      to {
        transform: rotate(1turn)
      }
    }

    .dt-buttons {
      display: flex;
      justify-content: flex-end
    }

    .dt-button {
      margin: 5px;
    }
  </style>