<!DOCTYPE html>
<!--
Template Name: Kundol Admin - Bootstrap 4 HTML Admin Dashboard Theme
Author: Themes-coder
Website: https://themes-coder.com/
Contact: sales@themes-coder.com
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en">
<!--begin::Head-->


<!-- Mirrored from kundol.themes-coder.net/admin-demo/pos.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 27 Jan 2025 11:55:46 GMT -->
<head>
	
	<meta charset="utf-8" />
	<title>Admin | Dashboard</title>
	<meta name="description" content="Updates and statistics" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
	<!--begin::Fonts-->
	<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" /> -->
	<!--end::Fonts-->

	<!--begin::Global Theme Styles(used by all pages)-->
	<link href="{{ asset('pos/assets/css/stylec619.css?v=1.0')}}" rel="stylesheet" type="text/css" />
	<!--end::Global Theme Styles-->

	<link href="{{ asset('pos/assets/api/pace/pace-theme-flat-top.css')}}" rel="stylesheet" type="text/css" />
	<link href="{{ asset('pos/assets/api/mcustomscrollbar/jquery.mCustomScrollbar.css')}}" rel="stylesheet" type="text/css" />
	
	{{-- <link href="../../cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
	<link href="../../unpkg.com/multiple-select%401.5.2/dist/multiple-select.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> --}}


	<link rel="shortcut icon" href="{{ asset('pos/assets/media/logos/favicon.html')}}" />


<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>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
 <style>
       .productCard {
    transition: all 0.3s ease; /* Adds transition effect */
    width: 135px; /* Initial width */
    height: 135px; /* Initial height */
}

.productCard:hover {
    width: 144px; /* Target width on hover */
    height: 144px; /* Target height on hover */
}

.btn1 {
    width: 60px;
    height: 60px;
    margin: 0 auto; /* Centers horizontally inside a flex container */
    display: flex; /* Ensures centering of content */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    border-radius: 50% !important;
    background-color: rgba(64, 62, 62, 0.181);
    color: rgb(117, 10, 171);
    border: none !important;
    padding: 0; /* Adjust padding for better alignment */
    -webkit-transition: background-color 1s, color 1s, -webkit-transform 0.5s;
    transition: background-color 1s, color 1s, transform 0.5s;
}

.btn1 i {
    font-size: 1.5rem; /* Reduce icon size */
    line-height: 1; /* Adjust line height */
}

.btn1:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  -webkit-transform: translateX(-5px);
  -webkit-box-shadow: 5px 0px 18px 0px rgba(105,105,105,0.8);
  -moz-box-shadow: 5px 0px 18px 0px rgba(105,105,105,0.8);
  box-shadow: 5px 0px 18px 0px rgba(105,105,105,0.8);
}
.card3 {
  flex-direction: row;
  max-width: 30em;
  border: 0;
  margin: 10px;
    padding: 10px;
  background-color: #89059dab;
  color: #fff;
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.18);
}
.card3 img {
  max-width: 25%;
  margin: auto;
  padding: 0.5em;
  border-radius: 0.7em;
}
.card-body2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.text-section {
  max-width: 60%;
}
.cta-section {
  max-width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.cta-section .btn {
  padding: 0.2em 0.5em;
  font-size: 1em;
  color: #c8c2b3;
}
.card-text {
  letter-spacing: 0.1em;
}


/* methanin palla select box eke */
.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: 10px;
  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;
}


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


div:where(.swal2-container) div:where(.swal2-popup) {
    display: none;
    position: relative;
    /* box-sizing: border-box; */
    grid-template-columns: minmax(0, 100%);
    width: 32em;
    max-width: 100%;
    padding: 0 0 1.25em;
    border: none;
    border-radius: 5px;
    background: #550a73 !important;
    color: #ded9d9 !important;
    font-family: inherit;
    font-size: 1rem;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

/* 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 */
}

.card2 {
  /* max-width: 300px;
  min-height: 200px; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  /* max-width: 500px;
  height: 300px; */
  /* padding: 35px; */

  border: 1px solid rgba(255, 255, 255, .25);
  /* border-radius: 20px; */
  /* background-color: rgba(255, 255, 255, 0.45); */
  /* background-color: rgb(110 42 255 / 66%); */
  /* background-color: rgb(52 0 164 / 66%); */
  /* background-color: rgb(145 238 120 / 22%);; */

   background-color:   rgb(0 0 0 / 91%);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(15px);
}


.tk1{
	color: #b7b7b7 !important;
}

    </style>
</head>
<!--end::Head-->
<!--begin::Body-->

