<!DOCTYPE html>
<html lang="en">
	
<!-- Mirrored from dreamspos.dreamstechnologies.com/html/template/pos-5.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 19 May 2025 13:10:44 GMT -->
<head>

		<!-- Meta Tags -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Dreams POS is a powerful Bootstrap based Inventory Management Admin Template designed for businesses, offering seamless invoicing, project tracking, and estimates.">
		<meta name="keywords" content="inventory management, admin dashboard, bootstrap template, invoicing, estimates, business management, responsive admin, POS system">
		<meta name="author" content="Dreams Technologies">
		<meta name="robots" content="index, follow">
		  <meta name="csrf-token" content="{{ csrf_token() }}">
		<title>Dreams POS - Inventory Management & Admin Dashboard Template</title>

			<script src="{{ asset('pos/assets2/js/theme-script.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>

		<!-- Favicon -->
        <link rel="shortcut icon" type="image/x-icon" href="{{ asset('pos/assets2/assets/img/favicon.png')}}">

		<!-- Apple Touch Icon -->
		<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('pos/assets2/img/apple-touch-icon.png')}}">
		
		<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="{{ asset('pos/assets2/css/bootstrap.min.css')}}">

		<!-- Datetimepicker CSS -->
		<link rel="stylesheet" href="{{ asset('pos/assets2/css/bootstrap-datetimepicker.min.css')}}">
		
		<!-- animation CSS -->
        <link rel="stylesheet" href="{{ asset('pos/assets2/css/animate.css')}}">

		<!-- Select2 CSS -->
		<link rel="stylesheet" href="{{ asset('pos/assets2/plugins/select2/css/select2.min.css')}}">

		<!-- Datatable CSS -->
		<link rel="stylesheet" href="{{ asset('pos/assets2/css/dataTables.bootstrap5.min.css')}}">
		
        <!-- Fontawesome CSS -->
		<link rel="stylesheet" href="{{ asset('pos/assets2/plugins/fontawesome/css/fontawesome.min.css')}}">
		<link rel="stylesheet" href="{{ asset('pos/assets2/plugins/fontawesome/css/all.min.css')}}">

		<!-- Daterangepikcer CSS -->
		<link rel="stylesheet" href="{{ asset('pos/assets2/plugins/daterangepicker/daterangepicker.css')}}">

		<!-- Tabler Icon CSS -->
		<link rel="stylesheet" href="{{ asset('pos/assets2/plugins/tabler-icons/tabler-icons.css')}}">

		<!-- Owl Carousel CSS -->
		<link rel="stylesheet" href="{{ asset('pos/assets2/plugins/owlcarousel/owl.carousel.min.css')}}">
		<link rel="stylesheet" href="{{ asset('pos/assets2/plugins/owlcarousel/owl.theme.default.min.css')}}">
		
		<!-- Color Picker Css -->
	<link rel="stylesheet" href="{{ asset('pos/assets2/plugins/%40simonwep/pickr/themes/nano.min.css')}}">

	    <!-- Main CSS -->
        <link rel="stylesheet" href="{{ asset('pos/assets2/css/style.css')}}">
		<style>
			.inputGroup {
  background-color: #fff;
  display: block;
  margin: 10px 0;
  position: relative;
}
.inputGroup label {
  padding: 12px 30px;
  width: 100%;
  display: block;
  text-align: left;
  color: #3C454C;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 200ms ease-in;
  overflow: hidden;
}
.inputGroup label:before {
  width: 100%;
  height: 10px;
  border-radius: 50%;

  content: "";
  background-color: #5562eb;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale3d(1, 1, 1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  z-index: -1;
}
.inputGroup label:after {
  width: 32px;
  height: 32px;
  content: "";
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label {
  color: #fff;
}
.inputGroup input:checked ~ label:before {
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
}
.inputGroup input:checked ~ label:after {
  background-color: #54E0C7;
  border-color: #54E0C7;
}
.inputGroup input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
}

.form {
  padding: 0 16px;
  max-width: 550px;
  margin: 50px auto;
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
}



*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

code {
  background-color: #9AA3AC;
  padding: 0 8px;
}

.button-61 {
  align-items: center;
  appearance: none;
  border-radius: 4px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, .2) 0 3px 1px -2px,rgba(0, 0, 0, .14) 0 2px 2px 0,rgba(0, 0, 0, .12) 0 1px 5px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: Roboto,sans-serif;
  font-size: .875rem;
  font-weight: 500;
  height: 36px;
  justify-content: center;
  letter-spacing: .0892857em;
  line-height: normal;
  min-width: 64px;
  outline: none;
  overflow: visible;
  padding: 0 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  will-change: transform,opacity;
}

.button-61:hover {
  box-shadow: rgba(0, 0, 0, .2) 0 2px 4px -1px, rgba(0, 0, 0, .14) 0 4px 5px 0, rgba(0, 0, 0, .12) 0 1px 10px 0;
}

.button-61:disabled {
  background-color: rgba(0, 0, 0, .12);
  box-shadow: rgba(0, 0, 0, .2) 0 0 0 0, rgba(0, 0, 0, .14) 0 0 0 0, rgba(0, 0, 0, .12) 0 0 0 0;
  color: rgba(0, 0, 0, .37);
  cursor: default;
  pointer-events: none;
}

.button-61:not(:disabled) {
  background-color: #6200ee;
}

.button-61:focus {
  box-shadow: rgba(0, 0, 0, .2) 0 2px 4px -1px, rgba(0, 0, 0, .14) 0 4px 5px 0, rgba(0, 0, 0, .12) 0 1px 10px 0;
}

.button-61:active {
  box-shadow: rgba(0, 0, 0, .2) 0 5px 5px -3px, rgba(0, 0, 0, .14) 0 8px 10px 1px, rgba(0, 0, 0, .12) 0 3px 14px 2px;
  background: #A46BF5;
}

@media print {
    body * {
        visibility: hidden;
    }
    #print-receipt, #print-receipt * {
        visibility: visible;
    }
    #print-receipt {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .modal-footer, .btn-primary {
        display: none !important;
    }
}

#orderTable tbody tr:last-child {
    border-bottom: 1px dashed #ccccccdc;
}

/* Optional: make sure all tbody rows are bordered subtly */
#orderTable tbody tr {
    border-bottom: 1px dashed #ccccccdc;
}




.lcslt {
    border: 1px solid #aaa;
    background: #fafafa;
    border-radius: 2px;
    transition: all .25s ease;
    font-size: 15px;
}
.lcslt:not(.lcslt-disabled):hover,
.lcslt.lcslt_dd-open,
#lc-select-dd {
    border-color: #8f8f8f;
    background: #fefefe;
}
.lcslt.lcslt_dd-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.lcslt-opt {
    background: #bbb;
    border-radius: 3px;
}
.lcslt:not(.lcslt-multiple):after {
	border-top-color: #888 !important;
}
.lcslt:not(.lcslt-multiple):hover:after,
.lcslt.lcslt_dd-open:not(.lcslt-multiple):after {
	border-top-color: #666 !important;
}
.lcslt:not(.lcslt-multiple) > span {
    padding: 2px 0;
}
.lcslt.lcslt-multiple > span:not(.lcslt-multi-callout) {
    padding: 3px 0 6px;
}
.lcslt:not(.lcslt-multiple) > span:not(.lcslt-placeholder) {
    font-size: 100%;
}
.lcslt > span:not(.lcslt-placeholder):not(.lcslt-multi-callout),
#lc-select-dd li {
    color: #484848;
}


/* disabled status */
.lcslt.lcslt-disabled {
    background: #f4f4f4;
}
.lcslt.lcslt-disabled:not(.lcslt-multiple):after {
	border-top-color: #aaa !important;
}
.lcslt.lcslt-disabled:not(.lcslt-multiple) > span {
    color: #848484;
}
.lcslt.lcslt-disabled .lcslt-multi-selected {
    color: #666;
    padding-left: 9px;
}
.lcslt.lcslt-disabled .lcslt-multi-selected:before {
    display: none;
}


/* multi-option selected items */
.lcslt-multiple {
	font-size: 0.95rem !important;
}
.lcslt-multi-selected,
.lcslt-multi-callout {
    padding: 3px 9px 3px 7px;
    background: #e5e5e5;
    color: #494949;
    border-radius: 50px;
    margin: 0 5px 5px 0;
    transition: all .3s ease;
}
.lcslt-multi-callout {
	padding: 0.75rem 0.4581rem;
	font-family: arial;
	border-radius: 50%;
	font-size: 1rem;
}
.lcslt:not(.lcslt-disabled) .lcslt-multi-selected:hover,
.lcslt:not(.lcslt-disabled) .lcslt-multi-callout:hover {
    background: #ddd;
    color: #3f3f3f; 
}
.lcslt-multi-selected:before {
    padding-right: 6px;
}
.lcslt-placeholder {
	color: #888;
	transform: scale(0.9) translate3d(-5%, -5%, 0);
}


/* dropdown */
#lc-select-dd {
    border-radius: 0 0 4px 4px;
    border-width: 0 1px 1px;
    border-style: solid;
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
	font-size: 13px;
    
}
#lc-select-dd li {
    border: none;
    border-top: 1px solid #ddd;
}
.lcslt-search-li {
    border-bottom: 2px dotted #bababa !important;
    box-shadow: 0 1px 0 #fff;
}
.lcslt-search-li input {
	font-size: inherit;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    /* font-size: 0.8rem; */
    color: #888;
    background: #fefefe;
}
.lcslt-search-li input:hover,
.lcslt-search-li input:active,
.lcslt-search-li input:focus,
.lcslt-is-searching .lcslt-search-li input {
    color: inherit;
}
.lcslt-search-li:before {
	background: #666;
}
#lc-select-dd li span {
    padding: 7px 12px;
    /* font-size: 0.8rem; */
}
#lc-select-dd li img { 
    padding-right: 7px;
}
.lcslt-group-name {
    font-weight: bold;
}
.lcslt-group-opts > li {
    padding-left: 12px;
}
.lcslt-dd-opt {   
    transition: all .15s ease;
    color: #6f6f6f;
}
#lc-select-dd li.lcslt-dd-opt:not(.lcslt-disabled):not(.lcslt-selected):hover,
#lc-select-dd .lcslt-dd-opt-hlight {  
    color: #333;
    background: #d7eeff;
}
#lc-select-dd li.lcslt-dd-opt.lcslt-disabled {   
    background: #ededed;
    color: #777;
}
#lc-select-dd li.lcslt-selected {   
    color: #fff;
    background: #0078d7;
    text-shadow: 0 0 2px rgba(0,0,0,0.15);
}
#lc-select-dd li.lcslt-selected.lcslt-dd-opt-hlight {
	box-shadow: 6px 0 0 #89caff inset;
}
.lcslt-is-searching li.lcslt-group,
.lcslt-no-results {
    border: none !important;
}
.lcslt-no-results {
    color: #777;
    text-align: center;
    padding: 12px;
}


/* images */
.lcslt-img {
    display: inline-block;
    height: 50px;
    width: 70px;
    margin-right: 20px;
} */
.content-wrapper {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
           /* Full viewport height */
              /* Full width */
}
		</style>
		
	</head>
	
	<body class="pos-page">

		{{-- <div id="global-loader" >
			<div class="whirly-loader"> </div>
		</div> --}}
		<!-- Main Wrapper -->
		<div class="main-wrapper pos-three pos-four">

			<!-- Header -->
			<div class="header pos-header">
			
				<!-- Logo -->
				 <div class="header-left active">
					<a href="index.html" class="logo logo-normal">
						<img src="{{ asset('pos/assets2/img/logo.svg')}}"  alt="Img">
					</a>
					<a href="index.html" class="logo logo-white">
						<img src="{{ asset('pos/assets2/img/logo-white.svg')}}"  alt="Img">
					</a>
					<a href="index.html" class="logo-small">
						<img src="{{ asset('pos/assets2/img/logo-small.png')}}"  alt="Img">
					</a>
				</div>
				<!-- /Logo -->
				
				<a id="mobile_btn" class="mobile_btn d-none" href="#sidebar">
					<span class="bar-icon">
						<span></span>
						<span></span>
						<span></span>
					</span>
				</a>
				
				<!-- Header Menu -->
				<ul class="nav user-menu">

					<!-- Search -->
					<li class="nav-item time-nav">
<span class="bg-teal text-white d-inline-flex align-items-center">
    <img src="{{ asset('pos/assets2/img/icons/clock-icon.svg') }}" alt="img" class="me-2">
    <span id="sri-lanka-clock"></span>
