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

	.detail-card .title {
		font-weight: 500;
	}
</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' ?>">Item</a></li>

											<li class="breadcrumb-item active" aria-current="page"><?= isset($item_info) ? $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 ">

									<?php
									// echo '<pre>';
									// print_r($item_info);
									?>

									<div class="col-md-12">
										<div class="card">
											<div class="card-body">
												<div class="text-right">
													<h6 id="available-stock"> </h6>
												</div>
												<div class="h6">Item Details</div>
												<?php
												$item_photo = '';
												if (!empty($item_info['photo'])) {
													if (file_exists('assets_inventory/images/items/' . $item_info['photo'])) {
														$item_photo = base_url() . 'assets_inventory/images/items/' . $item_info['photo'];
													} else {
														$item_photo = base_url() . 'common_assets/' . $item_info['photo'];
													}
												} else {
													$item_photo = base_url() . 'common_assets/No-Image.jpg';
												}
												?>

												<!-- <img src="<?= $item_photo ?>" class="img-thumbnail float-right img-fluid" width="100px">
												<div class="clearfix"></div> -->
												<div class="row mt-3">
													<div class="col-md-10 my-auto">
														<div class="row">
															<div class="col">
																<div class="card detail-card">
																	<div class="card-body py-2">
																		<label class="w-100 mb-0 h6 small text-dark title">Title</label>
																		<label class="mb-0 h6"><?= $item_info['title'] ?></label>
																	</div>

																</div>
															</div>
															<div class="col">
																<div class="card detail-card">
																	<div class="card-body py-2">
																		<label class="w-100 mb-0 h6 small text-dark title">Category</label>
																		<label class="mb-0 h6">
																			<?php
																			if ($item_info['category_id'] != 0) {
																				foreach ($categories as $c_key => $category) {
																					if ($category['id'] == $item_info['category_id']) {
																						echo $category['title'];
																					}
																				}
																			} else {
																				echo '-';
																			}
																			?>
																		</label>
																	</div>
																</div>
															</div>
															<div class="col">
																<div class="card detail-card">
																	<div class="card-body py-2">
																		<label class="w-100 mb-0 h6 small text-dark title">Measurement Unit</label>
																		<label class="mb-0 h6">
																			<?php
																			if ($item_info['measurement_id'] != 0) {
																				foreach ($measurement_units as $mu_key => $measurement_unit) {
																					if ($measurement_unit['id'] == $item_info['measurement_id']) {
																						echo $measurement_unit['title'];
																					}
																				}
																			} else {
																				echo '-';
																			}
																			?>
																		</label>
																	</div>

																</div>
															</div>
															<div class="w-100 mt-3"></div>
															<div class="col">
																<div class="card detail-card">
																	<div class="card-body py-2">
																		<label class="w-100 mb-0 h6 small text-dark title">Class</label>
																		<label class="mb-0 h6">
																			<?php
																			if ($item_info['course_id'] != 0) {
																				foreach ($courses as $c_key => $course) {
																					if ($course['id'] == $item_info['course_id']) {
																						echo $course['course_name'];
																					}
																				}
																			} else {
																				echo '-';
																			}
																			?>
																		</label>
																	</div>

																</div>
															</div>
															<div class="col">

															</div>
															<div class="col">

															</div>

														</div>
													</div>
													<div class="col-md-2">
														<img src="<?= $item_photo ?>" class="img-thumbnail float-right img-fluid" width="100px">
													</div>
												</div>
												<hr>
												<div class="h6">Stock Details</div>
												<div class="row">
													<div class="col">
														<div class="card detail-card">
															<div class="card-body py-2">
																<label class="w-100 mb-0 h6 small text-dark title">Total</label>
																<label class="mb-0 h6"><?= isset($item_info['stock']['total_stock']) ? $item_info['stock']['total_stock'] : '0' ?></label>
															</div>

														</div>
													</div>
													<div class="col">
														<div class="card detail-card">
															<div class="card-body py-2">
																<label class="w-100 mb-0 h6 small text-dark title">Available</label>
																<label class="mb-0 h6"><?= isset($item_info['stock']['current_stock']) ? $item_info['stock']['current_stock'] : '0' ?></label>
															</div>

														</div>
													</div>
													<div class="col">
														<div class="card detail-card">
															<div class="card-body py-2">
																<label class="w-100 mb-0 h6 small text-dark title">Sold</label>
																<label class="mb-0 h6"><?= isset($item_info['stock']['sold_stock']) ? $item_info['stock']['sold_stock'] : 0 ?></label>
															</div>

														</div>
													</div>
												</div>
												<hr>
												<div class="h6">Purchase</div>
												<table id="tbl" class="display table-responsive">
													<thead>
														<tr>
															<th class="text-center">S.No.</th>
															<th class="text-center">Supplier</th>
															<th class="text-center">Contact No.</th>
															<th class="text-center">Qty.</th>
															<th class="text-center">Unit Price</th>
															<th class="text-center">Total Amount</th>
															<th class="text-center">Purchased On</th>
														</tr>
													</thead>
													<tbody>
														<?php
														foreach ($item_info['purchases'] as $p_key => $i_purchase) {
														?>
															<tr>
																<td><?= $p_key + 1 ?></td>
																<td class="text-left"><?= $i_purchase['supplier_name'] ?></td>
																<td><?= $i_purchase['supplier_contact_number'] ?></td>
																<td><?= $i_purchase['qty']  ?></td>
																<td><?= number_format($i_purchase['unit_price'])  ?></td>
																<td><?= number_format($i_purchase['total_price'])  ?></td>
																<td><?= $i_purchase['purchased_on']  ?></td>
															</tr>
														<?php
														}
														?>
													</tbody>
													<tfoot>
														<th></th>
														<th></th>
														<th class="text-center">Total</th>
														<th class="text-center"></th>
														<th class="text-center"></th>
														<th class="text-center"></th>
														<th></th>
													</tfoot>
												</table>


												<hr>
												<div class="h6">Sales</div>
												<table id="tbl2" class="display table-responsive">
													<thead>
														<tr>
															<th class="text-center">S.No.</th>
															<th class="text-center">Name</th>
															<th class="text-center">Class</th>
															<th class="text-center">Qty.</th>
															<th class="text-center">Unit Price</th>
															<th class="text-center">Total Amount</th>
															<th class="text-center">Date</th>
														</tr>
													</thead>
													<tbody>
														<?php
														foreach ($item_info['sales'] as $s_key => $i_sales) {
														?>
															<tr>
																<td><?= $s_key + 1 ?></td>
																<td class="text-left"><?= $i_sales['name'] ?></td>
																<td><?= $i_sales['course_name'] ?></td>
																<td><?= $i_sales['qty']  ?></td>
																<td><?= number_format($i_sales['unit_price'])  ?></td>
																<td><?= number_format($i_sales['total_amount'])  ?></td>
																<td><?php $dateTime = explode(' ', $i_sales['sales_on']);
																	echo $dateTime[0];  ?></td>
															</tr>
														<?php
														}
														?>
													</tbody>
													<tfoot>
														<th></th>
														<th></th>
														<th class="text-center">Total</th>
														<th class="text-center"></th>
														<th class="text-center"></th>
														<th class="text-center"></th>
														<th></th>
													</tfoot>
												</table>

												<!-- <button type="submit" id="itemAddBtn" class="btn btn-sm btn-outline-primary w-100 mt-4">Add</button> -->
											</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>
	$(document).ready(function() {

		var currencySymbol = '<?= $school_info['currency_symbol'] ?>'

		$('#tbl').DataTable({
			paging: false,
			ordering: true,
			info: false,
			bFilter: false,
			"footerCallback": function(row, data, start, end, display) {
				//var theDynTdCnt = (theTdCnt - 7);
				var api = this.api();

				// 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(3)
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

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

				pageTotal5 = api
					.column(5, {
						page: 'current'
					})
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

				// Update footer
				$(api.column(3).footer()).html(total);
				// $(api.column(4).footer()).html(pageTotal);
				$(api.column(5).footer()).html(currencySymbol + '. ' + Intl.NumberFormat('en-IN').format((pageTotal5)));
			}
		});

		$('#tbl2').DataTable({
			paging: false,
			ordering: true,
			info: false,
			bFilter: false,
			"footerCallback": function(row, data, start, end, display) {
				//var theDynTdCnt = (theTdCnt - 7);
				var api = this.api();

				// 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(3)
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

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

				pageTotal5 = api
					.column(5, {
						page: 'current'
					})
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

				// Update footer
				$(api.column(3).footer()).html(total);
				// $(api.column(4).footer()).html(pageTotal);
				$(api.column(5).footer()).html(currencySymbol + '. ' + Intl.NumberFormat('en-IN').format((pageTotal5)));
			}
		});
	});
</script>