<body id="tc_body" class="header-fixed header-mobile-fixed subheader-enabled aside-enabled aside-fixed">
   <!-- Paste this code after body tag -->
   <div class="se-pre-con">
	<div class="pre-loader">
	  <img class="img-fluid" src="{{ asset('pos/assets/images/loadergif.gif')}}" alt="loading">
	</div>
  </div>
   <!-- pos header -->

   <header class="pos-header bg-white">
	   <div class="container-fluid">
		   <div class="row align-items-center">
			   <div class="col-xl-4 col-lg-4 col-md-6">
				   <div class="greeting-text">
					<h3 class="card-label mb-0 font-weight-bold text-primary"><a href="{{ route('welcome') }}">HOME</a>
					</h3>
					<h3 class="card-label mb-0 ">
						Smith Joones
					</h3>
				   </div>
			
			   </div>
			   <div class="col-xl-4 col-lg-5 col-md-6  clock-main">
				<div class="clock">
				  <div class="datetime-content">
					<ul>
						<li id="hours"></li>
						<li id="point1">:</li>
						<li id="min"></li>
						<li id="point">:</li>
						<li id="sec"></li>
					</ul>
				  </div>
				 <div class="datetime-content">
					<div id="Date"  class=""></div>
				 </div>
				
				</div>
				
			   </div>
			   <div class="col-xl-4 col-lg-3 col-md-12  order-lg-last order-second">

				<div class="topbar justify-content-end">
				 <div class="dropdown mega-dropdown">
					 <div id="id2" class="topbar-item "  data-bs-toggle="dropdown" data-display="static">
						 <div class="btn btn-icon w-auto h-auto btn-clean d-flex align-items-center py-0 me-3">
						 
							 <span class="symbol symbol-35 symbol-light-success">
								 <span class="symbol-label bg-primary  font-size-h5 ">
								 
									 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="#fff" class="bi bi-calculator-fill" viewBox="0 0 16 16">
										 <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2 .5v2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5zm0 4v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zM4.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM4 12.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zM7.5 6a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM7 9.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm.5 2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM10 6.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm.5 2.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-1z"/>
									   </svg>
								 </span>
							 </span>
						 </div>
					 </div>
 
					 <div class="dropdown-menu dropdown-menu-right calu" style="min-width: 248px;">
						 <div class="calculator">
							 <div class="input" id="input"></div>
							 <div class="buttons">
							   <div class="operators">
								 <div>+</div>
								 <div>-</div>
								 <div>&times;</div>
								 <div>&divide;</div>
							   </div>
								<div class="d-flex justify-content-between">
								 <div class="leftPanel">
									 <div class="numbers">
									   <div>7</div>
									   <div>8</div>
									   <div>9</div>
									 </div>
									 <div class="numbers">
									   <div>4</div>
									   <div>5</div>
									   <div>6</div>
									 </div>
									 <div class="numbers">
									   <div>1</div>
									   <div>2</div>
									   <div>3</div>
									 </div>
									 <div class="numbers">
									   <div>0</div>
									   <div>.</div>
									   <div id="clear">C</div>
									 </div>
								   </div>
								   <div class="equal" id="result">=</div>
								</div>
							 </div>
						   </div>
					 </div>
 
				 </div>
			 
					<div class="topbar-item folder-data">
					 <div class="btn btn-icon  w-auto h-auto btn-clean d-flex align-items-center py-0 me-3"  data-bs-toggle="modal" data-bs-target="#folderpop"
					 >
						 <span class="badge badge-pill badge-primary">5</span>
						 <span class="symbol symbol-35  symbol-light-success">
							 <span class="symbol-label bg-warning font-size-h5 ">
								 <svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" fill="#ffff"  viewBox="0 0 16 16">
									 <path d="M9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3zm-8.322.12C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139z"></path>
								   </svg>
							 </span>
						 </span>
					 </div>
				 
					</div>
			 
				 <div class="dropdown">
					 <div class="topbar-item" data-bs-toggle="dropdown" data-display="static">
						 <div class="btn btn-icon w-auto h-auto btn-clean d-flex align-items-center py-0">
						 
							 <span class="symbol symbol-35 symbol-light-success">
								 <span class="symbol-label font-size-h5 ">
									 <svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
										 <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
									 </svg>
								 </span>
							 </span>
						 </div>
					 </div>
 
					 <div class="dropdown-menu dropdown-menu-right" style="min-width: 150px;">
 
 
						 <a href="#" class="dropdown-item">
							 <span class="svg-icon svg-icon-xl svg-icon-primary me-2">
								 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-power">
									 <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
									 <line x1="12" y1="2" x2="12" y2="12"></line>
								 </svg>
							 </span>
							 Logout
						 </a>
					 </div>
 
				 </div>
				</div>
		 
				</div>
		   </div>
	   </div>
   </header>
   <div class="contentPOS">
	    <div class="container-fluid">
			<div class="row">
				<div class="col-xl-4 order-xl-first order-last">
					<div class="card card-custom gutter-b bg-white border-0">
                        
						<div class="card-body">
                            <div class="form-group">
                                       
                                <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>
                            </div>
							{{-- <div class="d-flex justify-content-between colorfull-select">
                                
								<div class="selectmain">
									<div class="form-group">
                                       
                                        <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>
                                    </div>
								</div>
							
								
							
							</div> --}}
						</div>	
							<div class="product-items">
								<div class="row SalesCreate" style="display: none;">
									<div class="form-group">
										<p>
											<i class="fas fa-sort-amount-up mr-2"></i>
									
											Quantity
										</p>
										<input type="number" class="form-control" id="Quantity" min="1" value="1" placeholder="Quantity">
									</div>
									<div class="form-group">
										<p>
											<i class="fas fa-money-check-alt mr-2"></i>
									
											Amount
										</p>
										<input type="text" class="form-control itemPrices" id="amount" placeholder="Brand Price">
									</div> 
									<div class="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">select Add Warranty</label>
  											</div>
									</div>
									<div class="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>
									<br><br>
									<!-- HTML !-->
									<button class="button-61" role="button" id="selectProduct" style="position: relative; top:20px;">SELECT PRODUCT</button>
									<br><br><br><br>
									<button class="btn btn-lg text-center btn1 backToProducts"><span><i class="fa fa-arrow-left fa-3x"></i></span></button>
									
                                </div>
                                <div class="row productListnew">
                                    <!-- Product items will be appended here -->
                                </div>
								<div class="row productList hide productDivBox" >
                                    @foreach ($productCategories as $productCategory)
                                    
									<div class="col-xl-4 col-lg-2 col-md-3 col-sm-4 col-6 productDivBox productCardBox" data-id="{{ $productCategory->id }}">
										<div class="productCard" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
                                        background-color:rgb(255, 255, 255); border-radius: 10px; ">
											<div class="productThumb" style="text-align: center; padding: 10px;">
                                                <img class="img-fluid" src="{{ asset($productCategory->image) }}" alt="ix" style="max-width: 100%; height: auto;">
                                            </div>
                                            
                                            <a href="#" style="display: block; text-align: center; margin-bottom: 10px; font-weight: bold; text-decoration: none; color: #000; position: relative; top:-10px; ">
                                                {{ $productCategory->category_name }}
                                            </a>
											<div class="productContent">
												
											</div>
										</div>
									</div>
									@endforeach
								</div>
							</div>
						
					
					</div>
				</div>
				<div class="col-xl-5 col-lg-8 col-md-8">
				     <div class="">
						<div class="card card-custom gutter-b bg-white border-0 table-contentpos ">
							<div class="card-body">
								<div class="">
									<div class="row">
									  <div class="col-sm">
										<label class="text-dark d-flex" >Choose a Customer 
											<span class="badge badge-secondary white rounded-circle"  data-bs-toggle="modal" data-bs-target="#choosecustomer">
											<svg xmlns="http://www.w3.org/2000/svg" class="svg-sm" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_122" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
												<g>
												<rect x="234.362" y="128" width="43.263" height="256"></rect>
												<rect x="128" y="234.375" width="256" height="43.25"></rect>
												</g>
												</svg>
											</span>
										
										</label>
										<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>
									  <div class="col-sm">
										<label class="text-dark d-flex" >SALE REFERENCE </label>
										<h5><span id="sale_reference"></span></h5>
									  </div>
									
									</div>
								  </div>
								<div class="d-flex justify-content-between colorfull-select">
									
									{{-- <div class="selectmain">
										
									</div>
								
								<div class="d-flex flex-column selectmain">
									<label class="text-dark d-flex" >Shipping Address  
										<span class="badge badge-secondary white rounded-circle"  data-bs-toggle="modal" data-bs-target="#shippingpop">
										<svg xmlns="http://www.w3.org/2000/svg" class="svg-sm" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_21" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
											<g>
											<rect x="234.362" y="128" width="43.263" height="256"></rect>
											<rect x="128" y="234.375" width="256" height="43.25"></rect>
											</g>
											</svg>
										</span>
									
									</label>
									<select class="arabic-select select-down">
										<option value="1">Men's</option>
										<option value="2">Accessories</option>
									</select>
								</div> --}}
								</div>
							</div>	
						</div>
						<div class="card card-custom gutter-b bg-white border-0 table-contentpos  ">
							<div class="card-body" >
								<div class="form-group row mb-0 ">
									<div class="col-md-12">
										<label >Select Product</label>
										<fieldset class="form-group mb-0 d-flex barcodeselection">
											<select class="form-control w-25" id="exampleFormControlSelect1">
												<option>Name</option>
												<option>SKU</option>
											  </select>
											<input list="browsers" type="text" class="form-control border-dark" id="basicInput1" placeholder="">
											<datalist id="browsers">
												<option value="Chrome">
												<option value="Firefox">
												<option value="Internet Explorer">
												<option value="Opera">
												<option value="Safari">
												<option value="Microsoft Edge">
											  </datalist>
										</fieldset>
									</div>
								</div>	
							</div>	
								<div class="table-datapos  ">
									<div class="table-responsive" id="printableTable">
										<table id="orderTable" class="display" style="width:100%">
											<thead>
												<tr>
													<th style="width:135px;">Name</th>
													<th style="width:135px;">Quantity</th>
													<th>Price</th>
													<th>Subtotal</th>
													<th class=" text-right no-sort"></th>
												</tr>
											</thead>
											<tbody>
												
												@foreach($saleProduct as $product)
												<tr data-id="{{ $product->badgstock_id }}"   data-badgstock_id="{{ $product->badgstock_id }}" data-item_id="{{ $product->itemId }}"  data-each_cost="{{ $product->cost }}"   data-type="{{ $product->type }}"  data-warrantystatus="{{ $product->warranty_status }}" data-Warrantyperiod="{{ $product->warranty_period }}"  style="box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;">
													<td  style="width:135px; ">{{ $product->product_name }}
														{{-- @if($product->type =="product") --}}
														<br> ({{ $product->code }})</td>
														{{-- @elseif($product->type =="product item")
														<br> ({{ $product->code }})</td>
														@endif --}}
													

													<td style="padding:5px; ">
														<input type="number" class="form-control border-dark w-100px  qtyinput quantity-input" id="existing" value="{{ $product->quantity }}"
															max="{{ $product->existing_quantity }}"  min="1" placeholder="1" data-item_id="{{ $product->itemId }}"   data-type="{{ $product->type }}"  data-id="{{ $product->productID }}" data-badgstock_id="{{ $product->badgstock_id }}" data-price="{{ $product->price }}">
													</td>
													<td style="padding:5px; margin:15px;">{{ $product->price }}</td> <!-- Assuming 'price' is a column in your sale_products table -->
													<td class="total-value" style="padding:5px; margin:15px;"> {{ $product->quantity * $product->price }}</td> <!-- Calculate subtotal -->
													
														<td style="padding:5px; margin:15px;">
															<div class="card-toolbar text-end">
															 <a href="#" data-code="{{ $product->code}}" data-sale_id="{{ $product->saleId}}"  data-sale_products_id="{{ $product->saleProductsId}}"    data-price="{{ $product->price}}" data-quantity="{{ $product->quantity}}" data-cost="{{ $product->cost}}"   data-product_id="{{ $product->productID }}"   data-badgstock_id="{{ $product->badgstock_id }}" data-item_id="{{ $product->itemId }}"  class=" remove" title="Delete" style="position:relative; right:5px;">
																 <i class="fas fa-trash-alt"></i>
															 </a>
															
															 <span class="badge badge-secondary white rounded-circle mt-1" data-bs-toggle="modal" data-bs-target="#shippingpop" style="position:relative; right:-28px;">
																 <svg xmlns="http://www.w3.org/2000/svg" class="svg-sm" xmlns:xlink="http://www.w3.org/1999/xlink" 
																	  version="1.1" id="Layer_21" x="0px" y="0px" width="16px" height="16px" 
																	  viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
																	 <g>
																		 <rect x="234.362" y="128" width="43.263" height="256"></rect>
																		 <rect x="128" y="234.375" width="256" height="43.25"></rect>
																	 </g>
																 </svg>
															 </span>
														 </div>
														 </td>
													
												</tr>
											@endforeach
											
											
											</tbody>
										</table>
									</div>
								</div>
								<div class="card-body" >
									<div class="form-group row mb-0">
										<div class="col-md-12 btn-submit d-flex justify-content-end">
											<button type="submit" class="btn btn-danger me-2 confirm-delete" title="Delete">
												<i class="fas fa-trash-alt me-2"></i>
												Suspand/Cancel
											</button>
											<button type="submit" class="btn btn-secondary white">
												<svg xmlns="http://www.w3.org/2000/svg"  fill="currentColor" class="bi bi-folder-fill svg-sm me-2" viewBox="0 0 16 16">
													<path d="M9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3zm-8.322.12C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139z"/>
												  </svg>
												Draft Order
											</button>
										</div>
									</div>	
								</div>
								
							
						</div>	
					 </div>	
				 </div>
				 <div class="col-xl-3 col-lg-4 col-md-4">
					 <div class="card card-custom gutter-b bg-white border-0 ">
						<div class="card-body card2" >
							<div class="shop-profile">
								<div class="media">
									<div class="bg-primary w-100px h-100px d-flex justify-content-center align-items-center">
										<h2 class="mb-0 white">K</h2>
									</div>
									<div class="media-body ms-3">
										<h3 class="title font-weight-bold" style="color: #e6e6e6;">The Kundol Shop</h3>
										<p class="phoonenumber">
											02199+(070)234-4569
										</p>
										<p class="adddress">
											Russel st 50,Bostron,MA
										</p>
										<p class="countryname">USA</p>
									</div>
								</div>
							</div>
							<div class="resulttable-pos">
								<table class="table right-table">

									<tbody>
									  <tr class="d-flex align-items-center justify-content-between">
										<th class="border-0 font-size-h5 mb-0 font-size-bold text-dark tk1">
												Total Items
										</th>
										<td class="border-0 justify-content-end d-flex text-dark tk1 font-size-base" id="totalQuantity">0</td>
										
									  </tr>
									  <tr class="d-flex align-items-center justify-content-between">
										<th class="border-0 font-size-h5 mb-0 font-size-bold text-dark tk1">
												Subtotal
										</th>
										<td class="border-0 justify-content-end d-flex text-dark tk1 font-size-base" id="Subtotal">0</td>
										
									  </tr>



									  
									  <tr class="d-flex align-items-center justify-content-between">
										<th class="border-0 ">
											<div class="d-flex align-items-center font-size-h5 mb-0 font-size-bold tk1 text-dark">
											DISCOUNT(0%)
										
										
										</div>
										</th>
										<td class="border-0 justify-content-end d-flex text-dark tk1 font-size-base">
											
											<input type="number" class="form-control border-dark w-100px " id="discount"  >
										</td>
										
									  </tr>
									  <tr class="d-flex align-items-center justify-content-between">
										<th class="border-0 font-size-h5 mb-0 font-size-bold text-dark tk1">
											<div class="d-flex align-items-center font-size-h5 mb-0 font-size-bold text-dark tk1">
												DISCOUNT(Amount)
											{{-- <span class="badge badge-secondary white rounded-circle ms-2"  data-bs-toggle="modal" data-bs-target="#discountpop">
												<svg xmlns="http://www.w3.org/2000/svg" class="svg-sm" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_31" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
													<g>
													<rect x="234.362" y="128" width="43.263" height="256"></rect>
													<rect x="128" y="234.375" width="256" height="43.25"></rect>
													</g>
													</svg>
											</span> --}}
										</div>
										</th>
										<td class="border-0 justify-content-end d-flex text-dark tk1 font-size-base">
											
										<input type="number" class="form-control border-dark w-100px " id="discountAmount"  >

										</td>
										
									  </tr>
									  <tr class="d-flex align-items-center justify-content-between">
										<th class="border-0">
											<div class="d-flex align-items-center font-size-h5 mb-0 font-size-bold text-dark tk1">
										    Other Charges
												<span class="badge badge-secondary white rounded-circle ms-2"  data-bs-toggle="modal" data-bs-target="#shippingcost">
												<svg xmlns="http://www.w3.org/2000/svg" class="svg-sm" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_11" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
													<g>
													<rect x="234.362" y="128" width="43.263" height="256"></rect>
													<rect x="128" y="234.375" width="256" height="43.25"></rect>
													</g>
													</svg>
												</span>
										
											</div>
										</th>
										<td class="border-0 justify-content-end d-flex text-dark tk1 font-size-base" id="OtherCharges"></td>
										
									  </tr>
									  
									  <tr class="d-flex align-items-center justify-content-between item-price">
										<th class="border-0 font-size-h5 mb-0 font-size-bold text-primary">
											
												TOTAL
										</th>
										<td class="border-0 justify-content-end d-flex text-primary font-size-base TOTALSALEAMOUNT" id="TOTAL"></td>
										
									  </tr>
									  
									</tbody>
								  </table>
							 </div>

							 <table class="table right-table">

								<tbody>
								
								  <tr class="d-flex align-items-center justify-content-between">
									<th class="border-0 font-size-h5 mb-0 font-size-bold text-dark tk1">
										Total Items Cost
									</th>
									<td class="border-0 justify-content-end d-flex text-dark tk1 font-size-base" id="totalCostForItems">0</td>
									
								  </tr>
								  <tr class="d-flex align-items-center justify-content-between">
									<th class="border-0 font-size-h5 mb-0 font-size-bold text-dark tk1">
										Total Profit
									</th>
									<td class="border-0 justify-content-end d-flex text-dark tk1 font-size-base" id="finaltotalProfit">0</td>
									
								  </tr>
								</tbody>
							  </table>


							 <div class="d-flex justify-content-end align-items-center flex-column buttons-cash">
								<div> 
									<a href="#" class="btn btn-primary white mb-2" id="payWithCash"  data-bs-toggle="modal" data-bs-target="#payment-popup">
										<i class="fas fa-money-bill-wave me-2"></i>
										Pay With Cash
									</a>
								
								</div>
								<div>
									<a  class="btn btn-outline-warning " id="paywithcard">
										<i class="fas fa-credit-card me-2"></i>
										Pay With Card
									</a>
									
								</div>
							 </div>
						</div>	
					 </div>
				 </div>
			</div>
		</div>
   </div>

   <div class="modal fade text-left" id="payment-popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel11" style="display: none;" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable  modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h3 class="modal-title" id="myModalLabel11">Payment</h3>
			<button type="button" class="close rounded-pill btn btn-sm btn-icon btn-light btn-hover-primary m-0" data-bs-dismiss="modal" aria-label="Close">
			  <svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
				  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
			  </svg>
			</button>
		  </div>
		  <div class="modal-body">
			<table class="table right-table">
				<tbody>
				  <tr class="d-flex align-items-center justify-content-between">
					<th class="border-0 px-0 font-size-lg mb-0 font-size-bold text-primary">
					
							Total Amount to Pay :
						 
					</th>
					<td class="border-0 justify-content-end d-flex text-primary font-size-lg font-size-bold px-0 font-size-lg mb-0 font-size-bold text-primary">
					
							<p class="TOTALSALEAMOUNT"></p>
						
					</td>
				  </tr>
				  <tr class="d-flex align-items-center justify-content-between">
					<th class="border-0 px-0 font-size-lg mb-0 font-size-bold text-primary">
					
							Payment Methods :
						 
					</th>
					<td style="width: 200px;" class="border-0 justify-content-end d-flex text-primary font-size-lg font-size-bold px-0 font-size-lg mb-0 font-size-bold text-primary">
					
						<select name="Warranty" id="PaymentMethods" class="form-control" style="width: 200px;">
							<option value=" ">--SELECT--</option>
							<option value="Card Payment">Card Payment</option>
							<option value="cash">Cash</option>
							<option value="Voucher">Voucher</option>
							<option value="Cheque">Cheque</option>
							<option value="Bank Transfer">Bank Transfer</option>
							{{-- <option value="06 Months">06 Months</option> --}}
						</select>
					
					</td>
					
				  </tr>
				</tbody>
			</table>	  
			<form>
				<div class="form-group row">
					<div class="col-md-12">
						<label  class="text-body">Received Amount</label>
						<fieldset class="form-group mb-3">
							<input type="text" name="number" id="ReceivedAmount"  class="form-control"   placeholder="Enter Amount ">
						</fieldset>
						<div class="p-3 bg-light-dark d-flex justify-content-between border-bottom">
							<h5 class="font-size-bold mb-0">Outstanding Amount :</h5>
							<h5 class="font-size-bold mb-0"><p id="outstandingAmount"></p></h5>
						</div>
					</div>
				</div>

				<div class="col-md-12">
						<label class="form-label">Voucher ID</label>
						<input type="text"  class="form-control voucher">
				</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 class="form-group row">
					<div class="col-md-12">
						<label  class="text-body">Note (If any)</label>
						<fieldset class="form-label-group ">
							<textarea class="form-control fixed-size" id="horizontalTextarea" rows="5" placeholder="Enter Note"></textarea>
							
						</fieldset>
					</div>
				</div>
				<div class="form-group row justify-content-end mb-0" >
					<div class="col-md-6  text-end" id="finalSubmission">
						<a href="#" class="btn btn-primary" >Submit</a>
					</div>
				</div>
			</form>
		  </div>
		</div>
	</div>	  	  
	</div>
   <div class="modal fade text-left" id="shippingpop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel12" style="display: none;" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable  modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h4 class="modal-title" id="myModalLabel12">Add Shipping Address</h4>
			
			<button type="button" class="close rounded-pill btn btn-sm btn-icon btn-light btn-hover-primary m-0" data-bs-dismiss="modal" aria-label="Close">
			  <svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
				  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
			  </svg>
			</button>
		  </div>
		  <div class="modal-body">
			<div class="alert alert-danger" role="alert" id="ItemProfitAlert" style="display: none;">
				Warning !! The price of the item is less than the item cost
			  </div>
			<form>
				
				<div class="form-group row">
					<div class="col-md-6">
						<p>
							<i class="" aria-hidden="true">Product Cost : <span id="productPurchaseCost"></span></i>
						</p>
					</div>
					<div class="col-md-6">
						<p>
							<i class="" aria-hidden="true">Product Profit : <span id="productProfit"></span></i>
						</p>
					</div>
					<div class="col-md-6">
						<p>
							<i class="fa fa-certificate" aria-hidden="true"></i>
							Warranty 
						</p>
						<fieldset class="form-group mb-3">
							<select class="js-example-basic-single js-states form-control bg-transparent  newWarranty p-0 border-0" id="newWarranty" name="state">
								<option value=" ">Select Warranty</option>
								<option value="Yes">Yes</option> 
								<option value="No">No</option>
							  </select>
						</fieldset>
					</div>
					<div class="col-md-6">
						<label  class="text-body">Price</label>
						<fieldset class="form-group mb-3">
							<input type="number" name="number" id="eachPrice"   class="form-control "   placeholder="Enter State ">
						</fieldset>
					</div>
				</div>
				<div class="form-group row">
					<div class="col-md-6">
						<p>
							<i class="fa fa-calendar"></i>
							Warranty period
						</p>
						<fieldset class="form-group mb-3">
							<select class="js-example-basic-single js-states form-control   bg-transparent p-0 border-0"  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>
						</fieldset>
					</div>
					<div class="col-md-6">
						<label  class="text-body">Product Quantity</label>
						<fieldset class="form-group mb-3">
							<input type="number" name="text" id="productQuantities" class="form-control"   placeholder="Enter Postal code">
						</fieldset>
					</div>
				</div>
				<div class="form-group row">
					<div class="col-md-6">
						<label  class="text-body">Address</label>
						<fieldset class="form-group mb-3">
							<input type="text" name="text"  class="form-control"  placeholder="Enter Address">
						</fieldset>
					</div>
					<div class="col-md-6">
						<label  class="text-body">Item Total Price</label>
						<fieldset class="form-group mb-3">
							<input type="number" name="text"  id="itemtotalPrice" class="form-control"  placeholder="Enter Phone Number">
						</fieldset>
					</div>
				</div>
				<div class="form-group row justify-content-end mb-0">
					<div class="col-md-6  text-end">
					
						<button type="button" class="btn btn-primary" id="saveChanges">Save Changes</button>

					</div>
				</div>
			</form>
		  </div>
		</div>
	</div>	  	  
