<?php
	$userid=1001;

?>
<html>
<head>
	<title>Shopping</title>
	<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
	<!-- Admin CSS File Link -->
	<link rel="stylesheet" href="css/style2.css">
	<link rel="stylesheet" href="css/mediaStyle.css">
	<script src="css/myscripts.js"></script>

	
	<!-- Font Awesome Icone -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://kit.fontawesome.com/256c95bcc2.js" crossorigin="anonymous"></script>

	<style>
		.div1{
			background:;
			width:94%;
			height:50px;
			margin:10px;
			padding:5px 10px;
		}
		.div1 select, .div1 a{
			height:35px;
			width:200px;
			margin:10px;
			font-size:18px;
			padding:2px 10px;
			border:solid green 1px;
			overflow:hidden;
		}
		.div1 a{
			background:green;
			padding:6px 10px;
			color:white;
			transition:1s;
		}
		.div1 a:hover{
			background:white;
			color:green;
			transition:1s;
		}
		.div2{
			background:#f7f7f7;
			width:94%;
			float:left;
			text-align:center;
			padding:10px;
			margin-left:10px;
			overflow:auto;
		}
		table{
			width:94%;
			text-align:center;
			font-size:19px;
			border-collapse:collapse;
			margin:10px;
			padding:2px 10px;
		}
		table th{
			background:green;
			color:white;
			height:40px;
			border:solid white 1px;
			padding:2px 5px;
		}
		table td{
			background:white;
			color:green;
			height:40px;
			border:solid black 1px;
			padding:2px 5px;
		}
		@media(max-width:768px)
		{
			.div1{
				background:;
				width:100%;
				height:auto;
				margin:10px 0 0 0;
				padding:0;
				text-align:center;
			}.div1 input{
				width:90%;
				margin:10px;
			}
			.div2{
				width:100%;
				margin:10px 0 0 0;
				padding:0px;
				text-align:center;
			}
		}
		
		.amount{display:none;}
		.discount{display:none;}
		.PCode{display:none;}
		.quantity{width:70px;}
		.show{display:block;}
		.hide{display:none;}
	</style>
</head>
<body>
	<!--Header Divison-->
	<?php
		require'connection.php';
		require'header.php';
	?>
	<input type="number" style="display:none;" id="user" value="<?php echo $userid; ?>">
	<!--Container Division-->
	<div class="container">
		<?php
			include'menu.php';
		?>
		<div class="content">
			<div class="head">
				<div class="title"><p>Product List:-</p></div>
				<div class="msg"><marquee>This Is Test Message</marquee></msg>
			</div><hr>
			<div class="data-content">
				<script>
					function productList(){
						var category = document.getElementById("category").value;
						var xmlhttpCat = new XMLHttpRequest();
						xmlhttpCat.open("GET","ajax_product_list.php?catName="+category, false)
						xmlhttpCat.send(null);
						document.getElementById("prodList").innerHTML = xmlhttpCat.responseText;
					}
				</script>
				<div class="div1">
					<form>
						<select id="category" onchange="productList()">
							<option>--Select Category--</option>
							<?php
								$quGetCategory="select Name from Category";
								$reGetCategory=mysqli_query($con,$quGetCategory);
								while($dataGetCategory=mysqli_fetch_array($reGetCategory))
								{
									echo "<option>".$dataGetCategory['Name']."</option>";
								}
							?>
						</select>
						<a href="cart.php">Continue To Cart <i class="fa fa-arrow-right"></i></a>
					</form>
				</div>
					<script>
						function purchase(Arg)
						{
							var r = Arg;
							var CR = document.getElementById("Add"+r).value;
							
							var amt = document.getElementById("amount"+r).value;
							var qty = document.getElementById("quantity"+r).value;
							var dis = document.getElementById("discount"+r).value;
							if(qty<0)
							{
								alert("Minus Value Not Allowed Hear !");
							}
							else
							{
								var TotAmt = amt*qty;
								
								document.getElementById("TotalAmount"+r).innerHTML = TotAmt;
								
								var DisAmt = parseInt(TotAmt*dis/100);
								var NetAmt = TotAmt-DisAmt;
								
								document.getElementById("NetAmount"+r).innerHTML = NetAmt;
							}
							
						}
						
						function addCart(Arg)
						{
							var r = Arg;
							
							var userid = document.getElementById("user").value;
							var PCode = document.getElementById("PCode"+r).value;
							var amt = document.getElementById("amount"+r).value;
							var qty = document.getElementById("quantity"+r).value;
							var dis = document.getElementById("discount"+r).value;
							
							if(qty>=1)
							{
								document.getElementById("Add"+r).style.display = "none";
								document.getElementById("Del"+r).style.display = "block";
								
								var xmlhttpAddCart = new XMLHttpRequest();
								xmlhttpAddCart.open("GET","ajax_addCart.php?userid="+userid+"&amt="+amt+"&qty="+qty+"&dis="+dis+"&PCode="+PCode, false)
								xmlhttpAddCart.send(null);
							}
							else
							{
								alert("Please Add Quantity First !");
								document.getElementById("Add"+r).checked = false;

							}
						}
						function delCart(Arg)
						{
							var r = Arg;
							var userid = document.getElementById("user").value;
							var PCode = document.getElementById("PCode"+r).value;
							
							var xmlhttpDelCart = new XMLHttpRequest();
							xmlhttpDelCart.open("GET","ajax_del_cart.php?userid="+userid+"&PCode="+PCode, false)
							xmlhttpDelCart.send(null);
							alert(xmlhttpDelCart.responseText);
							
							
							document.getElementById("Add"+r).style.display = "block";
							document.getElementById("Del"+r).style.display = "none";
							
								
						}
					</script>
				<div class="div2" id="prodList"></div>
				<div class="div2" id="test"></div>
			</div>
		</div>
	</div>
	
	
	<script src="css/myscripts.js"></script>
	<?php
		require'footer.php';
	?>
</body>
</html>