<?php

include 'load.php';
require_once 'db_connection.php';
$user_id = $_SESSION['user_id'];
if (!$user_id > 0) {
	header('Location: ' . 'index.php');
}
if (isset($_GET['order_id'])) {
	$_SESSION['order_id'] = $_GET['order_id'];
} else {
	$_SESSION['order_id'] = 0;
}


if (isset($_GET['oid'])) {
	$oid = $_GET['oid'];
	
}else{
	$oid = 0;
	
}

require_once 'headercss.php';

?>

<!DOCTYPE html>
<html lang="en">

<head>
	<style>
		.ajs-error {
			position: fixed !important;
			top: 50px !important;
			right: 20px !important;
		}

		#left_panel {
			height: 70vh;
			overflow-y: scroll;
			overflow-x: hidden;

		}

		#left_panel::-webkit-scrollbar {
			width: 10px;
			background-color: #F5F5F5;
		}

		#left_panel::-webkit-scrollbar-thumb {
			background-color: #3366FF;
			border-radius: 10px;
			background-image: -webkit-linear-gradient(0deg,
					rgba(255, 255, 255, 0.5) 25%,
					transparent 25%,
					transparent 50%,
					rgba(255, 255, 255, 0.5) 50%,
					rgba(255, 255, 255, 0.5) 75%,
					transparent 75%,
					transparent)
		}

		/* #right_panel {
			height: 65vh !important;
		} */

		* {
			scrollbar-width: thin;
			scrollbar-color: #0d0d0d #ffffff;
		}


		*::-webkit-scrollbar {
			width: 15px;
		}

		*::-webkit-scrollbar-track {
			background: #ffffff;
		}

		*::-webkit-scrollbar-thumb {
			background-color: #0d0d0d;
			border-radius: 30px;
			border: 4px none #ffffff;
		}

		#left_panel::-webkit-scrollbar-thumb {
			background-color: #3366FF;
			border-radius: 10px;
			background-image: -webkit-linear-gradient(0deg,
					rgba(255, 255, 255, 0.5) 25%,
					transparent 25%,
					transparent 50%,
					rgba(255, 255, 255, 0.5) 50%,
					rgba(255, 255, 255, 0.5) 75%,
					transparent 75%,
					transparent)
		}

		#left_panel::-webkit-scrollbar {
			width: 10px;
			background-color: #F5F5F5;
		}

		@media only screen and (max-width: 767px) {
			.fa.fa-home {
				font-size: 25px !important;
			}


		}
	</style>
	<script>
		var oid = <?php echo json_encode($oid); ?>;
		loadOid(oid);
		function loadOid(oid) {
			
			$.ajax({
				url: "load-cart-panel.php",
				type: "POST",
				data: {oid:oid},
				dataType: "json",
				success: function (data) {
					//alert(data);
				}
			});
			
			}
		function startTime() {
			var today = new Date();
			var hr = today.getHours();
			var min = today.getMinutes();
			var sec = today.getSeconds();
			ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
			hr = (hr == 0) ? 12 : hr;
			hr = (hr > 12) ? hr - 12 : hr;
			//Add a zero in front of numbers<10
			hr = checkTime(hr);
			min = checkTime(min);
			sec = checkTime(sec);

			document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;

			var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
			var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
			var curWeekDay = days[today.getDay()];
			var curDay = today.getDate();
			var curMonth = months[today.getMonth()];
			var curYear = today.getFullYear();
			var date = curWeekDay + ", " + curDay + " " + curMonth + " " + curYear;
			document.getElementById("date").innerHTML = date;

			var time = setTimeout(function() {
				startTime()
			}, 500);
		}

		function checkTime(i) {
			if (i < 10) {
				i = "0" + i;
			}
			return i;
		}
	</script>
	<?php
	$UserID = $_SESSION['user_id'];
	$getEmpQuery = $conn->query("SELECT branch_id FROM tbl_user_branch WHERE user_id='$UserID' ");
	if ($emp = $getEmpQuery->fetch_array()) {
		$branch_id = $emp['0'];
	}
	$userinfo = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM mobileusers WHERE user_id='$UserID'"));
	?>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
</head>