</div>	
   <div class="modal fade text-left" id="choosecustomer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel13" style="display: none;" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg " role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h3 class="modal-title" id="myModalLabel13">Add Customer</h3>
			<button type="button" class="close rounded-pill btn btn-sm btn-icon btn-light btn-hover-primary m-0" data-bs-dismiss="modal" aria-label="Close">
			  <svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
				  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
			  </svg>
			</button>
		  </div>
		  <div class="modal-body">
			<form>
				<div class="form-group row">
					<div class="col-md-6">
						<label  class="text-body">Customer Group</label>
						<fieldset class="form-group mb-3">
							<select class="js-example-basic-single js-states form-control bg-transparent p-0 border-0" name="state">
								<option value="AL">General</option>
								  
								<option value="WY">Partial</option>
							  </select>
						</fieldset>
					</div>
					<div class="col-md-6">
						<label  class="text-body">Customer Name</label>
						<fieldset class="form-group mb-3">
							<input type="text" name="text"  class="form-control"  placeholder="Enter Customer Name">
						</fieldset>
					</div>
				</div>
				<div class="form-group row">
					<div class="col-md-6">
						<label  class="text-body">Company Name</label>
						<fieldset class="form-group mb-3">
							<input type="text" name="text"  class="form-control"  placeholder="Enter Company Name">
						</fieldset>
					</div>
					<div class="col-md-6">
						<label  class="text-body">Tax Number</label>
						<fieldset class="form-group mb-3">
							<input type="text" name="text"  class="form-control"  placeholder="Enter Tax">
						</fieldset>
					</div>
				</div>
				<div class="form-group row">
					<div class="col-md-6">
						<label  class="text-body">Email</label>
						<fieldset class="form-group mb-3">
							<input type="email" name="text"  class="form-control"  placeholder="Enter Mail">
						</fieldset>
					</div>
					<div class="col-md-6">
						<label  class="text-body">Phone Number</label>
						<fieldset class="form-group mb-3">
							<input type="email" name="text"  class="form-control"  placeholder="Enter Phone Number">
						</fieldset>
					</div>
				</div>
				<div class="form-group row">
					<div class="col-md-6">
						<label  class="text-body">Country</label>
						<fieldset class="form-group mb-3">
							<select class="js-example-basic-single js-states form-control bg-transparent p-0 border-0" name="state">
								<option value="AL">USA</option>
								  
								<option value="WY">UK</option>
							  </select>
						</fieldset>
					</div>
					<div class="col-md-6">
						<label  class="text-body">State</label>
						<fieldset class="form-group mb-3">
							<input type="text" name="text"  class="form-control"  placeholder="Enter State">
						</fieldset>
					</div>
				</div>
				<div class="form-group row">
					<div class="col-md-6">
						<label  class="text-body">City</label>
						<fieldset class="form-group mb-3">
							<select class="js-example-basic-single js-states form-control bg-transparent p-0 border-0" name="state">
								<option value="AL">Dubai</option>
								  
								<option value="WY">Bahreen</option>
							  </select>
						</fieldset>
					</div>
					<div class="col-md-6">
						<label  class="text-body">Postal Code</label>
						<fieldset class="form-group mb-3">
							<input type="text" name="text"  class="form-control"  placeholder="Enter Postal Code">
						</fieldset>
					</div>
				</div>
				<div class="form-group row ">
					<div class="col-md-6">
						<label  class="text-body">Address</label>
						<fieldset class="form-group mb-3">
							<input type="text" name="text"  class="form-control "  placeholder="Enter Address">
						</fieldset>
					</div>
				</div>
				<div class="form-group row justify-content-end mb-0">
					<div class="col-md-6  text-end">
						<a href="#" class="btn btn-primary">Add Customer</a>
					</div>
				</div>
			</form>
		  </div>
		</div>
	</div>	  	  
