<!DOCTYPE html>
@php
use Brian2694\Toastr\Facades\Toastr;
@endphp
<html lang="en">

<head>
  <!-- 
    Proprietary Software © 2026 AhsanHabib
    WhatsApp: +8801907738499
    All Rights Reserved. Unauthorized Copying is Strictly Prohibited.
  -->
  <meta charset="utf-8" />

  <title>@yield('title') - {{$generalsetting->name}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- App favicon -->
  <link rel="icon" type="image/png" href="{{asset('public/apleefixllogo.jpeg')}}?v=1" />
  <link rel="shortcut icon" type="image/x-icon" href="{{asset('public/apleefixllogo.jpeg')}}?v=1" />
  <!-- To change favicon: Place your logo in the 'public' folder and replace 'public/logo2.png' above with your file name. -->

  <!-- Bootstrap css -->
  <link href="{{asset('public/backEnd/')}}/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <!-- App css -->
  <link href="{{asset('public/backEnd/')}}/assets/css/app.min.css" rel="stylesheet" type="text/css" />
  <!-- icons -->
  <link href="{{asset('public/backEnd/')}}/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
  <!-- toastr css -->
  <link rel="stylesheet" href="{{asset('public/backEnd/')}}/assets/css/toastr.min.css" />
  <!-- custom css -->
  <link href="{{asset('public/backEnd/')}}/assets/css/custom.css" rel="stylesheet" type="text/css" />
  <!-- Head js -->
  @yield('css')
  <script src="{{asset('public/backEnd/')}}/assets/js/head.js"></script>

  <!-- 2026 Modern Admin Styling -->
  <style>
  :root {
    /* Premium Custom Palette */
    --color-brand-left: #4A2390;
    --color-brand-main: #54269A;
    --color-brand-right: #6B30B5;
    --color-brand-glow: #B9B3D9;

    --primary-gradient: linear-gradient(135deg, var(--color-brand-left) 0%, var(--color-brand-main) 50%, var(--color-brand-right) 100%);

    /* Premium Glassmorphism Defaults */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.4);
    --shadow-3d: 0 8px 32px 0 rgba(74, 35, 144, 0.05);
    --hover-shadow-3d: 0 12px 40px 0 rgba(107, 48, 181, 0.15);
    --blur-amount: blur(16px);
  }

  body[data-theme="light"] {
    /* Soft, luxurious gradient background for light mode to make glass pop */
    background: linear-gradient(135deg, #fdfbfb 0%, #f4f1f9 100%);
    background-attachment: fixed;
  }

  body[data-theme="dark"] {
    /* Luxurious dark theme tailored to the purple palette */
    --glass-bg: rgba(26, 15, 38, 0.65);
    --glass-border: rgba(185, 179, 217, 0.15);
    --shadow-3d: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #0f0814 0%, #1a0f26 100%);
    background-attachment: fixed;
    color: var(--color-brand-glow);
  }

  body[data-theme="dark"] .text-muted {
    color: rgba(185, 179, 217, 0.6) !important;
  }

  /* Ultra Premium Glassmorphism Topbar */
  .navbar-custom {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--blur-amount);
    -webkit-backdrop-filter: var(--blur-amount);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 25px rgba(107, 48, 181, 0.08);
  }

  /* Ultra Premium Glassmorphism Sidebar */
  .left-side-menu {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--blur-amount);
    -webkit-backdrop-filter: var(--blur-amount);
    border-right: 1px solid var(--glass-border);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.03);
  }

  /* Premium 3D Animated Cards */
  .card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--blur-amount);
    -webkit-backdrop-filter: var(--blur-amount);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    /* More rounded, premium feel */
    box-shadow: var(--shadow-3d);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .card:hover {
    transform: translateY(-5px) scale(1.005);
    box-shadow: var(--hover-shadow-3d);
  }

  /* Stylish Buttons */
  .btn-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(118, 75, 162, 0.4);
  }

  /* Tables */
  .table {
    border-collapse: separate;
    border-spacing: 0 8px;
  }

  .table tr {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .table tbody tr {
    background: var(--glass-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    border-radius: 8px;
  }

  .table tbody tr:hover {
    transform: scale(1.01);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    z-index: 10;
    position: relative;
  }

  .table td,
  .table th {
    border-top: none !important;
    border-bottom: none !important;
    vertical-align: middle;
  }

  /* =========== DEVELOPER CREDIT STYLING =========== */
  .developer-credit-link {
    color: var(--color-brand-main) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
    position: relative;
    display: inline-block;
  }

  .developer-credit-link:hover {
    color: var(--color-brand-right) !important;
    transform: translateY(-1px);
    text-shadow: 0 0 8px rgba(107, 48, 181, 0.3);
  }

  .table td:first-child,
  .table th:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }

  .table td:last-child,
  .table th:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  /* Sidebar Links Animation */
  #sidebar-menu>ul>li>a {
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 0 10px;
  }

  #sidebar-menu>ul>li>a:hover {
    background: rgba(118, 75, 162, 0.08);
    transform: translateX(4px);
  }

  /* Badges */
  .badge {
    border-radius: 20px;
    padding: 0.5em 0.8em;
  }

  /* Input Focus */
  .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    border-color: #667eea;
  }

  /* Developer Credit */
  .developer-credit a {
    color: #3283f6;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  .developer-credit a:hover {
    color: #1a64d1;
    text-decoration: underline;
  }

  /* ==========================================================================
     PREMIUM SIDEBAR TOGGLE STYLING (3-DOT / HAMBURGER)
     ========================================================================== */
  .button-menu-mobile {
    background: var(--primary-gradient) !important;
    color: white !important;
    border-radius: 12px !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 14px !important;
    margin-left: 15px !important;
    box-shadow: 0 4px 15px rgba(74, 35, 144, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    position: relative !important;
    z-index: 1002 !important;
    overflow: visible !important;
  }

  .button-menu-mobile i {
    font-size: 24px !important;
    color: #ffffff !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: all 0.3s ease !important;
  }

  .button-menu-mobile:hover {
    transform: rotate(180deg) scale(1.15);
    background: linear-gradient(135deg, #6B30B5 0%, #4A2390 100%) !important;
    box-shadow: 0 0 25px rgba(107, 48, 181, 0.8), inset 0 0 10px rgba(255, 215, 0, 0.4) !important;
  }

  .button-menu-mobile:hover i {
    color: #FFD700 !important; /* Gold on hover */
    transform: scale(1.1);
  }

  /* Pulse Ripple Effect for Visibility */
  .button-menu-mobile::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: rgba(255, 215, 0, 0.4);
    opacity: 0;
    z-index: -1;
    animation: menu-ripple 2.5s infinite;
  }

  @keyframes menu-ripple {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2.2); opacity: 0; }
  }

  /* Styling for secondary navbar toggle (lines) */
  .navbar-toggle .lines span {
    background-color: var(--color-brand-main) !important;
    height: 3px !important;
    border-radius: 3px !important;
  }

  /* ==========================================================================
     PREMIUM "VISIT WEBSITE" BUTTON STYLING
     ========================================================================== */
  .premium-visit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    padding: 10px 22px !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    margin-top: 13px !important;
    margin-left: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 6px 20px rgba(74, 35, 144, 0.4), 
                inset 0 0 12px rgba(255, 255, 255, 0.1) !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    z-index: 1 !important;
  }

  .premium-visit-btn .btn-content {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .premium-visit-btn .visit-icon {
    width: 19px !important;
    height: 19px !important;
    stroke-width: 2.5px !important;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .premium-visit-btn:hover {
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow: 0 12px 30px rgba(107, 48, 181, 0.6), 
                inset 0 0 15px rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(135deg, #6B30B5 0%, #4A2390 100%) !important;
  }

  .premium-visit-btn:hover .visit-icon {
    transform: rotate(360deg) scale(1.2) !important;
    color: #FFD700 !important; /* Gold flash */
  }

  .premium-visit-btn:hover .btn-text {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
  }

  /* Animated Glare Effect */
  .premium-visit-btn .btn-glare {
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    ) !important;
    transition: none !important;
    z-index: 1 !important;
  }

  .premium-visit-btn:hover .btn-glare {
    left: 150% !important;
    transition: all 1.2s cubic-bezier(0.42, 0, 0.58, 1) !important;
  }

  /* Subtle Pulse for Premium Feel */
  @keyframes btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(107, 48, 181, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(107, 48, 181, 0); }
    100% { box-shadow: 0 0 0 0 rgba(107, 48, 181, 0); }
  }

  .premium-visit-btn {
    animation: btn-pulse 3s infinite !important;
  }

  /* Premium Notification Icon Styling */
  .notification-list .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 70px !important;
    padding: 0 12px !important;
  }

  .notification-list .fe-bell {
    font-size: 22px !important;
    color: var(--color-brand-main) !important;
    background: rgba(84, 38, 154, 0.08) !important;
    padding: 10px !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(84, 38, 154, 0.15) !important;
    box-shadow: 0 2px 8px rgba(84, 38, 154, 0.05) !important;
  }

  body[data-theme="dark"] .notification-list .fe-bell {
    color: var(--color-brand-glow) !important;
    background: rgba(185, 179, 217, 0.15) !important;
    border-color: rgba(185, 179, 217, 0.25) !important;
  }

  .notification-list:hover .fe-bell {
    color: #ffffff !important;
    background: var(--primary-gradient) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(84, 38, 154, 0.3) !important;
    border-color: transparent !important;
  }

  /* Pulse animation on hover for notification */
  @keyframes bell-ring {
    0% { transform: translateY(-2px) rotate(0deg); }
    15% { transform: translateY(-2px) rotate(15deg); }
    30% { transform: translateY(-2px) rotate(-15deg); }
    45% { transform: translateY(-2px) rotate(10deg); }
    60% { transform: translateY(-2px) rotate(-10deg); }
    75% { transform: translateY(-2px) rotate(4deg); }
    100% { transform: translateY(-2px) rotate(0deg); }
  }

  .notification-list:hover .fe-bell {
    animation: bell-ring 0.6s ease-in-out both !important;
  }

  /* Styling for the Notification Badge to align perfectly with the new styled icon */
  .notification-list .noti-icon-badge {
    top: 14px !important;
    right: 6px !important;
    border: 2px solid var(--glass-bg) !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;
    font-weight: 800 !important;
  }

  /* ==========================================================================
     GLOBAL MOBILE RESPONSIVENESS OVERRIDES
     ========================================================================== */
  @media (max-width: 991.98px) {
    /* Prevent general horizontal overflow */
    html, body {
      overflow-x: hidden !important;
      max-width: 100% !important;
    }
    #wrapper {
      overflow-x: hidden !important;
      max-width: 100% !important;
    }
    .content-page {
      margin-left: 0 !important;
      padding: 70px 10px 60px 10px !important;
      overflow-x: hidden !important;
      max-width: 100% !important;
    }
    /* Auto-responsive table containers on mobile */
    .table-responsive {
      display: block !important;
      width: 100% !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      border: 0 !important;
      margin-bottom: 15px !important;
    }
    .table-responsive table {
      width: 100% !important;
      min-width: 700px !important;
    }
    .table td, .table th {
      white-space: nowrap !important;
      vertical-align: middle !important;
    }
    /* Card adjustments on mobile */
    .card {
      border-radius: 12px !important;
      margin-bottom: 15px !important;
    }
    .card-body {
      padding: 12px !important;
    }
    /* Breadcrumb / Page Title Box stacking */
    .page-title-box {
      display: block !important;
      height: auto !important;
      min-height: auto !important;
      padding: 15px 0 !important;
      margin-bottom: 10px !important;
      position: relative !important;
    }
    .page-title-box .page-title {
      float: none !important;
      display: block !important;
      line-height: normal !important;
      font-size: 1.3rem !important;
      margin: 0 0 10px 0 !important;
      width: 100% !important;
    }
    .page-title-box .page-title-right {
      position: static !important;
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      width: 100% !important;
      float: none !important;
      margin: 0 !important;
    }
    .page-title-box .page-title-right a, 
    .page-title-box .page-title-right button,
    .page-title-box .page-title-right div,
    .page-title-box .page-title-right form {
      flex: 1 1 auto !important;
      min-width: 110px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      margin: 0 !important;
    }
    /* Form formatting on mobile */
    form.row > [class*="col-"] {
      margin-bottom: 12px !important;
    }
    /* compact button items & custom search form */
    .action2-btn {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      margin-bottom: 15px !important;
      padding: 0 !important;
    }
    .action2-btn li {
      display: inline-block !important;
      margin: 0 !important;
      list-style: none !important;
    }
    .action2-btn a, .action2-btn button, .button-list a, .button-list button {
      padding: 5px 10px !important;
      font-size: 0.8rem !important;
    }
    form.custom_form {
      width: 100% !important;
      margin-top: 5px !important;
      margin-bottom: 15px !important;
    }
    form.custom_form .form-group {
      display: flex !important;
      gap: 8px !important;
      width: 100% !important;
    }
    form.custom_form input {
      flex: 1 !important;
      width: auto !important;
      margin: 0 !important;
    }
    form.custom_form button {
      flex-shrink: 0 !important;
      margin: 0 !important;
    }
    /* Select2 full width responsiveness */
    .select2-container {
      width: 100% !important;
    }
    /* Header layout optimization for tablets/mobile */
    .logo-box {
      width: 140px !important;
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      height: 70px !important;
    }
    .logo-box img {
      max-width: 100% !important;
      height: 35px !important;
      margin-top: 17px !important;
    }
    .logo-box .logo-lg img, .logo-box .logo-sm img {
      height: 35px !important;
    }
    .button-menu-mobile {
      position: absolute !important;
      left: 145px !important;
      margin-left: 0 !important;
      margin-top: 14px !important;
      z-index: 1003 !important;
    }
  }

  @media (max-width: 575.98px) {
    /* Header optimization for tiny devices */
    .logo-box {
      width: 110px !important;
      padding-left: 5px !important;
    }
    .logo-box img {
      height: 30px !important;
      margin-top: 20px !important;
    }
    .logo-box .logo-lg img, .logo-box .logo-sm img {
      height: 30px !important;
    }
    .navbar-custom {
      padding: 0 5px !important;
    }
    .pro-user-name {
      display: none !important; /* Hide admin username next to profile pic */
    }
    .button-menu-mobile {
      left: 115px !important;
      margin-top: 17px !important;
      width: 36px !important;
      height: 36px !important;
    }
    .button-menu-mobile i {
      font-size: 20px !important;
    }
    /* Ensure toastr or alerts don't clip */
    .toast {
      max-width: 90vw !important;
    }
  }
  </style>
