<style>
	.bootstrap-select>.dropdown-toggle.bs-placeholder,
	.bootstrap-select>.dropdown-toggle.bs-placeholder:hover,
	.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
	.bootstrap-select>.dropdown-toggle.bs-placeholder:active {
		height: 38px;
	}

	.bootstrap-select .dropdown-toggle .filter-option-inner {
		margin-top: 4px;
		margin-left: 4px;
	}

	.form-group .bootstrap-select>.dropdown-toggle {
		height: 38px;
	}

	label .error {
		top: 2.5rem !important;
		color: red;
		left: 0em;
	}

	.display tr {
		font-size: 12.5px;
	}

	table.dataTable thead th,
	table.dataTable thead td {
		padding: 4px 8px;
	}
</style>
<div class="wraper responsive-width">
	<main>
		<div class="admin_tempblock">
			<div class="admin_tempsec">
				<div class="admin_sec">
					<div class="subsec_sec">
						<div class="subject_r subject_r_lng">
							<div class="subject_lsec">

								<div class="mb-4">
									<nav aria-label="breadcrumb">
										<ol class="breadcrumb">
											<li class="breadcrumb-item"><a href="<?= base_url() . 'admin/inventory/dashboard' ?>">Dashboard</a></li>
											<li class="breadcrumb-item"><a href="<?= base_url() . 'admin/inventory/item-sales' ?>">Sales</a></li>
											<li class="breadcrumb-item active" aria-current="page"><?= $title ?></li>
										</ol>
									</nav>
								</div>

								<?php if ($this->session->flashdata('success')) { ?>
									<div class="alert alert-success alert-dismissible fade show" role="alert">
										<p><b> Success !</b> <?php echo $this->session->flashdata('success') ?></p>
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
								<?php } ?>

								<?php if ($this->session->flashdata('danger')) { ?>
									<div class="alert alert-danger alert-dismissible fade show" role="alert">
										<p><b> Error !</b> <?php echo $this->session->flashdata('danger') ?></p>
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
								<?php } ?>
								<div class="d-flex justify-content-end mb-3 small">
									<b style="font-weight: 500">Quick Links:</b>
									<a href="<?= base_url() ?>admin/inventory/book-publication" class="text-primary px-1"> Publications </a> |
									<a href="<?= base_url() ?>admin/inventory/item-categories" class="text-primary px-1"> Item Categories </a> |
									<a href="<?= base_url() ?>admin/inventory/items" class="text-primary px-1"> Items </a> |
									<a href="<?= base_url() ?>admin/inventory/item-stocks" class="text-primary px-1"> Stocks </a> |
									<a href="<?= base_url() ?>admin/inventory/add-edit-new-entry/0" class="text-primary px-1"> New Purchase Entry </a> |
									<a href="<?= base_url() ?>admin/inventory/add-new-sales-record/0" class="text-primary px-1"> New Sales Entry </a>
								</div>

								<div class="row justify-content-center ">

									<div class="col-md-5">
										<form id="itemForm">
											<div class="card">
												<div class="card-body">
													<div class="text-right">
														<h6 id="available-stock"> </h6>
													</div>
													<div class="h6">Student Details</div>
													<div class="form-group mt-3">
														<label class="has-float-label">
															<select id="student" class="form-control selectpicker" name="student" data-live-search="true" required>
																<option value="">
																	Select Student
																</option>
																<?php
																foreach ($students as $std_key => $student) {
																?>
																	<option value="<?= $student['id'] ?>">
																		<?= $student['name'] ?>
																	</option>
																<?php
																}
																?>
															</select>
															<span>Student <b class="text-danger">*</b></span>
														</label>
													</div>
													<div class="row">
														<div class="col">
															<div class="form-group">
																<input type="text" name="s_class" class="form-control" id="s_class" placeholder="Class" readonly>

															</div>
														</div>
														<div class="col">
															<div class="form-group">
																<input type="text" name="s_section" class="form-control" id="s_section" placeholder="Section" readonly>
															</div>
														</div>
													</div>
													<hr>
													<div class="h6">Item Details</div>
													<div class="form-group mt-3">
														<label class="has-float-label">
															<select id="item" class="form-control selectpicker" name="item" data-live-search="true" required>
																<option value="">
																	Select Item
																</option>

															</select>
															<span>Item <b class="text-danger">*</b></span>
														</label>
													</div>

													<div class="row mt-3">
														<div class="col">
															<div class="form-group">
																<!-- <label class="has-float-label"> -->
																<select id="i_price" class="form-control selectpicker" name="i_price" data-live-search="true">
																	<option value="">
																		Select Price
																	</option>
																</select>
																<!-- <span>Price <b class="text-danger">*</b></span> -->
																<!-- </label> -->
															</div>
														</div>
														<div class="col">
															<div class="form-group">
																<input type="number" name="i_qty" class="form-control" id="i_qty" placeholder="Quantity" min="1">
																<input type="hidden" name="i_purchase_id" class="form-control" id="i_purchase_id" placeholder="Purchase Id">
															</div>
														</div>
														<div class="col">
															<div class="form-group">
																<input type="number" name="i_selling_price" class="form-control" id="i_selling_price" placeholder="Amount">
															</div>
														</div>
														<div class="w-100"></div>
														<div class="col">
															<div class="form-group">
																<input type="number" name="i_total_price" class="form-control" id="i_total_price" placeholder="Total Amount" readonly>
															</div>
														</div>
													</div>
													<button type="submit" id="itemAddBtn" class="btn btn-sm btn-outline-primary w-100 mt-4">Add</button>
												</div>
											</div>
										</form>
									</div>
									<div class="col-md-7">
										<div class="card col-md-12">
											<div class="card-body">
												<form method="post" action="<?php echo base_url(); ?>admin/inventory/add-new-sales-record/0" enctype="multipart/form-data">
													<table id="tbl" class="display table-responsive">
														<thead>
															<tr>
																<th width="0%" class="textCenter">S.No</th>
																<th class="textCenter">Item</th>
																<th class="textCenter">Qty</th>
																<th class="textCenter">Unit Price</th>
																<th class="textCenter">Total Price</th>
															</tr>
														</thead>
														<tbody>
														</tbody>

													</table>

													<div class="row mt-3" id="summary" style=" display: none;">
														<div class="col-md-8">
															<h6>Total : <?= $school_info['currency_symbol'] . '. ' ?><span id="totalPrice">0</span></h6>
														</div>
														<div class="col-md-4">
															<input type="submit" name="addSalesEntry" value="Submit" class="btn w-100 btn-sm btn-outline-success">
														</div>
													</div>
												</form>
											</div>
										</div>

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