</div>	
   <div class="modal fade text-left" id="folderpop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel14" style="display: none;" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg " role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h3 class="modal-title" id="myModalLabel14">Draft Orders</h3>
			<button type="button" class="close rounded-pill btn btn-sm btn-icon btn-light btn-hover-primary m-0" data-bs-dismiss="modal" aria-label="Close">
			  <svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
				  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
			  </svg>
			</button>
		  </div>
		  <div class="modal-body pos-ordermain">
			  <div class="row">
				  <div class="col-lg-4">
					  <div class="pos-order">
						<h3 class="pos-order-title" >Order 1</h3>
						<div class="orderdetail-pos">
							<p>
								<strong>Customer Name</strong>
								Sophia Hale
							</p>
							<p>
								<strong>Address</strong>
								9825 Johnsaon Dr.Columbo,MD21044
							</p>
							<p>
								<strong>Payment Status</strong>
								Pending
							</p>
							<p>
								<strong>Total Items</strong>
								10
							</p>
							<p>
								<strong>Amount to Pay</strong>
								$722
							</p>
						</div>
						<div class="d-flex justify-content-end">
							<a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-edit"></i></a>
							<a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-trash-alt"></i></a>
						</div>
					  </div>
				  </div>
				  <div class="col-lg-4">
					<div class="pos-order">
					  <h3 class="pos-order-title" >Order 1</h3>
					  <div class="orderdetail-pos">
						  <p>
							  <strong>Customer Name</strong>
							  Sophia Hale
						  </p>
						  <p>
							  <strong>Address</strong>
							  9825 Johnsaon Dr.Columbo,MD21044
						  </p>
						  <p>
							  <strong>Payment Status</strong>
							  Pending
						  </p>
						  <p>
							  <strong>Total Items</strong>
							  10
						  </p>
						  <p>
							  <strong>Amount to Pay</strong>
							  $722
						  </p>
					  </div>
					  <div class="d-flex justify-content-end">
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-edit"></i></a>
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-trash-alt"></i></a>
					  </div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="pos-order">
					  <h3 class="pos-order-title" >Order 1</h3>
					  <div class="orderdetail-pos">
						  <p>
							  <strong>Customer Name</strong>
							  Sophia Hale
						  </p>
						  <p>
							  <strong>Address</strong>
							  9825 Johnsaon Dr.Columbo,MD21044
						  </p>
						  <p>
							  <strong>Payment Status</strong>
							  Pending
						  </p>
						  <p>
							  <strong>Total Items</strong>
							  10
						  </p>
						  <p>
							  <strong>Amount to Pay</strong>
							  $722
						  </p>
					  </div>
					  <div class="d-flex justify-content-end">
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-edit"></i></a>
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-trash-alt"></i></a>
					  </div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="pos-order">
					  <h3 class="pos-order-title">Order 1</h3>
					  <div class="orderdetail-pos">
						  <p>
							  <strong>Customer Name</strong>
							  Sophia Hale
						  </p>
						  <p>
							  <strong>Address</strong>
							  9825 Johnsaon Dr.Columbo,MD21044
						  </p>
						  <p>
							  <strong>Payment Status</strong>
							  Pending
						  </p>
						  <p>
							  <strong>Total Items</strong>
							  10
						  </p>
						  <p>
							  <strong>Amount to Pay</strong>
							  $722
						  </p>
					  </div>
					  <div class="d-flex justify-content-end">
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-edit"></i></a>
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-trash-alt"></i></a>
					  </div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="pos-order">
					  <h3 class="pos-order-title" >Order 1</h3>
					  <div class="orderdetail-pos">
						  <p>
							  <strong>Customer Name</strong>
							  Sophia Hale
						  </p>
						  <p>
							  <strong>Address</strong>
							  9825 Johnsaon Dr.Columbo,MD21044
						  </p>
						  <p>
							  <strong>Payment Status</strong>
							  Pending
						  </p>
						  <p>
							  <strong>Total Items</strong>
							  10
						  </p>
						  <p>
							  <strong>Amount to Pay</strong>
							  $722
						  </p>
					  </div>
					  <div class="d-flex justify-content-end">
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-edit"></i></a>
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-trash-alt"></i></a>
					  </div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="pos-order">
					  <h3 class="pos-order-title" >Order 1</h3>
					  <div class="orderdetail-pos">
						  <p>
							  <strong>Customer Name</strong>
							  Sophia Hale
						  </p>
						  <p>
							  <strong>Address</strong>
							  9825 Johnsaon Dr.Columbo,MD21044
						  </p>
						  <p>
							  <strong>Payment Status</strong>
							  Pending
						  </p>
						  <p>
							  <strong>Total Items</strong>
							  10
						  </p>
						  <p>
							  <strong>Amount to Pay</strong>
							  $722
						  </p>
					  </div>
					  <div class="d-flex justify-content-end">
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-edit"></i></a>
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-trash-alt"></i></a>
					  </div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="pos-order">
					  <h3 class="pos-order-title" >Order 1</h3>
					  <div class="orderdetail-pos">
						  <p>
							  <strong>Customer Name</strong>
							  Sophia Hale
						  </p>
						  <p>
							  <strong>Address</strong>
							  9825 Johnsaon Dr.Columbo,MD21044
						  </p>
						  <p>
							  <strong>Payment Status</strong>
							  Pending
						  </p>
						  <p>
							  <strong>Total Items</strong>
							  10
						  </p>
						  <p>
							  <strong>Amount to Pay</strong>
							  $722
						  </p>
					  </div>
					  <div class="d-flex justify-content-end">
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-edit"></i></a>
						  <a href="#" class="confirm-delete ms-3" title="Delete"><i class="fas fa-trash-alt"></i></a>
					  </div>
					</div>
				</div>
				  
			  </div>
		  </div>
		  <div class="modal-footer border-0">
			  <div class="row">
				  <div class="col-12 px-4">
					<a href="#" class="btn btn-primary">Submit</a>
				  </div>
			  </div>
		  </div>
		</div>
	</div>	  	  