</span>
					</li>
					<!-- /Search -->
					
					<li class="nav-item pos-nav">
						<a href="index.html" class="btn btn-purple btn-md d-inline-flex align-items-center">
							<i class="ti ti-world me-1"></i>Dashboard
						</a>
					</li>

					<!-- Select Store -->
					<li class="nav-item dropdown has-arrow main-drop select-store-dropdown">
						<a href="javascript:void(0);" class="dropdown-toggle nav-link select-store"
							data-bs-toggle="dropdown">
							<span class="user-info">
								<span class="user-letter">
									<img src="" alt="Store Logo" class="img-fluid">
								</span>
								<span class="user-detail">
									<span class="user-name">Freshmart</span>
								</span>
							</span>
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="" alt="Store Logo" class="img-fluid">Freshmart
							</a>
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="" alt="Store Logo" class="img-fluid">Grocery Apex
							</a>
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="" alt="Store Logo" class="img-fluid">Grocery Bevy
							</a>
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="" alt="Store Logo" class="img-fluid">Grocery Eden
							</a>
						</div>
					</li>
					<!-- /Select Store -->
					
					<li class="nav-item nav-item-box">
						<a href="#" data-bs-toggle="modal" data-bs-target="#calculator" class="bg-orange border-orange text-white"><i class="ti ti-calculator"></i></a>
					</li>
					<li class="nav-item nav-item-box">
						<a href="javascript:void(0);" id="btnFullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Maximize" >
							<i class="ti ti-maximize"></i>
						</a>
					</li>
					<li class="nav-item nav-item-box" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cash Register">
						<a href="#" data-bs-toggle="modal" data-bs-target="#cash-register"><i class="ti ti-cash"></i></a>
					</li>
					<li class="nav-item nav-item-box" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Print Last Reciept">
						<a href="#"><i class="ti ti-printer"></i></a>
					</li>
					<li class="nav-item nav-item-box" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Today’s Sale">
						<a href="#" data-bs-toggle="modal" data-bs-target="#today-sale"><i class="ti ti-progress"></i></a>
					</li>
					<li class="nav-item nav-item-box" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Today’s Profit">
						<a href="#" data-bs-toggle="modal" data-bs-target="#today-profit"><i class="ti ti-chart-infographic"></i></a>
					</li>
					<li class="nav-item nav-item-box" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="POS Settings">
						<a href="pos-settings.html"><i class="ti ti-settings"></i></a>
					</li>
					<li class="nav-item dropdown has-arrow main-drop profile-nav">
						<a href="javascript:void(0);" class="nav-link userset" data-bs-toggle="dropdown">
							<span class="user-info p-0">
								<span class="user-letter">
									{{-- <img src="{{ asset('pos/assets2/assets/img/profiles/avator1.jpg')}}" alt="Img" class="img-fluid"> --}}
								</span>
							</span>
						</a>
						<div class="dropdown-menu menu-drop-user">
							<div class="profilename">
								<div class="profileset">
									{{-- <span class="user-img"><img src="{{ asset('pos/assets2/assets/img/profiles/avator1.jpg')}}" alt="Img"> --}}
										<span class="status online"></span></span>
									<div class="profilesets">
										<h6>John Smilga</h6>
										<h5>Super Admin</h5>
									</div>
								</div>
								<hr class="m-0">
								<a class="dropdown-item" href="profile.html"><i class="me-2" data-feather="user"></i>My
									Profile</a>
								<a class="dropdown-item" href="general-settings.html"><i class="me-2" data-feather="settings"></i>Settings</a>
								<hr class="m-0">
								<a class="dropdown-item logout pb-0" href="signin.html"><img src="{{ asset('pos/assets2/img/icons/log-out.svg')}}" class="me-2" alt="img">Logout</a>
							</div>
						</div>
					</li>
				</ul>
				<!-- /Header Menu -->
				
				<!-- Mobile Menu -->
				<div class="dropdown mobile-user-menu">
					<a href="javascript:void(0);" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item" href="profile.html">My Profile</a>
						<a class="dropdown-item" href="general-settings.html">Settings</a>
						<a class="dropdown-item" href="signin.html">Logout</a>
					</div>
				</div>
				<!-- /Mobile Menu -->
			</div>
			<!-- Header -->

			<!-- Sidebar -->
			<div class="sidebar d-none" id="sidebar">
				<!-- Logo -->
				<div class="sidebar-logo">
					<a href="index.html" class="logo logo-normal">
						<img src="{{ asset('pos/assets2/img/logo.svg')}}" alt="Img">
					</a>
					<a href="index.html" class="logo logo-white">
						<img src="{{ asset('pos/assets2/img/logo-white.svg')}}" alt="Img">
					</a>
					<a href="index.html" class="logo-small">
						<img src="{{ asset('pos/assets2/img/logo-small.png')}}" alt="Img">
					</a>
					<a id="toggle_btn" href="javascript:void(0);">
						<i data-feather="chevrons-left" class="feather-16"></i>
					</a>
				</div>
				<!-- /Logo -->
				<div class="modern-profile p-3 pb-0">
					<div class="text-center rounded bg-light p-3 mb-4 user-profile">
						<div class="avatar avatar-lg online mb-3">
							<img src="" alt="Img" class="img-fluid rounded-circle">
						</div>
						<h6 class="fs-14 fw-bold mb-1">Adrian Herman</h6>
						<p class="fs-12 mb-0">System Admin</p>
					</div>
					<div class="sidebar-nav mb-3">
						<ul class="nav nav-tabs nav-tabs-solid nav-tabs-rounded nav-justified bg-transparent" role="tablist">
							<li class="nav-item"><a class="nav-link active border-0" href="#">Menu</a></li>
							<li class="nav-item"><a class="nav-link border-0" href="chat.html">Chats</a></li>
							<li class="nav-item"><a class="nav-link border-0" href="email.html">Inbox</a></li>
						</ul>
					</div>
				</div>
				<div class="sidebar-header p-3 pb-0 pt-2">
					<div class="text-center rounded bg-light p-2 mb-4 sidebar-profile d-flex align-items-center">
						<div class="avatar avatar-md onlin">
							<img src="" alt="Img" class="img-fluid rounded-circle">
						</div>
						<div class="text-start sidebar-profile-info ms-2">
							<h6 class="fs-14 fw-bold mb-1">Adrian Herman</h6>
							<p class="fs-12">System Admin</p>
						</div>
					</div>
					<div class="d-flex align-items-center justify-content-between menu-item mb-3">
						<div>
							<a href="index.html" class="btn btn-sm btn-icon bg-light">
								<i class="ti ti-layout-grid-remove"></i>
							</a>
						</div>
						<div>
							<a href="chat.html" class="btn btn-sm btn-icon bg-light">
								<i class="ti ti-brand-hipchat"></i>
							</a>
						</div>
						<div>
							<a href="email.html" class="btn btn-sm btn-icon bg-light position-relative">
								<i class="ti ti-message"></i>
							</a>
						</div>
						<div class="notification-item">
							<a href="activities.html" class="btn btn-sm btn-icon bg-light position-relative">
								<i class="ti ti-bell"></i>
								<span class="notification-status-dot"></span>
							</a>
						</div>
						<div class="me-0">
							<a href="general-settings.html" class="btn btn-sm btn-icon bg-light">
								<i class="ti ti-settings"></i>
							</a>
						</div>
					</div>
				</div>
				<div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu">
						<ul>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Main</h6>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);" class="subdrop active"><i class="ti ti-layout-grid fs-16 me-2"></i><span>Dashboard</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="index.html" class="active">Admin Dashboard</a></li>
											<li><a href="admin-dashboard.html">Admin Dashboard 2</a></li>
											<li><a href="sales-dashboard.html">Sales Dashboard</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-user-edit fs-16 me-2"></i><span>Super Admin</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="dashboard.html">Dashboard</a></li>
											<li><a href="companies.html">Companies</a></li>
											<li><a href="subscription.html">Subscriptions</a></li>
											<li><a href="packages.html">Packages</a></li>
											<li><a href="domain.html">Domain</a></li>
											<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-brand-apple-arcade fs-16 me-2"></i><span>Application</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="chat.html">Chat</a></li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Call<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="video-call.html">Video Call</a></li>
													<li><a href="audio-call.html">Audio Call</a></li>
													<li><a href="call-history.html">Call History</a></li>
												</ul>
											</li>
											<li><a href="calendar.html">Calendar</a></li>
											<li><a href="contacts.html">Contacts</a></li>
											<li><a href="email.html">Email</a></li>
											<li><a href="todo.html">To Do</a></li>
											<li><a href="notes.html">Notes</a></li>
											<li><a href="file-manager.html">File Manager</a></li>
											<li><a href="projects.html">Projects</a></li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Ecommerce<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="products.html">Products</a></li>
													<li><a href="orders.html">Orders</a></li>
													<li><a href="customers.html">Customers</a></li>
													<li><a href="cart.html">Cart</a></li>
													<li><a href="checkout.html">Checkout</a></li>
													<li><a href="wishlist.html">Wishlist</a></li>
													<li><a href="reviews.html">Reviews</a></li>
												</ul>
											</li>
											<li><a href="social-feed.html">Social Feed</a></li>
											<li><a href="search-list.html">Search List</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-layout-sidebar-right-collapse fs-16 me-2"></i><span>Layouts</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="layout-horizontal.html">Horizontal</a></li>
											<li><a href="layout-detached.html">Detached</a></li>
											<li><a href="layout-two-column.html">Two Column</a></li>
											<li><a href="layout-hovered.html">Hovered</a></li>
											<li><a href="layout-boxed.html">Boxed</a></li>
											<li><a href="layout-rtl.html">RTL</a></li>
											<li><a href="layout-dark.html">Dark</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Inventory</h6>
								<ul>
									<li><a href="product-list.html"><i data-feather="box"></i><span>Products</span></a></li>
									<li><a href="add-product.html"><i class="ti ti-table-plus fs-16 me-2"></i><span>Create Product</span></a></li>
									<li><a href="expired-products.html"><i class="ti ti-progress-alert fs-16 me-2"></i><span>Expired Products</span></a></li>
									<li><a href="low-stocks.html"><i class="ti ti-trending-up-2 fs-16 me-2"></i><span>Low Stocks</span></a></li>
									<li><a href="category-list.html"><i class="ti ti-list-details fs-16 me-2"></i><span>Category</span></a></li>
									<li><a href="sub-categories.html"><i class="ti ti-carousel-vertical fs-16 me-2"></i><span>Sub Category</span></a></li>
									<li><a href="brand-list.html"><i class="ti ti-triangles fs-16 me-2"></i><span>Brands</span></a></li>
									<li><a href="units.html"><i class="ti ti-brand-unity fs-16 me-2"></i><span>Units</span></a></li>
									<li><a href="varriant-attributes.html"><i class="ti ti-checklist fs-16 me-2"></i><span>Variant Attributes</span></a></li>
									<li><a href="warranty.html"><i class="ti ti-certificate fs-16 me-2"></i><span>Warranties</span></a></li>
									<li><a href="barcode.html"><i class="ti ti-barcode fs-16 me-2"></i><span>Print Barcode</span></a></li>
									<li><a href="qrcode.html"><i class="ti ti-qrcode fs-16 me-2"></i><span>Print QR Code</span></a></li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Stock</h6>
								<ul>
									<li><a href="manage-stocks.html"><i class="ti ti-stack-3 fs-16 me-2"></i><span>Manage Stock</span></a></li>
									<li><a href="stock-adjustment.html"><i class="ti ti-stairs-up fs-16 me-2"></i><span>Stock Adjustment</span></a></li>
									<li><a href="stock-transfer.html"><i class="ti ti-stack-pop fs-16 me-2"></i><span>Stock Transfer</span></a></li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Sales</h6>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-layout-grid fs-16 me-2"></i><span>Sales</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="online-orders.html">Online Orders</a></li>
											<li><a href="pos-orders.html">POS Orders</a></li>
										</ul>
									</li>
									<li><a href="invoice.html"><i class="ti ti-file-invoice fs-16 me-2"></i><span>Invoices</span></a></li>
									<li><a href="sales-returns.html"><i class="ti ti-receipt-refund fs-16 me-2"></i><span>Sales Return</span></a></li>
									<li><a href="quotation-list.html"><i class="ti ti-files fs-16 me-2"></i><span>Quotation</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-device-laptop fs-16 me-2"></i><span>POS</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="pos.html">POS 1</a></li>
											<li><a href="pos-2.html">POS 2</a></li>
											<li><a href="pos-3.html">POS 3</a></li>
											<li><a href="pos-4.html">POS 4</a></li>
											<li><a href="pos-5.html">POS 5</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Promo</h6>
								<ul>
									<li><a href="coupons.html"><i class="ti ti-ticket fs-16 me-2"></i><span>Coupons</span></a></li>
									<li><a href="gift-cards.html"><i class="ti ti-cards fs-16 me-2"></i><span>Gift Cards</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-file-percent fs-16 me-2"></i><span>Discount</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="discount-plan.html">Discount Plan</a></li>
											<li><a href="discount.html">Discount</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Purchases</h6>
								<ul>
									<li><a href="purchase-list.html"><i class="ti ti-shopping-bag fs-16 me-2"></i><span>Purchases</span></a></li>
									<li><a href="purchase-order-report.html"><i class="ti ti-file-unknown fs-16 me-2"></i><span>Purchase Order</span></a></li>
									<li><a href="purchase-returns.html"><i class="ti ti-file-upload fs-16 me-2"></i><span>Purchase Return</span></a></li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Finance & Accounts</h6>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-file-stack fs-16 me-2"></i><span>Expenses</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="expense-list.html">Expenses</a></li>
											<li><a href="expense-category.html">Expense Category</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-file-pencil fs-16 me-2"></i><span>Income</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="income.html">Income</a></li>
											<li><a href="income-category.html">Income Category</a></li>
										</ul>
									</li>
									<li><a href="account-list.html"><i class="ti ti-building-bank fs-16 me-2"></i><span>Bank Accounts</span></a></li>
									<li><a href="money-transfer.html"><i class="ti ti-moneybag fs-16 me-2"></i><span>Money Transfer</span></a></li>
									<li><a href="balance-sheet.html"><i class="ti ti-report-money fs-16 me-2"></i><span>Balance Sheet</span></a></li>
									<li><a href="trial-balance.html"><i class="ti ti-alert-circle fs-16 me-2"></i><span>Trial Balance</span></a></li>
									<li><a href="cash-flow.html"><i class="ti ti-zoom-money fs-16 me-2"></i><span>Cash Flow</span></a></li>
									<li><a href="account-statement.html"><i class="ti ti-file-infinity fs-16 me-2"></i><span>Account Statement</span></a></li>

								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Peoples</h6>
								<ul>
									<li><a href="customers.html"><i class="ti ti-users-group fs-16 me-2"></i><span>Customers</span></a></li>
									<li><a href="billers.html"><i class="ti ti-user-up fs-16 me-2"></i><span>Billers</span></a></li>
									<li><a href="suppliers.html"><i class="ti ti-user-dollar fs-16 me-2"></i><span>Suppliers</span></a></li>
									<li><a href="store-list.html"><i class="ti ti-home-bolt fs-16 me-2"></i><span>Stores</span></a></li>
									<li><a href="warehouse.html"><i class="ti ti-archive fs-16 me-2"></i><span>Warehouses</span></a>
									</li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">HRM</h6>
								<ul>
									<li><a href="employees-grid.html"><i class="ti ti-user fs-16 me-2"></i><span>Employees</span></a></li>
									<li><a href="department-grid.html"><i class="ti ti-compass fs-16 me-2"></i><span>Departments</span></a></li>
									<li><a href="designation.html"><i class="ti ti-git-merge fs-16 me-2"></i><span>Designation</span></a></li>
									<li><a href="shift.html"><i class="ti ti-arrows-shuffle fs-16 me-2"></i><span>Shifts</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-user-cog fs-16 me-2"></i><span>Attendence</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="attendance-employee.html">Employee</a></li>
											<li><a href="attendance-admin.html">Admin</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-calendar fs-16 me-2"></i><span>Leaves</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="leaves-admin.html">Admin Leaves</a></li>
											<li><a href="leaves-employee.html">Employee Leaves</a></li>
											<li><a href="leave-types.html">Leave Types</a></li>
										</ul>
									</li>
									<li><a href="holidays.html"><i class="ti ti-calendar-share fs-16 me-2"></i><span>Holidays</span></a>
									</li>
									<li class="submenu">
										<a href="employee-salary.html"><i class="ti ti-file-dollar fs-16 me-2"></i><span>Payroll</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="employee-salary.html">Employee Salary</a></li>
											<li><a href="payslip.html">Payslip</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Reports</h6>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-chart-bar fs-16 me-2"></i><span>Sales Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="sales-report.html">Sales Report</a></li>
											<li><a href="best-seller.html">Best Seller</a></li>
										</ul>
									</li>
									<li><a href="purchase-report.html"><i class="ti ti-chart-pie-2 fs-16 me-2"></i><span>Purchase report</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-triangle-inverted fs-16 me-2"></i><span>Inventory Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="inventory-report.html">Inventory Report</a></li>
											<li><a href="stock-history.html">Stock History</a></li>
											<li><a href="sold-stock.html">Sold Stock</a></li>
										</ul>
									</li>
									<li><a href="invoice-report.html"><i class="ti ti-businessplan fs-16 me-2"></i><span>Invoice Report</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-user-star fs-16 me-2"></i><span>Supplier Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="supplier-report.html">Supplier Report</a></li>
											<li><a href="supplier-due-report.html">Supplier Due Report</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-report fs-16 me-2"></i><span>Customer Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="customer-report.html">Customer Report</a></li>
											<li><a href="customer-due-report.html">Customer Due Report</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-report-analytics fs-16 me-2"></i><span>Product Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="product-report.html">Product Report</a></li>
											<li><a href="product-expiry-report.html">Product Expiry Report</a></li>
											<li><a href="product-quantity-alert.html">Product Quantity Alert</a></li>
										</ul>
									</li>
									<li><a href="expense-report.html"><i class="ti ti-file-vector fs-16 me-2"></i><span>Expense Report</span></a></li>
									<li><a href="income-report.html"><i class="ti ti-chart-ppf fs-16 me-2"></i><span>Income Report</span></a></li>
									<li><a href="tax-reports.html"><i class="ti ti-chart-dots-2 fs-16 me-2"></i><span>Tax Report</span></a></li>
									<li><a href="profit-and-loss.html"><i class="ti ti-chart-donut fs-16 me-2"></i><span>Profit & Loss</span></a></li>
									<li><a href="annual-report.html"><i class="ti ti-report-search fs-16 me-2"></i><span>Annual Report</span></a></li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Content (CMS)</h6>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-page-break fs-16 me-2"></i><span>Pages</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="pages.html">Pages</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-wallpaper fs-16 me-2"></i><span>Blog</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="all-blog.html">All Blog</a></li>
											<li><a href="blog-tag.html">Blog Tags</a></li>
											<li><a href="blog-categories.html">Categories</a></li>
											<li><a href="blog-comments.html">Blog Comments</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-map-pin fs-16 me-2"></i><span>Location</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="countries.html">Countries</a></li>
											<li><a href="states.html">States</a></li>
											<li><a href="cities.html">Cities</a></li>
										</ul>
									</li>
									<li><a href="testimonials.html"><i class="ti ti-star fs-16 me-2"></i><span>Testimonials</span></a></li>
									<li><a href="faq.html"><i class="ti ti-help-circle fs-16 me-2"></i><span>FAQ</span></a></li>

								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">User Management</h6>
								<ul>
									<li><a href="users.html"><i class="ti ti-shield-up fs-16 me-2"></i><span>Users</span></a></li>
									<li><a href="roles-permissions.html"><i class="ti ti-jump-rope fs-16 me-2"></i><span>Roles & Permissions</span></a></li>
									<li><a href="delete-account.html"><i class="ti ti-trash-x fs-16 me-2"></i><span>Delete Account Request</span></a></li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Pages</h6>
								<ul>
									<li><a href="profile.html"><i class="ti ti-user-circle fs-16 me-2"></i><span>Profile</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-shield fs-16 me-2"></i><span>Authentication</span><span class="menu-arrow"></span></a>
										<ul>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Login<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="signin.html">Cover</a></li>
													<li><a href="signin-2.html">Illustration</a></li>
													<li><a href="signin-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Register<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="register.html">Cover</a></li>
													<li><a href="register-2.html">Illustration</a></li>
													<li><a href="register-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Forgot Password<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="forgot-password.html">Cover</a></li>
													<li><a href="forgot-password-2.html">Illustration</a></li>
													<li><a href="forgot-password-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Reset Password<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="reset-password.html">Cover</a></li>
													<li><a href="reset-password-2.html">Illustration</a></li>
													<li><a href="reset-password-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Email Verification<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="email-verification.html">Cover</a></li>
													<li><a href="email-verification-2.html">Illustration</a></li>
													<li><a href="email-verification-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">2 Step Verification<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="two-step-verification.html">Cover</a></li>
													<li><a href="two-step-verification-2.html">Illustration</a></li>
													<li><a href="two-step-verification-3.html">Basic</a></li>
												</ul>
											</li>
											<li><a href="lock-screen.html">Lock Screen</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-file-x fs-16 me-2"></i><span>Error Pages</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="error-404.html">404 Error </a></li>
											<li><a href="error-500.html">500 Error </a></li>
										</ul>
									</li>
									<li>
										<a href="blank-page.html"><i class="ti ti-file fs-16 me-2"></i><span>Blank Page</span> </a>
									</li>
									<li>
										<a href="pricing.html"><i class="ti ti-currency-dollar fs-16 me-2"></i><span>Pricing</span> </a>
									</li>
									<li>
										<a href="coming-soon.html"><i class="ti ti-send fs-16 me-2"></i><span>Coming Soon</span> </a>
									</li>
									<li>
										<a href="under-maintenance.html"><i class="ti ti-alert-triangle fs-16 me-2"></i><span>Under Maintenance</span> </a>
									</li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Settings</h6>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-settings fs-16 me-2"></i><span>General Settings</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="general-settings.html">Profile</a></li>
											<li><a href="security-settings.html">Security</a></li>
											<li><a href="notification.html">Notifications</a></li>
											<li><a href="connected-apps.html">Connected Apps</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-world fs-16 me-2"></i><span>Website Settings</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="system-settings.html">System Settings</a></li>
											<li><a href="company-settings.html">Company Settings </a></li>
											<li><a href="localization-settings.html">Localization</a></li>
											<li><a href="prefixes.html">Prefixes</a></li>
											<li><a href="preference.html">Preference</a></li>
											<li><a href="appearance.html">Appearance</a></li>
											<li><a href="social-authentication.html">Social Authentication</a></li>
											<li><a href="language-settings.html">Language</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-device-mobile fs-16 me-2"></i>
											<span>App Settings</span><span class="menu-arrow"></span>
										</a>
										<ul>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Invoice<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="invoice-settings.html">Invoice Settings</a></li>
													<li><a href="invoice-template.html">Invoice Template</a></li>
												</ul>
											</li>
											<li><a href="printer-settings.html">Printer</a></li>
											<li><a href="pos-settings.html">POS</a></li>
											<li><a href="custom-fields.html">Custom Fields</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-device-desktop fs-16 me-2"></i>
											<span>System Settings</span><span class="menu-arrow"></span>
										</a>
										<ul>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Email<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="email-settings.html">Email Settings</a></li>
													<li><a href="email-template.html">Email Template</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">SMS<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="sms-settings.html">SMS Settings</a></li>
													<li><a href="sms-template.html">SMS Template</a></li>
												</ul>
											</li>
											<li><a href="otp-settings.html">OTP</a></li>
											<li><a href="gdpr-settings.html">GDPR Cookies</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-settings-dollar fs-16 me-2"></i>
											<span>Financial Settings</span><span class="menu-arrow"></span>
										</a>
										<ul>
											<li><a href="payment-gateway-settings.html">Payment Gateway</a></li>
											<li><a href="bank-settings-grid.html">Bank Accounts</a></li>
											<li><a href="tax-rates.html">Tax Rates</a></li>
											<li><a href="currency-settings.html">Currencies</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-settings-2 fs-16 me-2"></i>
											<span>Other Settings</span><span class="menu-arrow"></span>
										</a>
										<ul>
											<li><a href="storage-settings.html">Storage</a></li>
											<li><a href="ban-ip-address.html">Ban IP Address</a></li>
										</ul>
									</li>
									<li>
										<a href="signin.html"><i class="ti ti-logout fs-16 me-2"></i><span>Logout</span> </a>
									</li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">UI Interface</h6>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);">
											<i class="ti ti-vector-bezier fs-16 me-2"></i><span>Base UI</span><span class="menu-arrow"></span>
										</a>
										<ul>
											<li><a href="ui-alerts.html">Alerts</a></li>
											<li><a href="ui-accordion.html">Accordion</a></li>
											<li><a href="ui-avatar.html">Avatar</a></li>
											<li><a href="ui-badges.html">Badges</a></li>
											<li><a href="ui-borders.html">Border</a></li>
											<li><a href="ui-buttons.html">Buttons</a></li>
											<li><a href="ui-buttons-group.html">Button Group</a></li>
											<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
											<li><a href="ui-cards.html">Card</a></li>
											<li><a href="ui-carousel.html">Carousel</a></li>
											<li><a href="ui-colors.html">Colors</a></li>
											<li><a href="ui-dropdowns.html">Dropdowns</a></li>
											<li><a href="ui-grid.html">Grid</a></li>
											<li><a href="ui-images.html">Images</a></li>
											<li><a href="ui-lightbox.html">Lightbox</a></li>
											<li><a href="ui-media.html">Media</a></li>
											<li><a href="ui-modals.html">Modals</a></li>
											<li><a href="ui-offcanvas.html">Offcanvas</a></li>
											<li><a href="ui-pagination.html">Pagination</a></li>
											<li><a href="ui-popovers.html">Popovers</a></li>
											<li><a href="ui-progress.html">Progress</a></li>
											<li><a href="ui-placeholders.html">Placeholders</a></li>
											<li><a href="ui-rangeslider.html">Range Slider</a></li>
											<li><a href="ui-spinner.html">Spinner</a></li>
											<li><a href="ui-sweetalerts.html">Sweet Alerts</a></li>
											<li><a href="ui-nav-tabs.html">Tabs</a></li>
											<li><a href="ui-toasts.html">Toasts</a></li>
											<li><a href="ui-tooltips.html">Tooltips</a></li>
											<li><a href="ui-typography.html">Typography</a></li>
											<li><a href="ui-video.html">Video</a></li>
											<li><a href="ui-sortable.html">Sortable</a></li>
											<li><a href="ui-swiperjs.html">Swiperjs</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);">
											<i data-feather="layers"></i><span>Advanced UI</span><span class="menu-arrow"></span>
										</a>
										<ul>
											<li><a href="ui-ribbon.html">Ribbon</a></li>
											<li><a href="ui-clipboard.html">Clipboard</a></li>
											<li><a href="ui-drag-drop.html">Drag & Drop</a></li>
											<li><a href="ui-rangeslider.html">Range Slider</a></li>
											<li><a href="ui-rating.html">Rating</a></li>
											<li><a href="ui-text-editor.html">Text Editor</a></li>
											<li><a href="ui-counter.html">Counter</a></li>
											<li><a href="ui-scrollbar.html">Scrollbar</a></li>
											<li><a href="ui-stickynote.html">Sticky Note</a></li>
											<li><a href="ui-timeline.html">Timeline</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-chart-infographic fs-16 me-2"></i>
											<span>Charts</span><span class="menu-arrow"></span>
										</a>
										<ul>
											<li><a href="chart-apex.html">Apex Charts</a></li>
											<li><a href="chart-c3.html">Chart C3</a></li>
											<li><a href="chart-js.html">Chart Js</a></li>
											<li><a href="chart-morris.html">Morris Charts</a></li>
											<li><a href="chart-flot.html">Flot Charts</a></li>
											<li><a href="chart-peity.html">Peity Charts</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-icons fs-16 me-2"></i>
											<span>Icons</span><span class="menu-arrow"></span>
										</a>
										<ul>
											<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
											<li><a href="icon-feather.html">Feather Icons</a></li>
											<li><a href="icon-ionic.html">Ionic Icons</a></li>
											<li><a href="icon-material.html">Material Icons</a></li>
											<li><a href="icon-pe7.html">Pe7 Icons</a></li>
											<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
											<li><a href="icon-themify.html">Themify Icons</a></li>
											<li><a href="icon-weather.html">Weather Icons</a></li>
											<li><a href="icon-typicon.html">Typicon Icons</a></li>
											<li><a href="icon-flag.html">Flag Icons</a></li>
											<li><a href="icon-tabler.html">Tabler Icons</a></li>
											<li><a href="icon-bootstrap.html">Bootstrap Icons</a></li>
											<li><a href="icon-remix.html">Remix Icons</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);">
											<i class="ti ti-input-search fs-16 me-2"></i><span>Forms</span><span class="menu-arrow"></span>
										</a>
										<ul>
											<li class="submenu submenu-two">
												<a href="javascript:void(0);">Form Elements<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="form-basic-inputs.html">Basic Inputs</a></li>
													<li><a href="form-checkbox-radios.html">Checkbox & Radios</a></li>
													<li><a href="form-input-groups.html">Input Groups</a></li>
													<li><a href="form-grid-gutters.html">Grid & Gutters</a></li>
													<li><a href="form-select.html">Form Select</a></li>
													<li><a href="form-mask.html">Input Masks</a></li>
													<li><a href="form-fileupload.html">File Uploads</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two">
												<a href="javascript:void(0);">Layouts<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="form-horizontal.html">Horizontal Form</a></li>
													<li><a href="form-vertical.html">Vertical Form</a></li>
													<li><a href="form-floating-labels.html">Floating Labels</a></li>
												</ul>
											</li>
											<li><a href="form-validation.html">Form Validation</a></li>
											<li><a href="form-select2.html">Select2</a></li>
											<li><a href="form-wizard.html">Form Wizard</a></li>
											<li><a href="form-pickers.html">Form Picker</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-table fs-16 me-2"></i><span>Tables</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="tables-basic.html">Basic Tables </a></li>
											<li><a href="data-tables.html">Data Table </a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-map-pin-pin fs-16 me-2"></i><span>Maps</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="maps-vector.html">Vector</a></li>
											<li><a href="maps-leaflet.html">Leaflet</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="submenu-open">
								<h6 class="submenu-hdr">Help</h6>
								<ul>
									<li><a href="javascript:void(0);"><i class="ti ti-file-text fs-16 me-2"></i><span>Documentation</span></a></li>
									<li><a href="javascript:void(0);"><i class="ti ti-exchange fs-16 me-2"></i><span>Changelog </span><span class="badge bg-primary badge-xs text-white fs-10 ms-2">v2.0.9</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><i class="ti ti-menu-2 fs-16 me-2"></i><span>Multi Level</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="javascript:void(0);">Level 1.1</a></li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Level 1.2<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="javascript:void(0);">Level 2.1</a></li>
													<li class="submenu submenu-two submenu-three"><a href="javascript:void(0);">Level 2.2<span class="menu-arrow inside-submenu inside-submenu-two"></span></a>
														<ul>
															<li><a href="javascript:void(0);">Level 3.1</a></li>
															<li><a href="javascript:void(0);">Level 3.2</a></li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- /Sidebar -->

			<!-- Horizontal Sidebar -->
			<div class="sidebar sidebar-horizontal d-none" id="horizontal-menu">
				<div id="sidebar-menu-3" class="sidebar-menu">
					<div class="main-menu">
						<ul class="nav-menu">
							<li class="submenu">
								<a href="index.html"><i class="ti ti-layout-grid fs-16 me-2"></i><span> Main Menu</span> <span class="menu-arrow"></span></a>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);" class="active subdrop"><span>Dashboard</span> <span class="menu-arrow"></span></a>
										<ul>
											<li><a href="index.html" class="active">Admin Dashboard</a></li>
											<li><a href="admin-dashboard.html">Admin Dashboard 2</a></li>
											<li><a href="sales-dashboard.html">Sales Dashboard</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Super Admin</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="dashboard.html">Dashboard</a></li>
											<li><a href="companies.html">Companies</a></li>
											<li><a href="subscription.html">Subscriptions</a></li>
											<li><a href="packages.html">Packages</a></li>
											<li><a href="domain.html">Domain</a></li>
											<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Application</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="chat.html">Chat</a></li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Call<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="video-call.html">Video Call</a></li>
													<li><a href="audio-call.html">Audio Call</a></li>
													<li><a href="call-history.html">Call History</a></li>
												</ul>
											</li>
											<li><a href="calendar.html">Calendar</a></li>
											<li><a href="contacts.html">Contacts</a></li>
											<li><a href="email.html">Email</a></li>
											<li><a href="todo.html">To Do</a></li>
											<li><a href="notes.html">Notes</a></li>
											<li><a href="file-manager.html">File Manager</a></li>
											<li><a href="projects.html">Projects</a></li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Ecommerce<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="products.html">Products</a></li>
													<li><a href="orders.html">Orders</a></li>
													<li><a href="customers.html">Customers</a></li>
													<li><a href="cart.html">Cart</a></li>
													<li><a href="checkout.html">Checkout</a></li>
													<li><a href="wishlist.html">Wishlist</a></li>
													<li><a href="reviews.html">Reviews</a></li>
												</ul>
											</li>
											<li><a href="social-feed.html">Social Feed</a></li>
											<li><a href="search-list.html">Search List</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="submenu">
								<a href="javascript:void(0);"><i class="ti ti-layout-sidebar-right-collapse fs-16 me-2"></i><span>Layouts</span><span class="menu-arrow"></span></a>
								<ul>
									<li><a href="layout-horizontal.html">Horizontal</a></li>
									<li><a href="layout-detached.html">Detached</a></li>
									<li><a href="layout-two-column.html">Two Column</a></li>
									<li><a href="layout-hovered.html">Hovered</a></li>
									<li><a href="layout-boxed.html">Boxed</a></li>
									<li><a href="layout-rtl.html">RTL</a></li>
									<li><a href="layout-dark.html">Dark</a></li>
								</ul>
							</li>
							<li class="submenu">
								<a href="javascript:void(0);"><i class="ti ti-brand-unity fs-16 me-2"></i><span> Inventory
									</span> <span class="menu-arrow"></span></a>
								<ul>
									<li><a href="product-list.html"><span>Products</span></a></li>
									<li><a href="add-product.html"><span>Create Product</span></a></li>
									<li><a href="expired-products.html"><span>Expired Products</span></a></li>
									<li><a href="low-stocks.html"><span>Low Stocks</span></a></li>
									<li><a href="category-list.html"><span>Category</span></a></li>
									<li><a href="sub-categories.html"><span>Sub Category</span></a></li>
									<li><a href="brand-list.html"><span>Brands</span></a></li>
									<li><a href="units.html"><span>Units</span></a></li>
									<li><a href="varriant-attributes.html"><span>Variant Attributes</span></a></li>
									<li><a href="warranty.html"><span>Warranties</span></a></li>
									<li><a href="barcode.html"><span>Print Barcode</span></a></li>
									<li><a href="qrcode.html"><span>Print QR Code</span></a></li>
								</ul>
							</li>
							<li class="submenu">
								<a href="javascript:void(0);"><i class="ti ti-layout-grid fs-16 me-2"></i><span>Sales &amp; Purchase</span> <span class="menu-arrow"></span></a>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Stock</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="manage-stocks.html"><span>Manage Stock</span></a></li>
											<li><a href="stock-adjustment.html"><span>Stock Adjustment</span></a></li>
											<li><a href="stock-transfer.html"><span>Stock Transfer</span></a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Sales</span><span class="menu-arrow"></span></a>
										<ul>
											<li class="submenu">
												<a href="javascript:void(0);"><span>Sales</span><span class="menu-arrow"></span></a>
												<ul>
													<li><a href="online-orders.html">Online Orders</a></li>
													<li><a href="pos-orders.html">POS Orders</a></li>
												</ul>
											</li>
											<li><a href="invoice.html"><span>Invoices</span></a></li>
											<li><a href="sales-returns.html"><span>Sales Return</span></a></li>
											<li><a href="quotation-list.html"><span>Quotation</span></a></li>
											<li class="submenu">
												<a href="javascript:void(0);"><span>POS</span><span class="menu-arrow"></span></a>
												<ul>
													<li><a href="pos.html">POS 1</a></li>
													<li><a href="pos-2.html">POS 2</a></li>
													<li><a href="pos-3.html">POS 3</a></li>
													<li><a href="pos-4.html">POS 4</a></li>
													<li><a href="pos-5.html">POS 5</a></li>
												</ul>
											</li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Promo</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="coupons.html"><span>Coupons</span></a></li>
											<li><a href="gift-cards.html"><span>Gift Cards</span></a></li>
											<li class="submenu">
												<a href="javascript:void(0);"><span>Discount</span><span class="menu-arrow"></span></a>
												<ul>
													<li><a href="discount-plan.html">Discount Plan</a></li>
													<li><a href="discount.html">Discount</a></li>
												</ul>
											</li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Purchase</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="purchase-list.html"><span>Purchases</span></a></li>
											<li><a href="purchase-order-report.html"><span>Purchase Order</span></a></li>
											<li><a href="purchase-returns.html"><span>Purchase Return</span></a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Expenses</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="expense-list.html">Expenses</a></li>
											<li><a href="expense-category.html">Expense Category</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Income</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="income.html">Income</a></li>
											<li><a href="income-category.html">Income Category</a></li>
										</ul>
									</li>
									<li><a href="account-list.html"><span>Bank Accounts</span></a></li>
									<li><a href="money-transfer.html"><span>Money Transfer</span></a></li>
									<li><a href="balance-sheet.html"><span>Balance Sheet</span></a></li>
									<li><a href="trial-balance.html"><span>Trial Balance</span></a></li>
									<li><a href="cash-flow.html"><span>Cash Flow</span></a></li>
									<li><a href="account-statement.html"><span>Account Statement</span></a></li>
								</ul>
							</li>
							<li class="submenu">
								<a href="javascript:void(0);"><i class="ti ti-users-group fs-16 me-2"></i><span>UI Interface</span> <span class="menu-arrow"></span></a>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Base UI</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="ui-alerts.html">Alerts</a></li>
											<li><a href="ui-accordion.html">Accordion</a></li>
											<li><a href="ui-avatar.html">Avatar</a></li>
											<li><a href="ui-badges.html">Badges</a></li>
											<li><a href="ui-borders.html">Border</a></li>
											<li><a href="ui-buttons.html">Buttons</a></li>
											<li><a href="ui-buttons-group.html">Button Group</a></li>
											<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
											<li><a href="ui-cards.html">Card</a></li>
											<li><a href="ui-carousel.html">Carousel</a></li>
											<li><a href="ui-colors.html">Colors</a></li>
											<li><a href="ui-dropdowns.html">Dropdowns</a></li>
											<li><a href="ui-grid.html">Grid</a></li>
											<li><a href="ui-images.html">Images</a></li>
											<li><a href="ui-lightbox.html">Lightbox</a></li>
											<li><a href="ui-media.html">Media</a></li>
											<li><a href="ui-modals.html">Modals</a></li>
											<li><a href="ui-offcanvas.html">Offcanvas</a></li>
											<li><a href="ui-pagination.html">Pagination</a></li>
											<li><a href="ui-popovers.html">Popovers</a></li>
											<li><a href="ui-progress.html">Progress</a></li>
											<li><a href="ui-placeholders.html">Placeholders</a></li>
											<li><a href="ui-rangeslider.html">Range Slider</a></li>
											<li><a href="ui-spinner.html">Spinner</a></li>
											<li><a href="ui-sweetalerts.html">Sweet Alerts</a></li>
											<li><a href="ui-nav-tabs.html">Tabs</a></li>
											<li><a href="ui-toasts.html">Toasts</a></li>
											<li><a href="ui-tooltips.html">Tooltips</a></li>
											<li><a href="ui-typography.html">Typography</a></li>
											<li><a href="ui-video.html">Video</a></li>
											<li><a href="ui-sortable.html">Sortable</a></li>
											<li><a href="ui-swiperjs.html">Swiperjs</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Advanced UI</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="ui-ribbon.html">Ribbon</a></li>
											<li><a href="ui-clipboard.html">Clipboard</a></li>
											<li><a href="ui-drag-drop.html">Drag & Drop</a></li>
											<li><a href="ui-rangeslider.html">Range Slider</a></li>
											<li><a href="ui-rating.html">Rating</a></li>
											<li><a href="ui-text-editor.html">Text Editor</a></li>
											<li><a href="ui-counter.html">Counter</a></li>
											<li><a href="ui-scrollbar.html">Scrollbar</a></li>
											<li><a href="ui-stickynote.html">Sticky Note</a></li>
											<li><a href="ui-timeline.html">Timeline</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Charts</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="chart-apex.html">Apex Charts</a></li>
											<li><a href="chart-c3.html">Chart C3</a></li>
											<li><a href="chart-js.html">Chart Js</a></li>
											<li><a href="chart-morris.html">Morris Charts</a></li>
											<li><a href="chart-flot.html">Flot Charts</a></li>
											<li><a href="chart-peity.html">Peity Charts</a></li>
										</ul>
									</li>
									<li class="submenu">
									<a href="javascript:void(0);"><span>Icons</span><span class="menu-arrow"></span></a>
									<ul>
										<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
										<li><a href="icon-feather.html">Feather Icons</a></li>
										<li><a href="icon-ionic.html">Ionic Icons</a></li>
										<li><a href="icon-material.html">Material Icons</a></li>
										<li><a href="icon-pe7.html">Pe7 Icons</a></li>
										<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
										<li><a href="icon-themify.html">Themify Icons</a></li>
										<li><a href="icon-weather.html">Weather Icons</a></li>
										<li><a href="icon-typicon.html">Typicon Icons</a></li>
										<li><a href="icon-flag.html">Flag Icons</a></li>
										<li><a href="icon-tabler.html">Tabler Icons</a></li>
										<li><a href="icon-bootstrap.html">Bootstrap Icons</a></li>
										<li><a href="icon-remix.html">Remix Icons</a></li>
									</ul>
								</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span> Forms</span><span class="menu-arrow"></span></a>
										<ul>
											<li class="submenu submenu-two">
												<a href="javascript:void(0);"><span>Form Elements</span><span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="form-basic-inputs.html">Basic Inputs</a></li>
													<li><a href="form-checkbox-radios.html">Checkbox & Radios</a></li>
													<li><a href="form-input-groups.html">Input Groups</a></li>
													<li><a href="form-grid-gutters.html">Grid & Gutters</a></li>
													<li><a href="form-select.html">Form Select</a></li>
													<li><a href="form-mask.html">Input Masks</a></li>
													<li><a href="form-fileupload.html">File Uploads</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two">
												<a href="javascript:void(0);"><span> Layouts</span><span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="form-horizontal.html">Horizontal Form</a></li>
													<li><a href="form-vertical.html">Vertical Form</a></li>
													<li><a href="form-floating-labels.html">Floating Labels</a></li>
												</ul>
											</li>
											<li><a href="form-validation.html">Form Validation</a></li>
											<li><a href="form-select2.html">Select2</a></li>
											<li><a href="form-wizard.html">Form Wizard</a></li>
											<li><a href="form-pickers.html">Form Picker</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Tables</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="tables-basic.html">Basic Tables </a></li>
											<li><a href="data-tables.html">Data Table </a></li>
										</ul>
									</li>
									<li  class="submenu">
										<a href="javascript:void(0);"><span>Maps</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="maps-vector.html">Vector</a></li>
											<li><a href="maps-leaflet.html">Leaflet</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="submenu">
								<a href="javascript:void(0);"><i class="ti ti-page-break fs-16 me-2"></i><span>Pages</span> <span class="menu-arrow"></span></a>
								<ul>
									<li><a href="profile.html"><span>Profile</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Authentication</span><span class="menu-arrow"></span></a>
										<ul>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Login<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="signin.html">Cover</a></li>
													<li><a href="signin-2.html">Illustration</a></li>
													<li><a href="signin-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Register<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="register.html">Cover</a></li>
													<li><a href="register-2.html">Illustration</a></li>
													<li><a href="register-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Forgot Password<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="forgot-password.html">Cover</a></li>
													<li><a href="forgot-password-2.html">Illustration</a></li>
													<li><a href="forgot-password-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Reset Password<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="reset-password.html">Cover</a></li>
													<li><a href="reset-password-2.html">Illustration</a></li>
													<li><a href="reset-password-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Email Verification<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="email-verification.html">Cover</a></li>
													<li><a href="email-verification-2.html">Illustration</a></li>
													<li><a href="email-verification-3.html">Basic</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">2 Step Verification<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="two-step-verification.html">Cover</a></li>
													<li><a href="two-step-verification-2.html">Illustration</a></li>
													<li><a href="two-step-verification-3.html">Basic</a></li>
												</ul>
											</li>
											<li><a href="lock-screen.html">Lock Screen</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Error</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="error-404.html">404 Error </a></li>
											<li><a href="error-500.html">500 Error </a></li>
										</ul>
									</li>
									<li><a href="blank-page.html"><span>Blank Page</span> </a></li>
									<li><a href="pricing.html"><span>Pricing</span> </a></li>
									<li><a href="coming-soon.html"><span>Coming Soon</span> </a></li>
									<li><a href="under-maintenance.html"><span>Under Maintenance</span> </a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Content</span><span class="menu-arrow"></span></a>
										<ul>
											<li class="submenu">
												<a href="javascript:void(0);"><span>Pages</span><span class="menu-arrow"></span></a>
												<ul>
													<li><a href="pages.html">Pages</a></li>
												</ul>
											</li>
											<li class="submenu">
												<a href="javascript:void(0);"><span>Blog</span><span class="menu-arrow"></span></a>
												<ul>
													<li><a href="all-blog.html">All Blog</a></li>
													<li><a href="blog-tag.html">Blog Tags</a></li>
													<li><a href="blog-categories.html">Categories</a></li>
													<li><a href="blog-comments.html">Blog Comments</a></li>
												</ul>
											</li>
											<li class="submenu">
												<a href="javascript:void(0);"><span>Location</span><span class="menu-arrow"></span></a>
												<ul>
													<li><a href="countries.html">Countries</a></li>
													<li><a href="states.html">States</a></li>
													<li><a href="cities.html">Cities</a></li>
												</ul>
											</li>
											<li><a href="testimonials.html"><span>Testimonials</span></a></li>
											<li><a href="faq.html"><span>FAQ</span></a></li>
			
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Employees</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="employees-grid.html"><span>Employees</span></a></li>
											<li><a href="department-grid.html"><span>Departments</span></a></li>
											<li><a href="designation.html"><span>Designation</span></a></li>
											<li><a href="shift.html"><span>Shifts</span></a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Attendence</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="attendance-employee.html">Employee Attendence</a></li>
											<li><a href="attendance-admin.html">Admin Attendence</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Leaves &amp; Holidays</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="leaves-admin.html">Admin Leaves</a></li>
											<li><a href="leaves-employee.html">Employee Leaves</a></li>
											<li><a href="leave-types.html">Leave Types</a></li>
											<li><a href="holidays.html"><span>Holidays</span></a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="employee-salary.html"><span>Payroll</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="employee-salary.html">Employee Salary</a></li>
											<li><a href="payslip.html">Payslip</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="submenu">
								<a href="javascript:void(0);"><i class="ti ti-chart-bar fs-16 me-2"></i><span>Reports</span><span class="menu-arrow"></span></a>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Sales Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="sales-report.html">Sales Report</a></li>
											<li><a href="best-seller.html">Best Seller</a></li>
										</ul>
									</li>
									<li><a href="purchase-report.html"><span>Purchase report</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Inventory Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="inventory-report.html">Inventory Report</a></li>
											<li><a href="stock-history.html">Stock History</a></li>
											<li><a href="sold-stock.html">Sold Stock</a></li>
										</ul>
									</li>
									<li><a href="invoice-report.html"><span>Invoice Report</span></a></li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Supplier Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="supplier-report.html">Supplier Report</a></li>
											<li><a href="supplier-due-report.html">Supplier Due Report</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Customer Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="customer-report.html">Customer Report</a></li>
											<li><a href="customer-due-report.html">Customer Due Report</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Product Report</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="product-report.html">Product Report</a></li>
											<li><a href="product-expiry-report.html">Product Expiry Report</a></li>
											<li><a href="product-quantity-alert.html">Product Quantity Alert</a></li>
										</ul>
									</li>
									<li><a href="expense-report.html"><span>Expense Report</span></a></li>
									<li><a href="income-report.html"><span>Income Report</span></a></li>
									<li><a href="tax-reports.html"><span>Tax Report</span></a></li>
									<li><a href="profit-and-loss.html"><span>Profit & Loss</span></a></li>
									<li><a href="annual-report.html"><span>Annual Report</span></a></li>
								</ul>
							</li>
							<li class="submenu">
								<a href="javascript:void(0);"><i class="ti ti-settings fs-16 me-2"></i><span>Settings</span><span class="menu-arrow"></span></a>
								<ul>
									<li class="submenu">
										<a href="javascript:void(0);"><span>General Settings</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="general-settings.html">Profile</a></li>
											<li><a href="security-settings.html">Security</a></li>
											<li><a href="notification.html">Notifications</a></li>
											<li><a href="connected-apps.html">Connected Apps</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Website Settings</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="system-settings.html">System Settings</a></li>
											<li><a href="company-settings.html">Company Settings </a></li>
											<li><a href="localization-settings.html">Localization</a></li>
											<li><a href="prefixes.html">Prefixes</a></li>
											<li><a href="preference.html">Preference</a></li>
											<li><a href="appearance.html">Appearance</a></li>
											<li><a href="social-authentication.html">Social Authentication</a></li>
											<li><a href="language-settings.html">Language</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>App Settings</span><span class="menu-arrow"></span></a>
										<ul>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Invoice<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="invoice-settings.html">Invoice Settings</a></li>
													<li><a href="invoice-template.html">Invoice Template</a></li>
												</ul>
											</li>
											<li><a href="printer-settings.html">Printer</a></li>
											<li><a href="pos-settings.html">POS</a></li>
											<li><a href="custom-fields.html">Custom Fields</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>System Settings</span><span class="menu-arrow"></span></a>
										<ul>
											<li class="submenu submenu-two"><a href="javascript:void(0);">Email<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="email-settings.html">Email Settings</a></li>
													<li><a href="email-template.html">Email Template</a></li>
												</ul>
											</li>
											<li class="submenu submenu-two"><a href="javascript:void(0);">SMS<span class="menu-arrow inside-submenu"></span></a>
												<ul>
													<li><a href="sms-settings.html">SMS Settings</a></li>
													<li><a href="sms-template.html">SMS Template</a></li>
												</ul>
											</li>
											<li><a href="otp-settings.html">OTP</a></li>
											<li><a href="gdpr-settings.html">GDPR Cookies</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Financial Settings</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="payment-gateway-settings.html">Payment Gateway</a></li>
											<li><a href="bank-settings-grid.html">Bank Accounts</a></li>
											<li><a href="tax-rates.html">Tax Rates</a></li>
											<li><a href="currency-settings.html">Currencies</a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"><span>Other Settings</span><span class="menu-arrow"></span></a>
										<ul>
											<li><a href="storage-settings.html">Storage</a></li>
											<li><a href="ban-ip-address.html">Ban IP Address</a></li>
										</ul>
									</li>
									<li>
									<a href="signin.html"><span>Logout</span> </a>
								</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- /Horizontal Sidebar -->

			<!-- Two Col Sidebar -->
			<div class="two-col-sidebar d-none" id="two-col-sidebar">
				<div class="sidebar sidebar-twocol">
					<div class="twocol-mini">
						<div class="sidebar-left slimscroll">
							<div class="nav flex-column align-items-center nav-pills" id="sidebar-tabs" role="tablist"
								aria-orientation="vertical">
								<a href="#" class="nav-link active" title="Dashboard" data-bs-toggle="tab" data-bs-target="#dashboard">
									<i class="ti ti-smart-home"></i>
								</a>
								<a href="#" class="nav-link " title="Super Admin" data-bs-toggle="tab" data-bs-target="#super-admin">
									<i class="ti ti-user-star"></i>
								</a>
								<a href="#" class="nav-link " title="Apps" data-bs-toggle="tab" data-bs-target="#application">
									<i class="ti ti-layout-grid-add"></i>
								</a>
								<a href="#" class="nav-link" title="Layout" data-bs-toggle="tab" data-bs-target="#layout">
									<i class="ti ti-layout-board-split"></i>
								</a>
								<a href="#" class="nav-link" title="Inventory" data-bs-toggle="tab" data-bs-target="#inventory">
									<i class="ti ti-table-plus"></i>
								</a>
								<a href="#" class="nav-link" title="Stock" data-bs-toggle="tab" data-bs-target="#stock">
									<i class="ti ti-stack-3"></i>
								</a>
								<a href="#" class="nav-link" title="Sales" data-bs-toggle="tab" data-bs-target="#sales">
									<i class="ti ti-device-laptop"></i>
								</a>
								<a href="#" class="nav-link" title="Finance" data-bs-toggle="tab" data-bs-target="#finance">
									<i class="ti ti-shopping-cart-dollar"></i>
								</a>
								<a href="#" class="nav-link" title="Hrm" data-bs-toggle="tab" data-bs-target="#hrm">
									<i class="ti ti-cash"></i>
								</a>
								<a href="#" class="nav-link" title="Reports" data-bs-toggle="tab" data-bs-target="#reports">
									<i class="ti ti-license"></i>
								</a>
								<a href="#" class="nav-link" title="Pages" data-bs-toggle="tab" data-bs-target="#pages">
									<i class="ti ti-page-break"></i>
								</a>
								<a href="#" class="nav-link" title="Settings" data-bs-toggle="tab" data-bs-target="#settings">
									<i class="ti ti-lock-check"></i>
								</a>
								<a href="#" class="nav-link " title="UI Elements" data-bs-toggle="tab" data-bs-target="#ui-elements">
									<i class="ti ti-ux-circle"></i>
								</a>
								<a href="#" class="nav-link" title="Extras" data-bs-toggle="tab" data-bs-target="#extras">
									<i class="ti ti-vector-triangle"></i>
								</a>
							</div>
						</div>
					</div>
					<div class="sidebar-right">
						<!-- Logo -->
						<div class="sidebar-logo">
							<a href="index.html" class="logo logo-normal">
								<img src="{{ asset('pos/assets2/assets/img/logo.svg')}}" alt="Img">
							</a>
							<a href="index.html" class="logo logo-white">
								<img src="{{ asset('pos/assets2/assets/img/logo-white.svg')}}" alt="Img">
							</a>
							<a href="index.html" class="logo-small">
								<img src="{{ asset('pos/assets2/img/logo-small.png')}}" alt="Img">
							</a>
						</div>
						<!-- /Logo -->
						<div class="sidebar-scroll">
							<div class="text-center rounded bg-light p-3 mb-3 border">
								<div class="avatar avatar-lg online mb-3">
									<img src="" alt="Img" class="img-fluid rounded-circle">
								</div>
								<h6 class="fs-14 fw-bold mb-1">Adrian Herman</h6>
								<p class="fs-12 mb-0">System Admin</p>
							</div>
							<div class="tab-content" id="v-pills-tabContent">
								<div class="tab-pane fade show active" id="dashboard">
									<ul>
										<li class="menu-title"><span>MAIN</span></li>
										<li><a href="index.html" class="active">Admin Dashboard</a></li>
										<li><a href="admin-dashboard.html">Admin Dashboard 2</a></li>
										<li><a href="sales-dashboard.html">Sales Dashboard</a></li>
									</ul>
								</div>
								<div class="tab-pane fade" id="super-admin">
									<ul>
										<li class="menu-title"><span>SUPER ADMIN</span></li>
										<li><a href="dashboard.html">Dashboard</a></li>
										<li><a href="companies.html">Companies</a></li>
										<li><a href="subscription.html">Subscriptions</a></li>
										<li><a href="packages.html">Packages</a></li>
										<li><a href="domain.html">Domain</a></li>
										<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
									</ul>
								</div>
								<div class="tab-pane fade" id="application">
									<ul>
										<li><a href="chat.html">Chat</a></li>
										<li class="submenu submenu-two"><a href="javascript:void(0);">Call<span class="menu-arrow inside-submenu"></span></a>
											<ul>
												<li><a href="video-call.html">Video Call</a></li>
												<li><a href="audio-call.html">Audio Call</a></li>
												<li><a href="call-history.html">Call History</a></li>
											</ul>
										</li>
										<li><a href="calendar.html">Calendar</a></li>
										<li><a href="contacts.html">Contacts</a></li>
										<li><a href="email.html">Email</a></li>
										<li><a href="todo.html">To Do</a></li>
										<li><a href="notes.html">Notes</a></li>
										<li><a href="file-manager.html">File Manager</a></li>
										<li><a href="projects.html">Projects</a></li>
										<li class="submenu submenu-two"><a href="javascript:void(0);">Ecommerce<span class="menu-arrow inside-submenu"></span></a>
											<ul>
												<li><a href="products.html">Products</a></li>
												<li><a href="orders.html">Orders</a></li>
												<li><a href="customers.html">Customers</a></li>
												<li><a href="cart.html">Cart</a></li>
												<li><a href="checkout.html">Checkout</a></li>
												<li><a href="wishlist.html">Wishlist</a></li>
												<li><a href="reviews.html">Reviews</a></li>
											</ul>
										</li>
										<li><a href="social-feed.html">Social Feed</a></li>
										<li><a href="search-list.html">Search List</a></li>
									</ul>
								</div>
								<div class="tab-pane fade" id="layout">
									<ul>
										<li class="menu-title"><span>LAYOUT</span></li>
										<li><a href="layout-horizontal.html">Horizontal</a></li>
										<li><a href="layout-detached.html">Detached</a></li>
										<li><a href="layout-two-column.html">Two Column</a></li>
										<li><a href="layout-hovered.html">Hovered</a></li>
										<li><a href="layout-boxed.html">Boxed</a></li>
										<li><a href="layout-rtl.html">RTL</a></li>
										<li><a href="layout-dark.html">Dark</a></li>
									</ul>
								</div>
								<div class="tab-pane fade" id="inventory">
									<ul>
										<li class="menu-title"><span>Inventory</span></li>
										<li><a href="product-list.html"><span>Products</span></a></li>
										<li><a href="add-product.html"><span>Create Product</span></a></li>
										<li><a href="expired-products.html"><span>Expired Products</span></a></li>
										<li><a href="low-stocks.html"><span>Low Stocks</span></a></li>
										<li><a href="category-list.html"><span>Category</span></a></li>
										<li><a href="sub-categories.html"><span>Sub Category</span></a></li>
										<li><a href="brand-list.html"><span>Brands</span></a></li>
										<li><a href="units.html"><span>Units</span></a></li>
										<li><a href="varriant-attributes.html"><span>Variant Attributes</span></a></li>
										<li><a href="warranty.html"><span>Warranties</span></a></li>
										<li><a href="barcode.html"><span>Print Barcode</span></a></li>
										<li><a href="qrcode.html"><span>Print QR Code</span></a></li>
									</ul>
								</div>
								<div class="tab-pane fade" id="stock">
									<ul>
										<li class="menu-title"><span>Stock</span></li>
										<li><a href="manage-stocks.html"><span>Manage Stock</span></a></li>
										<li><a href="stock-adjustment.html"><span>Stock Adjustment</span></a></li>
										<li><a href="stock-transfer.html"><span>Stock Transfer</span></a></li>
									</ul>
								</div>
								<div class="tab-pane fade" id="sales">
									<ul>
										<li class="menu-title"><span>Sales</span></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Sales</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="online-orders.html">Online Orders</a></li>
												<li><a href="pos-orders.html">POS Orders</a></li>
											</ul>
										</li>
										<li><a href="invoice.html"><span>Invoices</span></a></li>
										<li><a href="sales-returns.html"><span>Sales Return</span></a></li>
										<li><a href="quotation-list.html"><span>Quotation</span></a></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>POS</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="pos.html">POS 1</a></li>
												<li><a href="pos-2.html">POS 2</a></li>
												<li><a href="pos-3.html">POS 3</a></li>
												<li><a href="pos-4.html">POS 4</a></li>
												<li><a href="pos-5.html">POS 5</a></li>
											</ul>
										</li>
									</ul>
								</div>
								<div class="tab-pane fade" id="finance">
									<ul>
										<li class="menu-title"><span>FINANCE & ACCOUNTS</span></li>
										<li><a href="coupons.html"><span>Coupons</span></a></li>
										<li><a href="gift-cards.html"><span>Gift Cards</span></a></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Discount</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="discount-plan.html">Discount Plan</a></li>
												<li><a href="discount.html">Discount</a></li>
											</ul>
										</li>
										<li><a href="purchase-list.html"><span>Purchases</span></a></li>
										<li><a href="purchase-order-report.html"><span>Purchase Order</span></a></li>
										<li><a href="purchase-returns.html"><span>Purchase Return</span></a></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Expenses</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="expense-list.html">Expenses</a></li>
												<li><a href="expense-category.html">Expense Category</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Income</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="income.html">Income</a></li>
												<li><a href="income-category.html">Income Category</a></li>
											</ul>
										</li>
										<li><a href="account-list.html"><span>Bank Accounts</span></a></li>
										<li><a href="money-transfer.html"><span>Money Transfer</span></a></li>
										<li><a href="balance-sheet.html"><span>Balance Sheet</span></a></li>
										<li><a href="trial-balance.html"><span>Trial Balance</span></a></li>
										<li><a href="cash-flow.html"><span>Cash Flow</span></a></li>
										<li><a href="account-statement.html"><span>Account Statement</span></a></li>
										<li><a href="customers.html"><span>Customers</span></a></li>
										<li><a href="billers.html"><span>Billers</span></a></li>
										<li><a href="suppliers.html"><span>Suppliers</span></a></li>
										<li><a href="store-list.html"><span>Stores</span></a></li>
										<li><a href="warehouse.html"><span>Warehouses</span></a></li>							
									</ul>
								</div>
								<div class="tab-pane fade" id="hrm">
									<ul>
										<li class="menu-title"><span>Hrm</span></li>
										<li><a href="employees-grid.html"><span>Employees</span></a></li>
										<li><a href="department-grid.html"><span>Departments</span></a></li>
										<li><a href="designation.html"><span>Designation</span></a></li>
										<li><a href="shift.html"><span>Shifts</span></a></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Attendence</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="attendance-employee.html">Employee</a></li>
												<li><a href="attendance-admin.html">Admin</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Leaves</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="leaves-admin.html">Admin Leaves</a></li>
												<li><a href="leaves-employee.html">Employee Leaves</a></li>
												<li><a href="leave-types.html">Leave Types</a></li>
											</ul>
										</li>
										<li><a href="holidays.html"><span>Holidays</span></a>
										</li>
										<li class="submenu">
											<a href="employee-salary.html"><span>Payroll</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="employee-salary.html">Employee Salary</a></li>
												<li><a href="payslip.html">Payslip</a></li>
											</ul>
										</li>
									</ul>
								</div>
								<div class="tab-pane fade" id="reports">
									<ul>
										<li class="menu-title"><span>Reports</span></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Sales Report</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="sales-report.html">Sales Report</a></li>
												<li><a href="best-seller.html">Best Seller</a></li>
											</ul>
										</li>
										<li><a href="purchase-report.html"><span>Purchase report</span></a></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Inventory Report</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="inventory-report.html">Inventory Report</a></li>
												<li><a href="stock-history.html">Stock History</a></li>
												<li><a href="sold-stock.html">Sold Stock</a></li>
											</ul>
										</li>
										<li><a href="invoice-report.html"><span>Invoice Report</span></a></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Supplier Report</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="supplier-report.html">Supplier Report</a></li>
												<li><a href="supplier-due-report.html">Supplier Due Report</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Customer Report</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="customer-report.html">Customer Report</a></li>
												<li><a href="customer-due-report.html">Customer Due Report</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Product Report</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="product-report.html">Product Report</a></li>
												<li><a href="product-expiry-report.html">Product Expiry Report</a></li>
												<li><a href="product-quantity-alert.html">Product Quantity Alert</a></li>
											</ul>
										</li>
										<li><a href="expense-report.html"><span>Expense Report</span></a></li>
										<li><a href="income-report.html"><span>Income Report</span></a></li>
										<li><a href="tax-reports.html"><span>Tax Report</span></a></li>
										<li><a href="profit-and-loss.html"><span>Profit & Loss</span></a></li>
										<li><a href="annual-report.html"><span>Annual Report</span></a></li>
									</ul>
								</div>
								<div class="tab-pane fade" id="pages">
									<ul>
										<li class="menu-title"><span>Pages</span></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Pages</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="pages.html">Pages</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Blog</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="all-blog.html">All Blog</a></li>
												<li><a href="blog-tag.html">Blog Tags</a></li>
												<li><a href="blog-categories.html">Categories</a></li>
												<li><a href="blog-comments.html">Blog Comments</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Location</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="countries.html">Countries</a></li>
												<li><a href="states.html">States</a></li>
												<li><a href="cities.html">Cities</a></li>
											</ul>
										</li>
										<li><a href="testimonials.html"><span>Testimonials</span></a></li>
										<li><a href="faq.html"><span>FAQ</span></a></li>
										<li><a href="users.html"><span>Users</span></a></li>
										<li><a href="roles-permissions.html"><span>Roles & Permissions</span></a></li>
										<li><a href="delete-account.html"><span>Delete Account Request</span></a></li>
										<li><a href="profile.html"><span>Profile</span></a></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Authentication</span><span class="menu-arrow"></span></a>
											<ul>
												<li class="submenu submenu-two"><a href="javascript:void(0);">Login<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="signin.html">Cover</a></li>
														<li><a href="signin-2.html">Illustration</a></li>
														<li><a href="signin-3.html">Basic</a></li>
													</ul>
												</li>
												<li class="submenu submenu-two"><a href="javascript:void(0);">Register<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="register.html">Cover</a></li>
														<li><a href="register-2.html">Illustration</a></li>
														<li><a href="register-3.html">Basic</a></li>
													</ul>
												</li>
												<li class="submenu submenu-two"><a href="javascript:void(0);">Forgot Password<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="forgot-password.html">Cover</a></li>
														<li><a href="forgot-password-2.html">Illustration</a></li>
														<li><a href="forgot-password-3.html">Basic</a></li>
													</ul>
												</li>
												<li class="submenu submenu-two"><a href="javascript:void(0);">Reset Password<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="reset-password.html">Cover</a></li>
														<li><a href="reset-password-2.html">Illustration</a></li>
														<li><a href="reset-password-3.html">Basic</a></li>
													</ul>
												</li>
												<li class="submenu submenu-two"><a href="javascript:void(0);">Email Verification<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="email-verification.html">Cover</a></li>
														<li><a href="email-verification-2.html">Illustration</a></li>
														<li><a href="email-verification-3.html">Basic</a></li>
													</ul>
												</li>
												<li class="submenu submenu-two"><a href="javascript:void(0);">2 Step Verification<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="two-step-verification.html">Cover</a></li>
														<li><a href="two-step-verification-2.html">Illustration</a></li>
														<li><a href="two-step-verification-3.html">Basic</a></li>
													</ul>
												</li>
												<li><a href="lock-screen.html">Lock Screen</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Error Pages</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="error-404.html">404 Error </a></li>
												<li><a href="error-500.html">500 Error </a></li>
											</ul>
										</li>
										<li>
											<a href="blank-page.html"><span>Blank Page</span> </a>
										</li>
										<li>
											<a href="pricing.html"><span>Pricing</span> </a>
										</li>
										<li>
											<a href="coming-soon.html"><span>Coming Soon</span> </a>
										</li>
										<li>
											<a href="under-maintenance.html"><span>Under Maintenance</span> </a>
										</li>
									</ul>
								</div>
								<div class="tab-pane fade" id="settings">
									<ul>
										<li class="menu-title"><span>Settings</span></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>General Settings</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="general-settings.html">Profile</a></li>
												<li><a href="security-settings.html">Security</a></li>
												<li><a href="notification.html">Notifications</a></li>
												<li><a href="connected-apps.html">Connected Apps</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Website Settings</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="system-settings.html">System Settings</a></li>
												<li><a href="company-settings.html">Company Settings </a></li>
												<li><a href="localization-settings.html">Localization</a></li>
												<li><a href="prefixes.html">Prefixes</a></li>
												<li><a href="preference.html">Preference</a></li>
												<li><a href="appearance.html">Appearance</a></li>
												<li><a href="social-authentication.html">Social Authentication</a></li>
												<li><a href="language-settings.html">Language</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);">
												<span>App Settings</span><span class="menu-arrow"></span>
											</a>
											<ul>
												<li class="submenu submenu-two"><a href="javascript:void(0);">Invoice<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="invoice-settings.html">Invoice Settings</a></li>
														<li><a href="invoice-template.html">Invoice Template</a></li>
													</ul>
												</li>
												<li><a href="printer-settings.html">Printer</a></li>
												<li><a href="pos-settings.html">POS</a></li>
												<li><a href="custom-fields.html">Custom Fields</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);">
												<span>System Settings</span><span class="menu-arrow"></span>
											</a>
											<ul>
												<li class="submenu submenu-two"><a href="javascript:void(0);">Email<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="email-settings.html">Email Settings</a></li>
														<li><a href="email-template.html">Email Template</a></li>
													</ul>
												</li>
												<li class="submenu submenu-two"><a href="javascript:void(0);">SMS<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="sms-settings.html">SMS Settings</a></li>
														<li><a href="sms-template.html">SMS Template</a></li>
													</ul>
												</li>
												<li><a href="otp-settings.html">OTP</a></li>
												<li><a href="gdpr-settings.html">GDPR Cookies</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);">
												<span>Financial Settings</span><span class="menu-arrow"></span>
											</a>
											<ul>
												<li><a href="payment-gateway-settings.html">Payment Gateway</a></li>
												<li><a href="bank-settings-grid.html">Bank Accounts</a></li>
												<li><a href="tax-rates.html">Tax Rates</a></li>
												<li><a href="currency-settings.html">Currencies</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);">
												<span>Other Settings</span><span class="menu-arrow"></span>
											</a>
											<ul>
												<li><a href="storage-settings.html">Storage</a></li>
												<li><a href="ban-ip-address.html">Ban IP Address</a></li>
											</ul>
										</li>
										<li>
											<a href="signin.html"><span>Logout</span> </a>
										</li>
									</ul>
								</div>
								<div class="tab-pane fade" id="ui-elements">
									<ul>
										<li class="menu-title"><span>Ui Interface</span></li>
										<li class="submenu">
											<a href="javascript:void(0);">
												<span>Base UI</span><span class="menu-arrow"></span>
											</a>
											<ul>
												<li><a href="ui-alerts.html">Alerts</a></li>
												<li><a href="ui-accordion.html">Accordion</a></li>
												<li><a href="ui-avatar.html">Avatar</a></li>
												<li><a href="ui-badges.html">Badges</a></li>
												<li><a href="ui-borders.html">Border</a></li>
												<li><a href="ui-buttons.html">Buttons</a></li>
												<li><a href="ui-buttons-group.html">Button Group</a></li>
												<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
												<li><a href="ui-cards.html">Card</a></li>
												<li><a href="ui-carousel.html">Carousel</a></li>
												<li><a href="ui-colors.html">Colors</a></li>
												<li><a href="ui-dropdowns.html">Dropdowns</a></li>
												<li><a href="ui-grid.html">Grid</a></li>
												<li><a href="ui-images.html">Images</a></li>
												<li><a href="ui-lightbox.html">Lightbox</a></li>
												<li><a href="ui-media.html">Media</a></li>
												<li><a href="ui-modals.html">Modals</a></li>
												<li><a href="ui-offcanvas.html">Offcanvas</a></li>
												<li><a href="ui-pagination.html">Pagination</a></li>
												<li><a href="ui-popovers.html">Popovers</a></li>
												<li><a href="ui-progress.html">Progress</a></li>
												<li><a href="ui-placeholders.html">Placeholders</a></li>
												<li><a href="ui-rangeslider.html">Range Slider</a></li>
												<li><a href="ui-spinner.html">Spinner</a></li>
												<li><a href="ui-sweetalerts.html">Sweet Alerts</a></li>
												<li><a href="ui-nav-tabs.html">Tabs</a></li>
												<li><a href="ui-toasts.html">Toasts</a></li>
												<li><a href="ui-tooltips.html">Tooltips</a></li>
												<li><a href="ui-typography.html">Typography</a></li>
												<li><a href="ui-video.html">Video</a></li>
												<li><a href="ui-sortable.html">Sortable</a></li>
												<li><a href="ui-swiperjs.html">Swiperjs</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);">
												<span>Advanced UI</span><span class="menu-arrow"></span>
											</a>
											<ul>
												<li><a href="ui-ribbon.html">Ribbon</a></li>
												<li><a href="ui-clipboard.html">Clipboard</a></li>
												<li><a href="ui-drag-drop.html">Drag & Drop</a></li>
												<li><a href="ui-rangeslider.html">Range Slider</a></li>
												<li><a href="ui-rating.html">Rating</a></li>
												<li><a href="ui-text-editor.html">Text Editor</a></li>
												<li><a href="ui-counter.html">Counter</a></li>
												<li><a href="ui-scrollbar.html">Scrollbar</a></li>
												<li><a href="ui-stickynote.html">Sticky Note</a></li>
												<li><a href="ui-timeline.html">Timeline</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);">
												<span>Charts</span><span class="menu-arrow"></span>
											</a>
											<ul>
												<li><a href="chart-apex.html">Apex Charts</a></li>
												<li><a href="chart-c3.html">Chart C3</a></li>
												<li><a href="chart-js.html">Chart Js</a></li>
												<li><a href="chart-morris.html">Morris Charts</a></li>
												<li><a href="chart-flot.html">Flot Charts</a></li>
												<li><a href="chart-peity.html">Peity Charts</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);">
												<span>Icons</span><span class="menu-arrow"></span>
											</a>
											<ul>
												<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
												<li><a href="icon-feather.html">Feather Icons</a></li>
												<li><a href="icon-ionic.html">Ionic Icons</a></li>
												<li><a href="icon-material.html">Material Icons</a></li>
												<li><a href="icon-pe7.html">Pe7 Icons</a></li>
												<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
												<li><a href="icon-themify.html">Themify Icons</a></li>
												<li><a href="icon-weather.html">Weather Icons</a></li>
												<li><a href="icon-typicon.html">Typicon Icons</a></li>
												<li><a href="icon-flag.html">Flag Icons</a></li>
												<li><a href="icon-tabler.html">Tabler Icons</a></li>
												<li><a href="icon-bootstrap.html">Bootstrap Icons</a></li>
												<li><a href="icon-remix.html">Remix Icons</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);">
												<span>Forms</span><span class="menu-arrow"></span>
											</a>
											<ul>
												<li class="submenu submenu-two">
													<a href="javascript:void(0);">Form Elements<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="form-basic-inputs.html">Basic Inputs</a></li>
														<li><a href="form-checkbox-radios.html">Checkbox & Radios</a></li>
														<li><a href="form-input-groups.html">Input Groups</a></li>
														<li><a href="form-grid-gutters.html">Grid & Gutters</a></li>
														<li><a href="form-select.html">Form Select</a></li>
														<li><a href="form-mask.html">Input Masks</a></li>
														<li><a href="form-fileupload.html">File Uploads</a></li>
													</ul>
												</li>
												<li class="submenu submenu-two">
													<a href="javascript:void(0);">Layouts<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="form-horizontal.html">Horizontal Form</a></li>
														<li><a href="form-vertical.html">Vertical Form</a></li>
														<li><a href="form-floating-labels.html">Floating Labels</a></li>
													</ul>
												</li>
												<li><a href="form-validation.html">Form Validation</a></li>
												<li><a href="form-select2.html">Select2</a></li>
												<li><a href="form-wizard.html">Form Wizard</a></li>
												<li><a href="form-pickers.html">Form Picker</a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Tables</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="tables-basic.html">Basic Tables </a></li>
												<li><a href="data-tables.html">Data Table </a></li>
											</ul>
										</li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Maps</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="maps-vector.html">Vector</a></li>
												<li><a href="maps-leaflet.html">Leaflet</a></li>
											</ul>
										</li>
									</ul>
								</div>
								<div class="tab-pane fade" id="extras">
									<ul>
										<li class="menu-title"><span>Help</span></li>
										<li><a href="javascript:void(0);"><span>Documentation</span></a></li>
										<li><a href="javascript:void(0);"><span>Changelog v2.0.9</span></a></li>
										<li class="submenu">
											<a href="javascript:void(0);"><span>Multi Level</span><span class="menu-arrow"></span></a>
											<ul>
												<li><a href="javascript:void(0);">Level 1.1</a></li>
												<li class="submenu submenu-two"><a href="javascript:void(0);">Level 1.2<span class="menu-arrow inside-submenu"></span></a>
													<ul>
														<li><a href="javascript:void(0);">Level 2.1</a></li>
														<li class="submenu submenu-two submenu-three"><a href="javascript:void(0);">Level 2.2<span class="menu-arrow inside-submenu inside-submenu-two"></span></a>
															<ul>
																<li><a href="javascript:void(0);">Level 3.1</a></li>
																<li><a href="javascript:void(0);">Level 3.2</a></li>
															</ul>
														</li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /Two Col Sidebar -->
			
			<div class="page-wrapper pos-pg-wrapper ms-0">
				<div class="content pos-design p-0">

					<div class="row align-items-start pos-wrapper">

						<!-- Products -->
						<div class="col-md-12 col-lg-6">
							<div class="pos-categories tabs_wrapper">
								<div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
									<div>
										<h5 class="mb-1">Welcome,  {{session('user_name')}}</h5>
										<p>{{ \Carbon\Carbon::now()->format('F d, Y') }}</p>
									</div>
									<div class="d-flex align-items-center flex-wrap gap-3">
										<div class="input-icon-start pos-search position-relative">
											<span class="input-icon-addon">
												<i class="ti ti-search"></i>
											</span>
											<input type="text" id="search-product" class="form-control" placeholder="Search Product">

										</div>
										<a href="#" class="btn btn-sm btn-primary">{{session('user_branch')}}</a>
									</div>
								</div>
									<ul class="tabs owl-carousel pos-category ">
									
                                    @foreach ($productCategories as $productCategory)
									<li id="all" class="active productCardBox "  data-search_name="{{ $productCategory->category_name }}" data-id="{{ $productCategory->id }}">
										<a href="javascript:void(0);">
											<img src="{{ asset($productCategory->image) }}" alt="Categories">
										</a>
										<h6><a href="javascript:void(0);"> {{ $productCategory->category_name }}</a></h6>
										<span>{{ $productCategory->total_quantity }} Items</span>
									</li>
                                    @endforeach     

								</ul>
								{{-- <ul class="tabs owl-carousel pos-category4 mb-4">
									<li id="all" class="active">
										<h6><a href="javascript:void(0);">All Categories</a></h6>
									</li>
									<li id="headphones">
										<h6><a href="javascript:void(0);">Headphones</a></h6>
									</li>
									<li id="shoes">
										<h6><a href="javascript:void(0);">Shoes</a></h6>
									</li>
									<li id="mobiles">
										<h6><a href="javascript:void(0);">Mobiles</a></h6>
									</li>
									<li id="watches">
										<h6><a href="javascript:void(0);">Watches</a></h6>
									</li>
									<li id="laptops">
										<h6><a href="javascript:void(0);">Laptops</a></h6>
									</li>
									<li id="homeneed">
										<h6><a href="javascript:void(0);">Home Needs</a></h6>
									</li>
									<li id="headphone">
										<h6><a href="javascript:void(0);">Headphones</a></h6>
									</li>
								</ul> --}}
								<div class="pos-products">
									<div class="tabs_container ">
										<div  class="tab_content active" data-tab="all">
														<div id="loadingSpinner" style="display: none; text-align: center;">
  											<div class="spinner-border text-primary" role="status">
    											<span class="visually-hidden">Loading...</span>
  											</div>
										</div>
											<div class="row g-3 productListnew">
												{{-- <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
													<div class="product-info card" style="padding: 10px;">
														<a href="javascript:void(0);" class="pro-img">
															<img src="{{ asset('pos/assets2/img/products/pos-product-01.png')}}" alt="Products">
															<span><i class="ti ti-circle-check-filled"></i></span>
														</a>
														<h6 class="cat-name"><a href="javascript:void(0);">Mobiles</a></h6>
														<h6 class="product-name"><a href="javascript:void(0);">IPhone 14 64GB</a></h6>
														<div class="d-flex align-items-center justify-content-between price">
															<span>30 Pcs</span>
															<p>$15800</p>
														</div>
													</div>
												</div> --}}
												{{-- <div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-01.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Charger Cable</a></h6>
                                                            <div class="text-center">
                                                                <span class="fs-14 fw-semibold text-gray-6">$30</span>
                                                            </div>
                                                        </div>
													</div>
												</div> --}}
												{{-- <div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card active">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-02.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Apple Airpods 2</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$120</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-03.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Vacuum Cleaner</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$800</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-04.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Realme 8 Pro</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$700</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-05.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Vacuum Robot</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$600</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-06.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Apple Watch Series 9</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$300</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-07.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Apple Watch Series 9</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$300</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-08.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Bracelet</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$1430</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-09.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">YETI Flask</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$1560</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-10.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Osmo Med Kit</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$410</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-11.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Celestique Perfume</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$150</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-12.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Dell XPS 13</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$1140</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-13.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Cheese Snack</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$15</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-14.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Blue Boot Shoes</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$320</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-15.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Sonic Aura X7</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$230</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-16.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Brown Formal Shoes</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$160</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-17.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Apple Iphone 13 </a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$1200</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-18.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">PixelCrafter 3000</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$900</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-19.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Citrify Orange Juice</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$80</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															<img src="assets/img/products/pos-product-20.jpg" alt="Products">
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Aroma Coffee Maker</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$170</h6>
                                                            </div>
                                                        </div>
													</div>
												</div> --}}
											</div>
										</div>
										<div  class="tab_content" data-tab="headphones">
											<div class="row g-3">
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-02.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Apple Airpods 2</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$120</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-15.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Sonic Aura X7</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$1200</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
											</div>
										</div>

										<div  class="tab_content" data-tab="shoes">
											<div class="row g-3">
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-14.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Blue Boot Shoes</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$320</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-16.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Brown Formal Shoes</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$160</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
											</div>
										</div>

										<div  class="tab_content" data-tab="mobiles">
											<div class="row g-3">
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-01.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Charger Cable</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$30</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-04.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Realme 8 Pro</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$700</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-17.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Apple Iphone 13 </a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$1200</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
											</div>
										</div>

										<div  class="tab_content" data-tab="watches">
											<div class="row g-3">
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-07.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Apple Watch Series 9</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$300</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
											</div>
										</div>

										<div  class="tab_content" data-tab="laptops">
											<div class="row row-cols-xxl-5">
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-12.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Dell XPS 13</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$1140</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-01.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Charger Cable</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$30</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
											</div>
										</div>

										<div  class="tab_content" data-tab="homeneed">
											<div class="row row-cols-xxl-5">
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-03.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Vacuum Cleaner</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$800</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-05.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Vacuum Robot</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$600</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-13.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Cheese Snack</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$15</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-19.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Citrify Orange Juice</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$80</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-20.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Aroma Coffee Maker</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$170</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
											</div>
										</div>
										<div  class="tab_content" data-tab="headphone">
											<div class="row row-cols-xxl-5">
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-02.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Apple Airpods 2</a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$120</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
												<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3">
													<div class="product-info card">
														<a href="javascript:void(0);" class="product-image">
															{{-- <img src="assets/img/products/pos-product-15.jpg" alt="Products"> --}}
														</a>
                                                        <div class="product-content text-center">
                                                            <h6 class="fs-14 fw-bold mb-1"><a href="javascript:void(0);">Apple Iphone 13 </a></h6>
                                                            <div class="text-center">
                                                                <h6 class="fs-14 fw-semibold text-gray-6">$1200</h6>
                                                            </div>
                                                        </div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- /Products -->

						<!-- Order Details -->
						<div class="col-md-12 col-lg-6 ps-0 theiaStickySidebar">
							<aside class="product-order-list">
								<div class="customer-info">
									<div class="order-head bg-light d-flex align-items-center justify-content-between w-100 mb-3">
										<div>
											<h3>Order List</h3>
											<span>Transaction ID : <span class="sale_reference"></span></span>
										</div>
										<div>
											<a class="link-danger fs-16" href="javascript:void(0);"><i class="ti ti-trash-x-filled"></i></a>
										</div>
									</div>
									 <div class="search-bar">
                                    <input 
                                        type="text" 
                                        id="searchInput" 
                                        class="form-control w-100 formInputField" 
                                        placeholder="Search by name or code..." 
                                        autocomplete="off"
                                    />
                                    <ul id="suggestionList" class="suggestion-list" style="width:92%; display: none; list-style: none; border: 1px solid #ccc; padding: 5px; max-height: 200px; overflow-y: auto;">
                                        <!-- Suggestions will appear here -->
                                    </ul>
                                </div>
								<br>
								<div class="row g-3 " >
										<div class="col-md-12">
											<div class="d-flex align-items-center gap-2">
												<div class="w-100">
													<select name="simple" data-placeholder="Select something please .." id="customer">
													@foreach ($Costomers as $Costomer)  
    													<option value="{{ $Costomer->id }}" 
        													{{ $Costomer->name == 'Walking Customer' ? 'selected' : '' }}>
        													{{ $Costomer->name }}
    													</option>
												@endforeach

										</select>
												</div>
												<a href="#" class="btn btn-primary btn-icon" data-bs-toggle="modal" data-bs-target="#create"><i class="ti ti-user-plus"></i></a>
											</div>
										</div>
								</div>
								<br>

									<div class="row g-3 SalesCreate" style="display: none;">
										<div class="col-md-6">
											<div class="input-icon-end position-relative">
												<input type="number" class="form-control" id="Quantity" min="1" value="1" placeholder="Quantity">
											
											</div>
										</div>
										<div class="col-md-6">
										<input type="text" class="form-control itemPrices" id="amount" placeholder="Brand Price">
										</div>

										<div class="col-md-12 form-group">
										<p>
											<i class="fa fa-certificate" aria-hidden="true"></i>
											Warranty 
										</p>
  											<div class="inputGroup addWarranty" style="box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;">
    											<input id="option1" name="option1" type="checkbox"/>
    											<label for="option1" style="color: #3C454C;">select Add Warranty</label>
  											</div>
									</div>
									<div class="col-md-12 form-group" id="warrantyGroup" style="display: none;">
										<p>
											<i class="fa fa-calendar"></i>
											Warranty period
										</p>
										<select name="Warranty" id="Warrantyperiod" class="form-control">
											<option value=" ">Select period</option>
											<option value="01 Month">01 Month</option>
											<option value="03 Months">03 Months</option>
											<option value="06 Months">06 Months</option>
											<option value="01 Year">01 Year</option>
										</select>
									</div>
											<button class="button-61" role="button" id="selectProduct" style="position: relative; top:20px;">SELECT PRODUCT</button>
									
										{{-- <div class="col-md-6">											
											<select class="select">
												<option>USD</option>
												<option>EURO</option>
											</select>
										</div>
										<div class="col-md-6">
											<input type="text" class="form-control" placeholder="Currency Exchange Rate">
										</div> --}}
									</div>
								</div>								
								<div class="product-added block-section">
									<div class="d-flex align-items-center justify-content-between gap-3 mb-3">
										<h5 class="d-flex align-items-center mb-0">Order Details</h5>
										<div class="badge bg-light text-gray-9 fs-12 fw-semibold py-2 border rounded">Items : <span class="text-teal" id="totalQuantity">0</span></div>
									</div>
									<div class="product-wrap">
										{{-- <div class="empty-cart">
											<div class="mb-1">
												<img src="assets/img/icons/empty-cart.svg" alt="img">
											</div>
											<p class="fw-bold">No Products Selected</p>
										</div> --}}
										<div class=" border-0 p-0">
											<div class="table-responsive" id="pdf-content">
												<table class="table table-borderless" id="orderTable" >
													<thead>
														<tr>
															<th class="bg-transparent fw-bold">Product</th>
															
															<th class="bg-transparent fw-bold">Price</th>
															<th class="bg-transparent fw-bold">QTY</th>
															<th class="bg-transparent fw-bold">Sub Total</th>
															<th class="bg-transparent fw-bold text-end"></th>
														</tr>
													</thead>
													<tbody>
														
														{{-- <tr>
															<td>
																<h6 class="fs-16 fw-medium mb-1"><a href="#" data-bs-toggle="modal" data-bs-target="#products">Red Boot Shoes</a></h6>
																In Stock: 04
															</td>
															<td>
																<input type="text" class="form-control">
															</td>
															<td class="fw-bold">$600</td>
															<td>
																<div class="qty-item m-0">
																	<a href="javascript:void(0);" class="dec d-flex justify-content-center align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" title="minus"><i data-feather="minus-circle" class="feather-14"></i></a>
																	<input type="text" class="form-control text-center" name="qty" value="3">
																	<a href="javascript:void(0);" class="inc d-flex justify-content-center align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" title="plus"><i data-feather="plus-circle" class="feather-14"></i></a>
																</div>
															</td>
															<td class="fw-bold">$600</td>
															<td class="text-end">
																<a class="btn-icon delete-icon" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#delete">
																	<i class="ti ti-trash"></i>
																</a>
															</td>
														</tr> --}}
													</tbody>
												</table>
											</div>
										</div>										
									</div>
								</div>
								<div class="block-section order-method bg-light m-0">									
									<div class="order-total">
										<div class="table-responsive">
											<table class="table table-borderless">
												<tr>
													<td>Sub Total</td>
													<td class="text-end" id="Subtotal"></td>
												</tr>

											
													<tr>
													<td>DISCOUNT(Amount)<a href="#" class="ms-3 link-default" ></a></td>
													<td style="text-end width: ;text-align: right;">
  														<input type="number" class="form-control border-dark" id="discountAmount" style="width: 120px; position: relative; right: -160px;">
													</td>
												</tr>
												<tr>
													<td>DISCOUNT(0%)<a href="#" class="ms-3 link-default"  ></a></td>
													<td style="text-end width: ;text-align: right;">
  														<input type="number" class="form-control border-dark" id="discount" style="width: 120px; position: relative; right: -160px;">
													</td>
												</tr>
												<tr>
													<td>Tax & Other Chargers<a href="#" class="ms-3 link-default"  data-bs-toggle="modal" data-bs-target="#shipping-cost"><i class="ti ti-edit"></i></a></td>
													<td class="text-end" id="OtherCharges">0</td>
												</tr>
												<tr>
													<td>Total Items Cost<a href="#" class="ms-3 link-default"  data-bs-toggle="modal" data-bs-target="#order-tax"></a></td>
													<td class="text-end" id="totalCostForItems">0</td>
												</tr>
												{{-- <tr>
													<td>Coupon<a href="#" class="ms-3 link-default"  data-bs-toggle="modal" data-bs-target="#coupon-code"><i class="ti ti-edit"></i></a></td>
													<td class="text-end">$25</td>
												</tr> --}}
												<tr>
													<td><span class="text-danger">Total Profit</span><a href="#" class="ms-3 link-default"  data-bs-toggle="modal" data-bs-target="#discount"></a></td>
													<td class="text-danger text-end" id="finaltotalProfit">0</td>
												</tr>
												<tr>
													<td>Grand Total</td>
													<td class="text-end TOTALSALEAMOUNT" id="TOTAL"></td>
												</tr>
											</table>
										</div>
									</div>			
									<div class="row gx-2">
										<div class="col-sm-4">
											{{-- <a href="javascript:void(0);" class="btn btn-orange d-flex align-items-center justify-content-center w-100 mb-2" data-bs-toggle="modal" data-bs-target="#hold-order" id="DraftOrder" data-type="DraftOrder"><i  class="ti ti-player-pause me-2"></i>Hold</a> --}}
											<a href="javascript:void(0);" class="btn btn-orange d-flex align-items-center justify-content-center w-100 mb-2"  id="DraftOrder" data-type="DraftOrder"><i  class="ti ti-player-pause me-2"></i>Hold</a>
											<a href="javascript:void(0);" class="btn btn-secondary d-flex align-items-center justify-content-center w-100 mb-2" data-bs-toggle="modal" data-bs-target="#orders" ><i class="ti ti-shopping-cart me-2"></i>View Orders</a>
										</div>
										<div class="col-sm-4">
											<a href="javascript:void(0);" class="btn btn-info d-flex align-items-center justify-content-center w-100 mb-2"><i  class="ti ti-trash me-2"></i>Void</a>
											<a href="javascript:void(0);"  class="btn btn-indigo d-flex align-items-center justify-content-center w-100 mb-2" data-bs-toggle="modal" data-bs-target="#reset"><i class="ti ti-reload me-2"></i>Vat Invoice</a>
										</div>
										<div class="col-sm-4">
											<a href="javascript:void(0);" class="btn btn-cyan d-flex align-items-center justify-content-center w-100 mb-2" data-bs-toggle="modal" data-bs-target="#print-receipt" id="printInvoice"><i  class="ti ti-cash-banknote me-2" id="printbiller"></i>Payment</a>
											{{-- <a href="javascript:void(0);" class="btn btn-danger d-flex align-items-center justify-content-center w-100 mb-2" data-bs-toggle="modal" data-bs-target="#recents"><i class="ti ti-refresh-dot me-2"></i>Transaction</a> --}}
											<a href="javascript:void(0);" id="downloadPdfBtn" class="btn btn-danger d-flex align-items-center justify-content-center w-100 mb-2">
  												<i class="ti ti-download me-2"></i>Pdf
											</a>
										</div>
									</div>									
								</div>
								<div class="block-section payment-method">
									<h5 class="mb-2">Select Payment</h5>
									<div class="row align-items-center justify-content-center methods g-2 mb-4">
										<div class="col-sm-6 col-md-4 col-xl d-flex">
											<a href="javascript:void(0);" class="payment-item flex-fill" data-bs-toggle="modal" data-bs-target="#payment-cash">
												<img src="{{ asset('pos/assets2/img/icons/cash-icon.svg')}}" alt="img">
												<p class="fw-medium">Cash</p>
											</a>
										</div>
										<div class="col-sm-6 col-md-4 col-xl d-flex">
											<a href="javascript:void(0);" class="payment-item flex-fill" data-bs-toggle="modal" data-bs-target="#payment-card">
												<img src="{{ asset('pos/assets2/img/icons/card.svg')}}"  alt="img">
												<p class="fw-medium">Card</p>
											</a>
										</div>
                                        <div class="col-sm-6 col-md-4 col-xl d-flex">
											<a href="javascript:void(0);" class="payment-item flex-fill" data-bs-toggle="modal" data-bs-target="#payment-points">
												<img src="{{ asset('pos/assets2/img/icons/points.svg')}}" alt="img">
												<p class="fw-medium">Points</p>
											</a>
										</div>
                                        <div class="col-sm-6 col-md-4 col-xl d-flex">
											<a href="javascript:void(0);" class="payment-item flex-fill" data-bs-toggle="modal" data-bs-target="#payment-deposit">
												<img src="{{ asset('pos/assets2/img/icons/deposit.svg')}}" alt="img">
												<p class="fw-medium">Deposit</p>
											</a>
										</div>
                                        <div class="col-sm-6 col-md-4 col-xl d-flex">
											<a href="javascript:void(0);" class="payment-item flex-fill" data-bs-toggle="modal" data-bs-target="#payment-cheque">
												<img src="{{ asset('pos/assets2/img/icons/cheque.svg')}}" alt="img">
												<p class="fw-medium">Cheque</p>
											</a>
										</div>
									</div>
                                    <div class="btn-block m-0">
                                        <a class="btn btn-teal w-100" href="javascript:void(0);" id="finalSubmission" data-type="Sale">
                                            SUBMIT
                                        </a>
                                    </div>
								</div>
							</aside>
						</div>
						<!-- /Order Details -->

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

		</div>
		<!-- /Main Wrapper -->

		<!-- Payment Completed -->
		<div class="modal fade modal-default" id="payment-completed" aria-labelledby="payment-completed">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-body p-0">
						<div class="success-wrap text-center">
							<form action="https://dreamspos.dreamstechnologies.com/html/template/pos-5.html">
								<div class="icon-success bg-success text-white mb-2">
									<i class="ti ti-check"></i>
								</div>
								<h3 class="mb-2">Payment Completed</h3>
								<p class="mb-3">Do you want to Print Receipt for the Completed Order</p>
								<div class="d-flex align-items-center justify-content-center gap-2 flex-wrap">
									<button type="button" class="btn btn-md btn-secondary" data-bs-toggle="modal" data-bs-target="#print-receipt">Print Receipt<i class="feather-arrow-right-circle icon-me-5"></i></button>
									<button type="submit" class="btn btn-md btn-primary">Next Order</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Payment Completed -->

		<!-- Print Receipt -->
		<div class="modal fade modal-default" id="print-receipt" aria-labelledby="print-receipt">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-body" id="receipt-content">
						<div class="icon-head text-center">
							<a href="javascript:void(0);">
								<img src="{{ asset('images/innoLogo.png')}}" width="100" height="30" alt="Receipt Logo">
							</a>
						</div>
						<div class="text-center info text-center">
							<h6>Twintech</h6>
							<h6>{{$branch->branch_name}}</h6>
							 <br>
							{{-- <p class="mb-0"><h6></h6></p> --}}
							<p class="mb-0"><h6>{{$branch->address}}</h6></p>
						
							
						</div>
			
						<div class="tax-invoice">
							<h5 class="text-center">Invoice</h5>
								<br>
							<div class="row row-grid">
								<div class="col-sm-12 col-md-6 col-half">
									{{-- <div class="invoice-user-name"><span>Name: </span id="customerName">John Doe</div> --}}
									<div class="invoice-user-name">Invoice No: <span class="sale_reference">CS132453</span> 
									<p class="mb-0">Phone Number: {{$branch->contact_number}}</p>
									</div> 
								</div>
								<div class="col-sm-12 col-md-6 col-half CustomerIdreceipt">
									{{-- <div class="invoice-user-name "><span>Customer Id: </span>#LL93784</div> --}}
									<div class="invoice-user-name">Date:<span id="invoiceDate"> </span></div>
								</div>
							</div>
						</div>
						<br>
						<table class="table-borderless w-100 table-fit" id="priceptbillTable">
							<thead>
								<tr>
									<th># Item</th>
									<th>Price</th>
									<th>Qty</th>
									<th class="text-end">Total</th>
								</tr>
							</thead>
							<tbody style="border-width: 0;">
							
							</tbody>
						</table>
						<div class="text-center invoice-bar">
							<div class="border-bottom border-dashed">
								<p>**VAT against this challan is payable through central registration. Thank you for your business!</p>
							</div>
							<a href="javascript:void(0);">
								<svg id="billSaleRefference"></svg> 

							</a>
							{{-- <p class="text-dark fw-bold">Sale 31</p>
							<p>Thank You For Shopping With Us. Please Come Again</p> --}}
							<a href="javascript:void(0);" class="btn btn-md btn-primary" id="printReceipt">Print Receipt</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Print Receipt -->

		<!-- Products -->
		<div class="modal fade modal-default pos-modal" id="productsDetailsx" aria-labelledby="productsDetailsx">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header d-flex align-items-center justify-content-between">
						<div class="d-flex align-items-center">
							<h5 class="me-4">Products</h5>
						</div>
						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<div class="card bg-light mb-3">
							<div class="card-body">
								<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
									<span class="badge bg-dark fs-12">Order ID : #45698</span>
									<p class="fs-16">Product Profit : <span id="productProfit"></span></p>
								</div>								
								<div class="product-wrap h-auto">
									<div class="product-list bg-white align-items-center justify-content-between">
										<div class="d-flex align-items-center product-info" data-bs-toggle="modal" data-bs-target="#products">
											{{-- <a href="javascript:void(0);" class="img-bg">
												<img src="assets/img/products/pos-product-16.png" alt="Products">
											</a> --}}
											<div class="info">
													<p>
														<i class="" aria-hidden="true">Product Cost : </i>
													</p>
											</div>
										</div>
										<p class="text-teal fw-bold"><span id="productPurchaseCost"></span></p>
									</div>
									<p>
										<i class="fa fa-certificate" aria-hidden="true"></i>
										Warranty 
									</p>
									<select class=" form-control bg-transparent bg-white  newWarranty" id="newWarranty" name="state" style="width: 100%; background-color: wheat;">
											<option value=" ">Select Warranty</option>
											<option value="yes">Yes</option> 
											<option value="no">No</option>
							  		</select>
									
								<div >
									<br>
									<label>Price</label>
									<div class="d-flex align-items-center product-info bg-white" >
										
										<input type="number" name="number" id="eachPrice"   class="form-control "   placeholder="Enter State ">
									</div>
								</div>
								<br>	
								<div >
									<label>select Warranty Period</label>
									<br>
										<div >
												
											<select class="form-control bg-transparent bg-white"  id="selectWarrantyperiod" name="state">
												<option value=" ">Select period</option>
												<option value="01 Month">01 Month</option>
												<option value="03 Months">03 Months</option>
												<option value="06 Months">06 Months</option>
												<option value="01 Year">01 Year</option>
							  			</select>
									</div>
								</div>
								<br>
								<div >
									<label>product Quantities</label>
									<br>
									<div >
										
										<input type="number" name="text" id="productQuantities" class="form-control bg-white "   placeholder="Enter Postal code">
									</div>
								</div>	
								

								</div>
							</div>	
						</div>
					</div>
					<button type="button" class="btn btn-primary" id="saveChanges" class="close" data-bs-dismiss="modal" aria-label="Close">Save Changes</button>	
				</div>
			</div>
		</div>
		<!-- /Products -->

		<div class="modal fade" id="create" tabindex="-1" aria-labelledby="create"  aria-hidden="true">
			<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" >Create</h5>
						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<form action="https://dreamspos.dreamstechnologies.com/html/template/pos-5.html">
						<div class="modal-body pb-1">
							<div class="row">
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">Customer Name <span class="text-danger">*</span></label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">Phone <span class="text-danger">*</span></label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-lg-12">
									<div class="mb-3">
										<label class="form-label">Email</label>
										<input type="email" class="form-control">
									</div>
								</div>
								<div class="col-lg-12">
									<div class="mb-3">
										<label class="form-label">Address</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">City</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">Country</label>
										<input type="text" class="form-control">
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer d-flex justify-content-end gap-2 flex-wrap">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							<button type="submit" class="btn btn-md btn-primary">Submit</button>
						</div>
					</form>					
				</div>
			</div>
		</div>

		<!-- Hold -->
		<div class="modal fade modal-default pos-modal" id="hold-order" aria-labelledby="hold-order">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Hold order</h5>
						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<form action="https://dreamspos.dreamstechnologies.com/html/template/pos-5.html">
						<div class="modal-body">
							<div class="bg-light br-10 p-4 text-center mb-3">
								<h2 class="display-1">4500.00</h2>
							</div>
							<div class="mb-3">
								<label class="form-label">Order Reference <span class="text-danger">*</span></label>
								<input class="form-control" type="text" value="" placeholder="">
							</div>
							<p>The current order will be set on hold. You can retreive this order from the pending order button. Providing a reference to it might help you to identify the order more quickly.</p>
						</div>
						<div class="modal-footer d-flex justify-content-end gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							<button type="submit" class="btn btn-md btn-primary">Confirm</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- /Hold -->

		<!-- Edit Product -->
		<div class="modal fade modal-default pos-modal" id="edit-product" aria-labelledby="edit-product">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Edit Product</h5>
						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<form action="https://dreamspos.dreamstechnologies.com/html/template/pos-5.html">
						<div class="modal-body pb-1">
							<div class="row">
								<div class="col-lg-12">
									<div class="mb-3">
										<label class="form-label">Product Name <span class="text-danger">*</span></label>
										<input type="text" class="form-control" value="Red Nike Laser Show" disabled>
									</div>
								</div>
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">Product Price <span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control" value="1800">
										</div>
									</div>
								</div>
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">Tax Type <span class="text-danger">*</span></label>
										<select class="select">
											<option>Exclusive</option>
											<option>Inclusive</option>
										</select>
									</div>
								</div>
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">Tax <span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-percentage"></i>
											</span>
											<input type="text" class="form-control" value="15">
										</div>
									</div>
								</div>
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">Discount Type <span class="text-danger">*</span></label>
										<select class="select">
											<option>Percentage</option>
											<option>Early payment discounts</option>
										</select>
									</div>
								</div>
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">Discount <span class="text-danger">*</span></label>
										<input type="text" class="form-control" value="15">
									</div>
								</div>
								<div class="col-lg-6 col-sm-12 col-12">
									<div class="mb-3">
										<label class="form-label">Sale Unit <span class="text-danger">*</span></label>
										<select class="select">
											<option>Kilogram</option>
											<option>Grams</option>
										</select>
									</div>
								</div>
							</div>	
						</div>										
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
						   <button type="submit" class="btn btn-md btn-primary">Submit</button>
					   </div>
					</form>
				</div>
			</div>
		</div>
		<!-- /Edit Product -->

		<!-- Delete Product -->
		<div class="modal fade modal-default" id="delete" aria-labelledby="payment-completed">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-body p-0">
						<div class="success-wrap text-center">
							<form action="https://dreamspos.dreamstechnologies.com/html/template/pos-5.html">
								<div class="icon-success bg-danger-transparent text-danger mb-2">
									<i class="ti ti-trash"></i>
								</div>
								<h3 class="mb-2">Are you Sure!</h3>
								<p class="fs-16 mb-3">The current order will be deleted as no payment has been made so far.
								</p>
								<div class="d-flex align-items-center justify-content-center gap-2 flex-wrap">
									<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">No, Cancel</button>
									<button type="submit" class="btn btn-md btn-primary">Yes, Delete</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Delete Product -->

		<!-- Reset -->
		<div class="modal fade modal-default" id="reset" aria-labelledby="payment-completed">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-body p-0">
						<div class="success-wrap text-center">
							<form action="https://dreamspos.dreamstechnologies.com/html/template/pos-5.html">
								<div class="icon-success bg-purple-transparent text-purple mb-2">
									<i class="ti ti-transition-top"></i>
								</div>
								<h3 class="mb-2">Confirm Your Action</h3>
								<p class="fs-16 mb-3">The current order will be cleared. But not deleted if it's persistent. Would you like to proceed ?</p>
								<div class="d-flex align-items-center justify-content-center gap-2 flex-wrap">
									<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">No, Cancel</button>
									<p type="" id="vatInvoice" class="btn btn-md btn-primary">Yes, Proceed1</p>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Reset -->

		<!-- Recent Transactions -->
		<div class="modal fade pos-modal" id="recents" tabindex="-1"    aria-hidden="true">
			<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						 <h5 class="modal-title" >Recent Transactions</h5>
						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<div class="tabs-sets">
							<ul class="nav nav-tabs" id="myTab" role="tablist">
								<li class="nav-item" role="presentation">
								  <button class="nav-link active" id="purchase-tab" data-bs-toggle="tab" data-bs-target="#purchase" type="button"   aria-controls="purchase" aria-selected="true" role="tab">Purchase</button>
								</li>
								<li class="nav-item" role="presentation">
								  <button class="nav-link" id="payment-tab" data-bs-toggle="tab" data-bs-target="#payment" type="button"   aria-controls="payment" aria-selected="false" role="tab">Payment</button>
								</li>
								<li class="nav-item" role="presentation">
								  <button class="nav-link" id="return-tab" data-bs-toggle="tab" data-bs-target="#return" type="button"   aria-controls="return" aria-selected="false" role="tab">Return</button>
								</li>
							  </ul>
							  <div class="tab-content" >
								<div class="tab-pane fade show active" id="purchase" role="tabpanel" aria-labelledby="purchase-tab">
									<div class="card mb-0">
										<div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
											<div class="search-set">
												<div class="search-input">
													<span class="btn-searchset"><i class="ti ti-search fs-14 feather-search"></i></span>
												</div>
											</div>
											<ul class="table-top-head">
												<li>
													<a data-bs-toggle="tooltip" data-bs-placement="top" title="Pdf"><img src="{{ asset('pos/assets2/img/icons/pdf.svg')}}" alt="img"></a>
												</li>
												<li>
													<a data-bs-toggle="tooltip" data-bs-placement="top" title="Excel"><img src="{{ asset('pos/assets2/img/icons/excel.svg')}}" alt="img"></a>
												</li>
												<li>
													<a data-bs-toggle="tooltip" data-bs-placement="top" title="Print"><i class="ti ti-printer"></i></a>
												</li>
											</ul>
										</div>
										<div class="card-body">
											<div class="table-responsive">
												<table class="table datatable border">
													<thead class="thead-light">
														<tr>
															<th class="no-sort">
																<label class="checkboxs">
																	<input type="checkbox" class="select-all">
																	<span class="checkmarks"></span>
																</label>
															</th>
															<th>Customer</th>
															<th>Reference</th>
															<th>Date</th>
															<th>Amount	</th>
															<th class="no-sort">Action</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Carl Evans</a>
																</div>
															</td>
															<td>INV/SL0101</td>
															<td>24 Dec 2024</td>
															<td>$1000</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Minerva Rameriz</a>
																</div>
															</td>
															<td>INV/SL0102</td>
															<td>10 Dec 2024</td>
															<td>$1500</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Robert Lamon</a>
																</div>
															</td>
															<td>INV/SL0103</td>
															<td>27 Nov 2024</td>
															<td>$1500</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Patricia Lewis</a>
																</div>
															</td>
															<td>INV/SL0104</td>
															<td>18 Nov 2024</td>
															<td>$2000</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Mark Joslyn</a>
																</div>
															</td>
															<td>INV/SL0105</td>
															<td>06 Nov 2024</td>
															<td>$800</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Marsha Betts</a>
																</div>
															</td>
															<td>INV/SL0106</td>
															<td>25 Oct 2024</td>
															<td>$750</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Daniel Jude</a>
																</div>
															</td>
															<td>INV/SL0107</td>
															<td>14 Oct 2024</td>
															<td>$1300</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="payment" role="tabpanel" >
									<div class="card mb-0">
										<div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
											<div class="search-set">
												<div class="search-input">
													<span class="btn-searchset"><i class="ti ti-search fs-14 feather-search"></i></span>
												</div>
											</div>
											<ul class="table-top-head">
												<li>
													<a data-bs-toggle="tooltip" data-bs-placement="top" title="Pdf"><img src="{{ asset('pos/assets2/img/icons/pdf.svg')}}" alt="img"></a>
												</li>
												<li>
													<a data-bs-toggle="tooltip" data-bs-placement="top" title="Excel"><img src="{{ asset('pos/assets2/img/icons/excel.svg')}}" alt="img"></a>
												</li>
												<li>
													<a data-bs-toggle="tooltip" data-bs-placement="top" title="Print"><i class="ti ti-printer"></i></a>
												</li>
											</ul>
										</div>
										<div class="card-body">
											<div class="table-responsive">
												<table class="table datatable border">
													<thead class="thead-light">
														<tr>
															<th class="no-sort">
																<label class="checkboxs">
																	<input type="checkbox" class="select-all">
																	<span class="checkmarks"></span>
																</label>
															</th>
															<th>Customer</th>
															<th>Reference</th>
															<th>Date</th>
															<th>Amount	</th>
															<th class="no-sort">Action</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Carl Evans</a>
																</div>
															</td>
															<td>INV/SL0101</td>
															<td>24 Dec 2024</td>
															<td>$1000</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Minerva Rameriz</a>
																</div>
															</td>
															<td>INV/SL0102</td>
															<td>10 Dec 2024</td>
															<td>$1500</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="return" role="tabpanel" >
									<div class="card mb-0">
										<div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
											<div class="search-set">
												<div class="search-input">
													<span class="btn-searchset"><i class="ti ti-search fs-14 feather-search"></i></span>
												</div>
											</div>
											<ul class="table-top-head">
												<li>
													<a data-bs-toggle="tooltip" data-bs-placement="top" title="Pdf"><img src="{{ asset('pos/assets2/img/icons/pdf.svg')}}" alt="img"></a>
												</li>
												<li>
													<a data-bs-toggle="tooltip" data-bs-placement="top" title="Excel"><img src="{{ asset('pos/assets2/img/icons/excel.svg')}}" alt="img"></a>
												</li>
												<li>
													<a data-bs-toggle="tooltip" data-bs-placement="top" title="Print"><i class="ti ti-printer"></i></a>
												</li>
											</ul>
										</div>
										<div class="card-body">
											<div class="table-responsive">
												<table class="table datatable border">
													<thead class="thead-light">
														<tr>
															<th class="no-sort">
																<label class="checkboxs">
																	<input type="checkbox" class="select-all">
																	<span class="checkmarks"></span>
																</label>
															</th>
															<th>Customer</th>
															<th>Reference</th>
															<th>Date</th>
															<th>Amount	</th>
															<th class="no-sort">Action</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Carl Evans</a>
																</div>
															</td>
															<td>INV/SL0101</td>
															<td>24 Dec 2024</td>
															<td>$1000</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														<tr>
															<td>
																<label class="checkboxs">
																	<input type="checkbox">
																	<span class="checkmarks"></span>
																</label>
															</td>
															<td>
																<div class="d-flex align-items-center">
																	<a href="javascript:void(0);" class="avatar avatar-md me-2">
																		<img src="" alt="product">
																	</a>
																	<a href="javascript:void(0);">Minerva Rameriz</a>
																</div>
															</td>
															<td>INV/SL0102</td>
															<td>10 Dec 2024</td>
															<td>$1500</td>
															<td class="action-table-data">
																<div class="edit-delete-action">
																	<a class="me-2 edit-icon p-2" href="javascript:void(0);"><i data-feather="eye" class="feather-eye"></i></a>
																	<a class="me-2 p-2" href="javascript:void(0);"><i data-feather="edit" class="feather-edit"></i></a>
																	<a class="p-2" href="javascript:void(0);"><i data-feather="trash-2" class="feather-trash-2"></i></a>
																</div>
															</td>
														</tr>
														
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Recent Transactions -->

		<!-- Orders -->
		<div class="modal fade pos-modal" id="orders" tabindex="-1"  aria-hidden="true">
			<div class="modal-dialog modal-md modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						 <h5 class="modal-title" >Orders</h5>
						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<div class="tabs-sets">
							<ul class="nav nav-tabs" id="myTabs" role="tablist">
								<li class="nav-item" role="presentation">
								  <button class="nav-link active" id="onhold-tab" data-bs-toggle="tab" data-bs-target="#onhold" type="button"   aria-controls="onhold" aria-selected="true" role="tab">Onhold</button>
								</li>
								{{-- <li class="nav-item" role="presentation">
								  <button class="nav-link" id="unpaid-tab" data-bs-toggle="tab" data-bs-target="#unpaid" type="button"   aria-controls="unpaid" aria-selected="false" role="tab">Unpaid</button>
								</li>
								<li class="nav-item" role="presentation">
								  <button class="nav-link" id="paid-tab" data-bs-toggle="tab" data-bs-target="#paid" type="button"   aria-controls="paid" aria-selected="false" role="tab">Paid</button>
								</li> --}}
							  </ul>
							  <div class="tab-content" >
								<div class="tab-pane fade show active" id="onhold" role="tabpanel" aria-labelledby="onhold-tab">
									<div class="input-icon-start pos-search position-relative mb-3">
										<span class="input-icon-addon">
											<i class="ti ti-search"></i>
										</span>
										<input type="text" class="form-control" placeholder="Search Product">
									</div>
									<div class="order-body">
										@foreach ($draftSaleProduct as $draft)
    <div class="col-lg-12">
        <div class="card bg-light mb-3">
            <div class="card-body">
                <span class="badge bg-dark fs-12 mb-2">Order ID : {{ $draft->sale_reference }}</span>
                <div class="row g-3">
                    <div class="col-md-6">
                        <p class="fs-15 mb-1">
                            <span class="fs-14 fw-bold text-gray-9">Nick Name :</span> {{ $draft->nick_name }}
                        </p>
                        <p class="fs-15">
                            <span class="fs-14 fw-bold text-gray-9">Total :</span> {{ number_format($draft->final_total_price, 2) }}
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p class="fs-15 mb-1">
                            <span class="fs-14 fw-bold text-gray-9">Customer :</span> {{ $draft->customer_name ?? 'N/A' }}
                        </p>
                        <p class="fs-15">
                            <span class="fs-14 fw-bold text-gray-9">Date :</span> {{ \Carbon\Carbon::parse($draft->created_at)->format('d M Y H:i:s') }}
                        </p>
                    </div>
                </div>
                <div class="bg-info-transparent p-1 rounded text-center my-3">
                    <p class="text-info fw-medium">Amount to Pay: {{ number_format($draft->final_total_price - $draft->received_amount, 2) }}</p>
                </div>
                <div class="d-flex align-items-center justify-content-center flex-wrap gap-2">
                    <a href="javascript:void(0);" class="btn btn-md btn-orange" id="saleRefference" data-sale_id="{{ $draft->saleId }}">Open Order</a>
                    {{-- <a href="javascript:void(0);" class="btn btn-md btn-teal" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#products">View Products</a>
                    <a href="javascript:void(0);" class="btn btn-md btn-indigo confirm-delete">Delete</a> --}}
                </div>
            </div>
        </div>
    </div>
@endforeach

										{{-- <div class="card bg-light mb-3">
											<div class="card-body">
												<span class="badge bg-dark fs-12 mb-2">Order ID : #45698</span>
												<div class="row g-3">
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Cashier :</span> admin</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Total :</span> $900</p>
													</div>
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Customer :</span>  Botsford</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Date :</span> 24 Dec 2024 13:39:11</p>
													</div>
												</div>
												<div class="bg-info-transparent p-1 rounded text-center my-3">
													<p class="text-info fw-medium">Customer need to recheck the product once</p>
												</div>
												<div class="d-flex align-items-center justify-content-center flex-wrap gap-2">
													<a href="javascript:void(0);" class="btn btn-md btn-orange">Open Order</a>
													<a href="javascript:void(0);" class="btn btn-md btn-teal" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#products">View Products</a>
													<a href="javascript:void(0);" class="btn btn-md btn-indigo">Print</a>
												</div>
											</div>	
										</div>
										<div class="card bg-light mb-0">
											<div class="card-body">
												<span class="badge bg-dark fs-12 mb-2">Order ID : #666659</span>
												<div class="mb-3">
													<div class="row g-3">
														<div class="col-md-6">
															<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Cashier :</span> admin</p>
															<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Total :</span> $900</p>
														</div>
														<div class="col-md-6">
															<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Customer :</span>  Botsford</p>
															<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Date :</span> 24 Dec 2024 13:39:11</p>
														</div>
													</div>
												</div>
											</div>	
										</div> --}}
									</div>
								</div>
								<div class="tab-pane fade" id="unpaid" role="tabpanel" >
									<div class="input-icon-start pos-search position-relative mb-3">
										<span class="input-icon-addon">
											<i class="ti ti-search"></i>
										</span>
										<input type="text" class="form-control" placeholder="Search Product">
									</div>
									<div class="order-body">
										<div class="card bg-light mb-3">
											<div class="card-body">
												<span class="badge bg-dark fs-12 mb-2">Order ID : #45698</span>
												<div class="row g-3">
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Cashier :</span> admin</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Total :</span> $900</p>
													</div>
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Customer :</span>  Anastasia</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Date :</span> 24 Dec 2024 13:39:11</p>
													</div>
												</div>
												<div class="bg-info-transparent p-1 rounded text-center my-3">
													<p class="text-info fw-medium">Customer need to recheck the product once</p>
												</div>
												<div class="d-flex align-items-center justify-content-center flex-wrap gap-2">
													<a href="javascript:void(0);" class="btn btn-md btn-orange">Open Order</a>
													<a href="javascript:void(0);" class="btn btn-md btn-teal" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#products">View Products</a>
													<a href="javascript:void(0);" class="btn btn-md btn-indigo">Print</a>
												</div>
											</div>	
										</div>
										<div class="card bg-light mb-0">
											<div class="card-body">
												<span class="badge bg-dark fs-12 mb-2">Order ID : #666659</span>
												<div class="row g-3">
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Cashier :</span> admin</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Total :</span> $900</p>
													</div>
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Customer :</span>  Lucia</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Date :</span> 24 Dec 2024 13:39:11</p>
													</div>
												</div>
											</div>	
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="paid" role="tabpanel" >
									<div class="input-icon-start pos-search position-relative mb-3">
										<span class="input-icon-addon">
											<i class="ti ti-search"></i>
										</span>
										<input type="text" class="form-control" placeholder="Search Product">
									</div>
									<div class="order-body">
										<div class="card bg-light mb-3">
											<div class="card-body">
												<span class="badge bg-dark fs-12 mb-2">Order ID : #45698</span>
												<div class="row g-3">
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Cashier :</span> admin</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Total :</span> $1000</p>
													</div>
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Customer :</span>  Hugo</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Date :</span> 24 Dec 2024 13:39:11</p>
													</div>
												</div>
												<div class="bg-info-transparent p-1 rounded text-center my-3">
													<p class="text-info fw-medium">Customer need to recheck the product once</p>
												</div>
												<div class="d-flex align-items-center justify-content-center flex-wrap gap-2">
													<a href="javascript:void(0);" class="btn btn-md btn-orange">Open Order</a>
													<a href="javascript:void(0);" class="btn btn-md btn-teal" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#products">View Products</a>
													<a href="javascript:void(0);" class="btn btn-md btn-indigo">Print</a>
												</div>
											</div>	
										</div>
										<div class="card bg-light mb-0">
											<div class="card-body">
												<span class="badge bg-dark fs-12 mb-2">Order ID : #666659</span>
												<div class="row g-3">
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Cashier :</span> admin</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Total :</span> $9100</p>
													</div>
													<div class="col-md-6">
														<p class="fs-15 mb-1"><span class="fs-14 fw-bold text-gray-9">Customer :</span>  Antonio</p>
														<p class="fs-15"><span class="fs-14 fw-bold text-gray-9">Date :</span> 23 Dec 2024 13:39:11</p>
													</div>
												</div>
											</div>	
										</div>
									</div>
								</div>
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Orders -->

		<!-- Order Tax -->
		<div class="modal fade modal-default" id="order-tax">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Order Tax</h5>
					   <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						   <span aria-hidden="true">×</span>
					   </button>
				   </div>
				   <form action="https://dreamspos.dreamstechnologies.com/html/template/pos-5.html">
						<div class="modal-body pb-1">
							<div class="mb-3">
								<label class="form-label">Order Tax <span class="text-danger">*</span></label>
								<select class="select">
									<option>Select</option>
									<option>No Tax</option>
									<option>@10</option>
									<option>@15</option>
									<option>VAT</option>
									<option>SLTAX</option>
								</select>
							</div>
						</div>
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							<button type="submit" class="btn btn-md btn-primary">Submit</button>
						</div>
				   </form>
				</div>
			</div>
		</div>
		<!-- /Order Tax -->

		<!-- Shipping Cost -->
		<div class="modal fade modal-default" id="shipping-cost">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Shipping Cost</h5>
					   <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						   <span aria-hidden="true">×</span>
					   </button>
				   </div>
				   <div >
						<div class="modal-body pb-1">
							<div class="mb-3">
								<label class="form-label">Service Changes <span class="text-danger">*</span></label>
								<input type="text" class="form-control" id="ServiceChanges" >
							</div>
							<div class="mb-3">
								<label class="form-label">Tax <span class="text-danger">*</span></label>
								<input type="text" class="form-control" id="taxChanges"   placeholder="Tax" >
							</div>
								<div class="mb-3">
								<label class="form-label">Tax <span class="text-danger">*</span></label>
								<input type="text" class="form-control" id="taxChanges"    id="otherChanges" placeholder="If Any Other Charges" >
							</div>
						</div>
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							<button type="submit" class="btn btn-md btn-primary" id="ifAnyCharges">Submit</a></button>
						</div>
				   </div>
				</div>
			</div>
		</div>
		<!-- /Shipping Cost -->

		<!-- Coupon Code -->
		<div class="modal fade modal-default" id="coupon-code">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Coupon Code</h5>
					   <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						   <span aria-hidden="true">×</span>
					   </button>
				   </div>
				   <form action="https://dreamspos.dreamstechnologies.com/html/template/pos-5.html">
						<div class="modal-body pb-1">
							<div class="mb-3">
								<label class="form-label">Coupon Code <span class="text-danger">*</span></label>
								<select class="select">
									<option>Select</option>
									<option>NEWYEAR30</option>
									<option>CHRISTMAS100</option>
									<option>HALLOWEEN20</option>
									<option>BLACKFRIDAY50</option>
								</select>
							</div>
						</div>
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							<button type="submit" class="btn btn-md btn-primary">Submit</button>
						</div>
				   </form>
				</div>
			</div>
		</div>
		<!-- /Coupon Code -->

		<!-- Discount -->
		<div class="modal fade modal-default" id="discount">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Discount </h5>
					   <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						   <span aria-hidden="true">×</span>
					   </button>
				   </div>
				   <form action="https://dreamspos.dreamstechnologies.com/html/template/pos-5.html">
						<div class="modal-body pb-1">
							<div class="mb-3">
								<label class="form-label">Order Discount Type <span class="text-danger">*</span></label>
								<select class="select">
									<option>Select</option>
									<option>Flat</option>
									<option>Percentage</option>
								</select>
							</div>
							<div class="mb-3">
								<label class="form-label">Value <span class="text-danger">*</span></label>
								<input type="text" class="form-control">
							</div>
						</div>
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							<button type="submit" class="btn btn-md btn-primary">Submit</button>
						</div>
				   </form>
				</div>
			</div>
		</div>
		<!-- /Discount -->

		<!-- Payment Cash -->
		<div class="modal fade modal-default" id="payment-cash">
			<div class="modal-dialog modal-dialog-centered modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Finalize Sale</h5>
					   <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						   <span aria-hidden="true">×</span>
					   </button>
				   </div>
				   <form action="https://dreamspos.dreamstechnologies.com/html/template/pos-4.html">
						<div class="modal-body pb-1">
							<div class="row">
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Total Amount to Pay : <span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											{{-- <span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span> --}}
											<input type="text" class="form-control TOTALSALEAMOUNT" value="0" disabled>
										</div>
									</div>
								</div>
								
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Type <span class="text-danger">*</span></label>
										<select class="select form-control select-payment PaymentMethods" id="PaymentMethods">
											<option value="Card Payment">Card Payment</option>
											<option value="cash" selected>Cash</option>
											<option value="cheque">Cheque</option>
											<option value="deposit">Deposit</option>
											<option value="points">Points</option>
										</select>
									</div>
									<div class="quick-cash payment-content bg-light  mb-3">
										<div class="d-flex align-items-center flex-wra gap-4">
											<h5 class="text-nowrap">Quick Cash</h5>
											<div class="d-flex align-items-center flex-wrap gap-3">
												<div class="form-check">
													<input type="radio" class="btn-check cash" name="cash" id="cash1" >
													<label class="btn btn-white cash" for="cash1"
  														style="background-image: url('../../images/r10.png'); background-position: center; background-repeat: no-repeat; background-size: contain; height: 62px; color: rgb(228, 228, 228);">
													10</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check cash" name="cash" id="cash2">
													<label class="btn btn-white cash" for="cash2" style="background-image: url('../../images/r20.jpg'); background-size: cover; background-position: center; color: rgb(41, 41, 41);">
        													20
    												</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check cash" name="cash" id="cash3">
													<label class="btn btn-white cash" for="cash3"
        												style="background-image: url('../../images/r50.jpg'); background-size: cover; background-position: center; color: rgb(41, 41, 41);">
        													50
    												</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check cash" name="cash" id="cash4">
													<label class="btn btn-white cash" for="cash4"
													style="background-image: url('../../images/r100.jpg'); background-size: cover; background-position: center; color: rgb(41, 41, 41);">100</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check cash" name="cash" id="cash5">
													<label class="btn btn-white cash" for="cash5"
													style="background-image: url('../../images/r500.jpg'); background-size: cover; background-position: center; color: rgb(41, 41, 41);"
													>500</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check cash" name="cash" id="cash6">
													<label class="btn btn-white cash" for="cash6"
													style="background-image: url('../../images/r1000.jpg'); background-size: cover; background-position: center; color: rgb(41, 41, 41);"
													>1000</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check cash" name="cash" id="cash7">
													<label class="btn btn-white cash" for="cash7"
													style="background-image: url('../../images/r5000.jpg'); background-size: cover; background-position: center; color: rgb(41, 41, 41);"
													>5000</label>
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Received Amount :<span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											{{-- <span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span> --}}
											<input type="text" class="form-control ReceivedAmount" value="0" id="ReceivedAmount">
										</div>
									</div>
								</div>
								<div class="col-md-12">
									<div class="change-item mb-3">
										<label class="form-label">Outstanding Amount :</label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control outstandingAmount" id="outstandingAmount" value="0.00">
										</div>
									</div>
									<div class="point-item mb-3">
										<label class="form-label">Balance Point</label>
										<input type="text" class="form-control" value="200">
									</div>
								</div>
									<div class="point-wrap payment-content mb-3">
										<div class=" bg-success-transparent d-flex align-items-center justify-content-between flex-wrap p-2 gap-2 br-5">
											<h6 class="fs-14 fw-bold text-success">You have 2000 Points to Use</h6>
											<a href="javascript:void(0);" class="btn btn-dark btn-md">Use for this Purchase</a>
										</div>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Voucher ID</label>
										<input type="text"  class="form-control voucher">
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Note</label>
										<textarea class="form-control PaymentNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Sale Note</label>
										<textarea class="form-control SaleNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Staff Note</label>
										<textarea class="form-control StaffNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
							</div>							
						</div>
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							
						</div>
				   </form>
				</div>
			</div>
		</div>
		<!-- /Payment Cash  -->

		<!-- Payment Card  -->
		<div class="modal fade modal-default" id="payment-card">
			<div class="modal-dialog modal-dialog-centered modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Finalize Sale</h5>
					   <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						   <span aria-hidden="true">×</span>
					   </button>
				   </div>
				   <form action="https://dreamspos.dreamstechnologies.com/html/template/pos-4.html">
						<div class="modal-body pb-1">
							<div class="row">
								<div class="col-md-4">
									<div class="mb-3">
										<label class="form-label">Total Amount<span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
										<input type="text" class="form-control TOTALSALEAMOUNT" value="0" disabled>
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="mb-3">
										<label class="form-label">Received Amount :<span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control ReceivedAmount" value="0" id="">>
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="change-item mb-3">
										<label class="form-label">Outstanding Amount</label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control outstandingAmount" value="0.00">
										</div>
									</div>
									<div class="point-item mb-3">
										<label class="form-label">Balance Point</label>
										<input type="text" class="form-control" value="200">
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Type <span class="text-danger">*</span></label>
										<select class="select form-control select-payment PaymentMethods" id="PaymentMethods">
											<option value="credit" selected>Credit Card</option>
											
											<option value="cheque">Cheque</option>
											<option value="deposit">Deposit</option>
											<option value="points">Points</option>
										</select>
									</div>
									<div class="quick-cash payment-content bg-light  mb-3">
										<div class="d-flex align-items-center flex-wra gap-4">
											<h5 class="text-nowrap">Quick Cash</h5>
											<div class="d-flex align-items-center flex-wrap gap-3">
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash11" checked>
													<label class="btn btn-white" for="cash11">10</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash12">
													<label class="btn btn-white" for="cash12">20</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash13">
													<label class="btn btn-white" for="cash13">50</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash14">
													<label class="btn btn-white" for="cash14">100</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash15">
													<label class="btn btn-white" for="cash15">500</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash16">
													<label class="btn btn-white" for="cash16">1000</label>
												</div>
											</div>
										</div>
									</div>
									<div class="point-wrap payment-content mb-3">
										<div class=" bg-success-transparent d-flex align-items-center justify-content-between flex-wrap p-2 gap-2 br-5">
											<h6 class="fs-14 fw-bold text-success">You have 2000 Points to Use</h6>
											<a href="javascript:void(0);" class="btn btn-dark btn-md">Use for this Purchase</a>
										</div>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Receiver</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Note</label>
										<textarea class="form-control PaymentNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Sale Note</label>
										<textarea class="form-control SaleNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Staff Note</label>
										<textarea class="form-control StaffNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
							</div>							
						</div>
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							
						</div>
				   </form>
				</div>
			</div>
		</div>
		<!-- /Payment Card  -->

		<!-- Payment Cheque -->
		<div class="modal fade modal-default" id="payment-cheque">
			<div class="modal-dialog modal-dialog-centered modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Finalize Sale</h5>
					   <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						   <span aria-hidden="true">×</span>
					   </button>
				   </div>
				   <form action="https://dreamspos.dreamstechnologies.com/html/template/pos-4.html">
						<div class="modal-body pb-1">
							<div class="row">
								<div class="col-md-4">
									<div class="mb-3">
										<label class="form-label">Received Amount <span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control" value="1800">
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="mb-3">
										<label class="form-label">Paying Amount <span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control" value="1800">
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="change-item mb-3">
										<label class="form-label">Outstanding Amount</label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control outstandingAmount" value="0.00">
										</div>
									</div>
									<div class="point-item mb-3">
										<label class="form-label">Balance Point</label>
										<input type="text" class="form-control" value="200">
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Type <span class="text-danger">*</span></label>
										<select class="select select-payment">
											<option value="credit">Credit Card</option>
											
											<option value="cheque" selected>Cheque</option>
											<option value="deposit">Deposit</option>
											<option value="points">Points</option>
										</select>
									</div>
									<div class="quick-cash payment-content bg-light  mb-3">
										<div class="d-flex align-items-center flex-wra gap-4">
											<h5 class="text-nowrap">Quick Cash</h5>
											<div class="d-flex align-items-center flex-wrap gap-3">
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash21" checked>
													<label class="btn btn-white" for="cash21">10</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash22">
													<label class="btn btn-white" for="cash22">20</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash23">
													<label class="btn btn-white" for="cash23">50</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash24">
													<label class="btn btn-white" for="cash24">100</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash25">
													<label class="btn btn-white" for="cash25">500</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash26">
													<label class="btn btn-white" for="cash26">1000</label>
												</div>
											</div>
										</div>
									</div>
									<div class="point-wrap payment-content mb-3">
										<div class=" bg-success-transparent d-flex align-items-center justify-content-between flex-wrap p-2 gap-2 br-5">
											<h6 class="fs-14 fw-bold text-success">You have 2000 Points to Use</h6>
											<a href="javascript:void(0);" class="btn btn-dark btn-md">Use for this Purchase</a>
										</div>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Receiver</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Note</label>
										<textarea class="form-control PaymentNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Sale Note</label>
										<textarea class="form-control SaleNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Staff Note</label>
										<textarea class="form-control StaffNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
							</div>							
						</div>
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
						
						</div>
				   </form>
				</div>
			</div>
		</div>
		<!-- /Payment Cheque -->

		<!--  Payment Deposit -->
		<div class="modal fade modal-default" id="payment-deposit">
			<div class="modal-dialog modal-dialog-centered modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Finalize Sale</h5>
					   <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						   <span aria-hidden="true">×</span>
					   </button>
				   </div>
				   <form action="https://dreamspos.dreamstechnologies.com/html/template/pos-4.html">
						<div class="modal-body pb-1">
							<div class="row">
								<div class="col-md-4">
									<div class="mb-3">
										<label class="form-label">Received Amount <span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control" value="1800">
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="mb-3">
										<label class="form-label">Paying Amount <span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control" value="1800">
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="change-item mb-3">
										<label class="form-label">Outstanding Amount</label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control outstandingAmount" value="0.00">
										</div>
									</div>
									<div class="point-item mb-3">
										<label class="form-label">Balance Point</label>
										<input type="text" class="form-control" value="200">
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Type <span class="text-danger">*</span></label>
										<select class="select select-payment">
											<option value="credit">Credit Card</option>
										
											<option value="cheque">Cheque</option>
											<option value="deposit" selected>Deposit</option>
											<option value="points">Points</option>
										</select>
									</div>
									<div class="quick-cash payment-content bg-light  mb-3">
										<div class="d-flex align-items-center flex-wra gap-4">
											<h5 class="text-nowrap">Quick Cash</h5>
											<div class="d-flex align-items-center flex-wrap gap-3">
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash31" checked>
													<label class="btn btn-white" for="cash31">10</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash32">
													<label class="btn btn-white" for="cash32">20</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash33">
													<label class="btn btn-white" for="cash33">50</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash34">
													<label class="btn btn-white" for="cash34">100</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash35">
													<label class="btn btn-white" for="cash35">500</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash36">
													<label class="btn btn-white" for="cash36">1000</label>
												</div>
											</div>
										</div>
									</div>
									<div class="point-wrap payment-content mb-3">
										<div class=" bg-success-transparent d-flex align-items-center justify-content-between flex-wrap p-2 gap-2 br-5">
											<h6 class="fs-14 fw-bold text-success">You have 2000 Points to Use</h6>
											<a href="javascript:void(0);" class="btn btn-dark btn-md">Use for this Purchase</a>
										</div>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Receiver</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Note</label>
										<textarea class="form-control PaymentNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Sale Note</label>
										<textarea class="form-control SaleNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Staff Note</label>
										<textarea class="form-control StaffNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
							</div>							
						</div>
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							
						</div>
				   </form>
				</div>
			</div>
		</div>
		<!-- /Payment Deposit -->

		<!-- Payment Point -->
		<div class="modal fade modal-default" id="payment-points">
			<div class="modal-dialog modal-dialog-centered modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">Finalize Sale</h5>
					   <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						   <span aria-hidden="true">×</span>
					   </button>
				   </div>
				   <form action="https://dreamspos.dreamstechnologies.com/html/template/pos-4.html">
						<div class="modal-body pb-1">
							<div class="row">
								<div class="col-md-4">
									<div class="mb-3">
										<label class="form-label">Received Amount <span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control" value="1800">
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="mb-3">
										<label class="form-label">Paying Amount <span class="text-danger">*</span></label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control" value="1800">
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="change-item mb-3">
										<label class="form-label">Change</label>
										<div class="input-icon-start position-relative">
											<span class="input-icon-addon text-gray-9">
												<i class="ti ti-currency-dollar"></i>
											</span>
											<input type="text" class="form-control" value="0.00">
										</div>
									</div>
									<div class="point-item mb-3">
										<label class="form-label">Balance Point</label>
										<input type="text" class="form-control" value="200">
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Type <span class="text-danger">*</span></label>
										<select class="select select-payment">
											<option value="credit">Credit Card</option>
											
											<option value="cheque">Cheque</option>
											<option value="deposit">Deposit</option>
											<option value="points" selected>Points</option>
										</select>
									</div>
									<div class="quick-cash payment-content bg-light  mb-3">
										<div class="d-flex align-items-center flex-wra gap-4">
											<h5 class="text-nowrap">Quick Cash</h5>
											<div class="d-flex align-items-center flex-wrap gap-3">
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash41" checked>
													<label class="btn btn-white" for="cash41">10</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash42">
													<label class="btn btn-white" for="cash42">20</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash43">
													<label class="btn btn-white" for="cash43">50</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash44">
													<label class="btn btn-white" for="cash44">100</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash45">
													<label class="btn btn-white" for="cash45">500</label>
												</div>
												<div class="form-check">
													<input type="radio" class="btn-check" name="cash" id="cash46">
													<label class="btn btn-white" for="cash46">1000</label>
												</div>
											</div>
										</div>
									</div>
									<div class="point-wrap payment-content mb-3">
										<div class=" bg-success-transparent d-flex align-items-center justify-content-between flex-wrap p-2 gap-2 br-5">
											<h6 class="fs-14 fw-bold text-success">You have 2000 Points to Use</h6>
											<a href="javascript:void(0);" class="btn btn-dark btn-md">Use for this Purchase</a>
										</div>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Receiver</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Payment Note</label>
										<textarea class="form-control PaymentNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Sale Note</label>
										<textarea class="form-control SaleNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
								<div class="col-md-12">
									<div class="mb-3">
										<label class="form-label">Staff Note</label>
										<textarea class="form-control StaffNote" rows="3" placeholder="Type your message"></textarea>
									</div>
								</div>
							</div>							
						</div>
						<div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
							<button type="button" class="btn btn-md btn-secondary" data-bs-dismiss="modal">Cancel</button>
							
						</div>
				   </form>
				</div>
			</div>
		</div>
		<!-- /Payment Point -->	

		 <!-- Calculator -->
		<div class="modal fade pos-modal" id="calculator" tabindex="-1"  aria-hidden="true">
			<div class="modal-dialog modal-md modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-body p-0">
						<div class="calculator-wrap">
							<div class="p-3">
								<div class="d-flex align-items-center">
									<h3>Calculator</h3>
									<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">×</span>
									</button>
								</div>							
								<div>
									<input class="input" type="text" placeholder="0" readonly>
								</div>
							</div>
							<div class="calculator-body d-flex justify-content-between">
								<div class="text-center">
									<button class="btn btn-clear" onclick="if (!window.__cfRLUnblockHandlers) return false; clr()" data-cf-modified-3577a9ca4d711bf77b72a29c-="">C</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('7')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">7</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('4')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">4</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('1')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">1</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis(',')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">,</button>
								</div>
								<div class="text-center">
									<button class="btn btn-expression" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('https://dreamspos.dreamstechnologies.com/')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">÷</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('8')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">8</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('5')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">5</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('2')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">2</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('00')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">00</button>									
								</div>
								<div class="text-center">
									<button class="btn btn-expression" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('%')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">%</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('9')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">9</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('6')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">6</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('3')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">3</button>
									<button class="btn btn-number" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('.')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">.</button>									
								</div>
								<div class="text-center">
									<button class="btn btn-clear" onclick="if (!window.__cfRLUnblockHandlers) return false; back()" data-cf-modified-3577a9ca4d711bf77b72a29c-=""><i class="ti ti-backspace"></i></button>
									<button class="btn btn-expression" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('*')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">x</button>
									<button class="btn btn-expression" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('-')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">-</button>
									<button class="btn btn-expression" onclick="if (!window.__cfRLUnblockHandlers) return false; dis('+')" data-cf-modified-3577a9ca4d711bf77b72a29c-="">+</button>
									<button class="btn btn-clear" onclick="if (!window.__cfRLUnblockHandlers) return false; solve()" data-cf-modified-3577a9ca4d711bf77b72a29c-="">=</button>									
								</div>
							</div>							
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Calculator -->

		<!-- Cash Register Details -->
		<div class="modal fade pos-modal" id="cash-register" tabindex="-1"  aria-hidden="true">
			<div class="modal-dialog modal-md modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						 <h5 class="modal-title">Today Cash Register Details</h5>
						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<div class="table-responsive">
							<table class="table table-striped border">
								<tr>
									<td>Cash in Hand</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($amount, 2) }}</td>

								</tr>
								<tr>
									<td>Total Sale Amount</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($saleAmount, 2) }}</td>
								</tr>
								<tr>
									<td>Total Cash Payment</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($todayTotalSaleCashPayment, 2) }}</td>
								</tr>
								<tr>
									<td>Total Cost</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($saleCost, 2) }}</td>
								</tr>
								<tr>
									<td>Total Sale Cash Return</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($salecashReturn, 2) }}</td>
								</tr>
								<tr>
									<td>Total Cash Expense</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($cashExpenses, 2) }}</td>
								</tr>
								<tr>
									<td class="text-gray-9 fw-bold bg-secondary-transparent">Total Cash</td>
									<td class="text-gray-9 fw-bold text-end bg-secondary-transparent">{{ number_format(($amount + $todayTotalSaleCashPayment)-($salecashReturn + $cashExpenses), 2) }}</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="modal-footer d-flex justify-content-end gap-2 flex-wrap">
						<button type="button" class="btn btn-md btn-primary" data-bs-dismiss="modal">Cancel</button>
					</div>
				</div>
			</div>
		</div>
		<!-- /Cash Register Details -->

		<!-- Today's Sale -->
		<div class="modal fade pos-modal" id="today-sale" tabindex="-1"  aria-hidden="true">
			<div class="modal-dialog modal-md modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						 <h5 class="modal-title">Today's Sale</h5>
						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<div class="table-responsive">
							<table class="table table-striped border">
								<tr>
									<td>Total Sale Amount</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($saleAmount, 2) }}</td>
								</tr>
								<tr>
									<td>Cash Payment</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($todayTotalSaleCashPayment, 2) }}</td>
								</tr>
								<tr>
									<td>Card Payment</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($todayTotalSaleCardPayment, 2) }}</td>
								</tr>
								<tr>
									<td>Cheque Payment:</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($todayTotalSalechequePayment, 2) }}</td>
								</tr>
								<tr>
									<td>Deposit Payment</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($todayTotalSaledepositPayment, 2) }}</td>
								</tr>
								{{-- <tr>
									<td>Points Payment</td>
									<td class="text-gray-9 fw-medium text-end">$3355.84</td>
								</tr>
								<tr>
									<td>Gift Card Payment</td>
									<td class="text-gray-9 fw-medium text-end">$565597.88</td>
								</tr>
								<tr>
									<td>Scan & Pay</td>
									<td class="text-gray-9 fw-medium text-end">$3355.84</td>
								</tr> --}}
								
								<tr>
									<td>Total Payment</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($todayTotalSalePayment, 2) }}</td>
								</tr>
								{{-- <tr>
									<td>Pay Later</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($saleReturn, 2) }}</td>
								</tr> --}}
								<tr>
									<td>Total Sale Return</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($saleReturn, 2) }}</td>
								</tr>
								<tr>
									<td>Total Expense:</td>
									<td class="text-gray-9 fw-medium text-end">{{ number_format($Expenses, 2) }}</td>
								</tr>
								{{-- <tr>
									<td class="text-gray-9 fw-bold bg-secondary-transparent">Total Cash</td>
									<td class="text-gray-9 fw-bold text-end bg-secondary-transparent">$587130.97</td>
								</tr> --}}
							</table>
						</div>
					</div>
					<div class="modal-footer d-flex justify-content-end gap-2 flex-wrap">
						<button type="button" class="btn btn-md btn-primary" data-bs-dismiss="modal">Cancel</button>
					</div>
				</div>
			</div>
		</div>
		<!-- /Today's Sale -->

		<!-- Today's Profit -->
		<div class="modal fade pos-modal" id="today-profit" tabindex="-1"  aria-hidden="true">
			<div class="modal-dialog modal-md modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						 <h5 class="modal-title">Today's Profit</h5>
						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<div class="row justify-content-center g-3 mb-3">
							<div class="col-lg-4 col-md-6 d-flex">
								<div class="border border-success bg-success-transparent br-8 p-3 flex-fill">
									<p class="fs-16 text-gray-9 mb-1">Total Sale</p>
									<h3 class="text-success">$89954</h3>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 d-flex">
								<div class="border border-danger bg-danger-transparent br-8 p-3 flex-fill">
									<p class="fs-16 text-gray-9 mb-1">Expense</p>
									<h3 class="text-danger">$89954</h3>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 d-flex">
								<div class="border border-info bg-info-transparent br-8 p-3 flex-fill">
									<p class="fs-16 text-gray-9 mb-1">Total Profit	</p>
									<h3 class="text-info">$2145</h3>
								</div>
							</div>
						</div>
						<div class="table-responsive">
							<table class="table table-striped border">
								<tr>
									<td>Product Revenue</td>
									<td class="text-gray-9 fw-medium text-end">$565597.88</td>
								</tr>
								<tr>
									<td>Product Cost</td>
									<td class="text-gray-9 fw-medium text-end">$3355.84</td>
								</tr>
								<tr>
									<td>Expense</td>
									<td class="text-gray-9 fw-medium text-end">$1959</td>
								</tr>
								<tr>
									<td>Total Stock Adjustment</td>
									<td class="text-gray-9 fw-medium text-end">$0</td>
								</tr>
								<tr>
									<td>Deposit Payment</td>
									<td class="text-gray-9 fw-medium text-end">$565597.88</td>
								</tr>
								<tr>
									<td>Total Purchase Shipping Cost</td>
									<td class="text-gray-9 fw-medium text-end">$3355.84</td>
								</tr>
								<tr>
									<td>Total Sell Discount</td>
									<td class="text-gray-9 fw-medium text-end">$565597.88</td>
								</tr>
								<tr>
									<td>Total Sell Return</td>
									<td class="text-gray-9 fw-medium text-end">$3355.84</td>
								</tr>
								<tr>
									<td>Closing Stock</td>
									<td class="text-gray-9 fw-medium text-end">$3355.84</td>
								</tr>
								<tr>
									<td>Total Sales</td>
									<td class="text-gray-9 fw-medium text-end">$565597.88</td>
								</tr>
								<tr>
									<td>Total Sale Return</td>
									<td class="text-gray-9 fw-medium text-end">$565597.88</td>
								</tr>
								<tr>
									<td>Total Expense</td>
									<td class="text-gray-9 fw-medium text-end">$565597.88</td>
								</tr>
								<tr>
									<td class="text-gray-9 fw-bold bg-secondary-transparent">Total Cash</td>
									<td class="text-gray-9 fw-bold text-end bg-secondary-transparent">$587130.97</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="modal-footer d-flex justify-content-end gap-2 flex-wrap">
						<button type="button" class="btn btn-md btn-primary" data-bs-dismiss="modal">Cancel</button>
					</div>
				</div>
			</div>
		</div>
		<!-- /Today's Profit -->
		<div id="loadingSpinner2" style="display:none; position:fixed; top:50%; left:50%; transform: translate(-50%, -50%);
    z-index: 9999; background: rgba(255, 255, 255, 0.732); padding: 20px; border-radius: 10px; box-shadow: 0 0 10px #40ebba;">
    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem;">
      <span class="sr-only">Loading...</span>
    </div>
    
