<!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: 100px;
      height: 90px;
      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: white;
    }

    [class*="sidebar-dark-"] .sidebar a {
      color: rgb(255, 255, 255);
    }

    .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;

        {
          {
          !-- border-radius: 10px;
          --
        }
      }
    }

    [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, #320850, #320850, #320850, #320850);
      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: #4B0F77;
      /* 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: #320850;
      color: #ffffff !important;
    }

    #commissionManagement .nav-treeview .nav-item:hover>.nav-link {
      background-color: #320850;
      color: #ffffff !important;
    }

    #movieManagementMenu .nav-treeview .nav-item:hover>.nav-link {
      background-color: #320850;
      color: #ffffff !important;
    }

    #userManagementMenu .nav-treeview .nav-item:hover>.nav-link {
      background-color: #320850;
      /* Dark green */
      color: #ffffff !important;
      /* White text */
    }

    #serviceManagementMenu .nav-treeview .nav-item:hover>.nav-link {
      background-color: #320850;
      /* Dark green */
      color: #ffffff !important;
      /* White text */
    }

    #transactionsManagementMenu .nav-treeview .nav-item:hover>.nav-link {
      background-color: #320850;
      /* Dark green */
      color: #ffffff !important;
      /* White text */
    }
  </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> <!-- Message will be set dynamically -->
      <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>



  <!-- Site wrapper -->
  <div class="wrapper">

    <nav class="main-header navbar navbar-expand navbar-light" style="background-color:#4B0F77;">
      <!-- Left navbar links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link humburger-menu" style="color: rgb(242, 235, 235) !important;" data-widget="pushmenu"
            href="#" role="button"><i class="fas fa-bars"></i></a>
        </li>
        {{!-- <li class="nav-item d-none d-sm-inline-block">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item d-none d-sm-inline-block">
          <a href="#" class="nav-link">Contact</a>
        </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>
    {{!-- Main Sidebar Container --}}
    <aside class="main-sidebar sidebar-dark-primary elevation-4"
      style="background-color: #4B0F77; border-right: 2px solid rgb(175, 180, 178);">
      <div class="d-flex justify-content-center">
        <a href="/admin/v1/dashboard">
          <img src="/admin/images/zipck.png" alt="Logo" class="sidebar-logo" height="90px" width="100px"
            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">
            <li class="nav-item">
              <a href="/admin/v1/dashboard" class="nav-link">
                <i class="nav-icon fa-solid fa-house"></i>
                <p>Dashboard</p>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/admin/v1/profile">
                <i class="nav-icon fa-solid fa-user"></i>
                <p>Profile</p>
              </a>
            </li>
            {{!-- <li class="nav-item">
              <a href="/admin/allbanners" class="nav-link">
                <i class="nav-icon fa-solid fa-rectangle-ad"></i>
                <p>Banners</p>
              </a>
            </li> --}}
            <li class="nav-item has-treeview" id="userManagementMenu">
              <a href="#" class="nav-link">
                {{!-- <i class="nav-icon fas fa-users-cog"></i> --}}
                <i class="nav-icon fas fa-user-shield"></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/alladmins" class="nav-link">
                    <i class="nav-icon fa-solid fa-user-tie"></i>
                    <p>Admins</p>
                  </a>
                </li> --}}

                <li class="nav-item">
                  <a href="/admin/v1/allusers" class="nav-link">
                    <i class="nav-icon fa-solid fa-users"></i>
                    <p>Users</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/v1/allvendors" class="nav-link">
                    {{!-- <i class="nav-icon fa-solid fa-users-gear"></i> --}}
                    <i class="nav-icon fas fa-store"></i>
                    <p>Communities</p>
                  </a>
                </li>
              </ul>
            </li>
            {{!-- <li class="nav-item has-treeview" id="movieManagementMenu">
              <a href="#" class="nav-link">
                <i class="nav-icon fas fa-th-large"></i>
                <p>
                  Category Management
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="/admin/allfoodcategories" class="nav-link">
                    <i class="nav-icon fas fa-hamburger"></i>
                    <p>Food</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/allecommercecategories" class="nav-link">
                    <i class="nav-icon fas fa-laptop"></i>
                    <p>E-Commerce</p>
                  </a>
                </li>
              </ul>
            </li> --}}
            <li class="nav-item">
                  <a href="/admin/v1/allgrocerycategories" class="nav-link">
                    <i class="nav-icon fas fa-shopping-basket"></i>
                    <p>Category</p>
                  </a>
                </li>
            <li class="nav-item">
              <a href="/admin/v1/allproducts" class="nav-link">
                <i class="nav-icon fas fa-box-open"></i>
                <p>Products</p>
              </a>
            </li>
            {{!-- <li class="nav-item">
              <a href="/admin/allCities" class="nav-link">
                <i class="nav-icon fas fa-box-open"></i>
                <p>Cities</p>
              </a>
            </li> --}}
            <li class="nav-item">
              <a href="/admin/v1/allcoupouns" class="nav-link">
                <i class="nav-icon fas fa-tags"></i>
                <p>Coupons</p>
              </a>
            </li>
            {{!-- <li class="nav-item">
              <a href="/admin/allorders" class="nav-link">
                <i class="nav-icon fas fa-clipboard-list"></i>
                <p>Orders</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="/admin/allorderstransactions" class="nav-link">
                <i class="nav-icon fas fa-receipt"></i>
                <p>Orders Transactions</p>
              </a>
            </li> --}}
            <li class="nav-item has-treeview" id="movieManagementMenu">
              <a href="#" class="nav-link">
                <i class="nav-icon fa-solid fa-cart-shopping"></i>
                <p>
                  Order Management
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="/admin/v1/allorders" class="nav-link">
                    <i class="nav-icon  fas fa-clipboard-list"></i>
                    <p>Orders</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/v1/allorderstransactions" class="nav-link">
                    <i class="nav-icon fas fa-receipt"></i>
                    <p>Orders Transactions</p>
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="/admin/v1/requested-products" class="nav-link">
                <i class="nav-icon fas fa-clipboard-list"></i>
                <p>Requested Products</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="/admin/v1/allrefundrequests" class="nav-link">
                <i class="nav-icon fas fa-money-bill-wave"></i>
                <p>Refund Requests</p>
              </a>
            </li>
            {{!-- <li class="nav-item has-treeview" id="commissionManagement">
              <a href="#" class="nav-link">
                <i class="nav-icon fas fa-percent"></i>
                <p>
                  Commissions
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="/admin/allcommissions/food" class="nav-link">
                    <i class="nav-icon fas fa-hamburger"></i>
                    <p>Food</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/allcommissions/grocery" class="nav-link">
                    <i class="nav-icon fas fa-shopping-basket"></i>
                    <p>Grocery</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/allcommissions/ecommerce" class="nav-link">
                    <i class="nav-icon fas fa-laptop"></i>
                    <p>E-Commerce</p>
                  </a>
                </li>
              </ul>
            </li> --}}
            {{!-- <li class="nav-item">
              <a href="/admin/allsettlements" class="nav-link">
                <i class="fa-solid fa-cash-register nav-icon "></i>
                <p>Vendor Settlements</p>
              </a>
            </li> --}}
            {{!-- <li class="nav-item">
              <a href="/admin/bulkupload" class="nav-link">
                <i class="nav-icon fas fa-upload"></i>
                <p>Bulk upload</p>
              </a>
            </li> --}}
            {{!-- <li class="nav-item">
              <a href="/admin/addnotifications" class="nav-link">
                <i class="nav-icon fa-solid fa-bell"></i>
                <p>Notifications</p>
              </a>
            </li> --}}
            <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/v1/settings" class="nav-link">
                    <i class="nav-icon fas fa-file-contract"></i>
                    <p>Policies</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/v1/support" class="nav-link">
                    <i class="nav-icon fas fa-headset"></i>
                    <p>Support</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="/admin/v1/fee" class="nav-link">
                    <i class="nav-icon fas fa-file-invoice-dollar"></i>
                    <p>Fee</p>
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="/auth/v1/logout" class="nav-link">
                <i class="nav-icon fas fa-sign-out-alt"></i>
                <p>Logout</p>
              </a>
            </li>
            <br>
          </ul>
        </nav>
        <!-- /.sidebar-menu -->
      </div>
      <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">