<body>

	<div class=" d-flex justify-content-between" style="background: #000000; color: white; padding: 5px 20px">
		<div class="col-sm-4" style="display: flex; align-items:center;">
			<a href="index.php" class="logo mr-2" style="margin-right: 10px;">
				<img src="images/settings/999882.png" alt="#">
			</a>
			<a href="home.php" style="color: white"><i class="fa fa-home" aria-hidden="true" style="font-size: 22px;"></i> Go Dashboard</a>


		</div>
		<div class="col-sm-4" style="display: flex;">
			<div style="font-size: 1.3rem; margin: auto;text-align: center;color:#ffffff;">

				<div id="clockdate">
					<div class="clockdate-wrapper">
						<div id="clock"></div>
						<div id="date"></div>
					</div>
				</div>


				<?php
				//$date = new DateTime("now", new DateTimeZone('Asia/Colombo'));
				//echo $date->format('Y-m-d H:i:s A');



				?>
				<style>
					.clockdate-wrapper {
						background-color: #333;
						padding: 0px 30px;
						max-width: 350px;
						width: 100%;
						text-align: center;
						border-radius: 5px;
						margin: 0 auto;

					}

					#clock {
						background-color: #333;
						font-family: sans-serif;
						font-size: 20px;
						text-shadow: 0px 0px 1px #fff;
						color: #fff;
					}

					#clock span {
						color: #888;
						text-shadow: 0px 0px 1px #333;
						font-size: 20px;
						position: relative;
						top: 0px;
						left: 10px;
					}

					#date {
						letter-spacing: 3px;
						font-size: 12px;
						font-family: arial, sans-serif;
						color: #fff;
					}

					.subcatslider ul li {
						border: 1px solid #ccc;
						padding: 5px;

					}

					.subcatslider ul li img {
						margin-left: 25%;
					}
				</style>
			</div>
		</div>
		<div class="col-sm-4" style="display: flex; align-items:center;">

			<i style="margin-right: 10px;" class="fa fa-user" aria-hidden="true"></i>
			Cashier : <?php echo $userinfo['fullname']; ?> | Payroll
		</div>
	</div>


	<!-- <div class="row" style="background: #fff; padding : 10px 20px;border-bottom: 8px solid #ffffff;"> -->
	<div class="row" style="padding : 10px 20px;">
		<div class="col-md-6 style_mob" style="padding: 0;">
			<input type="text" class="form-control" placeholder="Item Name / Barcode / Item Code" id="searchbarcode" oninput="handleInput();" onKeyDown="if(event.keyCode==32) searchbarcode();">
		</div>

		<div class="col-md-6 style_mob">
			<div class="row">
				<div class="col-6">

					<select class="form-control select2" id="billcustomer">
						<option value="0">Walk-in Customer</option>
						<option value="dc">Delivery Customer</option>
						<?php
						$cus2 = "SELECT * FROM mobilecustomers WHERE status=1";
						$result = $conn->query($cus2);
						if ($result->num_rows > 0) {
							while ($row = $result->fetch_assoc()) {
								$coid = $row["coid"];
								$creditbalance = $row["ccredit"];
								echo $cname = $row["cname"];
								$cphone = $row["cphone"];
								echo '<option value="' . $coid . '">' . $cname . ' | ' . $cphone . ' | Rs.' . $creditbalance . '</option>';
							}
						}
						//$conn->close();
						?>
					</select>

					<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
					<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>
					<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
					<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

				</div>
				<div class="col-3">
					<a style="background: none;color: #000 !important; width:100%;" href="addcustomer.php" class="btn btn-block btn-outline-info active" title="Add New Customer" onClick="JavaScript:return confirm('Are your sure change this add new customer ?');" target="_blank" style="font-weight:bold;margin-top:0px;width:100%;"><i class="fa fa-users" data-bs-toggle="tooltip" title="" data-bs-original-title="fa fa-check-circle" aria-label="fa fa-plus"></i> Customer</a>
				</div>
				<div class="col-3">
					<a style="background: none;color: #000 !important;" href="addproduct.php"><button style="background: none;color: #000 !important; width:100%;" class="btn btn-block btn-outline-info active"><i class="fa fa-box" data-bs-toggle="tooltip" title="" data-bs-original-title="fa fa-check-circle" aria-label="fa fa-plus"></i> Product</button></a>
				</div>
			</div>
		</div>
		<div class="col-md-6 style_mob">
			<div class="row">

				<div class="col-md-4 col-sm-4 mt-1 catwrap">
					<!--<select class="form-control" id="category">
			<option value="">Select Category</option>
			<?php // $category = mysqli_query($conn, "SELECT * FROM mobilecategory");
			// if ($category->num_rows > 0) {
			//while ($row = $category->fetch_assoc()) { 
			?>
					<option value="<?php //echo $row['ctid']; 
									?>"><?php // echo $row['catename']; 
										?></option>
			<?php //}
			//}

			?>
		</select>-->
					<input type="text" class="form-control" id="category1" onkeyup="searchCategory()" placeholder="Select Category...">
					<ul id="categoryResults">
						<?php $category = mysqli_query($conn, "SELECT * FROM mobilecategory");
						if ($category->num_rows > 0) {
							while ($row = $category->fetch_assoc()) {
								echo "<li onClick='filtercat(" . $row['ctid'] . ")'>" . $row['catename'] . "</li>";
							}
						}

						?>
					</ul>






				</div>


				<div class="col-md-4 col-sm-4 mt-1 catwrap">



					<input type="text" class="form-control" id="subcat1" onkeyup="searchSubcat()" placeholder="Select Sub Category...">
					<ul id="subcatResults">
						<?php $subcat = mysqli_query($conn, "SELECT * FROM mobilesubcategory");
						if ($subcat->num_rows > 0) {
							while ($row1 = $subcat->fetch_assoc()) {
								echo "<li onClick='filtersubcat(" . $row1['sbid'] . ")'>" . $row1['subname'] . "</li>";
							}
						}

						?>
					</ul>
				</div>





				<style>
					/*.catwrap{
			position: relative;

		}
		.catwrap ul{
			position: absolute;
			left: 0;
			top: 37px;
			height: auto;
    		max-height: 200px;
			overflow-y: scroll;
			width: 87%;
			margin-left: 22px;
			z-index: 1;
			background: #fff;
			padding: 15px;
			display: none;
		}
		.catwrap ul li{
			margin-bottom: 3px;
			cursor: pointer;
		}
		.catwrap ul li:hover{
			background: #000000;
			color: #fff;
			padding: 5px 10px;
		} */


					.catwrap {
						position: relative;


						border-radius: 4px;
					}

					.catwrap ul li {
						padding: 10px;
						cursor: pointer;
					}

					.catwrap ul {
						display: none;
						position: absolute;
						top: 37px;
						left: 10px;
						width: 92%;
						border: 1px solid #ccc;
						border-top: none;
						border-radius: 0 0 4px 4px;
						list-style-type: none;
						margin: 0;
						padding: 0;
						max-height: 300px;
						height: auto;
						overflow-y: scroll;
						background-color: #ccc;
						z-index: 1;
					}

					.catwrap li {
						padding: 10px;
						cursor: pointer;
					}

					.catwrap li:hover {
						background-color: #f0f0f0;
					}

					.table thead {
						background: #ddd;
						border-bottom: 2px solid #ffffff;
						background: rgb(166, 213, 128);
						background: linear-gradient(90deg, rgba(166, 213, 128, 1) 0%, rgba(59, 27, 135, 0) 100%);
					}

					.table thead th {
						color: #000;
					}
				</style>
				<div class="col-md-4 col-sm-4 mt-1 catwrap">



					<input type="text" class="form-control" id="brand1" onkeyup="searchBrand()" placeholder="Select Brand...">
					<ul id="brandResults">
						<?php $brand = mysqli_query($conn, "SELECT * FROM mobile_brand");
						if ($brand->num_rows > 0) {
							while ($row1 = $brand->fetch_assoc()) {
								echo "<li onClick='filterbrand(" . $row1['brand_id'] . ")'>" . $row1['brand_name'] . "</li>";
							}
						}

						?>
					</ul>
				</div>
			</div>
		</div>


		<!-- <div class="col-md-12 mt-1 subcatslider ">
			<ul class="owl-carousel owl-theme" style="text-align: center;">
				<?php $subcat = mysqli_query($conn, "SELECT * FROM mobilesubcategory");
				if ($subcat->num_rows > 0) {
					echo "<li class='item' onClick='filtersubcat(0)'><img src='images/eimage.png' alt='' style='width:50%;height:50%;'> All</li>";
					while ($row1 = $subcat->fetch_assoc()) {
						echo "<li class='item' onClick='filtersubcat(" . $row1['sbid'] . ")'><img src='images/eimage.png' alt='' style='width:50%;height:50%;'> " . $row1['subname'] . "</li>";
					}
				}

				?>
			</ul>
		</div> -->