</div>	
<div class="modal fade text-left" id="discountpop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel122" style="display: none;" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable  modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h3 class="modal-title" id="myModalLabel122">Add Discount</h3>
			<button type="button" class="close rounded-pill btn btn-sm btn-icon btn-light btn-hover-primary m-0" data-bs-dismiss="modal" aria-label="Close">
			  <svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
				  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
			  </svg>
			</button>
		  </div>
		  <div class="modal-body">
			  <div class="row">
				  <div class="col-12 px-4">
					<label  class="text-body">Discount</label>
					<fieldset class="form-group mb-3 d-flex">
						<input type="text" name="text" class="form-control bg-white"  placeholder="Enter Discount">
						<a href="javascript:void(0)" class="btn-secondary btn ms-2 white pt-1 pb-1 d-flex align-items-center justify-content-center">Apply</a>
					</fieldset>
					<div class="p-3 bg-light-dark d-flex justify-content-between border-bottom">
						<h5 class="font-size-bold mb-0">Discount Applied of:</h5>
						<h5 class="font-size-bold mb-0">$20</h5>
					</div>
				  </div>
			  </div>
		  </div>
		</div>
	</div>	  	  
</div>	
<div class="modal fade text-left" id="shippingcost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1444" style="display: none;" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable  modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h3 class="modal-title" id="myModalLabel1444">Add Shipping Cost</h3>
			<button type="button" class="close rounded-pill btn btn-sm btn-icon btn-light btn-hover-primary m-0" data-bs-dismiss="modal" aria-label="Close">
			  <svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
				  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
			  </svg>
			</button>
		  </div>
		  <div class="modal-body">
			<form>
				<div class="form-group row">
					<div class="col-md-6">
						<label  class="text-body">Service Changes</label>
						<fieldset class="form-group mb-3">
							<input type="number" name="text" id="ServiceChanges"  class="form-control"  placeholder="Service Changes" >
						</fieldset>
					</div>
					<div class="col-md-6">
						<label  class="text-body">Tax</label>
						<fieldset class="form-group mb-3">
							<input type="number" name="text"  class="form-control" id="taxChanges"   placeholder="Tax" >
						</fieldset>
					</div>
					
				</div>
				<div class="form-group row">
					<div class="col-md-12">
						<label  class="text-body">If Any Other Charges</label>
						<fieldset class="form-group mb-3">
							<input type="number" name="text"  class="form-control"  id="otherChanges" placeholder="If Any Other Charges">
						</fieldset>
					</div>
					{{-- <div class="col-md-6">
						<label  class="text-body">Shipping Status</label>
						<fieldset class="form-group mb-3">
							<select class="js-example-basic-single js-states form-control bg-transparent p-0 border-0" name="state">
								<option value="AL">Packed</option>
								  
								<option value="WY">Open</option>
							  </select>
						</fieldset>
					</div> --}}
				
				</div>
				<div class="form-group row">
					<div class="col-md-12">
						<label  class="text-body">Shipping Charges</label>
						<fieldset class="form-label-group ">
							<textarea class="form-control fixed-size"  rows="5" placeholder="Textarea"></textarea>
							
						</fieldset>
					</div>
				</div>
				<div class="form-group row justify-content-end mb-0">
					<div class="col-md-6  text-end">
						<a href="#" class="btn btn-primary" id="ifAnyCharges">Update Order</a>
					</div>
				</div>
			</form>
		  </div>
		</div>
	</div>	  	  
</div>	

	<ul class="sticky-toolbar nav flex-column bg-primary">

		<li class="nav-item" id="kt_demo_panel_toggle" data-bs-toggle="tooltip" title="" data-bs-placement="right" data-original-title="Check out more demos">
			<a class="btn btn-sm btn-icon text-white" href="#">
				<svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-gear fa-spin" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"></path>
					<path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"></path>
				</svg>
			</a>
		</li>
	</ul>
	<div id="kt_color_panel" class="offcanvas offcanvas-right kt-color-panel p-5">
		<div class="offcanvas-header d-flex align-items-center justify-content-between pb-3">
			<h4 class="font-size-h4 font-weight-bold m-0">Theme Config
			</h4>
			<a href="#" class="btn btn-sm btn-icon btn-light btn-hover-primary" id="kt_color_panel_close">
				<svg width="20px" height="20px" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
				</svg>
			</a>
		</div>
		<hr>
		<div class="offcanvas-content">
			<!-- Theme options starts -->
			<div id="customizer-theme-layout" class="customizer-theme-layout">

				<h5 class="mt-1">Theme Layout</h5>
				<div class="theme-layout">
					<div class="d-flex justify-content-start">
						<div class="my-3">
							<div class="btn-group btn-group-toggle">
								<label class="btn btn-primary p-2 active">
									<input type="radio" name="layoutOptions" value="false" id="radio-light" checked="">
									Light
								</label>
								<label class="btn btn-primary p-2">
									<input type="radio" name="layoutOptions" value="false" id="radio-dark"> Dark
								</label>

							</div>

						</div>

					</div>
				</div>
				<hr>
				<h5 class="mt-1">RTL Layout</h5>
				<div class="rtl-layout">
					<div class="d-flex justify-content-start">
						<div class="my-3 btn-rtl">
							<div class="toggle">
								<span class="circle"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<hr>

			<!-- Theme options starts -->
			<div id="customizer-theme-colors" class="customizer-theme-colors">
				<h5>Theme Colors</h5>
				<ul class="list-inline unstyled-list d-flex">
					<li class="color-box me-2">
						<div id="color-theme-default" class="d-flex rounded w-20px h-20px" style="background-color: #ae69f5d9;">
						</div>
					</li>
					<li class="color-box me-2">
						<div id="color-theme-blue" class="d-flex rounded w-20px h-20px" style="background-color: blue;">
						</div>
					</li>
					<li class="color-box me-2">
						<div id="color-theme-red" class="d-flex rounded w-20px h-20px" style="background-color: red;">
						</div>
					</li>
					<li class="color-box me-2">
						<div id="color-theme-green" class="d-flex rounded w-20px h-20px" style="background-color: green;">
						</div>
					</li>
					<li class="color-box me-2">
						<div id="color-theme-yellow" class="d-flex rounded w-20px h-20px" style="background-color: #ffc107;">
						</div>
					</li>
					<li class="color-box me-2">
						<div id="color-theme-navy-blue" class="d-flex rounded w-20px h-20px" style="background-color: #000080;">
						</div>
					</li>

				</ul>
				<hr>
			</div>


		</div>
	</div>	

	<div id="invoice-POS" style="display: none">
    
		<center id="top">
			<div class="logo" >
				<img src="{{ asset('images/favicon.png') }}" alt="Logo" style="width: 80px; height: 80px;">
			</div>
		  <div class="info"> 
			<h2>  {{session('user_name')}}</h2>
		  </div><!--End Info-->
		</center><!--End InvoiceTop-->
		
		<div id="mid">
		  <div class="info">
			<h2>Contact Info</h2>
			<p> 
				Address :   {{session('branch_name')}}</br>
				Email   :   {{session('user_name')}}</br>
				Phone   :   {{session('user_name')}}</br>
			</p>
		  </div>
		</div><!--End Invoice Mid-->
		
		<div id="bot">
	
			<div id="table-bill">
				<table>
					<thead>
						<tr class="tabletitle">
							<th class="item" ><h4>Item</h4></th>
							<th class="Hours"><h4>Qty</h4></th>
							<th class="Rate"><h4>Sub Total</h4></th>
						</tr>
					</thead>
					<tbody id="table-bill-body">
						<!-- Data will be inserted here -->
					</tbody>
					<tfoot style="position: relative; top: 10px;">
						<tr class="tabletitle">
						
							<td colspan="2" class="Rate"><h4>Total</h4></td>
							<td class="payment"><h4 id="billtotalAmount">0.00</h4></td>
						</tr>
						<tr class="tabletitle">
						
							<td  colspan="2" class="Rate"><h4>Discount Amount</h4></td>
							<td class="Discount"><h4 id="billDiscount">0.00</h4></td>
						</tr>
						<tr class="tabletitle">
						
							<td  colspan="2" class="Rate"><h4>Tax & Other Charges</h4></td>
							<td class="Discount"><h4 id="billOtherCharges">0.00</h4></td>
						</tr>
						<tr class="tabletitle" style="background-color: #333;">
						
							<td  colspan="2" class="Rate"><h4>Sub Total</h4></td>
							<td class="Discount"><h4 id="billSubTotal">0.00</h4></td>
						</tr>
					</tfoot>
				</table>
			</div>
			
						</div><!--End Table-->
	
						<div id="legalcopy" style="text-align: center;">
							<p class="legal"><strong>Thank you for your business!</strong> 
								Payment is expected within 31 days; please process this invoice within that time. 
								There will be a 5% interest charge per month on late invoices.
							</p>

							<svg id="billSaleRefference"></svg> <!-- SVG for Barcode -->
						</div>
	
					</div><!--End InvoiceBot-->
	  </div><!--End Invoice-->
	
	<script src="{{ asset('pos/assets/js/script.bundle.js')}}"></script>
	<script src="{{ asset('pos/assets/js/plugin.bundle.min.js')}}"></script>
	<script src="{{ asset('pos/assets/js/bootstrap.bundle.min.js')}}"></script>
	<script src="{{ asset('js/lc_select.js') }}"></script>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	<script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.3/dist/JsBarcode.all.min.js"
    ></script>
	{{-- <script src="{{ asset('pos/assets/js/sweetalert.js')}}"></script> --}}
	{{-- <script src="{{ asset('pos/assets/js/sweetalert1.js')}}"></script> --}}
	
	<script>
