<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {{!--
  <link rel="icon" href="/public/admin/images/favicon.ico" type="image/x-icon"> --}}
  <link rel="icon" href="/admin/images/favicon.ico" type="image/x-icon">
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css"
    rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.13/build/css/intlTelInput.min.css">
  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.13/build/js/intlTelInput.min.js"></script>
  <!-- DataTables -->
  <link rel="stylesheet" href="/admin/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="/admin/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="/admin/css/buttons.bootstrap4.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
    integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <!-- Select2 -->
  <!--<link rel="stylesheet" href="/admin/plugins/select2/css/select2.min.css">-->
  <!--<link rel="stylesheet" href="/admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/admin/css/adminlte.min.css">
  <link rel="stylesheet" href="/admin/css/style.css">
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
    integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
    integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
    crossorigin="anonymous"></script>
  <script>
    $(document).ready(function () {
      // Get the current page URL
      var currentUrl = window.location.pathname;

      // Loop through each navigation link and check if it matches the current URL
      $('.nav-sidebar a').each(function () {
        var linkUrl = $(this).attr('href');
        if (currentUrl === linkUrl) {
          // Add the 'active' class to the matching link
          $(this).addClass('active');
        }
      });
    });

    $(document).ready(function () {
      // Example: Set Movie Theaters as active
      const currentPath = window.location.pathname;
      $('.nav-link').each(function () {
        if ($(this).attr('href') === currentPath) {
          $(this).addClass('active'); // Highlight the current menu item
          $(this).closest('.nav-item.has-treeview').addClass('menu-open'); // Expand the parent menu
        }
      });
    });

  </script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    tfoot {
      display: none;
    }

    .nav-sidebar .nav-item.active .nav-link {
      background-color: #ffffff;
      /* Change this to your desired active link background color */
      color: #000000;
      /* Change this to your desired active link text color */
    }

    .btn-primary {
      background-color: whitesmoke;
    }

    .btn-primary:hover {
      background-color: whitesmoke;
      color: whitesmoke;
    }

    .page-item.active .page-link {
      z-index: 3;
      color: black;
      background-color: whitesmoke;
      border-color: #967d2c;
    }

    .page-item .page-link {
      color: black;
    }

    .active-tab {
      background-color: whitesmoke;
      color: whitesmoke;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
      color: black;
      background-color: whitesmoke;
    }

    /*.nav-pills .nav-link:hover,
    .nav-pills .show>.nav-link:hover {
      color: #007bff !important;
    }*/

    .custom-map-control-button {
      padding: 14px;
    }

    .right {
      float: right !important
    }

    .sidebar-logo {
      width: 200px;
      height: 100px;
      transition: width 0.3s ease;
    }

    /* When sidebar is collapsed */
    body.sidebar-collapse .sidebar-logo {
      width: 80px !important;
      /* Smaller size for collapsed sidebar */
    }


    .sidebar-dark-primary {
      background-color: #000;
    }

    [class*="sidebar-dark-"] .sidebar a {
      color: #000;
    }

    .nav-item:hover {
      background-color: linear-gradient(to right, #ffffff, #e43603, #fa7199, #e85a19);
      color: white;
      border-bottom: 2px solid white;
    }

    .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
    .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
      background-color: rgb(255, 255, 255);
      color: rgb(0, 0, 0) !important;
    }

    [class*="sidebar-dark-"] .nav-sidebar>.nav-item.menu-open>.nav-link,
    [class*="sidebar-dark-"] .nav-sidebar>.nav-item:hover>.nav-link,
    [class*="sidebar-dark-"] .nav-sidebar>.nav-item>.nav-link:focus {
      background-image: linear-gradient(to right, #036648, #036648, #036648, #036648);
      color: #fff !important;
    }

    .sidebar {
      padding-top: 2px;
      padding-bottom: 30px;
    }

    .card-header {
      background-color: #ebf6f8;
    }

    .brand-image {
      border-bottom: 1px solid black;
    }

    .buttons-html5 {
      padding: 5px 8px !important;
    }

    .btn {
      margin-bottom: 3px;
    }

    .bg-info {
      background-color: black !important;
      color: white !important;
    }

    .bg-info:hover {
      background-color: white !important;
      color: black !important;
    }

    .btn-success {
      background-color: black;
      color: white;
    }

    .humburger-menu:hover {
      color: white !important;
    }

    .col-sm-6 h1 {
      color: white !important;
    }


    .loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.95);
      /* Light overlay */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      /* Ensures it's above everything */
    }

    .pulse-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .pulse-bubble {
      width: 15px;
      height: 15px;
      margin: 0 5px;
      background-color: #083c30;
      /* Blue color */
      border-radius: 50%;
      animation: pulse 1.2s ease-in-out infinite;
    }

    .pulse-bubble:nth-child(2) {
      animation-delay: 0.2s;
    }

    .pulse-bubble:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.5);
        opacity: 0.5;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }


    /* Additional styles for buttons, pagination, and sidebar */


    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateX(100%);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
        transform: translateX(0);
      }

      to {
        opacity: 0;
        transform: translateX(100%);
      }
    }

    .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      max-width: 300px;
    }

    .toast {
      display: flex;
      align-items: center;
      background-color: #323232;
      color: #ffffff;
      padding: 15px 20px;
      margin-bottom: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      animation: fadeIn 0.5s, fadeOut 0.5s 3s;
      transition: opacity 0.3s ease;
      opacity: 1;
    }

    .toast.success {
      background-color: #4CAF50;
    }

    .toast.error {
      background-color: #f44336;
    }

    .toast.warning {
      background-color: #ff9800;
    }

    .toast.info {
      background-color: #2196F3;
    }

    .toast .toast-icon {
      margin-right: 10px;
      font-size: 1.5em;
    }

    .toast .toast-message {
      flex-grow: 1;
      font-size: 1em;
    }

    .toast .close-btn {
      cursor: pointer;
      font-size: 1.2em;
      padding: 0 10px;
    }

    .toast.success {
      display: none;
    }

    .toast.error {
      display: none;
    }

    .toast.warning {
      display: none;
    }

    .toast.info {
      display: none;
    }


    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateX(100%);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
        transform: translateX(0);
      }

      to {
        opacity: 0;
        transform: translateX(100%);
      }
    }

    #movieManagementMenu .nav-treeview .nav-item:hover>.nav-link {
      background-color: #036648;
      color: #ffffff !important;
    }

    #userManagementMenu .nav-treeview .nav-item:hover>.nav-link {
      background-color: #036648;
      /* Dark green */
      color: #ffffff !important;
      /* White text */
    }

    #serviceManagementMenu .nav-treeview .nav-item:hover>.nav-link {
      background-color: #036648;
      /* Dark green */
      color: #ffffff !important;
      /* White text */
    }

    #transactionsManagementMenu .nav-treeview .nav-item:hover>.nav-link {
      background-color: #036648;
      /* Dark green */
      color: #ffffff !important;
      /* White text */
    }

    /* Fix for menu item text wrapping */
    .nav-sidebar .nav-link {
      display: flex;
      align-items: center;
      white-space: normal;
      word-wrap: break-word;
    }

    .nav-sidebar .nav-link i {
      flex-shrink: 0;
      min-width: 1.6rem;
      margin-right: 0.5rem;
    }

    .nav-sidebar .nav-link p {
      margin: 0;
      flex: 1;
      line-height: 1.3;
      word-break: break-word;
    }

    /* For submenu items */
    .nav-treeview .nav-link {
      display: flex;
      align-items: center;
      padding-left: 2rem;
      white-space: normal;
    }

    .nav-treeview .nav-link i {
      flex-shrink: 0;
      min-width: 1.6rem;
      margin-right: 0.5rem;
    }

    .nav-treeview .nav-link p {
      margin: 0;
      flex: 1;
      line-height: 1.3;
      word-break: break-word;
    }

    .dropdown-item:active,
    .dropdown-item:focus,
    .dropdown-item:hover {
      background-color: #f2f2f2 !important;
      color: #083c30 !important;
    }
  </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
  <div class="toast-container" id="toast-container">
    <div class="toast success">
      <div class="toast-icon"><i class="fas fa-check-circle"></i></div>
      <div class="toast-message"></div>
      <div class="close-btn" onclick="closeToast(this)">&times;</div>
    </div>
    <div class="toast error">
      <div class="toast-icon"><i class="fas fa-exclamation-circle"></i></div>
      <div class="toast-message"></div>
      <div class="close-btn" onclick="closeToast(this)">&times;</div>
    </div>
    <div class="toast warning">
      <div class="toast-icon"><i class="fas fa-exclamation-triangle"></i></div>
      <div class="toast-message"></div>
      <div class="close-btn" onclick="closeToast(this)">&times;</div>
    </div>
    <div class="toast info">
      <div class="toast-icon"><i class="fas fa-info-circle"></i></div>
      <div class="toast-message"></div>
      <div class="close-btn" onclick="closeToast(this)">&times;</div>
    </div>
  </div>

  <div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-light" style="background-color:white;">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link humburger-menu" style="color: black !important;" data-widget="pushmenu" href="#"
            role="button"><i class="fas fa-bars"></i></a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        {{!-- <li class="nav-item">
          <a href="/admin/allnotifications" class="nav-link">
            <i class="fa-solid fa-bell" style="color: #083c30; font-size: 1.2rem; position: relative;">
              <sup
                style="background-color: red; color:white; font-size: 9px; padding:6px; border-radius: 100%; position: absolute; top:-25%; left:50%;">{{notificationCount}}</sup>
            </i>
          </a>
        </li> --}}
        <li class="nav-item dropdown">
          <a class="nav-link" data-toggle="dropdown" href="#" style="color: #083c30;">
            <i class="fa-solid fa-user" style="font-size: 1.2rem;"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="/admin/profile" class="dropdown-item no-active-bg" style="color: #083c30; ">
              <i class="fas fa-user mr-2"></i> Profile Details
            </a>
            <div class="dropdown-divider"></div>
            <a href="/admin/logout" class="dropdown-item" style="color: #083c30;">
              <i class="fas fa-sign-out-alt mr-2"></i> Logout
            </a>
          </div>
        </li>
      </ul>
      <div id="loader" class="loader-wrapper">
        <div class="pulse-container">
          <div class="pulse-bubble"></div>
          <div class="pulse-bubble"></div>
          <div class="pulse-bubble"></div>
        </div>
      </div>
    </nav>
    <aside class="main-sidebar sidebar-dark-primary elevation-4"
      style="background-color: white; border-right: 2px solid rgb(175, 180, 178);">
      <div class="d-flex justify-content-center">
        <a href="/admin/dashboard">
          <img src="/admin/images/favicon.ico" alt="Logo" class="sidebar-logo" height="500px" width="250px"
            style="margin-top: 20px; border-radius: 8px;">
      </div>
      </a>
      <div class="sidebar">
        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

            <!-- Dashboard -->
            {{#if (or isAdmin (arrayContains permissions "ManageDashboard"))}}
            <li class="nav-item">
              <a href="/admin/dashboard" class="nav-link">
                <i class="nav-icon fa-solid fa-house"></i>
                <p>Dashboard</p>
              </a>
            </li>
            {{/if}}


            <li class="nav-item">
              <a href="/admin/homeBanners" class="nav-link">
                <i class="nav-icon fa-solid fa-panorama"></i>
                <p>Home Banners</p>
              </a>
            </li>
            {{#if (or isAdmin (arrayContains permissions "ManageAdminProfile"))}}
            <li class="nav-item">
              <a href="/admin/profile" class="nav-link">
                <i class="nav-icon fa-solid fa-user"></i>
                <p>Profile</p>
              </a>
            </li>
            {{/if}}
            <!-- User Management -->
            {{#if (or isAdmin (arrayContains permissions "ManageUsers"))}}
            <li class="nav-item has-treeview" id="movieManagement">
              <a href="#" class="nav-link">
                <i class="nav-icon fa-solid fa-users-cog"></i>
                <p>
                  User Management
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="/admin/allusers" class="nav-link">
                    <i class="nav-icon fa-solid fa-users"></i>
                    <p>Users</p>
                  </a>
                </li>

              </ul>
            </li>
            {{/if}}


            {{!-- <li class="nav-item">
              <a href="/admin/profil" class="nav-link">
                <i class="nav-icon fa-solid fa-truck"></i>
                <p>Delivery Partner Management</p>
              </a>
            </li> --}}
            <!-- Delivery Partner Management -->
            {{!-- <li class="nav-item has-treeview" id="menuDeliveryManagement">
              <a href="#" class="nav-link">
                <i class="nav-icon fa-solid fa-truck"></i>
                <p>
                  Delivery Partner Management
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="/admin/delivery-partners" class="nav-link">
                    <i class="nav-icon fa-solid fa-user-shield"></i>
                    <p>Delivery Partners</p>
                  </a>
                </li>
              </ul>
            </li> --}}

            {{#if (or isAdmin (arrayContains permissions "ManageBookings"))}}
            <li class="nav-item has-treeview" id="movieManagementMenu">
              <a href="#" class="nav-link">
                <i class="nav-icon fa-solid fa-calendar-check"></i>
                <p>
                  Bookings
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="/admin/instantbookings" class="nav-link">
                    <i class="nav-icon fa-solid fa-bolt"></i>
                    <p>Instant Bookings</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/scheduledbookings" class="nav-link">
                    <i class="nav-icon fa-solid fa-clock"></i>

                    <p>Scheduled Bookings</p>
                  </a>
                </li>
              </ul>
            </li>
            {{/if}}

            <li class="nav-item">
              <a href="/admin/allinsuredorders" class="nav-link">
                <i class="nav-icon fa-solid fa-box"></i>
                <p>Insured Orders</p>
              </a>
            </li>

            <!-- Price Estimation Settings -->
            {{#if (or isAdmin (arrayContains permissions "ManagePriceEstimation"))}}
            <li class="nav-item">
              <a href="/admin/priceestimation" class="nav-link">
                <i class="nav-icon fa-solid fa-money-bill-wave"></i>
                <p>Price Estimation</p>
              </a>
            </li>

            {{/if}}

            <!-- Notification Management -->
            {{#if (or isAdmin (arrayContains permissions "ManageNotifications"))}}
            <li class="nav-item">
              <a href="/admin/notifications" class="nav-link">
                <i class="nav-icon fa-solid fa-bell"></i>
                <p>Notifications</p>
              </a>
            </li>
            {{/if}}

            <!-- Settings -->
            {{!-- {{#if (or isAdmin (arrayContains permissions "ManagePolicies"))}}
            <li class="nav-item has-treeview" id="menuSettings">
              <a href="#" class="nav-link">
                <i class="nav-icon fa-solid fa-cog"></i>
                <p>
                  Settings
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="/admin/support" class="nav-link">
                    <i class="nav-icon fa-solid fa-users"></i>
                    <p>Support Ticket Management</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/settings" class="nav-link">
                    <i class="nav-icon fa-solid fa-users"></i>
                    <p>Refund & Cancellation Management</p>
                  </a>
                </li>
              </ul>
            </li>
            {{/if}} --}}
            {{#if (or isAdmin (arrayContains permissions "ManageSubAdmins"))}}
            <li class="nav-item">
              <a href="/admin/all-sub-admins" class="nav-link">
                <i class="nav-icon fa-solid fa-user-shield"></i>
                <p>Roles & Permissions</p>
              </a>
            </li>
            {{/if}}

            {{#if (or isAdmin (arrayContains permissions "ManagePolicies"))}}
            <li class="nav-item has-treeview" id="movieManagementMenu">
              <a href="#" class="nav-link">
                <i class="nav-icon fa-solid fa-cog"></i>
                <p>
                  Settings
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="/admin/settings" class="nav-link">
                    <i class="nav-icon fas fa-file-contract"></i>
                    <p>Refund & Cancellation Management</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/support" class="nav-link">
                    <i class="nav-icon fas fa-headset"></i>
                    <p>Support Ticket Management</p>
                  </a>
                </li>
              </ul>
            </li>
            {{/if}}
            <!-- Logout -->
            {{!-- <li class="nav-item">
              <a href="/admin/logout" class="nav-link">
                <i class="nav-icon fas fa-sign-out-alt"></i>
                <p>Logout</p>
              </a>
            </li> --}}


          </ul>
        </nav>
      </div>

    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">