<input type="hidden" value="<?php echo $oid; ?>" id="oid"/>


	</div>

	<script>
		// Initialize Select2 plugin with typing search functionality
		$('.select2').select2();
	</script>


	<div class="row">
		<!--LEFT PANEL -->
		<div class="col-md-6" style="min-height:100%;">
			<h6 style="font-size:14px; margin-left:20px;"><strong>New Products</strong></h6>
			<div class="row" id="left_panel" style="padding: 22px">
				<div class="row">
					<?php
					$sql = "SELECT * FROM mobileproducts WHERE status=1";
					$result = $conn->query($sql);

					if ($result->num_rows > 0) {
						// output data of each row
						while ($row = $result->fetch_assoc()) {

							$prid = $row["prid"];
							$proname = $row["proname"];
							$discount = $row["discount"];
							$price = $row["sellprice"];
							$qty = $row["qty"];
							$mqty = $row["mqty"];
							$cover = $row["cover"];
							$itemcode = $row["itemcode"];

							$expdate = $row["expdate"];
							$today = date('Y-m-d');

							$user_qury_02 = mysqli_query($conn, "SELECT * FROM tbl_user_branch WHERE user_id='" . $_SESSION['user_id'] . "'");
							$user_res = mysqli_fetch_assoc($user_qury_02);
							$user_branch = $user_res['branch_id'];

							$user_qury_03 = mysqli_query($conn, "SELECT * FROM tbl_stock WHERE prid = '$prid' AND branch_id='$branch_id'");
							$user_res1 = mysqli_fetch_assoc($user_qury_03);
							$sqty = $user_res1['qty'];

							if ($expdate <= $today && $expdate != "0000-00-00") {
								$expiretext = "<div><span style='background:#fff;color:#red; padding: 15px;position: absolute;left: 0;bottom: 0;font-size: 13px;font-weight: 600; '>Expired</span></div>";
								$bgexpire = "style='background:red;'";
							} else {
								$expiretext = "";
								$bgexpire = "";
							}
					?>
							<div class="d-flex div_wrap" onclick="addProductById(<?php echo $row['prid']; ?>);">
								<div class="fix_textnps">
									<div class="image_images">
										<?php if ($cover == "") {
											$pro_img = "images/eimage.png";
										} else {
											$pro_img = "images/products/cover/" . $cover;
										} ?><img src="<?php echo $pro_img; ?>" alt="">

										<h6>
											<?php echo $proname; ?>
										</h6>
									</div>
									<p>
										<?php echo $itemcode; ?>
									</p>
									<?php //if ($user_res1['qty'] < $mqty) {
									if ($user_res1['qty'] < 1) { ?>
										<h6 class="text-primary">
											Qty Low <?php if ($user_res1['qty'] != 0) : ?> | <?php echo $user_res1['qty'];
																							endif; ?>
										</h6>
									<?php } else { ?>
										<h6 class="text-primary">Qty : <?php echo $user_res1['qty']; ?></h6>
									<?php } ?>

									<?php echo $expiretext; ?>
									<h6 class="btn btn-block btn-sm btn-outline-dark active text-white">
										Rs.
										<?php echo number_format((float) $price, 2);
										if ($discount > 0) {
											echo "  (" . $discount . "%)";
										} ?>
										</h5>
								</div>
							</div>



					<?php

						}
					} else {
						echo "Not Found Any Products..";
					}

					?>
				</div>
			</div>
		</div>
		<!--END LEFT PANLE -->

		<!--RIGHT PANEL -->
		<!-- <div class="col-md-7">
		<div class="card" style="margin: 10px;">
			<div class="card-body">
				<div style = "margin-bottom:-10px" id="right_panel" style="padding-right: 10px;"></div>
				<div id="line_total"></div>
				<div id="footer_right" class="footer_right">
					<div class="row">
						<div class="col-md-2">
						</div>
						<div class="col-md-2">
							<label style="font-weight:700;font-size: 1rem; margin: auto;text-align: center;color:#000000;">All Discount</label>
							<input type="text" id="discount_total" onchange="changeDiscount(this.value)" class="form-control" placeholder="Discount" value="0" style="border:2px solid #000000;">
						</div>
						<div class="col-md-4">
							<a href="saleslist.php" class="btn btn-dark btn-block btn-md" style="background: #000000 ; border-color: #000000;margin-top: 25px"><span><i class="fa fa-file" aria-hidden="true"></i> Recent Transactions</span></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> -->
		<div class="col-md-6" style="margin-top: -57px;">
			<div class="card" style="margin: 10px; border: none;background: none;">
				<div class="card-body">
					<div style="margin-bottom:-10px; margin-top: 30px;" id="right_panel" style="padding-right: 10px;"></div>
					<div id="line_total"></div>
				</div>
			</div>
			<div id="footer_right" class="footer_right">
				<div class="row">
					<div class="col-md-2">
					</div>
					<div class="col-md-2">
						<label style="font-weight:700;font-size: 1rem; margin: auto;text-align: center;color:#000000;">All Discount</label>
						<input type="text" id="discount_total" onkeyup="changeDiscount(this.value)" class="form-control" placeholder="Discount" value="0" style="border:2px solid #000000;">
					</div>
					<div class="col-md-4">
						<a href="saleslist.php" class="btn btn-dark btn-block btn-md" style="background: #000000 ; border-color: #000000;margin-top: 25px"><span><i class="fa fa-file" aria-hidden="true"></i> Recent Transactions</span></a>
					</div>
				</div>
			</div>
		</div>

	</div>

	<div class="footer_panel">

		<div class="row">


			<div class="col-md-4 d-flex justify-content-center" style="font-size: 1.3rem; margin: auto;text-align: center ;color:#fff;">
				<span style="color: #ffffff">Total Amount :</span>Rs.
				<div id="total_amount_view" style="color: #fff;">
					Total Amount : 00.00
				</div><span style="color: #fff;">.00</span>
			</div>

			<div class="col-md-2 col-sm-4">
				<button class="main_btn" style="border-radius: 2px;" onclick="goToCheckout();"><i class="fa fa-money" aria-hidden="true"></i> PAY NOW</button>
			</div>
			<div class="col-md-2 col-sm-4">
				<button class="main_btn" id="hold_button" style="background: #0727A9; border-color: #0727A9;" onclick="holdBill(1);"><span id="hold-btn-name"><i class="fa fa-stop" aria-hidden="true"></i> HOLD</span></button>
			</div>
			<div class="col-md-2 col-sm-4">
				<button class="main_btn" id="unhold_button" style="background: #A020F0; border-color: #A020F0;" onclick="holdBill(0);"><span id="hold-btn-name"><i class="fa fa-play" aria-hidden="true"></i> UNHOLD</span></button>
			</div>

		</div>

	</div>



	<script src="assets/js/jquery-3.6.0.min.js"></script>
	<script src="assets/js/feather.min.js"></script>
	<script src="assets/js/jquery.slimscroll.min.js"></script>
	<script src="assets/js/bootstrap.bundle.min.js"></script>
	<script src="assets/js/jquery.dataTables.min.js"></script>
	<script src="assets/js/dataTables.bootstrap4.min.js"></script>
	<script src="assets/plugins/owlcarousel/owl.carousel.min.js"></script>
	<script src="assets/plugins/sweetalert/sweetalert2.all.min.js"></script>
	<script src="assets/plugins/sweetalert/sweetalerts.min.js"></script>
	<script src="assets/alertify/alertify.js"></script>
	<script src="assets/alertify/alertify.min.js"></script>
	<script src="assets/js/script.js"></script>
	<script src="process.js"></script>
	<script src="assets/plugins/apexchart/apexcharts.min.js"></script>
	<script src="assets/plugins/apexchart/chart-data.js"></script>
	<script src="assets/plugins/select2/js/select2.min.js"></script>
	<script src="assets/plugins/select2/js/custom-select.js"></script>
