<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>


<section class="ikio_breadcumb">
	<div class="ikio_container">
		<div class="ikio_breadcumb_inner">
			<ul>
				<li><a href="<?php echo base_url();?>home" class="active__link hsize15 mp_regular">Home</a></li>
				<li><span></span></li>
				<li><a href="<?php echo base_url();?>clearance-products" class="hsize15 mp_regular">Clearance
						Products</a></li>
			</ul>
		</div>
		<div class="ikio__breacumbtite mp">Clearance Products</div>
		<div class="lines_inner_bread"></div>
	</div>
</section>

<section class="about_bg" id="technology_banner">
	<div class="ikio_container">
		<div class="about__bg_overlay">
			<h2 class="hsize40 white font_900">CLEARANCE AND SALE PRODUCTS

			</h2>
			<div class="line__about"></div>
			<p class="hsize18 white">
				We are the leaders in Global Innovation with one of the largest LED Lights manufacturing operations.
				Our constant research and vertically integrated infrastructure allow us to innovate and be one step
				ahead of the competition.
			</p>
		</div>
	</div>
</section>

<style>
	.dataTables_wrapper .dataTables_info {
		padding-top: 15px
	}
	.dataTables_wrapper .dataTables_paginate{
       float: right;
	   position: relative;
	   top: -20px;
	}
	.dataTables_wrapper .dataTables_paginate span .paginate_button.current{
		background: #000;
    color: #fff;
    line-height: 0px !IMPORTANT;
	}
	@media (max-width: 768px){
.mytables {
    overflow: scroll !important;
}
	}
	.dataTables_wrapper .dataTables_paginate .paginate_button {
		color: #000;
		padding: 2px 8px !important;
	}
	.dataTables_wrapper thead input{
		font-size: 15px;
    color: #000;
    border: 1px solid #ccc;
    padding: 5px 2px;
	}
	.dataTables_wrapper thead input::placeholder{
		color: #000;
	}
	.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
		
	}
	.dataTables_wrapper .dataTables_paginate .paginate_button.next {
		
	}
	table.dataTable tbody th,
	table.dataTable tbody td {
		padding: 2px 2px;
		border: 1px solid #ccc !important;
		font-size: 15px !important;
	}

	table.dataTable tbody th,
	table.dataTable tbody td img {
		display: block;
		BORDER: 1PX SOLID #DDD;
		border-radius: 5px;
		margin: 0 auto;
	}

	#mytablec_filter {
    font-size: 14px;
	text-align: center !important;
}

	table.dataTable {

		text-align: center;
	}

	table.dataTable thead th,
	table.dataTable thead td {
		padding: 10px 2px;
		border: 1px solid #ccc !important;
	}

</style>
<div class="ikio_container row tech_not">
	<div class="col-md-12">
		<div class="mytables tabels_clearnce" id="reso">
			<div class="scrollable_table">
				<table id="mytablec">
					<thead>
						<tr>
							<th>Product Image </th>
							<th>Segment </th>
							<th>Category </th>
							<th>Product Code </th>
							<th>Description </th>
							<th>SKU </th>
							<th>Listing </th>
							<th>Quantity </th>
						</tr>
						<tr>
							<td> </td>
							<td>Segment </td>
							<td>Category </td>
							<td>Product Code </td>
							<td>Description </td>
							<td>SKU </td>
							<td>Listing </td>
							<td>Quantity </td>
						</tr>
					</thead>
					<tbody><?php foreach ($result as $row) {
		// ($row = mysqli_fetch_array($result))
		?><tr>
							<td><img src="<?php  echo $row['Product_Image']; ?>" alt="" srcset="">
								<p style="display:none;"><?php echo $row['Product_Image'];
		?></p>
							</td>
							<td><?php echo $row['Segment'];
		?></td>
							<td><?php echo $row['Category'];
		?></td>
							<td><?php echo $row['Product_Code'];
		?></td>
							<td><?php echo $row['Description'];
		?></td>
							<td><?php echo $row['SKU'];
		?></td>
							<td><?php echo $row['Listing'];
		?></td>
							<td><?php echo $row['Quantity'];
		?></td>
						</tr><?php
	}

	?></tbody>
					<tfoot>
						<tr>
							<th>Product_Image </th>
							<th>Segment </th>
							<th>Category </th>
							<th>Product_Code </th>
							<th>Description </th>
							<th>SKU </th>
							<th>Listing </th>
							<th>Quantity </th>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</div>
</div>


<script>
	$(document).ready(function () {

			$('#mytablec thead td').each(function () {
					var title = $(this).text();
					$(this).html('<input type="text" placeholder="Search ' + title + '" />');
				}

			);

			$('#mytablec').DataTable({
					responsive: true,
					dom: 'Bfrtip',
					pageLength: 15,
					"language": {
    "search": "Universal Filter:"
  },
					buttons: ['copy', 'csv', 'excel', 'pdf', 'print'

					],
					initComplete: function () {

							// Apply the search
							this.api().columns().every(function () {
									var that = this;

									$('input', this.header()).on('keyup change clear', function () {
											if (that.search() !== this.value) {
												that.search(this.value).draw();
											}
										}

									);
								}

							);
						}

						,

				}


			);

		}

	);

</script>