</head>

<!-- body start -->

<body data-layout-mode="default" data-theme="light" data-layout-width="fluid" data-topbar-color="dark"
  data-menu-position="fixed" data-leftbar-color="light" data-leftbar-size="default" data-sidebar-user="false">
  <!-- Begin page -->
  <div id="wrapper">
    <!-- Topbar Start -->
    <div class="navbar-custom">
      <div class="container-fluid">
        <ul class="list-unstyled topnav-menu float-end mb-0">
          <li class="dropdown d-inline-block d-lg-none">
            <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#"
              role="button" aria-haspopup="false" aria-expanded="false">
              <i class="fe-search noti-icon"></i>
            </a>
            <div class="dropdown-menu dropdown-lg dropdown-menu-end p-0">
              <form class="p-3">
                <input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username" />
              </form>
            </div>
          </li>

          <li class="dropdown d-none d-lg-inline-block">
            <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-toggle="fullscreen" href="#">
              <i class="fe-maximize noti-icon"></i>
            </a>
          </li>

          <li class="dropdown notification-list topbar-dropdown">
            <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#"
              role="button" aria-haspopup="false" aria-expanded="false">
              <i class="fe-bell noti-icon"></i>
              <span class="badge bg-danger rounded-circle noti-icon-badge">{{$neworder}}</span>
            </a>
            <div class="dropdown-menu dropdown-menu-end dropdown-lg">
              <!-- item-->
              <div class="dropdown-item noti-title">
                <h5 class="m-0">
                  <span class="float-end">
                    <a href="{{route('admin.orders', ['slug' => 'pending'])}}" class="text-dark">
                      <small>View All</small>
                    </a>
                  </span>
                  Orders
                </h5>
              </div>

              <div class="noti-scroll" data-simplebar>
                @foreach($pendingorder as $porder)
                <!-- item-->
                <a href="{{route('admin.orders', ['slug' => 'pending'])}}" class="dropdown-item notify-item active">
                  <div class="notify-icon">
                    <img src="{{asset($porder->customer ? $porder->customer->image : '')}}"
                      class="img-fluid rounded-circle" alt="" />
                  </div>
                  <p class="notify-details">{{$porder->customer ? $porder->customer->name : ''}}</p>
                  <p class="text-muted mb-0 user-msg">
                    <small>Invoice : {{$porder->invoice_id}}</small>
                  </p>
                </a>
                @endforeach

                <!-- item-->
              </div>

              <!-- All-->
              <a href="{{route('admin.orders', ['slug' => 'pending'])}}"
                class="dropdown-item text-center text-primary notify-item notify-all">
                View all
                <i class="fe-arrow-right"></i>
              </a>
            </div>
          </li>

          <li class="dropdown notification-list topbar-dropdown">
            <a class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light" data-bs-toggle="dropdown"
              href="#" role="button" aria-haspopup="false" aria-expanded="false">
              <img src="{{asset(Auth::user()->image)}}" alt="user-image" class="rounded-circle" />
              <span class="pro-user-name ms-1"> {{Auth::user()->name}} <i class="mdi mdi-chevron-down"></i> </span>
            </a>
            <div class="dropdown-menu dropdown-menu-end profile-dropdown">
              <!-- item-->
              <div class="dropdown-header noti-title">
                <h6 class="text-overflow m-0">Welcome !</h6>
              </div>

              <!-- item-->
              <a href="{{route('dashboard')}}" class="dropdown-item notify-item">
                <i class="fe-user"></i>
                <span>Dashboard</span>
              </a>

              <!-- item-->
              <a href="{{route('change_password')}}" class="dropdown-item notify-item">
                <i class="fe-settings"></i>
                <span>Change Password</span>
              </a>

              <!-- item-->
              <a href="{{route('locked')}}" class="dropdown-item notify-item">
                <i class="fe-lock"></i>
                <span>Lock Screen</span>
              </a>

              <div class="dropdown-divider"></div>

              <!-- item-->
              <a href="{{ route('logout') }}" onclick="event.preventDefault();
                  document.getElementById('logout-form').submit();" class="dropdown-item notify-item">
                <i class="fe-log-out me-1"></i>
                <span>Logout</span>
              </a>
              <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                @csrf
              </form>
            </div>
          </li>

          <!--<li class="dropdown notification-list">-->
          <!--    <a href="javascript:void(0);" class="nav-link right-bar-toggle waves-effect waves-light">-->
          <!--        <i class="fe-settings noti-icon"></i>-->
          <!--    </a>-->
          <!--</li>-->
        </ul>

        <!-- LOGO -->
        <div class="logo-box">
          <a href="{{url('admin/dashboard')}}" class="logo logo-dark text-center">
            <span class="logo-sm">
              <img src="{{asset($generalsetting->dark_logo)}}" alt="" height="50" />
            </span>
            <span class="logo-lg">
              <img src="{{asset($generalsetting->dark_logo)}}" alt="" height="50" />
            </span>
          </a>

          <a href="{{url('admin/dashboard')}}" class="logo logo-light text-center">
            <span class="logo-sm">
              <img src="{{asset($generalsetting->white_logo)}}" alt="" height="50" />
            </span>
            <span class="logo-lg">
              <img src="{{asset($generalsetting->white_logo)}}" alt="" height="50" />
            </span>
          </a>
        </div>

        <ul class="list-unstyled topnav-menu topnav-menu-left m-0">
          <li>
            <button class="button-menu-mobile waves-effect waves-light">
              <i class="fe-more-vertical"></i>
            </button>
          </li>

          <li>
            <!-- Mobile menu toggle (Horizontal Layout)-->
            <a class="navbar-toggle nav-link" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content">
              <div class="lines">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </a>
            <!-- End mobile menu toggle-->
          </li>

          <li class="dropdown d-none d-xl-block">
            <a href="{{route('home')}}" target="_blank" class="premium-visit-btn">
              <span class="btn-content">
                <i data-feather="globe" class="visit-icon"></i>
                <span class="btn-text">Visit Website</span>
              </span>
              <span class="btn-glare"></span>
            </a>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
    </div>
    <!-- end Topbar -->

    <!-- ========== Left Sidebar Start ========== -->
    <div class="left-side-menu">
      <div class="h-100" data-simplebar>
        <!-- User box -->
        <div class="user-box text-center">
          <img src="{{asset('public/backEnd/')}}/assets/images/users/user-1.jpg" alt="user-img" title="Mat Helme"
            class="rounded-circle avatar-md" />
          <div class="dropdown">
            <a href="javascript: void(0);" class="text-dark dropdown-toggle h5 mt-2 mb-1 d-block"
              data-bs-toggle="dropdown">{{Auth::user()->name}}</a>
            <div class="dropdown-menu user-pro-dropdown">
              <!-- item-->
              <a href="javascript:void(0);" class="dropdown-item notify-item">
                <i class="fe-user me-1"></i>
                <span>My Account</span>
              </a>

              <!-- item-->
              <a href="javascript:void(0);" class="dropdown-item notify-item">
                <i class="fe-settings me-1"></i>
                <span>Settings</span>
              </a>

              <!-- item-->
              <a href="javascript:void(0);" class="dropdown-item notify-item">
                <i class="fe-lock me-1"></i>
                <span>Lock Screen</span>
              </a>

              <!-- item-->
              <a href="{{ route('logout') }}" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();"
                class="dropdown-item notify-item">
                <i class="fe-log-out me-1"></i>
                <span>Logout</span>
              </a>
              <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                @csrf
              </form>
            </div>
          </div>
          <p class="text-muted">Admin Head</p>
        </div>

        <!--- Sidemenu -->
        <div id="sidebar-menu">
          <ul id="side-menu">
            <li>
              <a href="{{url('admin/dashboard')}}">
                <i data-feather="airplay"></i>
                <span> Dashboard </span>
              </a>
            </li>

            <li>
              <a href="{{route('admin.pos.index')}}">
                <i data-feather="monitor"></i>
                <span> POS (Walk-in) </span>
              </a>
            </li>

            <li>
              <a href="#sidebar-orders" data-bs-toggle="collapse">
                <i data-feather="shopping-cart"></i>
                <span> Orders </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebar-orders">
                <ul class="nav-second-level">
                  <li>
                    <a href="{{route('admin.orders', ['slug' => 'all'])}}"><i data-feather="file-plus"></i> All
                      Order</a>
                  </li>
                  @foreach($orderstatus as $value)
                  <li>
                    <a href="{{route('admin.orders', ['slug' => $value->slug])}}"><i
                        data-feather="file-plus"></i>{{$value->name}}</a>
                  </li>
                  @endforeach
                </ul>
              </div>
            </li>
            <!-- nav items -->
            <li>
              <a href="#siebar-product" data-bs-toggle="collapse">
                <i data-feather="database"></i>
                <span> Products </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="siebar-product">
                <ul class="nav-second-level">
                  <li>
                    <a href="{{route('products.index')}}"><i data-feather="file-plus"></i> Product Manage</a>
                  </li>
                  <li>
                    <a href="{{route('categories.index')}}"><i data-feather="file-plus"></i> Categories</a>
                  </li>
                  <li>
                    <a href="{{route('subcategories.index')}}"><i data-feather="file-plus"></i> Subcategories</a>
                  </li>
                  <li>
                    <a href="{{route('childcategories.index')}}"><i data-feather="file-plus"></i> Childcategories</a>
                  </li>
                  <li>
                    <a href="{{route('brands.index')}}"><i data-feather="file-plus"></i> Brands</a>
                  </li>
                  <li>
                    <a href="{{route('colors.index')}}"><i data-feather="file-plus"></i> Colors</a>
                  </li>
                  <li>
                    <a href="{{route('sizes.index')}}"><i data-feather="file-plus"></i> Sizes</a>
                  </li>

                  <li>
                    <a href="{{route('products.price_edit')}}"><i data-feather="file-plus"></i> Price Edit</a>
                  </li>

                </ul>
              </div>
            </li>
            <!-- nav items end -->
            @php
            $pending_reviews = \App\Models\Review::where('status', 'pending')->count();
            @endphp
            <li>
              <a href="#sidebar-product-review" data-bs-toggle="collapse">
                <i data-feather="star"></i>
                <span> Reviews </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebar-product-review">
                <ul class="nav-second-level">
                  <li>
                    <a href="{{route('reviews.pending')}}"><i data-feather="file-plus"></i> Pending Reviews
                      ({{ $pending_reviews }})</a>
                  </li>
                  <li>
                    <a href="{{route('reviews.pending')}}"><i data-feather="file-plus"></i> Create</a>
                  </li>
                  <li>
                    <a href="{{route('reviews.index')}}"><i data-feather="file-plus"></i> All Reviews</a>
                  </li>
                </ul>
              </div>
            </li>
            <!-- nav items end -->
            <li>
              <a href="#sidebar-landing-page" data-bs-toggle="collapse">
                <i data-feather="airplay"></i>
                <span> Landing Page </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebar-landing-page">
                <ul class="nav-second-level">

                  <li>
                    <a href="{{route('campaign.create')}}"><i data-feather="file-plus"></i> Create</a>
                  </li>
                  <li>
                    <a href="{{route('campaign.index')}}"><i data-feather="file-plus"></i> Campaign</a>
                  </li>
                </ul>
              </div>
            </li>
            <!-- nav items end -->

            <li>
              <a href="#sidebar-users" data-bs-toggle="collapse">
                <i data-feather="user"></i>
                <span> Users </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebar-users">
                <ul class="nav-second-level">
                  <li>
                    <a href="{{route('users.index')}}"><i data-feather="file-plus"></i> User</a>
                  </li>
                  <li>
                    <a href="{{route('roles.index')}}"><i data-feather="file-plus"></i> Roles</a>
                  </li>
                  <li>
                    <a href="{{route('permissions.index')}}"><i data-feather="file-plus"></i> Permissions</a>
                  </li>
                  <li>
                    <a href="{{route('customers.index')}}"><i data-feather="file-plus"></i> Customers</a>
                  </li>
                </ul>
              </div>
            </li>
            <!-- nav items -->
            <li>
              <a href="#siebar-sitesetting" data-bs-toggle="collapse">
                <i data-feather="settings"></i>
                <span> Site Setting </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="siebar-sitesetting">
                <ul class="nav-second-level">
                  <li>
                    <a href="{{route('settings.index')}}"><i data-feather="file-plus"></i> General Setting</a>
                  </li>
                  <li>
                    <a href="{{route('pixels.index')}}"><i data-feather="file-plus"></i> Pixels Setting</a>
                  </li>
                  <li>
                    <a href="{{route('socialmedias.index')}}"><i data-feather="file-plus"></i> Social Media</a>
                  </li>
                  <li>
                    <a href="{{route('contact.index')}}"><i data-feather="file-plus"></i> Contact</a>
                  </li>
                  <li>
                    <a href="{{route('pages.index')}}"><i data-feather="file-plus"></i> Create Page</a>
                  </li>
                  <li>
                    <a href="{{route('shippingcharges.index')}}"><i data-feather="file-plus"></i> Shipping Charge</a>
                  </li>
                  <li>
                    <a href="{{route('orderstatus.index')}}"><i data-feather="file-plus"></i> Order Status</a>
                  </li>
                </ul>
              </div>
            </li>
            <!-- nav items end -->
            <li>
              <a href="#sidebar-api-integration" data-bs-toggle="collapse">
                <i data-feather="save"></i>
                <span> API Integration </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebar-api-integration">
                <ul class="nav-second-level">
                  <li>
                    <a href="{{route('paymentgeteway.manage')}}"><i data-feather="file-plus"></i> Payment Gateway</a>
                  </li>
                  <li>
                    <a href="{{route('smsgeteway.manage')}}"><i data-feather="file-plus"></i> SMS Gateway</a>
                  </li>
                  <li>
                    <a href="{{route('courierapi.manage')}}"><i data-feather="file-plus"></i> Courier API</a>
                  </li>
                </ul>
              </div>
            </li>
            <!-- nav items end -->
            <li>
              <a href="#sidebar-pixel-gtm" data-bs-toggle="collapse">
                <i data-feather="save"></i>
                <span> G. Pixel and GTM </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebar-pixel-gtm">
                <ul class="nav-second-level">
                  <li>
                    <a href="{{route('tagmanagers.index')}}"><i data-feather="file-plus"></i> Tag Manager</a>
                  </li>
                  <li>
                    <a href="{{route('pixels.index')}}"><i data-feather="file-plus"></i> Pixel Manage</a>
                  </li>
                </ul>
              </div>
            </li>
            <!-- nav items end -->
            <li>
              <a href="#siebar-banner" data-bs-toggle="collapse">
                <i data-feather="image"></i>
                <span> Banner & Ads </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="siebar-banner">
                <ul class="nav-second-level">
                  <li>
                    <a href="{{route('banner_category.index')}}"><i data-feather="file-plus"></i> Banner Category</a>
                  </li>
                  <li>
                    <a href="{{route('banners.index')}}"><i data-feather="file-plus"></i> Banner & Ads</a>
                  </li>
                </ul>
              </div>
            </li>
            <!-- nav items end -->
            <li>
              <a href="#sitebar-report" data-bs-toggle="collapse">
                <i data-feather="pie-chart"></i>
                <span> Reports </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sitebar-report">
                <ul class="nav-second-level">
                  <li>
                    <a href="{{route('admin.stock_report')}}"><i data-feather="file-plus"></i> Stock Report</a>
                  </li>
                  <li>
                    <a href="{{route('customers.ip_block')}}"><i data-feather="file-plus"></i> IP Block</a>
                  </li>
                  <li>
                    <a href="{{route('admin.order_report')}}"><i data-feather="file-plus"></i> Order Reports</a>
                  </li>
                  <li>
                    <a href="{{route('admin.financial_report')}}"><i data-feather="file-plus"></i> Financial Report</a>
                  </li>
                  <li>
                    <a href="{{route('office-expenses.monthly-summary')}}"><i data-feather="file-plus"></i> Expense Report</a>
                  </li>
                  <li>
                    <a href="{{route('supplier-purchases.monthly-summary')}}"><i data-feather="file-plus"></i> Purchase Report</a>
                  </li>
                </ul>
              </div>
            </li>
            <!-- nav items end -->

            <!-- Supplier Purchase Menu -->
            <li>
              <a href="{{route('supplier-purchases.index')}}">
                <i data-feather="shopping-bag"></i>
                <span> Supplier Purchases </span>
              </a>
            </li>
            <!-- Supplier Purchase Menu end -->

            <!-- Office Expense Menu -->
            <li>
              <a href="{{route('office-expenses.index')}}">
                <i data-feather="credit-card"></i>
                <span> Office Expenses </span>
              </a>
            </li>
            <!-- Office Expense Menu end -->
          </ul>
        </div>
        <!-- End Sidebar -->

        <div class="clearfix"></div>
      </div>
      <!-- Sidebar -left -->
    </div>
    <!-- Left Sidebar End -->

    <div class="content-page">
      <div class="content">
        @yield('content')
      </div>
      <!-- content -->

      <!-- Footer Start -->
      <footer class="footer">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12 text-end developer-credit">Copyright © {{ date('Y') }} {{$generalsetting->name}}. All rights reserved. Developing by : <a href="https://it.apleefix.com/" target="_blank" class="developer-credit-link">apleefix IT</a></div>
          </div>
        </div>
      </footer>
      <!-- end Footer -->
    </div>
  </div>
  <!-- END wrapper -->

  <!-- Right Sidebar -->
  <div class="right-bar">
    <div data-simplebar class="h-100">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs nav-bordered nav-justified" role="tablist">
        <li class="nav-item">
          <a class="nav-link py-2" data-bs-toggle="tab" href="#chat-tab" role="tab">
            <i class="mdi mdi-message-text d-block font-22 my-1"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link py-2" data-bs-toggle="tab" href="#tasks-tab" role="tab">
            <i class="mdi mdi-format-list-checkbox d-block font-22 my-1"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link py-2 active" data-bs-toggle="tab" href="#settings-tab" role="tab">
            <i class="mdi mdi-cog-outline d-block font-22 my-1"></i>
          </a>
        </li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content pt-0">
        <div class="tab-pane" id="chat-tab" role="tabpanel">
          <form class="search-bar p-3">
            <div class="position-relative">
              <input type="text" class="form-control" placeholder="Search..." />
              <span class="mdi mdi-magnify"></span>
            </div>
          </form>
        </div>

        <div class="tab-pane" id="tasks-tab" role="tabpanel">
          <h6 class="fw-medium p-3 m-0 text-uppercase">Working Tasks</h6>
        </div>
        <div class="tab-pane active" id="settings-tab" role="tabpanel">
          <h6 class="fw-medium px-3 m-0 py-2 font-13 text-uppercase bg-light">
            <span class="d-block py-1">Theme Settings</span>
          </h6>

          <div class="p-3">
            <div class="alert alert-warning" role="alert"><strong>Customize </strong> the overall color scheme, sidebar
              menu, etc.</div>

            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Color Scheme</h6>
            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="layout-color" value="light" id="light-mode-check"
                checked />
              <label class="form-check-label" for="light-mode-check">Light Mode</label>
            </div>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="layout-color" value="dark" id="dark-mode-check" />
              <label class="form-check-label" for="dark-mode-check">Dark Mode</label>
            </div>

            <!-- Width -->
            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Width</h6>
            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="layout-width" value="fluid" id="fluid-check"
                checked />
              <label class="form-check-label" for="fluid-check">Fluid</label>
            </div>
            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="layout-width" value="boxed" id="boxed-check" />
              <label class="form-check-label" for="boxed-check">Boxed</label>
            </div>

            <!-- Menu positions -->
            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Menus (Leftsidebar and Topbar) Positon</h6>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="menu-position" value="fixed" id="fixed-check"
                checked />
              <label class="form-check-label" for="fixed-check">Fixed</label>
            </div>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="menu-position" value="scrollable"
                id="scrollable-check" />
              <label class="form-check-label" for="scrollable-check">Scrollable</label>
            </div>

            <!-- Left Sidebar-->
            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Color</h6>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="leftbar-color" value="light" id="light-check" />
              <label class="form-check-label" for="light-check">Light</label>
            </div>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="leftbar-color" value="dark" id="dark-check"
                checked />
              <label class="form-check-label" for="dark-check">Dark</label>
            </div>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="leftbar-color" value="brand" id="brand-check" />
              <label class="form-check-label" for="brand-check">Brand</label>
            </div>

            <div class="form-check form-switch mb-3">
              <input type="checkbox" class="form-check-input" name="leftbar-color" value="gradient"
                id="gradient-check" />
              <label class="form-check-label" for="gradient-check">Gradient</label>
            </div>

            <!-- size -->
            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Size</h6>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="leftbar-size" value="default"
                id="default-size-check" checked />
              <label class="form-check-label" for="default-size-check">Default</label>
            </div>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="leftbar-size" value="condensed"
                id="condensed-check" />
              <label class="form-check-label" for="condensed-check">Condensed <small>(Extra Small size)</small></label>
            </div>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="leftbar-size" value="compact" id="compact-check" />
              <label class="form-check-label" for="compact-check">Compact <small>(Small size)</small></label>
            </div>

            <!-- User info -->
            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Sidebar User Info</h6>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="sidebar-user" value="fixed"
                id="sidebaruser-check" />
              <label class="form-check-label" for="sidebaruser-check">Enable</label>
            </div>

            <!-- Topbar -->
            <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Topbar</h6>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="topbar-color" value="dark" id="darktopbar-check"
                checked />
              <label class="form-check-label" for="darktopbar-check">Dark</label>
            </div>

            <div class="form-check form-switch mb-1">
              <input type="checkbox" class="form-check-input" name="topbar-color" value="light"
                id="lighttopbar-check" />
              <label class="form-check-label" for="lighttopbar-check">Light</label>
            </div>

            <div class="d-grid mt-4">
              <button class="btn btn-primary" id="resetBtn">Reset to Default</button>
              <a href="https://1.envato.market/uboldadmin" class="btn btn-danger mt-3" target="_blank"><i
                  class="mdi mdi-basket me-1"></i> Purchase Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end slimscroll-menu-->
  </div>
  <!-- /Right-bar -->

  <!-- Right bar overlay-->
  <div class="rightbar-overlay"></div>

  <!-- Vendor js -->
  <script src="{{asset('public/backEnd/')}}/assets/js/vendor.min.js"></script>

  <!-- App js -->
  <script src="{{asset('public/backEnd/')}}/assets/js/app.min.js"></script>
  <script src="{{asset('public/backEnd/')}}/assets/js/toastr.min.js"></script>
  {!! Toastr::message() !!}
  <script src="{{asset('public/backEnd/')}}/assets/js/sweetalert.min.js"></script>
  <script type="text/javascript">
  $(".delete-confirm").click(function(event) {
    var form = $(this).closest("form");
    event.preventDefault();
    swal({
      title: `Are you sure you want to delete this record?`,
      text: "If you delete this, it will be gone forever.",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    }).then((willDelete) => {
      if (willDelete) {
        form.submit();
      }
    });
  });
  $(".change-confirm").click(function(event) {
    var form = $(this).closest("form");
    event.preventDefault();
    swal({
      title: `Are you sure you want to change this record?`,
      icon: "warning",
      buttons: true,
      dangerMode: true,
    }).then((willDelete) => {
      if (willDelete) {
        form.submit();
      }
    });
  });

  // Dynamically wrap tables in responsive containers for mobile viewports
  $(document).ready(function() {
    $('table.table').each(function() {
      if (!$(this).parent().hasClass('table-responsive')) {
        $(this).wrap('<div class="table-responsive"></div>');
      }
    });
  });
  </script>
  <!--patho courier-->
  <script type="text/javascript">
  $(document).ready(function() {
    $('.pathaocity').change(function() {
      var id = $(this).val();
      if (id) {
        $.ajax({
          type: "GET",
          url: "{{ url('admin/pathao-city') }}?city_id=" + id,
          success: function(res) {
            if (res && res.data && res.data.data) {
              $(".pathaozone").empty();
              $(".pathaozone").append('<option value="">Select..</option>');
              $.each(res.data.data, function(index, zone) {
                $(".pathaozone").append('<option value="' + zone.zone_id + '">' + zone.zone_name +
                  '</option>');
                $('.pathaozone').trigger("chosen:updated");
              });
            } else {
              $(".pathaoarea").empty();
              $(".pathaozone").empty();
            }
          }
        });
      } else {
        $(".pathaoarea").empty();
        $(".pathaozone").empty();
      }
    });
  });
  </script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('.pathaozone').change(function() {
      var id = $(this).val();
      if (id) {
        $.ajax({
          type: "GET",
          url: "{{ url('admin/pathao-zone') }}?zone_id=" + id,
          success: function(res) {
            if (res && res.data && res.data.data) {
              $(".pathaoarea").empty();
              $(".pathaoarea").append('<option value="">Select..</option>');
              $.each(res.data.data, function(index, area) {
                $(".pathaoarea").append('<option value="' + area.area_id + '">' + area.area_name +
                  '</option>');
                $('.pathaoarea').trigger("chosen:updated");
              });
            } else {
              $(".pathaoarea").empty();
            }
          }
        });
      } else {
        $(".pathaoarea").empty();
      }
    });
  });
  </script>
  @yield('script')
</body>

</html>