</body>

</html>

<script type="text/javascript">
	jQuery('#discount_total').blur(function() {
		var dcount_mk = jQuery('[name="Discount"]').val();
		if (this.value == '') {
			jQuery('#discount_total').val(0);
			jQuery('#discount_display').html(dcount_mk);
		}
	});
	const cashamount = 0;



	function changeDiscount(discount) {
		var dcount_mk = jQuery('[name="Discount"]').val();
		jQuery('#discount_display').html(dcount_mk + discount);
	}




	document.body.onload = function() {

		//loadPosDateTime();
		// document.getElementById("searchbarcode").focus();
		loadCartItems();
	}


	document.addEventListener("keyup", (e) => enterKeyPressed(e))
	var counter = 0;

	function enterKeyPressed(event) {
		//alertify.error("Key"+ event.keyCode+ " Pressed:"+ counter);
		if (event.keyCode == 13) {
			counter = parseInt(counter) + 1;
			if (counter == 4) {
				counter = 0;
				goToCheckout();
			}

		} else {
			counter = 0;
		}
	}


	function goToCheckout() {


		showTotalAmount();
		document.getElementById("cash_type").focus();
		$('#myModal').modal('show');

		var totalbillvalue = document.getElementById("total_amount_view").innerHTML;
		document.getElementById("totalview").innerHTML = "Total : Rs. " + totalbillvalue;
		document.getElementById("cashamount").value = totalbillvalue.replace(/\s/g, '');
		showChangeAmount();
	}
</script>

<style type="text/css">
	.footer_panel {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #000000;
		z-index: 99999;
		color: black;
		min-height: 30px;
		font-weight: 600;
		cursor: pointer;
		font-weight: 600;
		font-size: 1rem;
	}

	.footer_right {
		position: fixed;
		bottom: 50px;
		width: 100%;
		z-index: 99999;
		color: black;
		min-height: 70px;
		cursor: pointer;
	}

	.main_btn {
		padding: 0px;
		background: green;
		color: #fff;
		border-color: green;
		width: 100%;
		font-weight: bold;
		font-size: 22px;
	}

	.alertify-log-error {
		z-index: 9999;
		bottom: 250px;
	}

	body {
		/* background-color: #55ede3 !important; */
		background-color: #d2d6de !important;
	}

	#right_panel {

		background-color: #fff !important;
		/* padding-left: 15px;
		padding-right: 15px !important; */
	}

	#left_panel .row {
		max-height: 180px;
	}
</style>

