<?php
include 'inc/Header.php';
?>
<!-- Loader ends-->
<?php
function tes()
{
	return "here";
}
?>
<!-- page-wrapper Start-->
<div class="page-wrapper compact-wrapper" id="pageWrapper">
	<!-- Page Header Start-->
	<?php
	include 'inc/Topbar.php';
	?>
	<!-- Page Header Ends                              -->
	<!-- Page Body Start-->
	<div class="page-body-wrapper">
		<!-- Page Sidebar Start-->
		<?php
		include 'inc/Sidebar.php';
		?>
		<!-- Page Sidebar Ends-->
		<div class="page-body">
			<div class="container-fluid">
				<div class="page-title">
					<div class="row">
						<div class="col-6">
							<h3>Create Order</h3>
						</div>
						<div class="col-6">

						</div>
					</div>
				</div>
			</div>
			<!-- Container-fluid starts-->
			<div class="container-fluid default-page">
				<div class="row">
					<div class="col-sm-12">
						<div class="card">
							<div class="card-body">
								<form class="form" method="post" action="inc/Operation.php">
											<input type="hidden" name="store_id" value="2" />
											<input type="hidden" name="d_charge" value="120" />
											<input type="hidden" name="wall_amt" value="0" />
											<input type="hidden" name="cou_amt" value="10" />
											<input type="hidden" name="tslot" value="10" />
											<input type="hidden" name="dslot" value="3" />
											<input type="hidden" name="pick_date" value="2024-11-11" />
											<input type="hidden" name="a_note" value="cassius" />
											<input type="hidden" name="transaction_id" value="01" />
											<input type="hidden" name="order_list" id="order_list"/>
											<!-- <input type="hidden" name="a_note" value="cassius" /> -->

									<div class="row">
										<div class="form-group col-md-2">
											<label for="cname">Category</label>
											<select name="category" class="form-control col-md-4" id="category_list">
												<option value="">select a category</option>
												<?php
												$rid = $lundry->query("select * from tbl_mcat");
												while ($ro = $rid->fetch_assoc()) {
												?>
													<option value="<?php echo $ro['title']; ?>" data-cat_id="<?php echo $ro['id']; ?>"><?php echo $ro['title']; ?></option>
												<?php } ?>
											</select>
											<input type="hidden" name="type" value="create_order" />
											<input type="hidden" name="uid" value="<?php echo $_GET['uid']; ?>" />
										</div>
										<div class="form-group col-md-2">
											<label for="cname">Product</label>
											<select name="product" class="form-control" id="product_list">
												<option value="">select a product</option>
											</select>
										</div>
										<div class="form-group col-md-2">
											<label for="cname">Select Attribute</label>
											<select name="attribute" class="form-control" id="attributes_list">
												<option value="">select a product attribute</option>
											</select>
										</div>
											<div class="form-group col-md-2">
											<label for="cname">Enter Quantity</label>
											<input type="text" name="qty" id="qty" class="form-control">
										</div>
										<div class="form-group col-md-2">
											<label for="cname">Enter Description</label>
											<textarea class="form-control" rows="1" id="desc" name="description"></textarea>
										</div>
										<div class="form-group col-md-2">
											<label for="cname">Enter Amount</label>
											<input type="number" name="amount" id="amount" class="form-control" value="0">
										</div>
									
										
										<div class="card-footer text-left">
											<button type="button" class="btn btn-primary cart-btn">Add to cart</button>
										</div>
										<div class="table-responsive">
										  
										<table class="display" id="basic-1">
  <thead>
    <tr>
      <th>Sr No.</th>
      <th>Category</th>
      <th>Product</th>
      <th>Product Attribute</th>
      <th>Quantity</th>
      <th>Description</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody class="tbdy">
  </tbody>