</div>

			{{-- <script data-cfasync="false" src="../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script> --}}
			<script src="{{ asset('pos/assets2/js/jquery-3.7.1.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
		<!-- Feather Icon JS -->
		<script src="{{ asset('pos/assets2/js/feather.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>

		<!-- Slimscroll JS -->
		<script src="{{ asset('pos/assets2/js/jquery.slimscroll.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>
		
		<!-- Bootstrap Core JS -->
		<script src="{{ asset('pos/assets2/js/bootstrap.bundle.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>

		<!-- Datatable JS -->
		<script src="{{ asset('pos/assets2/js/jquery.dataTables.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>
		<script src="{{ asset('pos/assets2/js/dataTables.bootstrap5.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>

		<!-- Daterangepikcer JS -->
		<script src="{{ asset('pos/assets2/js/moment.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>
		<script src="{{ asset('pos/assets2/plugins/daterangepicker/daterangepicker.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>

		<!-- Owl JS -->
		<script src="{{ asset('pos/assets2/plugins/owlcarousel/owl.carousel.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>

		<!-- Select2 JS -->
		<script src="{{ asset('pos/assets2/plugins/select2/js/select2.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>

		<!-- Sticky-sidebar -->
		<script src="{{ asset('pos/assets2/plugins/theia-sticky-sidebar/ResizeSensor.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>
		<script src="{{ asset('pos/assets2/plugins/theia-sticky-sidebar/theia-sticky-sidebar.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>

		<!-- Color Picker JS -->
		<script src="{{ asset('pos/assets2/plugins/%40simonwep/pickr/pickr.es5.min.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>
		
		<!-- Custom JS -->
		<script src="{{ asset('pos/assets2/js/theme-colorpicker.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>
		<script src="{{ asset('pos/assets2/js/calculator.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>
		<script src="{{ asset('pos/assets2/js/script.js')}}" type="88014b4cf996f86887d992e0-text/javascript"></script>
	
	<script src="{{ asset('pos/assets2/rocket-loader.min.js')}}" data-cf-settings="88014b4cf996f86887d992e0-|49" defer></script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"9423c89f585dfd98","version":"2025.4.0-1-g37f21b1","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"3ca157e612a14eccbb30cf6db6691c29","b":1}' crossorigin="anonymous"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="{{ asset('pos/assets/js/sweetalert.js')}}"></script>
	<script src="{{ asset('pos/assets/js/sweetalert1.js')}}"></script>
	<script src="{{ asset('js/lc_select.js') }}"></script>
	<script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.3/dist/JsBarcode.all.min.js"
    ></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

</body>

	<script>

		 function updateSriLankaClock() {
        // Create a new date object
        const now = new Date();

        // Convert to Sri Lanka time (UTC+5:30)
        const sriLankaTime = new Date(now.toLocaleString("en-US", { timeZone: "Asia/Colombo" }));

        // Format the time
        const hours = String(sriLankaTime.getHours()).padStart(2, '0');
        const minutes = String(sriLankaTime.getMinutes()).padStart(2, '0');
        const seconds = String(sriLankaTime.getSeconds()).padStart(2, '0');

        // Display time
        document.getElementById('sri-lanka-clock').textContent = `${hours}:${minutes}:${seconds}`;
    }

    // Initial call and run every second
    setInterval(updateSriLankaClock, 1000);
    updateSriLankaClock();
$( document ).ready(function() {


	var branchId = "{{ session('branch_id') }}"; // Get session value from Laravel

	new lc_select(document.querySelector('#customer'), {
        wrap_width: '100%',
        min_for_search: 2,
        pre_placeh_opt: true,
    });



	var saleReference;
	var purchaseNo = '{{ $sale->sale_reference ?? '' }}';
    if (purchaseNo) {
      var lastSixCharacters = purchaseNo.slice(-6);
      var incrementedValue = parseInt(lastSixCharacters) + 1;
      $('.sale_reference').html(purchaseNo.slice(0, -6) + incrementedValue);
	  saleReference = purchaseNo.slice(0, -6) + incrementedValue;
    } else {
        
      $(".sale_reference").html('SR-202510000')
    }


	var mortgageDataArray = []; // Create an empty array to store the data
var totalQuantity = 0;
var totalCost = 0;
var originalBrandDivs = []; // Array to store the original brandDiv HTML as string
var currentDivVisible = true; // Flag to track which div is visible
let finaltotalSum = 0;
let finaltotalCostSum = 0;
let finaltotalQuantitySum = 0;
let finaltotalProfit = 0;
var discount = 0;
var discountAmount = 0;
var totalAmountAfterDiscount = 0; // ✅ Initialize to 0   
var ifAnyCharges = 0;
var otherChanges = 0;
var taxChanges = 0;
var ServiceChanges = 0;
var ReceivedAmount = 0;
var outstandingAmount = 0;

var productExsistingQuantity;
var productID;

$('#searchInput').on('input', function () {
    const searchTerm = $(this).val().trim();

    if (searchTerm.length >= 2) {
        $.ajax({
            url: `/search-productitems` , // Endpoint to handle search requests
            method: 'GET',
			data: { query: searchTerm }, // Send the search term to the server
success: function (data) {

    $('#suggestionList').hide();
    $('.SalesCreate').show();
    $('.productDivBox').hide();

    const suggestions = data.suggestions; // Assuming `data.suggestions` is the list
    const suggestionList = $('#suggestionList');
    suggestionList.empty(); // Clear existing suggestions

    // Remove duplicates by item.id or item.imu_number
    const uniqueSuggestions = suggestions.filter((value, index, self) => {
                    return index === self.findIndex((t) => (
                        t.imu_number === value.imu_number && value.type === "product item"
                    )) || value.type !== "product item";
                });

    if (uniqueSuggestions.length === 1) {
        // If there's only one suggestion, populate the input and hide the list
        const item = uniqueSuggestions[0];
		console.log(item);
        $('#searchInput')
            .val(`${item.name.trim()} (${item.imu_number.trim()}) (${item.each_cost.trim()})  price : (${item.price.trim()}) (QTY : ${item.quantity})`)
            .attr('data-id', item.id)
            .attr('data-quantity', item.quantity)
            .attr('data-badgstock_id', item.badgstock_id)
            .attr('data-each_cost', item.each_cost)
            .attr('data-type', item.type)
            .attr('data-imu_number', item.imu_number)
            .attr('data-item_id', item.itemId)
			.attr('data-branches_id', item.branches_id)
            .attr('data-price', item.price)
            .attr('data-name', item.name);
        suggestionList.hide();
        productExsistingQuantity = item.quantity // Hide suggestions
        productID = item.id
		$("#amount").val(item.price);
        // $("#itemCost").val(item.each_cost);

    } else if (uniqueSuggestions.length > 1) {
        // If there are multiple suggestions, dis
		// play them
		console.log(uniqueSuggestions);
        uniqueSuggestions.forEach(item => {
            suggestionList.append(
                `<li style="margin:5px; padding:5px; background-color:#c333f75c;" data-id="${item.id}" data-price="${item.price}" 
                data-quantity="${item.quantity}"
                data-badgstock_id="${item.badgstock_id}"
                data-each_cost="${item.each_cost}"
                data-type="${item.type}" 
				data-branches_id="${item.branches_id}" 
                data-imu_number="${item.imu_number}" 
                data-item_id="${item.itemId}"
				
                data-name="${item.name}" 
                class="suggestion-item">
                ${item.name.trim()} (${item.imu_number.trim()}) cost : (${item.each_cost.trim()})  price : (${item.price.trim()}) (QTY : ${item.quantity})
                </li>`
            );
            productExsistingQuantity = item.quantity // Hide suggestions
        });
        suggestionList.show(); // Show suggestions
    } else {
        // If no suggestions are found, hide the list
        suggestionList.hide();
    }
},

            error: function (error) {
                console.error('Error fetching suggestions:', error);
            }
        });
    } else {
        $('#suggestionList').hide();
		 // Hide suggestions if input is less than 2 characters
    }
});




$(document).on('input', '#discount', function() {
    discount = parseFloat($(this).val()) || 0; // ✅ Convert input to a number
    var discountedAmount = (finaltotalSum / 100) * discount;
    totalAmountAfterDiscount = (finaltotalSum + ifAnyCharges) - discountedAmount; // ✅ Set global variable

    $('#discountAmount').val('');
    $('.TOTALSALEAMOUNT').html(totalAmountAfterDiscount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
    $('#finaltotalProfit').html((totalAmountAfterDiscount - finaltotalCostSum).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
 $('.TOTALSALEAMOUNT').val(totalAmountAfterDiscount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
$('.TOTALSALEAMOUNT').val(totalAmountAfterDiscount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));

});

$(document).on('input', '#discountAmount', function() {
    $('#discount').val('');
    discountAmount = parseFloat($(this).val()) || 0; // ✅ Convert input to a number
    totalAmountAfterDiscount = (finaltotalSum + ifAnyCharges) - discountAmount; // ✅ Set global variable

    $('.TOTALSALEAMOUNT').html(totalAmountAfterDiscount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
    $('.TOTALSALEAMOUNT').val(totalAmountAfterDiscount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
	
	$('.TOTALSALEAMOUNT').val(totalAmountAfterDiscount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
	$('#finaltotalProfit').html((totalAmountAfterDiscount - finaltotalCostSum).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
});

$(document).on('input', '.ReceivedAmount', function() {
	
	ReceivedAmount = parseFloat($(this).val()) || 0;
	outstandingAmount = totalAmountAfterDiscount  - ReceivedAmount;
	$('#outstandingAmount').html((outstandingAmount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
	$('.outstandingAmount').val((outstandingAmount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));

});


function calculateTotal() {

	
    let totalSum = 0;
    let totalCostSum = 0;
    let totalQuantitySum = 0;
    let totalProfit = 0;

    mortgageDataArray.forEach(item => {
        totalSum += item.price * item.quantity;
        totalCostSum += parseFloat(item.itemCost) * item.quantity; 
        totalQuantitySum += item.quantity;
        totalProfit = totalSum - totalCostSum;
	
	});

    finaltotalSum = totalSum;
    finaltotalCostSum = totalCostSum;
    finaltotalQuantitySum = totalQuantitySum;
    finaltotalProfit = totalProfit;

    // ✅ Use global `totalAmountAfterDiscount`
    if (discount > 0) {
        var discountedAmountByPercentage = (finaltotalSum / 100) * discount;
        totalAmountAfterDiscount = (finaltotalSum + ifAnyCharges)- discountedAmountByPercentage;
    } else if ($('#discountAmount').val()) {
        var discountAmount = parseFloat($('#discountAmount').val()) || 0;
        totalAmountAfterDiscount = (finaltotalSum + ifAnyCharges) - discountAmount;
    } else {
        totalAmountAfterDiscount = (finaltotalSum + ifAnyCharges); // ✅ Ensure it has a value
    }

	outstandingAmount = totalAmountAfterDiscount - ReceivedAmount;

    var lastProfit = totalAmountAfterDiscount - totalCostSum;

	
	
    $('.TOTALSALEAMOUNT').html(totalAmountAfterDiscount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
    $('#finaltotalProfit').html(lastProfit.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
    $('#Subtotal').html(totalSum.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
    $('#totalQuantity').html(totalQuantitySum); // Quantity doesn't need formatting
    $('#totalCostForItems').html(totalCostSum.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
	$('.TOTALSALEAMOUNT').val(totalAmountAfterDiscount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
	$('.outstandingAmount').val((outstandingAmount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
}

// Example function to update price or quantity

function updateItem(index, newPrice, newQuantity) {
    if (mortgageDataArray[index]) {
        mortgageDataArray[index].price = newPrice;
        mortgageDataArray[index].quantity = newQuantity;
        calculateTotal(); // Recalculate and log the total
    }
}








$(document).on('click', '.backToProducts', function () {
	$('.SalesCreate').hide();
	$('.productDivBox').show();
})

// Handle click event on the suggestion items
$(document).on('click', '.suggestion-item', function () {
    const selectedId = $(this).data('id'); // Get data-id from clicked item
    const selectedText = $(this).text().trim(); // Get the text of the clicked item
	const quantity = $(this).data('quantity'); 
	const price = $(this).data('price'); 
	const name = $(this).data('name'); 
	const badgstock_id = $(this).data('badgstock_id'); 
	const branches_id = $(this).data('branches_id');
	const each_cost = $(this).data('each_cost');
	const type = $(this).data('type');
	const imu_number = $(this).data('imu_number'); 
	const itemId = parseInt($(this).data('item_id'));

    $('#searchInput')
        .val(selectedText) // Set the input value to the selected text
        .attr('data-id', selectedId)
		.attr('data-quantity', quantity)
		.attr('data-badgstock_id', badgstock_id)
		.attr('data-each_cost', each_cost)
		.attr('data-branches_id', branches_id)
		.attr('data-type', type)
		.attr('data-imu_number', imu_number)
		.attr('data-item_id', itemId)
		.attr('data-price', price)
		.attr('data-name', name);	
		
		// Set the data-id to the input field
		$("#Quantity").attr("max", quantity);
	

    $('#suggestionList').hide(); // Hide the suggestion list

	$("#amount").val(price);


});

    // Hide the suggestion list when the input field loses focus
    $('#searchInput').on('blur', function () {
        setTimeout(() => {
            $('#suggestionList').hide();
        }, 200); // Delay to allow click events on suggestions to be registered
    });


	



var warrantyStatus = 'no';
$('#option1').change(function() {
        if ($(this).is(':checked')) {
            $('#warrantyGroup').show(); // Show warranty dropdown
			warrantyStatus = 'yes';
        } else {
            $('#warrantyGroup').hide(); // Hide warranty dropdown
            $('#Warranty').val(''); // Reset dropdown selection
			warrantyStatus = 'no';
        }
    });




	$(document).on('click', '.productCardBox', function() {

		 $('#loadingSpinner').show();
    var id = $(this).data('id'); // Get the data-id attribute value
    $.ajax({
        url: '{{ route('get.product.brand') }}',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        data: { id: id },
        success: function(response) {
            console.log(response); // Check what you get from the backend
 			$('#loadingSpinner').hide();
            // Hide the productList div
            $('.productList').hide();

            if (Array.isArray(response.data)) {
                $('.productListnew').empty(); // Empty the new product list

                // Hide the original brandDivs
                $('.brandDiv').hide();
                currentDivVisible = false; // Set the flag to false when new content is shown

               response.data.forEach(function(item) {
    var productCard = `
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 productDivBox brandDiv" data-id="${item.product_brand_id}"
		 data-imu_number="${item.code}" data-quantity="${item.actual_quantity}" data-type="${item.type}"   data-price="${item.price}"
        data-name="${item.name}"   data-search_name="${item.product_brand_name}" >

            <div class="product-info card" style="padding: 10px;">
                <a href="javascript:void(0);" class="pro-img">
                    <img src="${item.image}" alt="${item.product_brand_name}" style="width:100px;">
                    <span><i class="ti ti-circle-check-filled"></i></span>
                </a>
                <h6 class="cat-name">
                    <a href="javascript:void(0);">${item.category_name || 'Category'}</a>
                </h6>
                <h6 class="product-name">
                    <a href="javascript:void(0);">${item.product_brand_name}</a>
                </h6>
                <div class="d-flex align-items-center justify-content-between price">
                    <span>${item.total_quantity} Pcs</span>
                    <p>$${item.price || '0.00'}</p>
                </div>
            </div>
        </div>`;
    
    $('.productListnew').append(productCard);
});


                // Add the back button after appending all product cards
                // var button = 
                //     `<button class="btn btn-lg text-center btn1 backModel"><span><i class="fa fa-arrow-left fa-3x"></i></span></button>`;
                // $('.productListnew').append(button);
            } else {
                console.error("Invalid response format:", response.data);
            }
        },
        error: function(xhr, status, error) {
            console.error('Error:', error);
        }
    });
});


$(document).on('click', '.brandDiv', function() {
	
	var name = $(this).data('name');
	var price = $(this).data('price');
	var quantity = $(this).data('quantity') ?? 0;
	var imu_number = $(this).data('imu_number');
	var type = $(this).data('type');
    var id = $(this).data('id'); // Get the data-id attribute value

    $.ajax({
        url: '{{ route('get.product.model') }}',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        data: { id: id },
        success: function(response) {
            console.log(response); // Check what you get from the backend

            // Hide the brandDiv elements
            $('.brandDiv').hide();

            if (Array.isArray(response.data)) {
                $('.productListnew').empty(); // Clear existing product list
					if (response.data.length === 0) {
						var rowData = {
							type: type,
        					itemBarcode: imu_number,
							productName :name,
        					itemCost:' ',
							itemId:' ',
        					price:price,
        					quantity: 1,
        					productId: id,
							badgstock_id: ' ',
							warrantyStatus: 'no',
							Warrantyperiod: ' '
						}

						var exists = mortgageDataArray.some(item => item.productId === id && item.itemBarcode === imu_number);
						console.log("Before push:", mortgageDataArray);

						
						if (!exists) {
							if (type == "Products") {
					
        						if (quantity === undefined || quantity === null || quantity === "undefined" || quantity === 0) {
									alert("Item Qunatity : 0");
        							return;
								} 
    						} else{
								mortgageDataArray.push(rowData);
								calculateTotal();
								console.log("fresh data.");
								console.log("after push:", mortgageDataArray);
							}
        				
    					} 
					
						else {
        					alert("Item already exists in the array.");
        					return; // Exit if item already exists
    					}
						
						

						var newRow = `
						<tr data-id=" " data-badgstock_id=" " data-each_cost=" "   data-type="${type}"  data-item_id=" " data-warrantystatus=" " data-Warrantyperiod=" "  style="box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;">
    						<td>
        					<h6 class="fs-16 fw-medium mb-1">
            					<a href="#" data-bs-toggle="modal" data-bs-target="#productsDetailsx">${name}</a>
        					</h6>
        					In Stock: ${quantity}
        						<br><small>${imu_number}</small>
    						</td>
     						<td class="fw-bold">${price}</td>

    						<td>
        					<div class="qty-item m-0 d-flex align-items-center gap-1">
            					<a href="javascript:void(0);" class="dec d-flex justify-content-center align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" title="minus" style="position:relative; left:20px; top:10px">
                				<i data-feather="minus-circle" class="feather-14"></i>
            					</a>
            					<input type="number" class="form-control text-center quantity-input qtyinput" name="qty" value="1" 
                   					max="${quantity}" min="1"  data-quantity="${quantity}" data-type="${type}" data-badgstock_id=" " data-price="${price}" style="width: 100px;">
            					<a href="javascript:void(0);" class="inc d-flex justify-content-center align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" title="plus" style="position:relative; right:20px; top:10px">
                					<i data-feather="plus-circle" class="feather-14"></i>
           						 </a>
        					</div>
    						</td>

    						<td class="fw-bold total-value">${price}</td>

    						<td class="text-end">
        						<a class="btn-icon delete-icon confirm-delete" href="javascript:void(0);" title="Delete">
            						<i class="ti ti-trash"></i>
        						</a>
   						 	</td>
							</tr>`;

						$('#orderTable tbody').append(newRow);
					}
					else{
						response.data.forEach(function(item) {
                    	var productCard = `
                        <div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3 productDivBox modelDiv" data-type="product"
                            data-imu_number="${item.code}" data-quantity="${item.actual_quantity}" data-price="${item.price}"
                            data-badgstock_id="${item.badgstock_id}" data-each_cost="${item.each_cost}"
                            data-name="${item.name}" data-id="${item.id}" data-branches_id="${item.branches_id}" data-search_name="${item.name}" >
                            <div class="product-info card ">
                                <a href="javascript:void(0);" class="product-image d-flex justify-content-center align-items-center" style="height: 120px;">
                                  <img src="{{ asset('./${item.image}') }}" alt="${item.name}"  style="height:100px; object-fit: contain;">

                                </a>
                                <div class="product-content text-center">
                                    <h6 class="fs-14 fw-bold mb-1">
                                        <a href="javascript:void(0);">${item.name}</a>
                                    </h6>
                                    <div class="text-center">
                                        <h6 class="fs-14 fw-semibold text-gray-6">Rs. ${item.price} (${item.actual_quantity})</h6>
                                        <h6 class="fs-14 fw-semibold text-gray-6">Cost: Rs. ${item.each_cost}</h6>
										<h6 class="fs-14 fw-semibold text-gray-6" style="position:relative; top:5px; color:#F0F8FF"> ${item.branch_name}</h6>
										
                                    </div>
                                </div>
                            </div>
                        </div>`;
                    $('.productListnew').append(productCard);
                });
				}
                

               
            } else {
                console.error("Invalid response format:", response.data);
            }
        },
        error: function(xhr, status, error) {
            console.error('Error:', error);
        }
    });
});


$(document).on('click', '#selectProduct', function() {
    var searchInput = $('#searchInput');

    console.log("Checking data attributes:");
    console.log(searchInput.data()); // Log all data attributes to debug

    // Fetch data attributes
    var id = parseInt(searchInput.attr('data-id')); // Use .attr() instead of .data()
    var each_cost = searchInput.attr('data-each_cost');
    var badgstock_id = parseInt(searchInput.attr('data-badgstock_id'));
    var type = searchInput.attr('data-type');
    var imu_number = searchInput.attr('data-imu_number');
    var itemId = parseInt(searchInput.attr('data-item_id'));
    var price = parseFloat(searchInput.attr('data-price')); // Ensure price is a number
    var quantity = parseInt(searchInput.attr('data-quantity')); // Ensure quantity is a number
    var name = searchInput.attr('data-name');
	var Warrantyperiod = $('#Warrantyperiod').val();
	var branches_id = searchInput.attr('data-branches_id');
	var itemPrices = parseFloat($('#amount').val());
	var QuantityItem =parseInt($('#Quantity').val());

    // Ensure values are not null or undefined
    id = id || "";
    each_cost = each_cost || "";
    badgstock_id = badgstock_id || "";
    type = type || "";
    imu_number = imu_number || "";
    itemId = itemId || "";
    price = price || 0; // Default to 0 if price is not set
    quantity = quantity || 1; // Default to 1 if quantity is not set

    // Prepare row data
    var rowData = {
        type: type,
        itemBarcode: imu_number,
		productName :name,
        itemCost: each_cost,
        price: itemPrices,
        quantity: QuantityItem,
        productId: id,
        badgstock_id: badgstock_id,
        itemId: itemId,
        warrantyStatus: warrantyStatus,
		Warrantyperiod:Warrantyperiod,
    };

    // Check if item already exists in the array
    var exists = mortgageDataArray.some(item => item.itemCost === each_cost && item.badgstock_id === badgstock_id && item.itemBarcode === imu_number);


	if(type != "Services" ){
   if(branches_id == branchId ){

    if (!exists) {
        mortgageDataArray.push(rowData);
		calculateTotal();
    } else {

		alert("Item already exists in the array.")
        return; // Exit if item already exists
    }
	}else{
		alert("Sorry Not available at this Branch.")
		return;
	}
	}else{
		if (!exists) {
        mortgageDataArray.push(rowData);
		calculateTotal();
    } else {

		alert("Item already exists in the array.")
        return; // Exit if item already exists
    }
	}

    // Clear search input and reset warranty status
    $('#searchInput').val('');
    
    $('#option1').prop('checked', false);
	$('#Warrantyperiod').val('');
	

    console.log("Updated Array:", mortgageDataArray);

    // Create new row HTML
    var newRow = `
<tr data-id="${badgstock_id}" data-badgstock_id="${badgstock_id}" data-item_id="${itemId}" data-each_cost="${each_cost}" data-type="${type}" data-warrantystatus="${warrantyStatus}" data-Warrantyperiod="${Warrantyperiod}" style="box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;">
    <td>
        <h6 class="fs-16 fw-medium mb-1">
            <a href="#" data-bs-toggle="modal" data-bs-target="#productsDetailsx">${name}</a>
        </h6>
        In Stock: ${quantity}
        <br><small>${imu_number}</small>
    </td>

    <td class="fw-bold">${itemPrices}</td>

   <td>
        <div class="qty-item m-0 d-flex align-items-center gap-1">
            <a href="javascript:void(0);" class="dec d-flex justify-content-center align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" title="minus" style="position:relative; left:20px;  top:10px">
                <i data-feather="minus-circle" class="feather-14"></i>
            </a>
            <input type="number" class="form-control text-center quantity-input qtyinput" name="qty" value="${QuantityItem}" 
                   max="${quantity}" min="1" data-item_id="${itemId}" data-quantity="${quantity}" data-type="${type}" data-id="${id}" data-badgstock_id="${badgstock_id}" data-price="${itemPrices}" style="width: 100px;">
            <a href="javascript:void(0);" class="inc d-flex justify-content-center align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" title="plus" style="position:relative; right:20px; top:10px">
                <i data-feather="plus-circle" class="feather-14"></i>
            </a>
        </div>
    </td>

    <td class="fw-bold total-value">${(itemPrices * QuantityItem).toFixed(2)}</td>

    <td class="text-end">
        <a class="btn-icon delete-icon confirm-delete" href="javascript:void(0);" title="Delete">
            <i class="ti ti-trash"></i>
        </a>
    </td>
</tr>`;


    // Append new row to the table
    $('#orderTable tbody').append(newRow);
	feather.replace();
	warrantyStatus = 'no';
	 $('.SalesCreate').hide();
    // Add event listener for quantity change
    // $('#orderTable').on('input', '.quantity-input', function() {
    //     var quantity = parseInt($(this).val()); // Get the updated quantity
    //     var price = parseFloat($(this).data('price')); // Get the price from data attribute
    //     var maxquantity = parseFloat($(this).data('quantity')); 
		
	// 	// var totalValue = quantity * price; 
	// 	if(quantity<=maxquantity){
	// 	var priceCellValue  = $(this).closest('tr').find('td:eq(1)').text().trim();
	// 	var totalValue = quantity * priceCellValue; 

    //     $(this).closest('tr').find('.total-value').text(totalValue.toFixed(2)); 
	// 	}
	
    // });
});


$(document).on('input', '.qtyinput', function() {
    var maxQuantity = parseInt($(this).attr('max'), 10);
	var type = $(this).attr('data-type');
    var currentValue = parseInt($(this).val(), 10);
	
	if(type != "Services"){
		if (currentValue > maxQuantity) {
        	$(this).val(maxQuantity); // Reset to max value if exceeded
        	alert(`Maximum quantity allowed is  ${maxQuantity}`);
    	}
	}
    
});



$(document).on('input', '#eachPrice', function() {
    var newPrice = parseFloat($(this).val()); // Get the new price
    var badgstock_id = parseInt($(this).attr('data-badgstock_id'));
    var type = $(this).attr('data-type');
    var item_id = parseInt($(this).attr('data-item_id'));
	var each_cost = parseFloat($(this).attr('data-each_cost'));
	var newQuant = parseFloat($('#productQuantities').val()); 
	var itemprofit =newPrice - each_cost
	$('#productProfit').html(itemprofit);
	
	$('#itemtotalPrice').val(newPrice*newQuant);
	

    if (newPrice >= each_cost) {
        $('#ItemProfitAlert').hide();
    } else {
        $('#ItemProfitAlert').show();
    }


	if(type == "product" ){
		var updatedItem = mortgageDataArray.find(item => item.badgstock_id === badgstock_id);
	if(updatedItem) {
		
        updatedItem.price = newPrice; 
		calculateTotal();// Update the price of the item
    }
	}
	if(type == "product item"){
	
		var updatedItem = mortgageDataArray.find(item => item.itemId === item_id);
	if(updatedItem) {
        updatedItem.price = newPrice;
		calculateTotal(); // Update the price of the item
    }
	}
    
    console.log(mortgageDataArray); // Log the updated array to confirm

	
});


$(document).on('input', '#productQuantities', function() {
    var newQuant = parseFloat($(this).val()); // Get the new price
	var badgstock_id = parseInt($(this).attr('data-badgstock_id'));
	var type = $(this).attr('data-type');
	var item_id = parseInt($(this).attr('data-item_id'));
	var newPrice = parseFloat($('#eachPrice').val());

	$('#itemtotalPrice').val(newPrice*newQuant);

	if(type == "product"){
		var updatedItem = mortgageDataArray.find(item => item.badgstock_id === badgstock_id);
		if(updatedItem) {
        	updatedItem.quantity = newQuant; 
			calculateTotal();// Update the price of the item
    	}
    }
	if(type == "product item"){
		var updatedItem = mortgageDataArray.find(item => item.itemId === item_id);
		if(updatedItem) {
        	updatedItem.quantity = newQuant; 
			calculateTotal();// Update the price of the item
    	}
	}
    console.log(mortgageDataArray); // Log the updated array to confirm

	
});


$(document).on('input', '#selectWarrantyperiod', function() {
    var Warranty_period = $(this).val(); // Get the new price
	var badgstock_id = parseInt($(this).attr('data-badgstock_id'));
	var type = $(this).attr('data-type');
	var item_id = parseInt($(this).attr('data-item_id'));
	// 


    console.log(mortgageDataArray); // Log the updated array to confirm

	if(type == "product"){
		var updatedItem = mortgageDataArray.find(item => item.badgstock_id === badgstock_id);
		if(updatedItem) {
        	updatedItem.Warrantyperiod = Warranty_period; 
			// Update the price of the item
    	}
    }
	if(type == "product item"){
		var updatedItem = mortgageDataArray.find(item => item.itemId === item_id);
		if(updatedItem) {
        	updatedItem.Warrantyperiod = Warranty_period; // Update the price of the item
    	}
	}


   
    console.log(mortgageDataArray); // Log the updated array to confirm

	
});


$(document).on('input', '#newWarranty', function() {
    var newWarrantystatus = $(this).val(); // Get the new price
	var badgstock_id = parseInt($(this).attr('data-badgstock_id'));
	var type = $(this).attr('data-type');
	var item_id = parseInt($(this).attr('data-item_id'));
	
	if(type == "product"){
		var updatedItem = mortgageDataArray.find(item => item.badgstock_id === badgstock_id);
		if(updatedItem) {
        	updatedItem.warrantyStatus = newWarrantystatus; // Update the price of the item
    	}
    }
	if(type == "product item"){
		var updatedItem = mortgageDataArray.find(item => item.itemId === item_id);
		if(updatedItem) {
        	updatedItem.warrantyStatus = newWarrantystatus; // Update the price of the item
    	}
	}
    console.log(mortgageDataArray); // Log the updated array to confirm

	
});




$(document).on('click', '#saveChanges', function () {

    var modal = $('#productsDetailsx');
    var updatedQuantity = $('#productQuantities').val(); // Get updated quantity from modal
    var updatedPrice = $('#eachPrice').val(); // Get updated price from modal
    var rowId = modal.data('rowId');
	var type = modal.data('type');
	var item_id = modal.data('item_id');
	// Store the row ID when opening the modal
	var warrantystatus = modal.data('warrantystatus'); 

	if(type == "product" || type == "Services"){
		

		if (rowId) {
        var row = $('tr[data-id="' + rowId + '"]'); // Select the correct row

        // Update the quantity input field inside the row
        row.find('.quantity-input').val(updatedQuantity);

        // Update the price column
        row.find('td:nth-child(2)').text(updatedPrice);

        // Update the total price column based on quantity and price
        var totalValue = updatedQuantity * updatedPrice;
        row.find('.total-value').text(totalValue.toFixed(2));
    }
	}
	if(type == "product item"){
		
		
		if (item_id) {
		

			var row = $('tr[data-item_id="' + item_id + '"]'); // Select the correct row

// Update the quantity input field inside the row
			row.find('.quantity-input').val(updatedQuantity);

// Update the price column
			row.find('td:nth-child(2)').text(updatedPrice);

// Update the total price column based on quantity and price
			var totalValue = updatedQuantity * updatedPrice;
			row.find('.total-value').text(totalValue.toFixed(2));
		}
	}
    // Close the modal
    modal.modal('hide');
});

// Store row ID when opening the modal
// $(document).on('click', '[data-bs-target="#shippingpop"]', function () {
//     var row = $(this).closest('tr');
//     var rowId = row.data('id');
// 	var warrantystatus = row.data('warrantystatus');
// 	var Warrantyperiod = row.data('Warrantyperiod');
// 	alert(warrantystatus)
// 	if (warrantystatus === "yes") {
//             $('#shippingpop select[name="state"]').first().val("Yes").change();
//         } else if (warrantystatus === "no") { 
//             $('#shippingpop select[name="state"]').first().val("No").change();
//         }
//     // Store row ID in modal
//     $('#shippingpop').data('rowId', rowId);
// 	$('#shippingpop').data('warrantystatus', warrantystatus);
// });



$(document).on('click', '[data-bs-target="#productsDetailsx"]', function() {


    var row = $(this).closest('tr'); // Get the parent row
    var rowId = row.data('id');
    var name = row.find('td:first').text().trim().split("\n")[0]; // Extract the name
    var imu_number = row.find('td:first').text().trim().split("\n")[1]; // Extract the IMU number
    var price = row.find('td:nth-child(2)').text().trim(); // Extract the price (3rd column)
    var quantity = row.find('.qtyinput').val(); // Extract quantity from input field
	

    var warrantystatus = row.data('warrantystatus');
    var item_id = row.data('item_id');
    var type = row.data('type');
	var badgstock_id = row.data('badgstock_id');

    var warrantyperiod = row.data('warrantyperiod');
	var each_cost = row.data('each_cost');
	var productProfit = parseFloat(price-each_cost)
	$('#productPurchaseCost').html(each_cost);
	$('#productProfit').html(productProfit);
	
	if (type == "product item") {
    var updatedItem = mortgageDataArray.find(item => item.itemId === item_id);

    if (updatedItem && updatedItem.Warrantyperiod ) {
        $('#selectWarrantyperiod').val(updatedItem.Warrantyperiod).change();
		$('#newWarranty').val(updatedItem.warrantyStatus).change();
    } else {
        if (warrantystatus === "yes") {
            $('#newWarranty').val("yes").change(); // Explicitly set "Yes" for newWarranty
            $('#selectWarrantyperiod').val(warrantyperiod).change();
        } else if (warrantystatus === "no") {
            $('#newWarranty').val("no").change(); // Explicitly set "No" for newWarranty
            $('#selectWarrantyperiod').val(" ").change(); // Clear selectWarrantyperiod
        }
    }
}

if (type == "product") {
    var updatedItem = mortgageDataArray.find(item => item.badgstock_id === badgstock_id);

    if (updatedItem && updatedItem.Warrantyperiod ) {
        $('#selectWarrantyperiod').val(updatedItem.Warrantyperiod).change();
		$('#newWarranty').val(updatedItem.warrantyStatus).change();
    } else {
        if (warrantystatus === "yes") {
            $('#newWarranty').val("yes").change();
            $('#selectWarrantyperiod').val(warrantyperiod).change();
        } else if (warrantystatus === "no") {
            $('#newWarranty').val("no").change();
            $('#selectWarrantyperiod').val(" ").change();
        }
    }
}


	alert("Warranty Period in Modal: " + warrantyperiod); 
	
	var itemtotalPrice = price*quantity;
    // Update the modal elements
    $('#productsDetailsx .modal-title').html(`${name}`);

    // Correctly set the data attributes for the modal elements
    $('#eachPrice').attr('data-badgstock_id', rowId);
    $('#eachPrice').attr('data-type', type);
    $('#eachPrice').attr('data-item_id', item_id);
	$('#eachPrice').attr('data-each_cost', each_cost);

	$('#selectWarrantyperiod').attr('data-badgstock_id', rowId);
    $('#selectWarrantyperiod').attr('data-type', type);
    $('#selectWarrantyperiod').attr('data-item_id', item_id);

	
	
	$('#newWarranty').attr('data-badgstock_id', rowId);
    $('#newWarranty').attr('data-type', type);
    $('#newWarranty').attr('data-item_id', item_id);


    $('#productQuantities').attr('data-badgstock_id', rowId);
	$('#productQuantities').attr('data-type', type);
	$('#productQuantities').attr('data-item_id', item_id);

    // Set the extracted price into the input field
    $('#eachPrice').val(price);
    $('#productsDetailsx').data('rowId', rowId);
    $('#productsDetailsx').data('item_id', item_id);
    $('#productsDetailsx').data('type', type);

    // Set the extracted quantity into the input field
    $('#productQuantities').val(quantity);
	$('#itemtotalPrice').val(itemtotalPrice);

    // Handle the warranty status

});









$(document).on('click', '.modelDiv', function() {
	var id = $(this).data('id');
	var branches_id  = $(this).data('branches_id');
	var each_cost = $(this).data('each_cost'); 
	var name = $(this).data('name');
	var price = $(this).data('price');
	var quantity = $(this).data('quantity');
	var badgstock_id = $(this).data('badgstock_id');
	var imu_number = $(this).data('imu_number');
	var type = $(this).data('type');
	

  if (!quantity || quantity == 0) {
        alert('This product is out of  stock.');
        return; // Stop further execution
    }

	$.ajax({
        url: '{{ route('get.product.model.item') }}',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        data: { 
			id: id,
			badgstock_id : badgstock_id,
			each_cost:each_cost,
		 },
		 success: function(response) {
    console.log(response); // Check what you get from the backend

    // Hide the brandDiv elements
    $('.brandDiv').hide();
	



    if (Array.isArray(response.data)) {
        if (response.data.length === 0) {

			var rowData = {
		type: "product",
        itemBarcode: imu_number,
		productName :name,
        itemCost:each_cost,
		itemId:' ',
        price:price,
        quantity: 1,
        productId: id,
		badgstock_id: badgstock_id,
		warrantyStatus: 'no',
		Warrantyperiod: ' '
    };

var exists = mortgageDataArray.some(item => item.itemCost === each_cost && item.badgstock_id === badgstock_id && item.itemBarcode === imu_number);
console.log("Before push:", mortgageDataArray);
 if(branches_id == branchId ){
 if (!exists) {
        mortgageDataArray.push(rowData);
		calculateTotal();
		console.log("fresh data.");
		console.log("after push:", mortgageDataArray);
    } else {
        console.log("Item already exists in the array.");
        return; // Exit if item already exists
    }
 }else{
	alert("Sorry")
	return;
 }
   

			var newRow = `
<tr data-id="${badgstock_id}" data-badgstock_id="${badgstock_id}" data-each_cost="${each_cost}"   data-type="${type}"  data-item_id=" " data-warrantystatus="${warrantyStatus}" data-Warrantyperiod="${Warrantyperiod}"  style="box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;">
    <td>
        <h6 class="fs-16 fw-medium mb-1">
            <a href="#" data-bs-toggle="modal" data-bs-target="#productsDetailsx">${name}</a>
        </h6>
        In Stock: ${quantity}
        <br><small>${imu_number}</small>
    </td>

     <td class="fw-bold">${price}</td>

    <td>
        <div class="qty-item m-0 d-flex align-items-center gap-1">
            <a href="javascript:void(0);" class="dec d-flex justify-content-center align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" title="minus" style="position:relative; left:20px; top:10px">
                <i data-feather="minus-circle" class="feather-14"></i>
            </a>
            <input type="number" class="form-control text-center quantity-input qtyinput" name="qty" value="1" 
                   max="${quantity}" min="1"  data-quantity="${quantity}" data-type="${type}" data-badgstock_id="${badgstock_id}" data-price="${price}" style="width: 100px;">
            <a href="javascript:void(0);" class="inc d-flex justify-content-center align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" title="plus" style="position:relative; right:20px; top:10px">
                <i data-feather="plus-circle" class="feather-14"></i>
            </a>
        </div>
    </td>

    <td class="fw-bold total-value">${price}</td>

    <td class="text-end">
        <a class="btn-icon delete-icon confirm-delete" href="javascript:void(0);" title="Delete">
            <i class="ti ti-trash"></i>
        </a>
    </td>
</tr>`;

$('#orderTable tbody').append(newRow);


            return; // Exit the function to avoid further execution
        }

        $('.productListnew').empty(); // Empty the new product list

        response.data.forEach(function(item) {
            var formattedPrice = Number(item.price).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            var productCard = `
    <div class="col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-3 card3">
        <div class="product-info card productDivBox" data-id="${item.id}">
            <a href="javascript:void(0);" class="product-image">
                <img src="assets/img/products/pos-product-05.jpg" alt="Products">
            </a>
            <div class="product-content text-center">
                <h6 class="fs-14 fw-bold mb-1">
                    <a href="javascript:void(0);">${item.name}</a>
                </h6>
                <div>
                    <p class="mb-0">IMU: ${item.imu_number}</p>
                    <h6 class="fs-14 fw-semibold text-gray-6">${formattedPrice}</h6>
                </div>
                <button class="btn btn-light buy-now-btn mt-2" 
                    data-name="${item.name}" 
                    data-price="${price}" 
                    data-id="${item.id}"
                    data-imu_number="${item.imu_number}"
                    data-quantity="${item.quantity}"
                    data-products_id="${item.product_id}"
                    data-each_cost="${item.each_cost}"
                    data-badgstock_id="${item.badgstock_id}"
                    data-type="product item">
                    Buy Now
                </button>
            </div>
        </div>
    </div>`;

            $('.productListnew').append(productCard);
        });

        // Add the back button after appending all product cards
        // var button = 
        //     `<button class="btn btn-lg text-center btn1 backModel"><span><i class="fa fa-arrow-left fa-3x"></i></span></button>`;
        // $('.productListnew').append(button);
    } else {
        console.error("Invalid response format:", response.data);
    }
},
error: function(xhr, status, error) {
    console.error('Error:', error);
}
,
        error: function(xhr, status, error) {
            console.error('Error:', error);
        }
    });

});



$(document).on('click', '.confirm-delete', function (e) {
    e.preventDefault();
    var row = $(this).closest('tr');
    var productId = row.data('id');
	var item_id = row.data('item_id')

	if(item_id){
		var index = mortgageDataArray.findIndex(item => item.itemId === item_id);
		if (index !== -1) {
			mortgageDataArray.splice(index, 1); // Remove the item from the array
			calculateTotal();
			console.log(mortgageDataArray)
		}
	}
	else if(productId ){
		
		var index = mortgageDataArray.findIndex(item => item.badgstock_id === productId);
		
		if (index !== -1) {
				mortgageDataArray.splice(index, 1); // Remove the item from the array
				calculateTotal();
				console.log(mortgageDataArray)
		}
	}
	// alert()
    // Remove the row containing the clicked delete button
    row.remove();

    $('.card3').each(function() {
        if ($(this).data('id') === productId) {
            $(this).css('background-color', '#89059dab');
			$(this).find('.buy-now-btn').prop('disabled', false);
        }
    });
});



$(document).on('click', '.buy-now-btn', function() {

    var productName = $(this).data('name');
    var price = parseFloat($(this).data('price'));
    var imu_number = $(this).data('imu_number');
    var itemId = $(this).data('id');
    var quantity = $(this).data('quantity');
    var products_id = $(this).data('products_id');
    var badgstock_id = $(this).data('badgstock_id');
    var type = $(this).data('type');
    var each_cost = $(this).data('each_cost');

    // Check if imu_number already exists in mortgageDataArray
    var exists = mortgageDataArray.some(function(item) {
        return item.itemBarcode === imu_number;
    });

    if (exists) {
        alert("Item already exists!");
        return; // Stop further execution
    }

    var rowData = {
        type: "product item",
        itemBarcode: imu_number,
        productName: productName,
        itemCost: each_cost,
        price: price,
        quantity: 1,
        productId: products_id,
        badgstock_id: badgstock_id,
        itemId: itemId,
        warrantyStatus: 'no',
        Warrantyperiod: ' ',
    };

    // Add to data array
    mortgageDataArray.push(rowData);
    calculateTotal();
    console.log(mortgageDataArray);

    var newRow = `
<tr data-id="${badgstock_id}" data-badgstock_id="${badgstock_id}" data-item_id="${itemId}" data-each_cost="${each_cost}" data-type="${type}" data-warrantystatus="no" data-Warrantyperiod=" " style="box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;">
    <td>
        <h6 class="fs-16 fw-medium mb-1">
            <a href="#" data-bs-toggle="modal" data-bs-target="#productsDetailsx">${productName}</a>
        </h6>
        In Stock: ${quantity}
        <br><small>${imu_number}</small>
    </td>

    <td class="fw-bold">${price}</td>

    <td>
        <div class="qty-item m-0 d-flex align-items-center gap-1">
            <a href="javascript:void(0);" class="dec d-flex justify-content-center align-items-center" title="minus" style="position:relative; left:20px;  top:10px">
                <i data-feather="minus-circle" class="feather-14"></i>
            </a>
            <input type="number" class="form-control text-center  qtyinput quantity-input-item" name="qty" value="1" 
                   max="${quantity}" min="1" data-item_id="${itemId}" data-quantity="${quantity}" data-type="${type}" data-id="${badgstock_id}" data-badgstock_id="${badgstock_id}" data-price="${price}" style="width: 100px;">
            <a href="javascript:void(0);" class="inc d-flex justify-content-center align-items-center" title="plus" style="position:relative; right:20px; top:10px">
                <i data-feather="plus-circle" class="feather-14"></i>
            </a>
        </div>
    </td>

    <td class="fw-bold total-value">${(price).toFixed(2)}</td>

    <td class="text-end">
        <a class="btn-icon delete-icon confirm-delete" href="javascript:void(0);" title="Delete">
            <i class="ti ti-trash"></i>
        </a>
    </td>
</tr>`;

    $('#orderTable tbody').append(newRow);

    // Change the color of the associated div
    $('.card3').each(function() {
        if ($(this).data('id') === itemId) {
            $(this).css('background-color', 'red');
        }
    });
});

var prevOtherChanges = parseFloat($('#otherChanges').val()) || 0;
var prevTaxChanges = parseFloat($('#taxChanges').val()) || 0;
var prevServiceChanges = parseFloat($('#ServiceChanges').val()) || 0;


$(document).on('input', '#ServiceChanges, #otherChanges, #taxChanges', function () {
    var newServiceChanges = parseFloat($('#ServiceChanges').val()) || 0;
    var newOtherChanges = parseFloat($('#otherChanges').val()) || 0;
    var newTaxChanges = parseFloat($('#taxChanges').val()) || 0;

    // Calculate the difference (new - previous)
    var diffService = newServiceChanges - prevServiceChanges;
    var diffOther = newOtherChanges - prevOtherChanges;
    var diffTax = newTaxChanges - prevTaxChanges;

    // Update total amount dynamically by adding/subtracting differences
    totalAmountAfterDiscount += diffService + diffOther + diffTax;

    // Update previous values for next change
    prevServiceChanges = newServiceChanges;
    prevOtherChanges = newOtherChanges;
    prevTaxChanges = newTaxChanges;

    // Update the UI
    newIfAnyCharges = newOtherChanges + newTaxChanges + newServiceChanges;

    $('#OtherCharges').html(
        newIfAnyCharges.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    );

    $('.TOTALSALEAMOUNT').html(
        (totalAmountAfterDiscount )
        .toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    );

	 $('.TOTALSALEAMOUNT').val(
        (totalAmountAfterDiscount )
        .toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    );

    $('#finaltotalProfit').html(
        ((totalAmountAfterDiscount - finaltotalCostSum) )
        .toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    );

    console.log("Updated Total Amount:", totalAmountAfterDiscount);
    console.log("Charge Difference (Other, Tax, Service):", diffOther, diffTax, diffService);


	ifAnyCharges = newIfAnyCharges

	otherChanges = newOtherChanges
  	taxChanges = newTaxChanges
  	ServiceChanges =  newServiceChanges
});




//  $('#orderTable').on('input', '.quantity-input', function() {
//         var quantity = parseInt($(this).val()); // Get the updated quantity
//         var price = parseFloat($(this).data('price')); // Get the price from data attribute
//           var maxQuantity = parseInt($(this).attr('max'));
		
// 		// var totalValue = quantity * price; 

// 		var priceCellValue = $(this).closest('tr').find('td:eq(1)').text().trim();
// 		if(quantity>maxQuantity){
// 			alert(`Maximum quantity is ${maxQuantity}`)
// 		}else{
// 			var totalValue = quantity * priceCellValue; 
//         	$(this).closest('tr').find('.total-value').text(totalValue.toFixed(2)); 
// 		}
		
//     });




// $(document).on('input', '.quantity-input', function() {
//     var newQuantity = parseInt($(this).val()) || 1; // Ensure it's a valid number
//     var badgstock_id = $(this).data('badgstock_id'); // Get the item's ID
// 	var type = $(this).data('type');
// 	var itemId = parseInt($(this).data('item_id'));


// 	if(type=="product item"){
		
// 		mortgageDataArray.forEach(item => {
		
//         if (item.itemId == itemId) {
	
//             item.quantity = newQuantity;
// 			calculateTotal();
//         }
//     });
// 	}
// 	if(type=="product"){
// 		mortgageDataArray.forEach(item => {
//         if (item.badgstock_id == badgstock_id) {
//             item.quantity = newQuantity;
// 			calculateTotal();
//         }
//     });
// 	}

// });
$(document).on('input', '.quantity-input', function () {
    const $input = $(this);
    const newQuantity = parseInt($input.val()) || 1;
    const maxQuantity = parseInt($input.attr('max'));
    const price = parseFloat($input.data('price'));
    const type = $input.data('type');
    const itemId = parseInt($input.data('item_id'));
    const badgstock_id = $input.data('badgstock_id');

	if(type != "Services"){
    // Validate max quantity
    if (newQuantity > maxQuantity) {
        alert(`Maximum quantity is ${maxQuantity}`);
        $input.val(maxQuantity);
        return;
    }
	}
    // Update the quantity in the mortgageDataArray
    mortgageDataArray.forEach(item => {
        if (
            (type === "product item" && item.itemId === itemId) ||
            (type === "product" && item.badgstock_id === badgstock_id) ||
			(type === "Services" && item.badgstock_id === badgstock_id)
        ) {
            item.quantity = newQuantity;
        }
    });

    // Update total value in the UI
    const totalValue = newQuantity * price;

    $input.closest('tr').find('.total-value').text(totalValue.toFixed(2));

    // Recalculate invoice totals
    calculateTotal();

    // Debug
    console.log(mortgageDataArray);
});


$(document).on('input', '.quantity-input-item', function () {
    var newQuantity = parseInt($(this).val()) || 1;
    var itemId = parseInt($(this).data('id'));
    var price = parseFloat($(this).data('price'));

    // Update the mortgageDataArray
    mortgageDataArray.forEach(item => {
        if (item.itemId == itemId) {
            item.quantity = newQuantity;
        }
    });

    // Calculate total value
    var totalValue = newQuantity * price;
    $(this).closest('tr').find('.total-value').text(totalValue.toFixed(2));

    // Recalculate overall total
    calculateTotal();

    console.log(mortgageDataArray);
});

	$(document).on('click', '.btn-check', function() {
    var selectedValue = parseFloat($('label[for="' + $(this).attr('id') + '"]').text().trim());
    var currentValue = parseFloat($('.ReceivedAmount').val()) || 0; // Use 0 if NaN

    var newValue = currentValue + selectedValue;
	ReceivedAmount = newValue
	outstandingAmount = totalAmountAfterDiscount  - newValue;
	$('#outstandingAmount').html((outstandingAmount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
	$('.outstandingAmount').val((outstandingAmount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));

    $('.ReceivedAmount').val(newValue);
});

$(document).on('click', '.payment-item', function() {
		
	});

	let salePaymentMethod ='';
	var StaffNote ='';
	var SaleNote ='';
	var PaymentNote ='';
	var voucher ='';
	$(document).on('click', '#finalSubmission, #DraftOrder', function () {

    var orderType = $(this).data('type');
		priceptbillTable();
	
    let errorMessage = '';
    let isValid = true;

    // Collect input values
    let customer = $("#customer").val();
	salePaymentMethod = $(".PaymentMethods").val();
	StaffNote = $(".StaffNote").val();
	SaleNote = $(".SaleNote").val();
	PaymentNote = $(".PaymentNote").val();
	voucher = $(".voucher").val();  
	

    let sale_reference = $(".sale_reference").html();

	

    // Validation
    if (!finaltotalSum) errorMessage += 'Date is required.<br>';
    if (!totalAmountAfterDiscount || !customer) errorMessage += 'Customer is required.<br>';
    if (!finaltotalQuantitySum) errorMessage += 'Amount is required.<br>';

    if (errorMessage) {
        Swal.fire({ icon: 'error', title: 'Validation Error', html: errorMessage, confirmButtonText: 'OK' });
        return;
    }

    // Check if orderType is "DraftOrder"
    if (orderType === 'DraftOrder') {
        Swal.fire({
            title: 'Enter Nick Name ☺️',
            input: 'text',
            inputPlaceholder: 'Enter order name...',
            showCancelButton: true,
            confirmButtonText: 'Save Draft',
            cancelButtonText: 'Cancel',
            inputValidator: (value) => {
                if (!value) return 'Order name is required!';
            }
        }).then((result) => {
			console.log("Swal Result:", result);
			let draftOrderName = result.value.trim();
                console.log("Draft Order Name:", draftOrderName); // Debugging log
                submitForm(orderType, draftOrderName);
        });
    } else {
        submitForm(orderType, null);
    }
});

// Function to submit the form data via AJAX
function submitForm(orderType, draftOrderName) {
    let form_data = new FormData();
    form_data.append('_token', '{{ csrf_token() }}');
    form_data.append('branchId', branchId);
    form_data.append('customer', $("#customer").val());
    form_data.append('finaltotalSum', finaltotalSum);
    form_data.append('finaltotalCostSum', finaltotalCostSum);
    form_data.append('finaltotalQuantitySum', finaltotalQuantitySum);
    form_data.append('discount', discount);
    form_data.append('totalAmountAfterDiscount', totalAmountAfterDiscount);
    form_data.append('ifAnyCharges', ifAnyCharges);
    form_data.append('otherChanges', otherChanges);
    form_data.append('taxChanges', taxChanges);
    form_data.append('ServiceChanges', ServiceChanges);
    form_data.append('ReceivedAmount', ReceivedAmount);
    form_data.append('outstandingAmount', outstandingAmount);
    form_data.append('discountAmount', discountAmount);
    form_data.append('sale_reference', $(".sale_reference").html());
    form_data.append('PaymentMethods', salePaymentMethod);
    form_data.append('orderType', orderType);
	form_data.append('StaffNote', StaffNote);
    form_data.append('SaleNote', SaleNote);
    form_data.append('PaymentNote', PaymentNote);
  	form_data.append('voucher', voucher);
	

    if (draftOrderName) {
        form_data.append('draftOrderName', draftOrderName);
    }

    $.each(mortgageDataArray, function(i, rowData) {
        form_data.append(`mortgageData[${i}][sale_reference]`, $(".sale_reference").html());
        form_data.append(`mortgageData[${i}][type]`, rowData.type);
        form_data.append(`mortgageData[${i}][itemBarcode]`, rowData.itemBarcode);
        form_data.append(`mortgageData[${i}][itemCost]`, rowData.itemCost);
        form_data.append(`mortgageData[${i}][price]`, rowData.price);
        form_data.append(`mortgageData[${i}][quantity]`, rowData.quantity);
        form_data.append(`mortgageData[${i}][productId]`, rowData.productId);
        form_data.append(`mortgageData[${i}][badgstock_id]`, rowData.badgstock_id);
        form_data.append(`mortgageData[${i}][itemId]`, rowData.itemId);
        form_data.append(`mortgageData[${i}][warrantyStatus]`, rowData.warrantyStatus);
        form_data.append(`mortgageData[${i}][Warrantyperiod]`, rowData.Warrantyperiod);
    });

    $.ajax({
        url: '/store-sale',
        type: 'POST',
        data: form_data,
        contentType: false,
        processData: false,
        success: function () {
            generateInvoice();
            Swal.fire({ icon: 'success', title: 'Success', text: 'Data submitted successfully!', confirmButtonText: 'OK' })
                .then(() => window.location.reload());
        },
        error: function () {
            Swal.fire({ icon: 'error', title: 'Error', text: 'There was an error submitting your data.', confirmButtonText: 'OK' });
        }
    });
}

$(document).on('click', '#print-receipt .btn-primary', function(e) {
    e.preventDefault();
	generateInvoice();
});

$(document).on('keyup', '#search-product', function () {
    var searchText = $(this).val().toLowerCase();

    $('.productDivBox').each(function () {
        var productName = ($(this).data('search_name') || '').toString().toLowerCase();

        if (productName.includes(searchText)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
	$('.productCardBox').each(function () {
        var productName = ($(this).data('search_name') || '').toString().toLowerCase();

        if (productName.includes(searchText)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

	
});


function generateInvoice(){
	let sale_reference = $(".sale_reference").html();
    try {


		 JsBarcode("#billSaleRefference", sale_reference, {
            format: "CODE128", // Use CODE128 for alphanumeric barcodes
            displayValue: true,
            lineColor: "#24292e",
            width: 2,
            height: 40,
            fontSize: 20,
        });
        // Get the modal body content
        const content = $('#print-receipt .modal-body').html()
            // Replace Bootstrap row/col classes with custom print-safe classes
            .replace(/class="row"/g, 'class="row-grid"')
            .replace(/col-(sm|md)-\d+/g, 'col-half');

        // Create an iframe for printing
        const iframe = document.createElement('iframe');
        iframe.style.position = 'absolute';
        iframe.style.width = '0';
        iframe.style.height = '0';
        iframe.style.border = 'none';
        document.body.appendChild(iframe);


        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        iframeDoc.open();
        iframeDoc.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>Receipt</title>
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        margin: 0;
                        font-size: 12px;
                        color: #646B72;
                    }
                    .text-center {
                        text-align: center !important;
                    }


					#priceptbillTable tbody {
    					border-top: 0 !important; /* Remove any top border */
					}

					#priceptbillTable tbody td {
    					border-top: 0 !important; /* Remove top border from each cell */
					}

                    
                    @media print and (max-width: 600px) {
                        .col-half {
                            width: 100%;
                        }
                    }
                    .table-borderless>:not(caption)>*>* {
                        border-bottom-width: 0;
                    }
                    tbody, td, tfoot, th, thead, tr {
                        border-color: inherit;
                        border-style: solid;
                        border-width: 0;
                    }
                    #print-receipt {
                        color: #646B72;
                        width: 424px;
                        margin: 0 auto;
                    }
                    #print-receipt .modal-body h6 {
                        font-size: 16px;
                    }
                    #print-receipt .modal-body .info h6 {
                        margin: 10px 0;
                        font-weight: 700;
                    }
                    #print-receipt .modal-body .info a {
                        color: #646B72;
                    }
                    #print-receipt .modal-body .tax-invoice h6 {
                        margin: 10px 0;
                        font-weight: 700;
                        position: relative;
                    }
                    #print-receipt .modal-body .tax-invoice h6:after,
                    #print-receipt .modal-body .tax-invoice h6:before {
                        transform: translateY(-50%);
                        content: "";
                        border-top: 1px dashed #E6EAED;
                        width: 35%;
                    }
                    #print-receipt .modal-body .tax-invoice h6:before {
                        position: absolute;
                        top: 50%;
                        left: 0;
                    }
                    #print-receipt .modal-body .tax-invoice h6:after {
                        position: absolute;
                        top: 50%;
                        right: 0;
                    }
                    #print-receipt .modal-body .tax-invoice .invoice-user-name {
                        margin-bottom: 10px;
                    }
                    #print-receipt .modal-body .tax-invoice span {
                        color: #212B36;
                    }
                    #print-receipt .modal-body table thead th {
                        color: #212B36;
                        font-weight: 700;
                        padding: 10px 5px;
                        border-top: 1px dashed #E6EAED;
                        border-bottom: 1px dashed #E6EAED;
                    }
                    #print-receipt .modal-body table tbody tr:first-child td {
                        padding-top: 10px;
                    }
                    #print-receipt .modal-body table tbody tr td {
                        padding: 5px;
                    }
                    #print-receipt .modal-body table tbody tr table {
                        border-top: 1px dashed #E6EAED;
                    }
                    #print-receipt .modal-body table tbody tr table tr:last-child td {
                        font-weight: 700;
                        font-size: 18px;
                        color: #092C4C;
                    }
                    #print-receipt .modal-body .invoice-bar {
                        border-top: 1px dashed #E6EAED;
                        padding: 20px 0 0 0;
                    }
                    #print-receipt .modal-body .invoice-bar img {
                        margin: 20px 0 10px;
                    }
                    #print-receipt .modal-body .invoice-bar p {
                        margin-bottom: 20px;
                    }
                    .table-fit {
                        width: 100%;
                        border-collapse: collapse;
                    }
                    .table-fit th,
                    .table-fit td {
                        padding: 5px;
                        border: 1px solid #ddd;
                    }
                    @media print {

					.row-grid {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        margin-bottom: 10px;
                    }
                    .col-half {
                        width: 48%;
                    }

					 .no-border-print, 
    					.no-border-print tr, 
    					.no-border-print td {
       					border: none !important;
    					}
                        @page {
                            size: auto;
                            margin: 2mm;
                        }
                        body {
                            background: white;
                            color: black;
                        }
                    }
                    @media (max-width: 991.98px) {
                        #print-receipt .modal-body table tbody tr table tr:last-child td {
                            font-size: 16px;
                        }
                    }
                </style>
            </head>
            <body>
                <div id="print-receipt">
                    <div class="modal-dialog">
                        <div class="modal-body">
                            ${content}
                        </div>
                    </div>
                </div>
            </body>
            </html>
        `);
        iframeDoc.close();

        setTimeout(() => {
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
            setTimeout(() => {
                document.body.removeChild(iframe);
            }, 1000);
        }, 200);

    } catch (error) {
        console.error('Print error:', error);
        alert('Printing failed: ' + error.message);
    }
}

$("#printInvoice").click(function () {

   priceptbillTable();
});

function priceptbillTable(){
 $('#priceptbillTable tbody').empty();

    let totalAmount = 0;

    mortgageDataArray.forEach((data, index) => {
        let subTotal = parseFloat(data.price) * parseInt(data.quantity);
        totalAmount += subTotal;

		console.log(mortgageDataArray)
        let rowHTML = `
            <tr>
                <td>${data.productName}<br>${data.itemBarcode}</td>
                <td>${parseFloat(data.price).toFixed(2)}</td>
                <td>${data.quantity}</td>
                <td class="text-end">${subTotal.toFixed(2)}</td>
            </tr>
        `;

        $('#priceptbillTable tbody').append(rowHTML);

		


    });
let summaryRow = `
    <tr>
        <td colspan="4">
            <table class="table-borderless w-100 table-fit no-border-print" style="border-width: 0;">
                <tr style="border-width: 0; padding-top: 20px; margin-bottom :20px;" >
                    <td class="fw-bold">Sub Total :</td>
					<td></td>
                    <td class="text-end" style="text-align: right;">${totalAmount.toFixed(2)}</td>
                </tr>
                <tr style="padding-top: 20px; margin-bottom :20px;">
                    <td class="fw-bold" >Discount Amount:</td>
					<td></td>
                    <td class="text-end" style="text-align: right;"> - ${discountAmount.toFixed(2)}</td>
                </tr>
                <tr style="padding-top: 20px; margin-bottom :20px;">
                    <td class="fw-bold" >Other Charges :</td>
					<td></td>
                    <td class="text-end" style="text-align: right;"> + ${ifAnyCharges.toFixed(2)}</td>
                </tr>
                <tr style="padding-top: 20px; margin-bottom :20px;">
                    <td class="fw-bold">Grand Total :</td>
					<td></td>
                    <td class="text-end" style="text-align: right;"> + ${totalAmountAfterDiscount.toFixed(2)}</td>
                </tr>
            </table>
        </td>
    </tr>
`;

$('#priceptbillTable tbody').append(summaryRow);

    // Optionally show total amount somewhere
    console.log("Total Invoice Amount:", totalAmount.toFixed(2));
	}











function taxinvoice(){

	if ($('#priceptbillTable thead th.tax-col').length === 0) {

        // Add Tax header before Total (or after Qty if you prefer)
        $('#priceptbillTable thead tr th:nth-child(3)')
            .after('<th class="tax-col">Tax</th>');

        // Add Tax column to each existing row
        $('#priceptbillTable tbody tr').each(function () {
            $(this).find('td:nth-child(3)')
                .after('<td class="tax-col">0.00</td>');
        });
    }
 $('#priceptbillTable tbody').empty();

    let totalAmount = 0;

    mortgageDataArray.forEach((data, index) => {
        let subTotal = parseFloat(data.price) * parseInt(data.quantity);
        totalAmount += subTotal;

		console.log(mortgageDataArray)
        let rowHTML = `
            <tr>
                <td style ="color:black;">${data.productName}<br>${data.itemBarcode}</td>
                <td style ="color:black;">${parseFloat(data.price).toFixed(2)}</td>
                <td style ="color:black;">${data.quantity}</td>
				<td style ="color:black;">${parseFloat(((data.price)/100)*18).toFixed(2)} (18%)</td>
                <td class="text-end" style ="color:black;">${subTotal.toFixed(2)}</td>
            </tr>
        `;

        $('#priceptbillTable tbody').append(rowHTML);

		


    });
let summaryRow = `
    <tr>
        <td colspan="5">
            <table class="table-borderless w-100 table-fit no-border-print" style="border-width: 0;">
                <tr style="border-width: 0; padding-top: 20px; margin-bottom :20px;" >
                    <td class="fw-bold" style ="color:black;">Sub Total :</td>
					<td></td>
                    <td class="text-end" style="text-align: right; color:black;">${totalAmount.toFixed(2)}</td>
                </tr>
                <tr style="padding-top: 20px; margin-bottom :20px;">
                    <td class="fw-bold"  style ="color:black;">Discount Amount:</td>
					<td></td>
                    <td class="text-end" style="text-align: right; color:black;" > - ${discountAmount.toFixed(2)}</td>
                </tr>
                <tr style="padding-top: 20px; margin-bottom :20px;">
                    <td class="fw-bold" style ="color:black;">Other Charges :</td>
					<td></td>
                    <td class="text-end" style="text-align: right; color:black;"> + ${ifAnyCharges.toFixed(2)}</td>
                </tr>
                <tr style="padding-top: 20px; margin-bottom :20px;">
                    <td class="fw-bold" style ="color:black;">Grand Total :</td>
					<td></td>
                    <td class="text-end" style="text-align: right; color:black;"> + ${totalAmountAfterDiscount.toFixed(2)}</td>
                </tr>
            </table>
        </td>
    </tr>
`;

$('#priceptbillTable tbody').append(summaryRow);

    // Optionally show total amount somewhere
    console.log("Total Invoice Amount:", totalAmount.toFixed(2));
	}






$('#downloadPdfBtn').on('click', function () {
    priceptbillTable();

    $('#printReceipt').hide();
    const element = document.getElementById('receipt-content');

    const opt = {
        margin: 0.5,
        filename: 'receipt.pdf',
        image: { type: 'jpeg', quality: 0.85 },
        html2canvas: { scale: 1, useCORS: true },
        jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
    };

    $('#loadingSpinner2').show();

    html2pdf().set(opt).from(element).save().finally(() => {
        $('#loadingSpinner2').hide();
    });
});






	
	$('#vatInvoice').on('click', function () {
    taxinvoice();

    $('#printReceipt').hide();
    const element = document.getElementById('receipt-content');

    const opt = {
        margin: 0.5,
        filename: 'receipt.pdf',
        image: { type: 'jpeg', quality: 0.85 },
        html2canvas: { scale: 1, useCORS: true },
        jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
    };

    $('#loadingSpinner2').show();

    html2pdf().set(opt).from(element).save().finally(() => {
        $('#loadingSpinner2').hide();
    });
});


  var today = new Date();
    var formattedDate = today.toLocaleDateString('en-GB'); // Format: DD/MM/YYYY
    $('#invoiceDate').text(formattedDate);

});






	</script>
<!-- Mirrored from dreamspos.dreamstechnologies.com/html/template/pos-5.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 19 May 2025 13:10:44 GMT -->
</html>