<div class="modal" tabindex="-1" role="dialog" id="myModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header" style="background-color:#198754;">
				<h5 class="modal-title" style="color:#ffffff;">PAYMENT PANEL</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="cloasemyModal();">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body" id="myModalMsg">

				<div class="row">
					<div id="totalview" style="font-size: 21px;color: black; text-align: center;padding: 5px 0px;font-weight:bold; margin: 10px;">
					</div>

					<div class="col-12 my-1">
						<label style="font-weight:bold;color:#000000;">Payment Option</label>
						<select class="form-select" id="cash_type" onchange="setCardNo();">
							<option value="cash">Cash</option>
							<option value="credit">Credit</option>
							<option value="card">Card</option>
							<option value="banktransfer">Bank Transfer</option>
							<option value="cheques">Cheques</option>
						</select>
					</div>

					<input type="hidden" class="form-control" id="branch_id" value="<?php echo $branch_id; ?>">

					<div class="col-12 my-1" id="cardnoshow" style="display: none;">
						<label style="font-weight:bold;color:#000000;" class="paytype">Card Number</label>
						<input type="number" class="form-control" id="cardno" name="payment_option_number" placeholder="Card No">
					</div>

					<div class="col-12 my-1" id="creditAmount" style="display: none;">
						<label style="font-weight:bold;color:#000000;">Credit Amount</label>
						<input type="text" class="form-control" readonly id="creditAmountvalue" placeholder="Credit Amount">
					</div>

					<div class="col-12 my-1" id="totalcreditAmount" style="display: none;">
						<label style="font-weight:bold;color:#000000;">Credit Amount Left</label>
						<input type="text" class="form-control" readonly id="totalAmountvalue" placeholder="Total Amount">
						<input type="hidden" class="form-control" readonly id="totalAmountvalue2">
					</div>
					<div class="col-12 my-1" id="cheque_datewrap" style="display: none;">
						<label style="font-weight:bold;color:#000000;">Cheque Date</label>
						<input type="text" class="form-control" id="cheque_date" value="" placeholder="Cheque Date">
					</div>
					<div class="col-12 my-1" id="cheque_nowrap" style="display: none;">
						<label style="font-weight:bold;color:#000000;">Cheque Number</label>
						<input type="text" class="form-control" id="cheque_number" value="" placeholder="Cheque Number">
					</div>
					<div class="col-12 my-1" id="cardnoshow">
						<label style="font-weight:bold;color:#000000;">Cash Amount</label>
						<input type="text" class="form-control" id="cashamount" value="" placeholder="Cash Amount" onchange="showChangeAmount();" onkeyup="showChangeAmount();">
					</div>

					<div class="col-12 my-1">
						<button class="btn btn-secondary btn-block" onclick="onlypayBill();" style="background-color:#0000FF;width: 100%;font-weight:700;font-size:22px;"><i class="fa fa-money" aria-hidden="true"></i> PAY</button>
					</div>
					<?php if (!isset($_GET['oid'])) { ?>
					<div class="col-12 my-1">
						<button class="btn btn-success btn-block" onclick="payBill();" style="width: 100%;font-weight:700;font-size:22px;"><i class="fa fa-print" aria-hidden="true"></i> PAY & PRINT</button>
					</div>
					<div class="col-12 my-1">
						<button class="btn btn-secondary btn-block" onclick="onlySaveBill();" style="background-color:#fcba03;width: 100%;font-weight:700;font-size:22px;color:#fff;"><i class="fa fa-money" aria-hidden="true"></i> Save</button>
					</div>
					<div class="col-12 my-1">
						<button class="btn btn-secondary btn-block" onclick="onlySaveBillWithBarcode();" style="background-color:#fcba03;width: 100%;font-weight:700;font-size:22px;color:#fff;"><i class="fa fa-money" aria-hidden="true"></i> Save & Barcode</button>
					</div>
					<?php } ?>
					<div class="col-12 my-1">
						<button class="btn btn-danger btn-block" onclick="deleteAllCart();" style="width: 100%;font-weight:700;font-size:22px;"><i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-file" aria-hidden="true"></i> Clear All</button>
					</div>

					<div id="balanceview" style="font-size: 21px;color: black; text-align: center;padding: 5px 0px;font-weight:bold; margin: 10px;">
					</div>

				</div>

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

<style>
	#right_panel {
		overflow-Y: scroll;
	}
