<?= $this->extend('rs/template-user', $data); ?>
<?= $this->section('content'); ?>
  
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">document.getElementById("cars").classList.add("active");</script> 
<style>
	.icon-btn
	{
		display:inline-block;
		width:36px;
		height: 36px;
		border-radius: 50%;
		border: 1px solid #ccc;
	}
	.actions-menu
	{
		display:block!important;		
	}
	
	.filter-item
	{
		display:inline-block!important;	
		line-height:40px!important;
	}
	input{border:1px solid #aaa!important}
	label {width:70px!important;text-align:right!important;}
	
	.pull-left{
		float: left !important;
		}
	@media screen and (max-width:900px) 
	{
		.priority-2{display:none;}
		
	}
	
	
</style>

<div class="card shadow mb-4">
		<div class="card-header py-3">
			<div class="actions-menu">
				<a class="btn btn-success btn-sm" href="<?php echo site_url('cars/edit/0')?>"   style="float:left;" title="Add" id="scanAWB"><i class="fa fa-plus-square"></i> Add new car</a>
			</div>
			<div class="raw form-inline" style="background:#fff"></div>
		</div>
		
		<div class="card-body">
			<div class="filters-menu">
				<form action="" method="post" accept-charset="utf-8">
				
					<table><tr><td><label>Brand:</label></td>
					<td><select class="form-control-sm" name="brand" id="barand" style="width:150px">
							<?php
							echo '<option value="">All brands</option>';
							foreach ($brands as $branditem)
								
								if($filter_brand && $$filter_brand==$branditem['brand_name'])
									echo '<option value="'.$branditem['brand_name'].'" selected>'.$branditem['brand_name'].'</option>';
								else
									echo '<option value="'.$branditem['brand_name'].'">'.$branditem['brand_name'].'</option>';
							
						   ?>
						</select>
						
					
					</td><td></tr>
					
					<td><label>Status:</label></td>
						<td><select class="form-control-sm" name="status" id="status" style="width:150px">
							<?php
							echo '<option value="">All statuses</option>';
							foreach ($statuses as $statitem)
								
								if($filter_status && $filter_status==$statitem['id'])
									echo '<option value="'.$statitem['id'].'" selected>'.$statitem['status_name'].'</option>';
								else
									echo '<option value="'.$statitem['id'].'">'.$statitem['status_name'].'</option>';
							
						   ?>
						</select>
					
					</td><td>
						<input type='submit' class="btn btn-primary btn-sm" value="Apply filter"/>
						
						</td></tr></table>
					
					</form>
			</div>
			
			
			
		
			<div class="table-responsive">
				
				<table class="table table-sm  small" id="dataTableLarge"  "paging"="false" width="99%" cellspacing="0">
					<thead>
						<tr>
							<th class="priority-2">Code</th>
							<th>Date created</th>
							<th>Status</th>
							<th>Brand</th>
							<th>Model</th>
							<th>Price</th>
							<th>Edit</th>
							
						</tr>
					</thead>
					
					<tbody>
						<?php
						if(isset($cars)){ 
							$i=0;
							foreach ($cars as $items): 
								
						?>
						
						<tr>
							<td class="priority-2"><?php echo $items['code']; ?></td>
							<td><?php echo $items['created_at']; ?></td>
							<td><?php echo $items['	status']; ?></td>  	
							<td><?php echo $items['	brand']; ?></td>
							<td ><?php echo $items['model']; ?></td> 
							<td ><?php echo $items['price'] .' '.$items['price']; ?></td >
							<td><a href="<?php echo site_url('cars/edit/'.$items['code']);?>"  title="Edit" class="btn btn-outline-success btn-sm"><i class="fas fa-fw fa-edit"></i></a></td>
							
							
						</tr>
						<?php $i++ ?>
							
					<?php endforeach; ?>
					<?php }?>
					
					</tbody>
				</table>
			</div>
		</div>

<script>

	// Call the dataTables jQuery plugin
	$(document).ready(function() {
		
		
		$('#dataTableLarge').DataTable({pageLength: 50,
		layout: {
			top: 'info',
			topStart: 'search',
			topEnd: 'info'
		}
		
		});
		
		
		
		//Move the search box
		var rows = $('#dataTableLarge_wrapper').children('.row');
		row0=rows[0];
		var kids1 = row0.children;
		var len = kids1.length;
		
		if(len>1)
		{
			kids1[0].style.display = "none";
		}
		
		$('#dataTableLarge_filter').addClass('pull-left');
		$('#dataTableLarge_filter input').css('width', '260px');
		$('#dataTableLarge_filter').css('margin-top', '5px');
				($("#dataTableLarge_filter").parent()).append( "<div style='float:right;'><?php echo count($cars);?> items</div>");
		
		
	});
</script>
<?= $this->endsection(); ?>