<?= $this->extend('rs/template-visitor'); ?>
<?= $this->section('content'); ?>
<style>
.card-body {min-height:100px!important}
.select2{min-width:175px!important}
</style>  
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>



<div class="card shadow">
		<h4 class="m-0 font-weight-bold text-primary">Search car</h4>
		<div class="card-body mh-25">
			
			<form class="form-inline" action="" method="post" class="filter-form">
			 <div class="form-group p-2 col-xs-4">
			      <select class="form-control-sm select2"  name ="brand" id="brand" placehoder="Brand">
					   <option value="" selected disabled>Brand</option>
					   <?php
							foreach($brands as $branditem)
							{
								if($filter && $filter['brand'] && filtercar['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>
			  </div>
			  
			  <div class="form-group p-2 ">
			      <select class="form-control-sm select2" id="model" name ="model"  placehoder="Model">
					<option value="" selected disabled>Model</option>
				  </select>
			  </div>
			  
			   <div class="form-group p-2 ">
			      <select class="form-control-sm select2" id="model" name ="model"  placehoder="Model">
					<option value="" selected disabled>Body type</option>
					<option>Hatchback</option>
					<option>Station wagon</option>
					<option>Micro</option>
					<option>MUV / monovolum</option>
					<option>Sedan</option>
					<option>Sports car / coupe</option>
					<option>Convertible / roadster</option>
					<option>SUV / off-road</option>
					<option>Pickup</option>
					<option>Van cargo</option>
					<option>Van passenger</option>
				  </select>
			  </div>
			  
			   <div class="form-group p-2 ">
			      <select class="form-control-sm select2" id="fuel" name ="fuel"  placehoder="Model">
				  <option value="" selected disabled>Fuel</option>
					<option>Diesel</option>
					<option>Gasoline</option>
					<option>Biodiesel</option>
					<option>Electric 100%</option>
					<option>Ethanol</option>
					<option>Natural gas</option>
					<option>Hybrid - Gasoline + Electric</option>
					<option>Hybrid - Diesel + Electric</option>
					<option>Hydrogen</option>
					<option>LPG</option>
					<option>CNG</option>
				  </select>
			  </div>
			  
			   <div class="form-group p-2 col-xs-4">
			      <select class="form-control-sm select2" id="price" name ="price"  placehoder="Price">
				  <option value="" selected disabled>Start price</option>
					<option>2000 EUR</option>
					<option>5000 EUR</option>
					<option>10000 EUR</option>
					<option>20000 EUR</option>
					<option>30000 EUR</option>
					<option>40000 EUR</option>
				  </select>
			  </div>
			  
			   <div class="form-group p-2 col-xs-4">
			      <select class="form-control-sm select2" id="year" name ="year"  placehoder="Year">
					  <option hidden selected disabled>Start year</option>
					  <option>2000</option>
					  <option>2005</option>
					  <option>2010</option>
					  <option>2015</option>
					  <option>2020</option>
					  <option>2021</option>
					  <option>2022</option>
					  <option>2023</option>
					  <option>2024</option>
					  
				  </select>
			  </div>
			  
			</form>
		</div>	
	
</div>



<div class="card shadow">
<a href="#collapseSecondary" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseSecondary">
	<h4 class="m-0 font-weight-bold text-primary">More filters</h4>
	
</a>
	<div class="collapse hide" id="collapseSecondary">
		<div class="card-body">
			More filters
		</div>	
	</div>
</div>

<div class="card-body">
	<div class="">
		<div class="card border-left-warning shadow h-100 py-2">
			 <div class="card-body">
			 Car 1
			 </div>
		</div>
	</div>

	<div class="">>
		<div class="card border-left-warning shadow h-100 py-2">
			 <div class="card-body">
			 Car 2
			 </div>
		</div>
	</div>

	<div class="">>
		<div class="card border-left-warning shadow h-100 py-2">
			 <div class="card-body">
			 Car 3
			 </div>
		</div>
	</div>
	<div class="">>
		<div class="card border-left-warning shadow h-100 py-2">
			 <div class="card-body">
			 Car 4
			 </div>
		</div>
	</div>
	<div class="">>
		<div class="card border-left-warning shadow h-100 py-2">
			 <div class="card-body">
			 Car 5
			 </div>
		</div>
	</div>
</div>

		<!-- /.container-fluid -->

		
		<!-- End of Main Content -->

		<!-- Footer -->
		
<script>
$('#brand').change(function(){
	
	crtbrand=$('#brand').val();

    $.ajax({
        type: "POST",
        url: "<?php echo site_url('/brandmodels'); ?>", 
        data:{brand: crtbrand},
        dataType:"json",//return type expected as json
        success: function(models){
			   //console.log(models)
               
			   $('#model').find('option').remove().end();
			   var opt = $('<option  value="" selected disabled/>');
			   opt.val('');
               opt.text('Model');
				$('#model').append(opt);			   
			   $.each(models,function(key,value){
				    console.log(value.model_name)
                    var opt = $('<option />'); 
                    opt.val(value.model_name);
                    opt.text(value.model_name);
                    $('#model').append(opt);
               });
			   
			   $("#model").selectpicker("refresh");
        },
    });
});
</script>
<?= $this->endsection(); ?>