</style>
<script type="text/javascript">
	function setCardNo() {
		var cash_type = document.getElementById("cash_type").value;
		document.getElementById("cardno").value = "";
		var customer = document.getElementById("billcustomer").value;
		if (cash_type == 'cheques') {
			

			
			document.getElementById("cheque_datewrap").style.display = "block";
			document.getElementById("cheque_nowrap").style.display = "block";
			
			
		} else if (cash_type == 'card' || cash_type == 'banktransfer' || cash_type == 'cheques') {
			
				document.getElementById("cardnoshow").style.display = "block";
				document.getElementById("creditAmount").style.display = "none";
				document.getElementById("totalcreditAmount").style.display = "none";
				document.getElementById("cheque_datewrap").style.display = "none";
			

		} else if (cash_type == 'credit') {
			document.getElementById("cheque_datewrap").style.display = "none";
			document.getElementById("cardnoshow").style.display = "none";
			document.getElementById("creditAmount").style.display = "block";
			document.getElementById("totalcreditAmount").style.display = "block";

			var customer = document.getElementById("billcustomer").value;

			if (customer != 0) {
				$.ajax({
					url: "load-credit-balance.php",
					type: "POST",
					data: {
						customer: customer
					},
					success: function(data) {
						if (data != '') {

							var totalbillvalue = document.getElementById("total_amount_view").innerHTML;

							var totalbillvalue = parseInt(totalbillvalue, 10);
							var data = parseInt(data, 10);

							var balanceCreditvalue = data + totalbillvalue;
							//var balanceCreditvalue = totalbillvalue;

							document.getElementById("creditAmountvalue").value = data;
							//document.getElementById("totalAmountvalue").value = balanceCreditvalue;
							document.getElementById("totalAmountvalue").value = data;
							document.getElementById("totalAmountvalue2").value = balanceCreditvalue;
						}
					},
					error: function(jXHR, textStatus, errorThrown) {
						alert(jXHR.responseText);
					}
				});
			} else {
				alert('Please Select cutomer first');
				var dropdown = document.getElementById("cash_type");
				dropdown.selectedIndex = -1;
				$('#myModal').modal('hide');
			}
		} else {
			document.getElementById("cardnoshow").style.display = "none";
			document.getElementById("creditAmount").style.display = "none";
			document.getElementById("totalcreditAmount").style.display = "none";
			document.getElementById("cheque_datewrap").style.display = "none";
			document.getElementById("cheque_nowrap").style.display = "none";
		}
	}

	function onlySaveBill() {

		showTotalAmount();
		var totalbillvalue = document.getElementById("total_amount_view").innerHTML;
		var discount = document.getElementById("discount_total").value;
		var customer = document.getElementById("billcustomer").value;
		var cashamount = document.getElementById("cashamount").value;

		var totalAmountvalue = document.getElementById("totalAmountvalue").value;

		var cardno = document.getElementById("cardno").value;
		var cheque = ""; //document.getElementById("cheque").value;
		//var duedate = ""; //document.getElementById("duedate").value;
		var duedate = document.getElementById("cheque_date").value; 
		var cheque_number = document.getElementById("cheque_number").value; 
		var pay_type = document.getElementById("cash_type").value;
		var deliveryCost = "0.00"; //document.getElementById("deliveryCostview").innerHTML;
		var country = "0"; //document.getElementById("country").value;
		var city = "0"; //document.getElementById("city").value;
		var branch_id = document.getElementById("branch_id").value;
		var oid = document.getElementById("oid").value;
		//var delivery_cost = document.getElementById("delivery_cost").value;
		$.ajax({
			url: "only-save-bill.php",
			type: "POST",
			data: "country=" + country + "& city=" + city + "& deliveryCost=" + deliveryCost + "& totalbillvalue=" + totalbillvalue + "& cashamount=" + cashamount + "& customer=" + customer + "& cardno=" + cardno + "&  cheque=" + cheque + "&  duedate=" + duedate + "& pay_type=" + pay_type + "& totalAmountvalue=" + totalAmountvalue + "& discount=" + discount + "& branch_id=" + branch_id + "& cheque_number=" + cheque_number + "& oid=" + oid + "&",              
			success: function(data) {
				if (data > 0) {
					$('#myModal').modal('hide');
					var totalbillvalue = document.getElementById("total_amount_view").innerHTML = "Order has been saved<br>Order Number : " + data;

					alertify.success("Order has been saved<br>Order Number : " + data);
					loadCartItems();
					// document.getElementById("searchbarcode").focus();

				} else {
					alertify.error(data);
				}
			},
			error: function(jXHR, textStatus, errorThrown) {
				alert(jXHR.responseText);
			}
		})


	}
	function onlySaveBillWithBarcode(){
		showTotalAmount();
		var totalbillvalue = document.getElementById("total_amount_view").innerHTML;
		var discount = document.getElementById("discount_total").value;
		var customer = document.getElementById("billcustomer").value;
		var cashamount = document.getElementById("cashamount").value;

		var totalAmountvalue = document.getElementById("totalAmountvalue").value;

		var cardno = document.getElementById("cardno").value;
		var cheque = ""; //document.getElementById("cheque").value;
		//var duedate = ""; //document.getElementById("duedate").value;
		var duedate = document.getElementById("cheque_date").value; 
		var cheque_number = document.getElementById("cheque_number").value; 
		var pay_type = document.getElementById("cash_type").value;
		var deliveryCost = "0.00"; //document.getElementById("deliveryCostview").innerHTML;
		var country = "0"; //document.getElementById("country").value;
		var city = "0"; //document.getElementById("city").value;
		var branch_id = document.getElementById("branch_id").value;
		var oid = document.getElementById("oid").value;
		//var delivery_cost = document.getElementById("delivery_cost").value;
		$.ajax({
			url: "orderid-barcode.php",
			type: "POST",
			data: "country=" + country + "& city=" + city + "& deliveryCost=" + deliveryCost + "& totalbillvalue=" + totalbillvalue + "& cashamount=" + cashamount + "& customer=" + customer + "& cardno=" + cardno + "&  cheque=" + cheque + "&  duedate=" + duedate + "& pay_type=" + pay_type + "& totalAmountvalue=" + totalAmountvalue + "& discount=" + discount + "& branch_id=" + branch_id + "& cheque_number=" + cheque_number + "& oid=" + oid + "&",              
			success: function(data) {
				if (data > 0) {
					$('#myModal').modal('hide');
					window.location.replace("gen-orderid-barcode.php?order_id="+data);
					var totalbillvalue = document.getElementById("total_amount_view").innerHTML = "Order has been saved<br>Order Number : " + data;
					
					//alertify.success("Order has been saved<br>Order Number : " + data);
					loadCartItems();
					// document.getElementById("searchbarcode").focus();

				} else {
					alertify.error(data);
				}
			},
			error: function(jXHR, textStatus, errorThrown) {
				alert(jXHR.responseText);
			}
		})
	}
	function showChangeAmount() {
		var cashamount2 = parseInt(document.getElementById("total_amount_view").innerHTML);
		var cash_type = document.getElementById("cash_type").value;

		if (cash_type == 'credit') {

			var tcash = 0;
			var totalbillvalue = document.getElementById("totalAmountvalue").value;
			var totalAmountvalue2 = document.getElementById("totalAmountvalue2").value;
			var cash = document.getElementById("cashamount").value;
			var creditAmountvalue = document.getElementById("creditAmountvalue").value;

			var totalbillvalue = parseInt(totalbillvalue, 10);
			var cash = parseInt(cash, 10);
			//var balanceCreditvalue = cash + parseInt(totalAmountvalue2);
			var balanceCreditvalue = cash + parseInt(creditAmountvalue);

			if (cashamount2 == cash) {
				tcash = parseInt(creditAmountvalue) + cash;
				document.getElementById("balanceview").innerHTML = "Balance : 0";
				document.getElementById("totalAmountvalue").value = 0;
				document.getElementById("totalAmountvalue").value = parseInt(creditAmountvalue);
			} else if (cash < cashamount2) {
				//totalAmountvalue
				var r1 = cashamount2 - cash;
				tcash = parseInt(creditAmountvalue) + cashamount2;
				document.getElementById("balanceview").innerHTML = "Balance : " + r1;
				document.getElementById("totalAmountvalue").value = 0;
				//document.getElementById("totalAmountvalue").value = tcash - r1;
				document.getElementById("totalAmountvalue").value = parseInt(creditAmountvalue) + r1;
				//document.getElementById("totalAmountvalue").value = totalbillvalue;
			} else if (cashamount2 < cash) {
				var r = cash - cashamount2;

				tcash = parseInt(creditAmountvalue) + cashamount2;
				document.getElementById("balanceview").innerHTML = "Balance : " + r;
				document.getElementById("totalAmountvalue").value = 0;
				document.getElementById("totalAmountvalue").value = parseInt(creditAmountvalue) - r;


			}


		} else {
			var str = document.getElementById("discount_display").innerHTML;
			var discount_display = parseInt(str.replace("Rs.", ""));

			var totalbillvalue = document.getElementById("total_amount_view").innerHTML;
			var cash = document.getElementById("cashamount").value;
			var balance = +cash - +totalbillvalue;
			//balance = balance+discount_display;
			document.getElementById("balanceview").innerHTML = "Balance : " + balance;
		}
	}

	function payBill() {
		showTotalAmount();
		var totalbillvalue = document.getElementById("total_amount_view").innerHTML;
		//var discount_display = document.getElementById("discount_display").innerHTML;
		//discount_display = parseInt(discount_display.replace('Rs.',''));
		//var discount = discount_display;
		var discount = document.getElementById("discount_total").value;
		var customer = document.getElementById("billcustomer").value;
		var cashamount = document.getElementById("cashamount").value;

		var totalAmountvalue = document.getElementById("totalAmountvalue").value;

		var cardno = document.getElementById("cardno").value;
		var cheque = ""; //document.getElementById("cheque").value;
		//var duedate = ""; //document.getElementById("duedate").value;
		var duedate = document.getElementById("cheque_date").value;
		var cheque_number = document.getElementById("cheque_number").value; 
		var pay_type = document.getElementById("cash_type").value;
		var deliveryCost = "0.00"; //document.getElementById("deliveryCostview").innerHTML;
		var country = "0"; //document.getElementById("country").value;
		var city = "0"; //document.getElementById("city").value;
		var branch_id = document.getElementById("branch_id").value;
		var oid = document.getElementById("oid").value;

		$.ajax({
			url: "load-save-bill.php",
			type: "POST",
			data: "country=" + country + "& city=" + city + "& deliveryCost=" + deliveryCost + "& totalbillvalue=" + totalbillvalue + "& cashamount=" + cashamount + "& customer=" + customer + "& cardno=" + cardno + "&  cheque=" + cheque + "&  duedate=" + duedate + "& pay_type=" + pay_type + "& totalAmountvalue=" + totalAmountvalue + "& discount=" + discount + "& branch_id=" + branch_id + "& cheque_number=" + cheque_number + "& oid=" + oid + "&",
			success: function(data) {
				if (data > 0) {
					$('#myModal').modal('hide');
					var totalbillvalue = document.getElementById("total_amount_view").innerHTML = "Order has been saved<br>Order Number : " + data;
					loadCartItems();
					// document.getElementById("searchbarcode").focus();
					//window.open("salesreciept.php?receiptno=" + data + '&paid_amount=' + cashamount, "_blank");
					window.open("salesreciept.php?receiptno=" + data + '&paid_amount=' + cashamount, "_blank");
				} else {
					alertify.error(data);
				}
			},
			error: function(jXHR, textStatus, errorThrown) {
				alert(jXHR.responseText);
			}
		})

	}

	function onlypayBill() {
		showTotalAmount();
		var totalbillvalue = document.getElementById("total_amount_view").innerHTML;
		var discount = document.getElementById("discount_total").value;
		var customer = document.getElementById("billcustomer").value;
		var cashamount = document.getElementById("cashamount").value;

		var totalAmountvalue = document.getElementById("totalAmountvalue").value;

		var cardno = document.getElementById("cardno").value;
		var cheque = ""; //document.getElementById("cheque").value;
		//var duedate = ""; //document.getElementById("duedate").value;
		var duedate = document.getElementById("cheque_date").value;
		var cheque_number = document.getElementById("cheque_number").value;
		var pay_type = document.getElementById("cash_type").value;
		var deliveryCost = "0.00"; //document.getElementById("deliveryCostview").innerHTML;
		var country = "0"; //document.getElementById("country").value;
		var city = "0"; //document.getElementById("city").value;
		var branch_id = document.getElementById("branch_id").value;
		var oid = document.getElementById("oid").value;
		$.ajax({
			url: "load-save-bill.php",
			type: "POST",
			data: "country=" + country + "& city=" + city + "& deliveryCost=" + deliveryCost + "& totalbillvalue=" + totalbillvalue + "& cashamount=" + cashamount + "& customer=" + customer + "& cardno=" + cardno + "&  cheque=" + cheque + "&  duedate=" + duedate + "& pay_type=" + pay_type + "& totalAmountvalue=" + totalAmountvalue + "& discount=" + discount + "& branch_id=" + branch_id + "& cheque_number=" + cheque_number + "& oid=" + oid + "&",
			success: function(data) {
				if(oid !=0){
						window.location.href = "return-list.php";
					}
				if (data > 0) {
					
					$('#myModal').modal('hide');
					var totalbillvalue = document.getElementById("total_amount_view").innerHTML = "Order has been saved<br>Order Number : " + data;

					alertify.success("Order has been saved<br>Order Number : " + data);
					loadCartItems();
					// document.getElementById("searchbarcode").focus();
					
				} else {
					alertify.error(data);
				}
			},
			error: function(jXHR, textStatus, errorThrown) {
				alert(jXHR.responseText);
			}
		})
	}


	$(document).ready(function() {
		$("#discount_total").on("keypress, keyup", function() {
			var str = document.getElementById("discount_display").innerHTML;
			var discount_display = parseFloat(str.replace("Rs.", ""));


			var discount_total = $(this).val();
			let last = discount_total.substr(-1);
			var totcart = $("#totcart").val();
			if (last == "%") {
				var dis = discount_total.slice(0, -1);
				var discount = (totcart / 100) * dis;
			} else {
				var discount = discount_total;
			}

			var menus = document.getElementsByClassName("edit_dis");
			var t = 0;
			var tot = 0;
			for (var i = menus.length - 1; i >= 0; i--) {
				var price = $(".p_" + i).val();
				t = t + menus[i].value;
			}

			if (t == 0) {
				var d = parseFloat(discount);
			} else {

				var d = parseFloat(discount) + parseFloat(discount_display);
			}


			$("#discount_display").html("Rs." + parseFloat(d).toFixed(2));
			$(".totdisplay").html("Rs." + parseFloat(totcart - discount).toFixed(2));
			$("#total_amount_view").html(parseFloat(totcart - discount).toFixed(2));
		});






		$("#cash_type").change(function() {
			let cash_type = $(this).val();

			if (cash_type === "card") {
				$(".paytype").text("Card Number");
				$('#cardno').attr('placeholder', 'Card Number');
			} else if (cash_type === "banktransfer") {
				$(".paytype").text("Referece Number");
				$('#cardno').attr('placeholder', 'Referece Number');
			} else if (cash_type === "cheques") {
				$(".paytype").text("Cheque Number");
				$('#cardno').attr('placeholder', 'Cheque Number');
			} else {}



		});








	});





	$(document).ready(function() {
		$("#category").change(function() {
			var value = this.value;
			$.ajax({
				type: "POST",
				data: {
					category: value
				},
				url: "pos-cat-filter.php",
				success: function(data) {
					$("#left_panel").html(data);
				}
			});
		});




		$("#brand").change(function() {
			var value = this.value;
			$.ajax({
				type: "POST",
				data: {
					brand: value
				},
				url: "pos-brand-filter.php",
				success: function(data) {
					$("#left_panel").html(data);
				}
			});
		});





		//$("#brand1").click(function(){
		//	$(".catwrap #brandResults").css("display","block");
		//});

		$('#category1').click(function() {
			$('.catwrap #categoryResults').toggle();
		});

		$('#brand1').click(function() {
			$('.catwrap #brandResults').toggle();
		});

		$('#subcat1').click(function() {
			$('.catwrap #subcatResults').toggle();
		});


		$(document).on('click', function(e) {
			if ($(e.target).closest("#category1").length === 0) {
				$("#categoryResults").css("display", "none");
			}
			if ($(e.target).closest("#brand1").length === 0) {
				$("#brandResults").css("display", "none");
			}

			if ($(e.target).closest("#subcat1").length === 0) {
				$("#subcatResults").css("display", "none");
			}
		});


	});