$( 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 purchaseNo = '{{ $sale->sale_reference ?? '' }}';
var saleReference = purchaseNo;   
        
      $("#sale_reference").html(purchaseNo)
    








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 = parseFloat("{{ $sale->discount_prasentage }}") || 0;
var discountAmount = parseFloat("{{ $sale->discount_amount }}") || 0;
var totalAmountAfterDiscount =parseFloat("{{ $sale->final_total_price }}") || 0;
var ifAnyCharges = parseFloat("{{ $sale->total_other_charge }}") || 0;
var otherChanges = parseFloat("{{ $sale->other_charge }}") || 0;
var taxChanges = parseFloat("{{ $sale->tax_charge }}") || 0;
var ServiceChanges = parseFloat("{{ $sale->service_charge }}") || 0;
var ReceivedAmount = parseFloat("{{ $sale->received_amount }}") || 0;
var preReceivedAmount = parseFloat("{{ $sale->received_amount }}") || 0;
var outstandingAmount = parseFloat("{{ $sale->outstanding_amount }}") || 0;
var newIfAnyCharges = ifAnyCharges;

if(discountAmount > 0){
	$('#discountAmount').val(discountAmount);

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


if(discount > 0){
	$('#discount').val(discount);

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


if(ifAnyCharges > 0){
	$('#OtherCharges').html(ifAnyCharges);

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

if(ServiceChanges > 0){
	
    $('#ServiceChanges').val(ServiceChanges);
}




// if (outstandingAmount !== undefined && outstandingAmount !== null) {

// }



// if(PaymentMethods){
	
//     $('#PaymentMethods').val("{{ $sale->total_other_charge }}");
// }


if(taxChanges > 0){
	
    $('#taxChanges').val(taxChanges);
}

if(ReceivedAmount > 0){
	
    $('#ReceivedAmount').val(ReceivedAmount);
}

if(otherChanges > 0){
	$('#otherChanges').val(otherChanges);
}


@foreach ($saleProduct as $item )
        mortgageDataArray.push({
			type: "{{ $item->type }}",
        	itemBarcode: parseInt("{{ $item->code }}"),
			productName: "{{ $item->product_name }}",
        	itemCost: "{{ $item->cost }}",
        	price: parseFloat("{{ $item->price }}"),
        	quantity: parseInt("{{ $item->quantity }}"),
        	productId: parseInt("{{ $item->productID }}"),
        	badgstock_id: parseInt("{{ $item->badgstock_id }}"),
        	itemId : parseInt("{{ $item->itemId }}"),
        	warrantyStatus : "{{ $item->warranty_status }}",
			Warrantyperiod : "{{ $item->warranty_period }}",


			
        });
		console.log(mortgageDataArray)
		calculateTotal();
@endforeach




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

$(document).on('click', '#payWithCash', function () { 
	$('#outstandingAmount').html(totalAmountAfterDiscount - ReceivedAmount);
	outstandingAmount = totalAmountAfterDiscount - ReceivedAmount
})



$(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 })
    );

    $('#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
});



$(document).on('input', '#discount', function() {
    discount = parseFloat($(this).val()) || 0; // ✅ Convert input to a number
    var discountedAmount = (finaltotalSum / 100) * discount;
    totalAmountAfterDiscount = (finaltotalSum + newIfAnyCharges) - 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 }));
});

$(document).on('input', '#discountAmount', function() {
    $('#discount').val('');

	// if(newIfAnyCharges > 0){
		discountAmount = parseFloat($(this).val()) || 0; // ✅ Convert input to a number
    totalAmountAfterDiscount = (finaltotalSum + newIfAnyCharges) - discountAmount; // ✅ Set global variable

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

	// 	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 }));
    // $('#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 }));
	

});

function calculateTotal() {
    let totalSum = 0;
    let totalCostSum = 0;
    let totalQuantitySum = 0;
    let totalProfit = 0;

    mortgageDataArray.forEach(item => {
        totalSum += parseFloat(item.price * item.quantity);
        totalCostSum += parseFloat(item.itemCost * item.quantity) ; 
        totalQuantitySum += parseInt(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
    }

    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 }));
}

// 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
    }
}












// Capture the original brandDiv elements and store their HTML content
$('.brandDiv').each(function() {
    originalBrandDivs.push($(this).prop('outerHTML')); // Store the outer HTML as a string
});