</div>
<script defer src="<?php echo base_url(); ?>assets_admin/js/bootstrap-select.min.js"></script>


<!--End right-top side-->

<!-- <script src="<?php echo base_url(); ?>assets-bustracking/js/jquery-3.2.1.slim.min.js"></script> -->
<script>
	$('#contact_number').bind('keyup paste', function() {
		this.value = this.value.replace(/[^0-9]/g, '');
	});

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

		$("#itemForm").validate({
			student: {
				student: {
					required: true
				},
				item: {
					required: true
				}

			},
			messages: {
				student: {
					required: "Select any student"
				},
				item: {
					required: "Select a item"
				}
			},
			submitHandler: function(form) {
				// alert("button");

				$("#student").attr('disabled', 'disabled');
				// $(".selectpicker[data-id='yourSelect']").addClass("disabled");

				// var studentId = $("#itemForm").val();
				var studentId = $('#student option:selected').val();
				var item = $('#item option:selected').val();
				var itemSellingPrice = $('#i_selling_price').val();
				var itemTotalPrice = $('#i_total_price').val();

				var itemQuantity = $('#i_qty').val();
				var itemPurchaseId = $('#i_purchase_id').val();

				// console.log(studentId + ' => ' + item + ' => ' + itemSellingPrice + ' => ' + itemTotalPrice + ' => ' + itemQuantity);

				var rowCount = $("#tbl tr").length;
				rowCount = rowCount;
				var trDiv = '';
				trDiv += '<tr>';
				trDiv += '<td>';
				trDiv += rowCount;
				trDiv += '</td>';

				trDiv += '<td class="text-left">';
				var items = <?= json_encode($inventory_items) ?>;
				for (var a = 0; a < items.length; a++) {
					if (items[a]['id'] == item) {
						trDiv += '<input type="hidden" name="itemId[' + rowCount + ']"  value="' + items[a]['id'] + '">'
						trDiv += items[a]['title'];
					}
				}
				trDiv += '</td>';

				trDiv += '<td>';
				trDiv += '<input type="hidden" name="itemQty[' + rowCount + ']" value="' + itemQuantity + '">'
				trDiv += itemQuantity;
				trDiv += '</td>';

				trDiv += '<td>';
				trDiv += '<input type="hidden" name="purchaseId[' + rowCount + ']" value="' + itemPurchaseId + '">'
				trDiv += itemSellingPrice;
				trDiv += '</td>';

				trDiv += '<td>';
				trDiv += '<input type="hidden" name="studentId[' + rowCount + ']" value="' + studentId + '">'
				trDiv += '<input type="hidden" name="sellingPrice[' + rowCount + ']" value="' + itemSellingPrice + '">'

				trDiv += itemTotalPrice;
				trDiv += '</td>';

				trDiv += '</tr>';


				$('#tbl tr:last').after(trDiv);
				var totalPrice = parseFloat($('#totalPrice').text());
				var calc = totalPrice + parseFloat(itemSellingPrice);

				$('#totalPrice').text(calc);
				$("#summary").show();

			}
		});
	});


	$('#student').on('change', function() {
		var students = <?= json_encode($students) ?>;
		var items = <?= json_encode($inventory_items) ?>;
		var selectedStudent = this.value;

		for (var a = 0; a < students.length; a++) {

			if (selectedStudent == students[a]['id']) {
				var divData = '';
				divData += "<option value='' > Select Section </option>";
				// console.log(students[a]);
				$('#s_class').val(students[a]['course_name']);
				$('#s_section').val(students[a]['section_name']);
				// s_section
				for (var b = 0; b < items.length; b++) {
					// console.log(items[b]['course_id'] + ' ========> ' + students[a]['course']);
					if ((items[b]['course_id'] == students[a]['course']) || (items[b]['course_id'] == 0)) {
						// console.log(items[b]);
						divData += "<option value='" + items[b]['id'] + "'>" + items[b]['title'] + "</option>";
					}
				}
				$('#item').empty().append(divData).selectpicker("refresh");

				priceDivData = "<option value='' > Select Price </option>";
				$('#i_price').empty().append(priceDivData).selectpicker("refresh");
				$('#i_qty').val('');
				$('#i_purchase_id').val('');
				$('#i_selling_price').val('');
				$('#i_total_price').val('');

			}
		}
	});

	$('#item').on('change', function() {
		var items = <?= json_encode($inventory_items) ?>;
		var selectedItem = $('#item option:selected').val();
		var currencySymbol = '<?= $school_info['currency_symbol'] ?>';
		for (var a = 0; a < items.length; a++) {
			if (items[a]['id'] == selectedItem) {
				if (items[a]['short_label'] != null) {
					$('#available-stock').html('Available Stock : ' + items[a]['available_stock'] + ' <small>' + items[a]['short_label'] + '</small>');
				} else {
					$('#available-stock').html('Available Stock : ' + items[a]['available_stock']);
				}

				var itemPurchases = items[a]['item_purchases'];

				console.log(itemPurchases);
				var divData = '';
				var sellingPrice = 0;
				var itemPurchaseId = 0;
				for (var b = 0; b < itemPurchases.length; b++) {
					divData += "<option value='" + itemPurchases[b]['id'] + "'>" + currencySymbol + '. ' + itemPurchases[b]['selling_price'] + "</option>";
					if (b == 0) {
						sellingPrice = itemPurchases[b]['selling_price'];
						itemPurchaseId = itemPurchases[b]['id'];
					}
				}
				console.log('Selling Price = ' + sellingPrice);
				$('#i_qty').val(1);
				$('#i_purchase_id').val(itemPurchaseId);
				$('#i_selling_price').val(sellingPrice);
				$('#i_total_price').val(sellingPrice * 1);

				$('#i_price').empty().append(divData).selectpicker("refresh");
			}
		}
	});
	$('#i_price').on('change', function() {
		var selectedItem = $('#item option:selected').val();
		var selectedPurchaseId = $('#i_price option:selected').val();
		var items = <?= json_encode($inventory_items) ?>;
		var currencySymbol = '<?= $school_info['currency_symbol'] ?>';

		for (var a = 0; a < items.length; a++) {
			if (items[a]['id'] == selectedItem) {
				var itemPurchases = items[a]['item_purchases'];
				for (var b = 0; b < itemPurchases.length; b++) {
					if (selectedPurchaseId == itemPurchases[b]['id']) {
						$('#i_qty').val(1);
						$('#i_purchase_id').val(itemPurchases[b]['id']);
						$('#i_selling_price').val(itemPurchases[b]['selling_price']);
						$('#i_total_price').val(itemPurchases[b]['selling_price'] * 1);
					}
				}
			}
		}
	});

	$('#i_qty').on('change', function() {
		var qty_val = $('#i_qty').val();
		var amount = $('#i_selling_price').val();

		var calculation = parseFloat(qty_val) * parseFloat(amount);
		if ($.isNumeric(calculation)) {
			$('#i_total_price').val(calculation);
		} else {
			$('#i_total_price').val("");
		}

	});

	$('#i_selling_price').on('change', function() {
		var qty_val = $('#i_qty').val();
		var amount = $('#i_selling_price').val();

		var calculation = parseFloat(qty_val) * parseFloat(amount);
		if ($.isNumeric(calculation)) {
			$('#i_total_price').val(calculation);
		} else {
			$('#i_total_price').val("");
		}

	});

	$(document).ready(function() {
		$("#summary").hide();
		//table js
		$('#tbl').DataTable({
			paging: false,
			ordering: false,
			info: false,
			"footerCallback": function(row, data, start, end, display) {
				//var theDynTdCnt = (theTdCnt - 7);
				for (let fi = 4; fi < theTdCnt; fi++) {
					var api = this.api(),
						data;

					// Remove the formatting to get integer data for summation
					var intVal = function(i) {
						return typeof i === 'string' ?
							i.replace(/[\$,]/g, '') * 1 :
							typeof i === 'number' ?
							i : 0;
					};

					// Total over all pages
					total = api
						.column(fi)
						.data()
						.reduce(function(a, b) {
							return intVal(a) + intVal(b);
						}, 0);

					// Total over this page
					pageTotal = api
						.column(fi, {
							page: 'current'
						})
						.data()
						.reduce(function(a, b) {
							return intVal(a) + intVal(b);
						}, 0);

					$(api.column(fi).footer()).html(
						//currency_symbol + ' ' + pageTotal + ' ( ' + currency_symbol + ' ' + total + ' total )'
						pageTotal
					);
				}
			}
		});
		//table js end
		let NDate = NepaliFunctions.GetCurrentBsDate();
		let todayDate = `${NDate.year}-${NDate.month}-${NDate.day}`;
		$('#purchased_on').nepaliDatePicker({
			disableAfter: todayDate,
			language: 'english',
			ndpMonth: true,
			ndpYear: true

		});
		$("#course-section").hide();

	});

	$('#qty').on('change', function() {

		var id_val = $('#qty').val();
		var amount = $('#unit_price').val();
		var validAmount = /^\d{0,4}(\.\d{0,2})?$/.test(amount);
		var validQuality = /^\d{0,4}(\.\d{0,2})?$/.test(id_val);

		if (!validAmount || !validQuality) {
			alert("Please check the Amount or Quantity");
			$('#total_price').val("");
			$('#paid_amount').val("");

		} else {
			var calculation = parseFloat(id_val) * parseFloat(amount);
			if ($.isNumeric(calculation)) {
				$('#total_price').val(calculation);
				$('#paid_amount').val(calculation);
			} else {
				$('#total_price').val("");
				$('#paid_amount').val("");
			}
		}
	});

	$('#total_price').on('change', function() {
		$('#paid_amount').val($('#total_price').val());
		$('#remaining_amount').val(parseFloat($('#total_price').val()) - parseFloat($('#paid_amount').val()))
	});

	$('#paid_amount').on('change', function() {
		$('#remaining_amount').val(parseFloat($('#total_price').val()) - parseFloat($('#paid_amount').val()))
	});

	$('#unit_price').on('change', function() {
		var id_val = $('#qty').val();
		var amount = $('#unit_price').val();
		var validAmount = /^\d{0,9}(\.\d{0,7})?$/.test(amount);
		var validQuality = /^\d{0,7}(\.\d{0,7})?$/.test(id_val);

		if (!validAmount || !validQuality) {
			alert("Please check the Amount or Quantity");
			$('#total_price').val("");
			$('#paid_amount').val("");
			$('#selling_price').val("");
			$('#remaining_amount').val("");
		} else {
			var calculation = parseFloat(id_val) * parseFloat(amount);
			if ($.isNumeric(calculation)) {
				$('#total_price').val(calculation);
				$('#paid_amount').val(calculation);
				$('#selling_price').val(amount);
				$('#remaining_amount').val(calculation - calculation);
			} else {
				$('#total_price').val("");
				$('#paid_amount').val("");
				$('#selling_price').val("");
				$('#remaining_amount').val("");
			}
		}
	});
</script>