</script>

<style>
	.productsetcontent .text-primary {
		margin-bottom: 5px;
	}

	#right_panel {
		/* height: 100vh; */
		/* height: 60vh; */
		background-color: #55ede3;
	}

	/* 
	.productset {
		max-height: 160px;
	} */

	.productsetimg img {
		height: 43px !important;
	}

	body {
		background-color: #f5f6f8 !important;
	}

	.productset {
		border-color: transparent;
		box-shadow: 0px 0px 30px 0px rgba(193, 193, 193, 0.5);
		border-radius: 10px;
	}

	/* #left_panel .productset {
		max-height: 165px !important;
	} */

	.footer_panel .col-md-2 {
		padding-left: 0;
		padding-right: 0;
	}


	#left_panel .col-lg-3 {
		padding-left: 5px;
		padding-right: 5px;
	}

	.col-md-6,
	.col-md-4,
	.col-3,
	.col-6 {
		padding-left: 5px;
		padding-right: 5px;
	}

	/* #left_panel .productset {
		height: 150px;
		margin: 0 0 10px;
	} */

	.table tbody tr td {
		border-bottom: none;
	}

	.table> :not(:first-child) {
		border-top: 1px solid #ccc;
	}

	#left_panel .row {
		padding-right: 0;
	}

	.catwrap ul {
		z-index: 2 !important;
	}