// Your existing click event for .productCardBox
$(document).on('click', '.productCardBox', function() {
    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

            // 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-xl-4 col-lg-2 col-md-3 col-sm-4 col-6 productDivBox brandDiv" data-id="${item.product_brand_id}">
                            <div class="productCard" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; background-color:rgb(251, 243, 233); border-radius: 10px;">
                                <div class="productThumb" style="text-align: center; padding: 10px;">
                                    <img src="path/to/image.jpg" alt="${item.product_brand_name}" style="max-width: 100%; height: auto;">
                                </div>
                                <a href="#" style="display: block; text-align: center; margin-bottom: 10px; font-weight: bold; text-decoration: none; color: #000; position: relative; top: -10px;">
                                    ${item.product_brand_name} (Total Quantity: ${item.total_quantity})
                                </a>
                                <div class="productContent">
                                    <!-- Additional content can be added here -->
                                </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);
        }
    });
});

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', '#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 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 (!exists) {
        mortgageDataArray.push(rowData);
		calculateTotal();
    } else {
        console.log("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-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 style="padding:5px; margin:15px;">${name} <br>${imu_number}</td>
            <td style="padding:5px;">
                <input type="number" value="${QuantityItem}" class="form-control border-dark w-100px qtyinput quantity-input"
                    max="${quantity}" min="1" placeholder="1" data-item_id="${itemId}"   data-type="${type}" data-id="${itemId}" data-id="${id}" data-badgstock_id="${badgstock_id}" data-price="${itemPrices}">
            </td>
            <td style="padding:5px; margin:15px;">${itemPrices}</td>
            <td style="padding:5px; margin:15px;" class="total-value">${itemPrices * QuantityItem}</td> <!-- Initial total value -->
            <td style="padding:5px; margin:15px;">
                <div class="card-toolbar text-end">
                    <a href="#" class="confirm-delete" title="Delete" style="position:relative; right:5px;">
                        <i class="fas fa-trash-alt"></i>
                    </a>
                    <span class="badge badge-secondary white rounded-circle mt-1 updateModel" data-bs-toggle="modal" data-bs-target="#shippingpop" style="position:relative; right:-16px;">
                        <svg xmlns="http://www.w3.org/2000/svg" class="svg-sm" xmlns:xlink="http://www.w3.org/1999/xlink" 
                            version="1.1" width="16px" height="16px" viewBox="0 0 512 512">
                            <g>
                                <rect x="234.362" y="128" width="43.263" height="256"></rect>
                                <rect x="128" y="234.375" width="256" height="43.25"></rect>
                            </g>
                        </svg>
                    </span>
                </div>
            </td>
        </tr>`;

    // Append new row to the table
    $('#orderTable tbody').append(newRow);
	warrantyStatus = 'no';
    // 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 totalValue = quantity * price; 

		var priceCellValue = $(this).closest('tr').find('td:eq(2)').text().trim();

		var totalValue = quantity * priceCellValue; 


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


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

		var priceCellValue = $(this).closest('tr').find('td:eq(2)').text().trim();

		var totalValue = quantity * priceCellValue; 


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

$(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'));
	
	

// Alert the warranty period
  
    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
    	}
		var row = $('tr[data-id="' + badgstock_id + '"]');

		if (row.length > 0) {
	// Update `data-Warrantyperiod` attribute with new value
	row.attr('data-Warrantyperiod', Warranty_period);
        row[0].setAttribute("data-Warrantyperiod", Warranty_period);

        console.log("Updated Attribute:", row.attr('data-Warrantyperiod'));

		$('#selectWarrantyperiod').val(Warranty_period)

        row.hide().show(); // Force re-render

		}
	
    }
	if(type == "product item"){
		var updatedItem = mortgageDataArray.find(item => item.itemId === item_id);
		console.log(updatedItem); 
		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'));
	var row = $('tr[data-id="' + badgstock_id + '"]');

	var warrantystatus = row.attr('data-warrantystatus');

// Alert the warranty period
	alert('Warranty warrantystatus: ' + warrantystatus)
	
	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 = $('#shippingpop');
    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"){
		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(3)').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(3)').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="#shippingpop"]', 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(3)').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 warrantyperiod = row.data('warrantyperiod');
	var each_cost = row.data('each_cost');
	var productProfit = parseFloat(price-each_cost)
	$('#productPurchaseCost').html(each_cost);
	$('#productProfit').html(productProfit);
	

	alert("Warranty Period in Modal: " + warrantyperiod); 
	
	var itemtotalPrice = price*quantity;
    // Update the modal elements
    $('#shippingpop .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);

	$('#selectWarrantyperiod').val(warrantyperiod).change(); // Set the new value
	
	$('#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);
    $('#shippingpop').data('rowId', rowId);
    $('#shippingpop').data('item_id', item_id);
    $('#shippingpop').data('type', type);

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

    // Handle the warranty status
    if (warrantystatus === "yes") {
        $('#shippingpop select[name="state"]').first().val("Yes").change();
        if (warrantyperiod) {
            $('#selectWarrantyperiod').val(warrantyperiod).change();
        }
    } else if (warrantystatus === "no") {
        $('#shippingpop select[name="state"]').first().val("No").change();
    }
});





// Your existing click event for .brandDiv
$(document).on('click', '.brandDiv', function() {
    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(); // Empty the new product list

                response.data.forEach(function(item) {
                    var productCard = 
                        `<div class="col-xl-4 col-lg-2 col-md-3 col-sm-4 col-6 productDivBox modelDiv"  data-type="product"  data-imu_number="${item.code}" data-quantity="${item.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}">
                            <div class="productCard" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; background-color:rgb(251, 243, 233); border-radius: 10px;">
                                <div class="productThumb" style="text-align: center; padding: 10px; position:relative; top:5px;">
                                    <div style="display: flex; flex-direction: column; align-items: center; margin:0 auto;">
                                        <a href="#" style="margin-bottom: 10px; font-weight: bold; text-decoration: none; color: #000;">
                                            ${item.name}
                                        </a>
                                        <p href="#" style="font-weight: bold; text-decoration: none; color: #000;">
                                            ( Quantity: ${item.quantity})
                                        </p>
                                        <p href="#" style="font-weight: bold; text-decoration: none; color: #000;">
                                            ${item.price}
                                        </p>
                                        <p href="#" style="font-weight: bold; text-decoration: none; color: #000;">
                                            Cost : ${item.each_cost}
                                        </p>
                                    </div>
                                </div>
                                <div class="productContent">
                                    <!-- Additional content can be added here -->
                                </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', '.modelDiv', function() {
	var id = $(this).data('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');
	alert(quantity)



	$.ajax({
        url: '{{ route('get.product.model.item') }}',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        data: { 
			id: 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 (!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
    }


			var newRow = `
     <tr data-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 style="padding:5px; margin:15px;">${name} <br> ${imu_number} </td>
               <td style="padding:5px;">
                <input type="number" value="1" class="form-control border-dark w-100px qtyinput quantity-input"
                    max="${quantity}" min="1"  placeholder="1" data-id="${id}" data-badgstock_id="${badgstock_id}" data-price="${price}">
            </td>
            <td style="padding:5px; margin:15px;">${price}</td>
            <td style="padding:5px; margin:15px;" class="total-value">${price}</td> <!-- Initial total value -->
        <td style="padding:5px; margin:15px;">
            <div class="card-toolbar text-end">
                <a href="#" class="confirm-delete" title="Delete" style="position:relative; right:5px;">
                    <i class="fas fa-trash-alt"></i>
                </a>
               
                <span class="badge badge-secondary white rounded-circle mt-1" data-bs-toggle="modal" data-bs-target="#shippingpop" style="position:relative; right:-16px;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="svg-sm" xmlns:xlink="http://www.w3.org/1999/xlink" 
                         version="1.1" id="Layer_21" x="0px" y="0px" width="16px" height="16px" 
                         viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                        <g>
                            <rect x="234.362" y="128" width="43.263" height="256"></rect>
                            <rect x="128" y="234.375" width="256" height="43.25"></rect>
                        </g>
                    </svg>
                </span>
            </div>
        </td>
    </tr>`;
$('#orderTable tbody').append(newRow);

$('#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 totalValue = quantity * price; // Calculate total value
		
		
        // Update the total value in the corresponding cell
        $(this).closest('tr').find('.total-value').text(totalValue.toFixed(2)); // Format to 2 decimal places
    });

	$(document).on('input', '.existing', function() {
    console.log("Event triggered"); // Debugging
});




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

            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="card3 dark productDivBox"  data-id="${item.id}">
                    
                    <div class="card-body2">
                        <div class="text-section">
                            <h5 class="card-title fw-bold"> ${item.name}</h5>
                                <p class="card-text"> IMU : ${item.imu_number}</p>
                        </div>
                        <div class="cta-section">
                            <div>${formattedPrice}</div>
                                <button class="btn btn-light buy-now-btn" 
                        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('input', '.qtyinput', function() {
    var maxQuantity = parseInt($(this).attr('max'), 10);
    var currentValue = parseInt($(this).val(), 10);
	
    if (currentValue > maxQuantity) {
        $(this).val(maxQuantity); // Reset to max value if exceeded
        alert(`Maximum quantity allowed is ${maxQuantity}`);
    }
});
// Handle the back button click event
$(document).on('click', '.backModel', function() {
    // Show the original div if it's hidden
    if (!currentDivVisible) {
        $('.productList').show(); // Show the productList div
        $('.productListnew').empty(); // Empty the new product list
        $('.brandDiv').show(); // Show the original brandDiv elements
        currentDivVisible = true; // Set the flag to true when the original div is visible again
    }
});

$(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();
        }
    });
	}
    // Find the item in mortgageDataArray and update its quantity
   

    console.log(mortgageDataArray); // Verify the updated array
});


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

    // Find the item in mortgageDataArray and update its quantity
    mortgageDataArray.forEach(item => {
        if (item.itemId == itemId) {
            item.quantity = newQuantity;
			calculateTotal();
        }
    });

    console.log(mortgageDataArray); // Verify the updated array
});


$('#orderTable').on('input', '.quantity-input-item', function() {
        var quantity = parseInt($(this).val()); // Get the updated quantity
        var price = parseFloat($(this).data('price'));
		
		// Get the price from data attribute
        // var totalValue = quantity * price; 
		var priceCellValue = $(this).closest('tr').find('td:eq(2)').text().trim();
		var totalValue = quantity * priceCellValue; 

        // Update the total value in the corresponding cell
        $(this).closest('tr').find('.total-value').text(totalValue.toFixed(2)); // Format to 2 decimal places
    });