</table>
										</div>
										<div class="row">
										    
										<div class="form-group col-md-3">
											<label for="cname">Delivery Option</label>
											<select name="delivery_option" class="form-control" id="" required>
												<option value="">--select--</option>
												<option value="pickup">Pickup</option>
												<option value="delivery">Delivery</option>
											</select>
										</div>
										<div>
										    <span>Total Amount (GHC):</span>
										    <span id="total_amnt">384</span>
										</div>
										</div>
										<div class="card-footer text-left">
											<button type="submit" class="btn btn-primary">Create Order</button>
										</div>
									</div>
								</form>
							</div>
							
						</div>

					</div>

				</div>
			</div>
			<!-- Container-fluid Ends-->
		</div>
		<!-- footer start-->

	</div>
</div>

<!-- latest jquery-->
<?php
include 'inc/Footer.php';
?>

<script>
	$('document').ready(function() {
		function makeRequest(data) {
			return $.ajax({
				url: 'inc/Request.php',
				data: data,
				dataType: 'json',
				type: "POST"
			});
		}

		function addOptions(element,data_id, data) {
			$(element).empty();
			$(element).append(`<option value="">--select--</option>`);

			data.forEach((optn) => {
				var option = `<option value="${optn.title}" data-${data_id}="${optn.id}">${optn.title}</option>`;

				$(element).append(option);
			});
		}
var attributes = [];
var attributes_res = [];
		function addAttOptions(element,data_id, data) {
			$(element).empty();
			$(element).append(`<option value="">--select--</option>`);

			data.forEach((optn,index) => {
				var option = `<option value="${index}" data-${data_id}="${optn.title}">${optn.title}</option>`;
                attributes.push(optn);
				$(element).append(option);
			});
		}

		$('.form').on('change', '#category_list', function(event) {
		    console.log('taped');
			makeRequest({
				type: 'list_products',
				category_id: event.target.selectedOptions[0].dataset.cat_id
			}).then(function(results) {
				addOptions('#product_list','product_id', results);
			}).catch(function(error) {
				console.error('Error:', error);
			});
		});

		$('.form').on('change', '#product_list', function(event) {
			makeRequest({
				type: 'list_attributes',
				product_id:event.target.selectedOptions[0].dataset.product_id
			}).then(function(results) {
			    attributes_res = results;
				addAttOptions('#attributes_list','attr_id', results);
			}).catch(function(error) {
				console.error('Error:', error);
			});
		});
		
		 var orders = [];
		 
  var cat = $("#category_list");
  var prod = $("#product_list");
  var attr = $("#attributes_list");
  var qty = $("#qty");
  var desc = $("#desc");
  var amnt = $("#amount");
  var totalpay = $("#total_amnt");
  var table = $('.tbdy');
  var order_list = $('#order_list');
  
  $(".tbdy").on("click", ".del_btn", function (event) {
    console.log($(this).data("index"));
    orders.splice($(this).data("index"), 1);
    loadTable();
  });
  
   function loadTable(){
    table.empty();
    var total = 0;
    order_list.val(JSON.stringify(orders));
    orders.forEach((ele,index) => {
      var row = `<tr>
      <td>
      ${orders.length}
      </td>
      <td>
      ${ele.category}
      </td>
      <td class="align-middle">
       ${ele.product}
      </td>
      <td class="align-middle">
       ${attributes_res[ele.attribute].title}
      </td>
      <td class="align-middle">
       ${ele.qty}
      </td>
      <td class="align-middle">
       ${ele.desc}
      </td>
      <td class="align-middle">
       ${ele.amount}
      </td>
      <td class="align-middle">
       <a data-index="${index}" class="del_btn">
       <img src="images/icons/trash.svg" width="30" class="mt-3">
       </a>
      </td>
    </tr>`;
    
    total += parseInt(attributes_res[ele.attribute].normal_price) * ele.qty;
    totalpay.text(total) ;
    table.append(row);
    });
}

  $(".cart-btn").on("click", function () {
    order = {
      product: prod.val(),
      category: cat.val(),
      attr: attributes_res[attr.val()].id,
      attribute: attr.val(),
      qty: qty.val(),
      desc: desc.val()
      amount: amnt.val()
    };
    orders.push(order);
      loadTable();
      prod.empty();
      attr.empty();
      qty.empty();
      
      console.log(order_list.val());
  });
  
	});
</script>
</body>


</html>