</style>


<script>
	function searchCategory() {
		var category = document.getElementById("category").value.toLowerCase();
		var searchResults = document.getElementById("categoryResults");

		$.ajax({
			type: "POST",
			data: {
				category: category
			},
			url: "live-filter.php",
			success: function(data) {
				//$("#categoryResults").html(data);
				if (data.trim().length < 0 || category.trim().length < 0) {
					$("#categoryResults").css("display", "none");

				} else {
					$(".catwrap #categoryResults").css("display", "block");
					$("#categoryResults").html(data);

				}
			}
		});

	}

	function searchBrand() {
		var brand = document.getElementById("brand1").value.toLowerCase();
		var searchResults = document.getElementById("brandResults");

		$.ajax({
			type: "POST",
			data: {
				brand: brand
			},
			url: "live-filter.php",
			success: function(data) {

				if (data.trim().length < 0 || brand.trim().length < 0) {
					$("#brandResults").css("display", "none");

				} else {
					$(".catwrap #brandResults").css("display", "block");
					$("#brandResults").html(data);

				}
			}
		});
	}

	function filtercat(category) {
		$("#categoryResults").css("display", "none");
		$.ajax({
			type: "POST",
			data: {
				category: category
			},
			url: "pos-cat-filter.php",
			success: function(data) {
				$("#left_panel").html(data);
			}
		});
	}

	function filterbrand(brand) {
		$("#brandResults").css("display", "none");
		$.ajax({
			type: "POST",
			data: {
				brand: brand
			},
			url: "pos-brand-filter.php",
			success: function(data) {
				$("#left_panel").html(data);
			}
		});
	}

	function filtersubcat(subcat) {
		$("#subcatResults").css("display", "none");
		$.ajax({
			type: "POST",
			data: {
				subcat: subcat
			},
			url: "pos-subcatt-filter.php",
			success: function(data) {
				$("#left_panel").html(data);
			}
		});
	}


	function searchSubcat() {
		var subcat = document.getElementById("subcat").value.toLowerCase();
		var searchResults = document.getElementById("subcatResults");

		$.ajax({
			type: "POST",
			data: {
				subcat: subcat
			},
			url: "live-filter.php",
			success: function(data) {

				if (data.trim().length < 0 || brand.trim().length < 0) {
					$("#subcatResults").css("display", "none");

				} else {
					$(".catwrap #subcatResults").css("display", "block");
					$("#subcatResults").html(data);

				}
			}
		});
	}


	//var input = document.getElementById('category1');

	//input.addEventListener('focus', function(event) {

	//});
	startTime();



	$('.owl-carousel').owlCarousel({
		loop: true,
		margin: 10,
		nav: true,
		navText: [
			'<i class="fa fa-angle-left" aria-hidden="true"></i>',
			'<i class="fa fa-angle-right" aria-hidden="true"></i>'
		],
		dots: false,
		autoplay: true,
		responsive: {
			0: {
				items: 1
			},
			600: {
				items: 4
			},
			1000: {
				items: 10
			}
		}
	})
</script>
</body>

</html>