// Your backModel click event

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

	$(this).prop('disabled', true);

    var productName = $(this).data('name');
    var price = parseFloat($(this).data('price'));
    var imu_number = $(this).data('imu_number');
    var itemId = $(this).data('id'); // Get the product ID to link with the div
	var quantity = $(this).data('quantity'); 
	// var itemCost = $(this).data('item_cost'); 
	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');

	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-item_id="${itemId}"  data-id="${badgstock_id}" 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 style="padding:5px; margin:15px;">${productName} <br> (${imu_number})</td>
            <td style="padding:5px; margin:15px;">
                 <input type="number" value="1" data-id="${itemId}" min="1"  class="form-control border-dark w-100px qtyinput quantity-input-item"  max="${quantity}"  data-price="${price}" placeholder="1">
            </td >
            <td style="padding:5px; margin:15px;">${price}</td>
              <td style="padding:5px; margin:15px;" class="total-value">${price}</td>
            <td style="padding:5px; margin:15px;">
               <div class="card-toolbar text-end">
                <a href="#" class="confirm-delete" title="Delete" style="position:relative; right:5px;">
                    <i class="fas fa-trash-alt"></i>
                </a>
               
                <span class="badge badge-secondary white rounded-circle mt-1" data-bs-toggle="modal" data-bs-target="#shippingpop" style="position:relative; right:-16px;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="svg-sm" xmlns:xlink="http://www.w3.org/1999/xlink" 
                         version="1.1" id="Layer_21" x="0px" y="0px" width="16px" height="16px" 
                         viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                        <g>
                            <rect x="234.362" y="128" width="43.263" height="256"></rect>
                            <rect x="128" y="234.375" width="256" height="43.25"></rect>
                        </g>
                    </svg>
                </span>
            </div>
            </td>
        </tr>`;
    $('#orderTable tbody').append(newRow);

    // Change the color of the associated div when "Buy Now" is clicked
    $('.card3').each(function() {
        if ($(this).data('id') === itemId) {
            $(this).css('background-color', 'red'); // Change color to your desired color
        }
    });
});

$(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 !=null){
		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 != null){
		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();

	

    // Change the color of the associated div when a row is deleted
    $('.card3').each(function() {
        if ($(this).data('id') === productId) {
            $(this).css('background-color', '#89059dab');
			$(this).find('.buy-now-btn').prop('disabled', false);
        }
    });
});




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

                if (suggestions.length === 1) {
                    // If there's only one suggestion, populate the input and hide the list
                    const item = suggestions[0];
                    $('#searchInput')
                        .val(`${item.name.trim()} (${item.imu_number.trim()}) (${item.each_cost.trim()})`)
                        .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-price', item.price)	
						.attr('data-name', item.name)	
						// Populate the input field
                    suggestionList.hide();
                    productExsistingQuantity = item.quantity // Hide suggestions
                    productID = item.id

						$("#amount").val(item.price);
                    // $("#itemCost").val(item.each_cost);

                } else if (suggestions.length > 1) {
                    // If there are multiple suggestions, display them
                    suggestions.forEach(item => {
                        suggestionList.append(
                            `<li 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-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()})
                    </li>`
                        );
                        productExsistingQuantity = item.quantity // Hide suggestions
					
                    // $("#itemCost").val(item.each_cost);
                    });
                    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('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 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-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
    });



	

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

		var isValid = true;	
		var errorMessage = '';
		var voucher = $(".voucher").val();  
		var customer = $("#customer").val();
		var PaymentMethods = $("#PaymentMethods").val();
		var StaffNote = $(".StaffNote").val();
		var SaleNote = $(".SaleNote").val();
		var PaymentNote = $(".PaymentNote").val();

		var sale_reference = $("#sale_reference").html();

            // Perform individual validation checks for each input field
        if (!finaltotalSum || finaltotalSum.length === 0) {
            errorMessage += 'Date is required.<br>';
            isValid = false;
        }

		if (!PaymentMethods || PaymentMethods.length === 0) {
            errorMessage += 'Payment Methods is required.<br>';
            isValid = false;
        }

        if (!totalAmountAfterDiscount || customer.length === 0) {
            errorMessage += 'customer is required.<br>';
            isValid = false;
        }
        // if (!subCategory || subCategory.length === 0) {
        //     errorMessage += 'Sub Category is required.<br>';
        //     isValid = false;
        // }
        if (!finaltotalQuantitySum || finaltotalQuantitySum.length === 0) {
            errorMessage += 'Amount is required.<br>';
            isValid = false;
        }
        // if (!branch || branch.length === 0) {
        //     errorMessage += 'Branch is required.<br>';
        //     isValid = false;
        // }
        if (!isValid) {
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    html: errorMessage,
                    showCloseButton: true,
                    showCancelButton: false,
                    focusConfirm: false,
                    confirmButtonText: 'OK',
                });
                return;
      }else{
        var form_data = new FormData();
            form_data.append('_token', '{{ csrf_token() }}');
            form_data.append('branchId', "{{ session('branch_id') }}");
			form_data.append('saleId', "{{$sale->id}}");
			form_data.append('customer', customer);
            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('preReceivedAmount', preReceivedAmount);
			form_data.append('voucher', voucher);
			form_data.append('outstandingAmount', outstandingAmount);
			form_data.append('discountAmount', discountAmount);
			form_data.append('sale_reference', sale_reference);
			form_data.append('PaymentMethods', PaymentMethods);
			form_data.append('StaffNote', StaffNote);
    		form_data.append('SaleNote', SaleNote);
    		form_data.append('PaymentNote', PaymentNote);

			

            $.each(mortgageDataArray, function(i, rowData) {
			  form_data.append('mortgageData[' + i + '][sale_reference]', sale_reference);
              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: '/update-sale', // Replace with your backend URL
                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' });
        }
            });
      }


	});





	function generateInvoice() {
    if (mortgageDataArray.length === 0) {
        console.log("mortgageDataArray is empty!");
        return;
    }

    console.log("Appending Data:", mortgageDataArray); // Debugging

    // Make sure #table-bill exists
	if (mortgageDataArray.length === 0) {
        console.log("mortgageDataArray is empty!");
        return;
    }

    console.log("Appending Data:", mortgageDataArray);

    // Get the tbody where data should be appended
    let tableBody = $("#table-bill-body");
    
    // Clear existing rows before appending new ones
    tableBody.empty();

    let totalAmount = 0; // To calculate total

    // Append each row to the tbody
    mortgageDataArray.forEach((data) => {
        let subTotal = parseFloat(data.price) * parseInt(data.quantity); // Calculate Subtotal
        totalAmount += subTotal; // Add to total

        tableBody.append(`
            <tr class="service">
                <td class="tableitem"><p class="itemtext">${data.productName}<br>(${data.itemBarcode})</p></td>
                <td class="tableitem"><p class="itemtext">${data.quantity}</p></td>
                <td class="tableitem"><p class="itemtext">Rs ${subTotal.toFixed(2)}</p></td>
            </tr>
        `);
    });

    // Update total amount
    $("#billtotalAmount").text(`Rs ${totalAmount.toFixed(2)}`);
	if(discountAmount){
		$("#billDiscount").text(`Rs ${discountAmount.toFixed(2)}`);
	}
	if(discount){
		$("#billDiscount").text(` ${discount.toFixed(2)} %`);
	}
	if(billOtherCharges){
		$("#billOtherCharges").text(` ${ifAnyCharges.toFixed(2)}`);
	}
	if(ifAnyCharges){
		$("#billOtherCharges").text(` ${ifAnyCharges.toFixed(2)} `);
	}
	
	
		$("#billSubTotal").text(` ${totalAmountAfterDiscount.toFixed(2)} `);


		JsBarcode("#billSaleRefference", saleReference, {
    format: "CODE128", // Use CODE128 for alphanumeric barcodes
    displayValue: true, // Show text below barcode
    lineColor: "#24292e",
    width: 2,
    height: 40,
    fontSize: 20,
  });

		
	

    // Generate the printable invoice
    var printContents = $("#invoice-POS").html();
    var printWindow = window.open('', '', 'width=900,height=1200');

    printWindow.document.write(`
        <html>
        <head>
            <title>Print Invoice</title>
            <style>
               @media print {
    body {
        width: 88mm;
        font-family: Arial, sans-serif;
    }
    #invoice-POS {
        padding: 4mm;
        margin: 0 auto;
        width: 88mm;
        background: #FFF;
    }
    #invoice-POS h1 {
        font-size: 2.5em; /* Increased */
        color: #222;
    }
    #invoice-POS h2 {
        font-size: 1.2em; /* Increased */
    }
    #invoice-POS h3 {
        font-size: 1.5em; /* Increased */
        font-weight: 300;
        line-height: 2.2em;
    }
    #invoice-POS p {
        font-size: 1em; /* Increased */
        color: #666;
        line-height: 1.4em;
    }
    #invoice-POS #top, #invoice-POS #mid, #invoice-POS #bot {
        border-bottom: 1px solid #EEE;
    }
    #invoice-POS #top {
        min-height: 60px; /* Increased */
    }
    #invoice-POS #mid {
        min-height: 100px; /* Increased */
    }
    #invoice-POS #bot {
        min-height: 70px; /* Increased */
    }
   #invoice-POS .logo {
    height: 80px; /* Increased */
    width: 80px;
    background-size: contain; /* Adjust to make sure the SVG fits within the logo container */
    background-repeat: no-repeat;
    background-position: center;
}
    #invoice-POS .clientlogo {
        float: left;
        height: 80px; /* Increased */
        width: 80px;
        background-size: 80px 80px;
        border-radius: 50px;
    }
    #invoice-POS .info {
        display: block;
        margin-left: 0;
    }
    #invoice-POS .title {
        float: right;
    }
    #invoice-POS .title p {
        text-align: right;
    }
    #invoice-POS table {
        width: 100%;
        border-collapse: collapse;
    }
    #invoice-POS .tabletitle {
        font-size: 1em; /* Increased */
        background: #EEE;
    }
    #invoice-POS .service {
        border-bottom: 1px solid #EEE;
    }
    #invoice-POS .item {
        width: 48mm; /* Adjusted */
    }
    #invoice-POS .itemtext {
        font-size: 1em; /* Increased */
    }
    #invoice-POS #legalcopy {
        margin-top: 5mm;
    }
		
}
            </style>
        </head>
        <body>
            <div id="invoice-POS">${printContents}</div>
            <script>
                window.onload = function () {
                    window.print();
                    window.onafterprint = function () {
                        window.close();
                    };
                };
            <\/script>
        </body>
        </html>
    `);
    printWindow.document.close();
}








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

var product_id = $(this).data('product_id');
var item_id = $(this).data('item_id');
var quantity = $(this).data('quantity');
var price = $(this).data('price');
var badgstock_id = $(this).data('badgstock_id');
var itemCost = parseFloat($(this).data('cost'));
var productID = $(this).data('productID');
var saleId = $(this).data('sale_id');
var saleProductsId = $(this).data('sale_products_id');
var code = $(this).data('code');




var totalprice = parseFloat(quantity*price);
var totalcost = parseFloat(itemCost*quantity);

const swalWithBootstrapButtons = Swal.mixin({
    customClass: {
        confirmButton: 'btn btn-success',
        cancelButton: 'btn btn-danger'
    },
    buttonsStyling: false
});

swalWithBootstrapButtons.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,  // Ensure this is a boolean
    confirmButtonText: 'Yes, Do it!',
    cancelButtonText: 'No, cancel!',
    reverseButtons: true
}).then((result) => {
    if (result.isConfirmed) {
        $.ajax({
            url: "/delete-sale-product",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "POST",
            data: JSON.stringify({
                'item_id': item_id,
                'product_id': product_id,
                'quantity': quantity,
                'itemCost': itemCost,
                'badgstock_id': badgstock_id,
                'price': price,
                'totalprice': totalprice,
                'totalCost': totalcost,
				"productID":productID,
				"saleId":saleId,
				"saleProductsId":saleProductsId,
				"code":code,
            }),
            contentType: "application/json",
            success: function(response) {
                window.location.reload();
            }
        });

        swalWithBootstrapButtons.fire(
            'Deleted!',
            'Your Payment has been Deleted.',
            'success'
        );
    } else if (result.dismiss === Swal.DismissReason.cancel) {
        swalWithBootstrapButtons.fire(
            'Cancelled',
            'Your imaginary file is safe 😇',
            'error'
        );
    }
});

})

});


document.addEventListener('DOMContentLoaded', () => {
    const productCardBoxes = document.querySelectorAll('.productCardBox');

    productCardBoxes.forEach((box) => {
        const card = box.querySelector('.productCard');

        card.addEventListener('mouseenter', () => {
            productCardBoxes.forEach((otherBox) => {
                if (otherBox !== box) {
                    otherBox.querySelector('.productCard').style.filter = 'blur(4px)';
                }
            });
        });

        card.addEventListener('mouseleave', () => {
            productCardBoxes.forEach((otherBox) => {
                otherBox.querySelector('.productCard').style.filter = 'none';
            });
        });
    });
});

	
	</script>
	
</body>
<!--end::Body-->



<!-- Mirrored from kundol.themes-coder.net/admin-demo/pos.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 27 Jan 2025 11:56:09 GMT -->
</html>


