<?= $this->extend('rs/template-user', $data); ?>
<?= $this->section('content'); ?>
<?=dirname(__DIR__)?>
<?php include 'formulator.php' ?>
<?php include 'additionals.php' ?>

<style>
 select{width:250px!important;}
 input[type=text]{width:250px!important;}
 input[type=number]{width:250px!important;}
 input[type=date]{width:250px!important;}
 input[type=checkbox]{width:16px!important;}
 textarea{width:250px!important;}
</style>


<div class="card shadow">
	<a href="#collapsePrimary" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseReception">
		<h6 class="m-0 font-weight-bold text-primary">Primary details</h6>
	</a>
	<div class="collapse show" id="collapsePrimary">
		<div class="card-body">
				<form class="" action=""  id="car_form" method="post" accept-charset="utf-8" enctype="multipart/form-data">
				<table class="table table-sm text-dark font-weight-bold small ml-1" style="width:400px">

				

				<tr>
					<td style="width:200px!important" >
					   Code</td><td>
					   <?php if (isset($code)) {
							echo $code;
						};?>
					   </td><td></td>
				</tr>
				
			   <tr>
				<td>
				   Date created</td><td>
				   <?php if (isset($formitem)) {
						echo $formitem["created_at"];
					};?>
				   </td><td></td>
				</tr>
			   
				<tr>
					<td>Brand<span class='req'>*</span></td><td>
						
					   <select class="form-control-sm select2" name ="brand" id="brand"  required>
					   <option />
					   <?php
							foreach ($brands as $branditem)
							{
								if($car && $car['brand'] && $car['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></td>
				</tr>
			
			
				<tr>
					<td>Model<span class='req'>*</span></td><td>
						
					   <select class="form-control-sm select2" id="model" name ="model"  required>
					   </select></td><td></td>
				</tr>
				
				
				<tr>
					<td>Model description<span class='req'>*</span></td><td>
						
					   <input type="text" class="form-control" id="model_desc" name ="model"  required>
					   </select></td><td></td>
				</tr>
			
				<tr>
					<td>Body type<span class='req'>*</span></td><td>
						
					   <select class="form-control-sm select2" name ="body_type"  required>
						<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></td><td></td>
				</tr>
				
				<tr>
					<td>Steering whell<span class='req'>*</span></td><td>
						
					   <select class="form-control-sm select2" name ="steering_whell"  required>
						<option>Left</option>
						</select></td><td></td>
				</tr>
				
					
			
				<tr>
					<td>Cubic capacity (CC)<span class='req'>*</span></td><td>
						<input size="50" type="number" class="form-control" name="cubic_capacity"  style="width:170px!important" required value="<?php
						if ($car) {
							echo $car["cubic_capacity"];
						}
						?>"/></td><td></td>
				</tr>
				
				
				
			
				<tr>
					<td>Power<span class='req'>*</span></td><td>
						<table><tr><td style="padding-left:0">
						<input size="50" type="number" name="engine_power_kw" class="form-control" required style="width:170px!important" 
						value="<?php
						if ($car) {
							echo $car["engine_power_kw"];
						}
						?>"/>
						</td>
						<td>
						<select class="form-select form-select-sm" id ="unit" required style="float:left!important;width:70px!important">
							<option value="HP">HP</option>
							<option value="KW">KW</option>
						</select>
						</td>
						</tr>
						</table></td>
				</tr>
				
				<tr>
					<td>Fuel<span class='req'>*</span></td><td>
					  <select class="form-control-sm select2" name ="fuel"  required>
						<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></td><td></td>
				</tr>
				
				<tr>
					<td>Emission standard / class<span class='req'>*</span></td><td>
					  <select class="form-control-sm select2" name="emission_standard"  required>
						<option>EURO1</option>
						<option>EURO2</option>
						<option>EURO3</option>
						<option>EURO4</option>
						<option>EURO5</option>
						<option>EURO6</option>
					   </select></td><td></td>
				</tr>
				
				<tr>
					<td>Date of manufacture</td><td>
						<input type="date" class="form-control" required name="date_manufacture"  style="width:170px!important" 
						value="<?php if ($car) {echo $car["	date_manufacture"];}?>"/></td><td></td>
				</tr>
				
				<tr>
					<td>Gearbox<span class='req'>*</span></td><td>
					  <select class="form-control-sm select2" name ="gearbox"  required>
						<option>Manual</option>
						<option>Semi-automatic</option>
						<option>Automatic</option>
					  </select></td><td></td>
				</tr>
				
				<tr>
					<td>Drivetrain<span class='req'>*</span></td><td>
					  <select class="form-control-sm select2" name ="drivetrain"  required>
						<option>Front</option>
						<option>Rear</option>
						<option>4x4</option>
					  </select></td><td></td>
				</tr>
				
				<tr>
					<td>Km<span class='req'>*</span></td><td>
						<input size="50" type="number" class="form-control" name="km"  required style="width:170px!important" value="<?php
						if ($car) {
							echo $car["cubic_capacity"];
						}
						?>"/></td><td></td>
				</tr>
				
				<tr>
					<td>VIN<span class='req'>*</span></td><td>
						<input size="50" type="number" class="form-control" name="vin" required style="width:250px!important" value="<?php
						if ($car) {
							echo $car["vin"];
						}
						?>"/></td><td></td>
				</tr>
				
				<tr>
					<td>Technical status<span class='req'>*</span></td><td>
					  <select class="form-control-sm select2" name ="technical_status"  required>
						<option>Accident-free</option>
						<option>Crashed vehicle</option>
						<option>Perfect status</option>
						<option>Has scratches</option>
						<option>No repairs needed</option>
						
					  </select></td><td></td>
				</tr>
				
				<tr>
					<td>Registered<span class='req'>*</span></td><td>
					  <select class="form-control-sm select2" name ="registered"  required>
						<option>Yes</option>
						<option>No</option>
					  </select></td><td></td>
				</tr>
				
				<tr>
					<td>Country of origin<span class='req'>*</span></td><td>
						
					   <select class="form-control-sm select2" name ="brand" id="brand"  required>
					   <option />
					   <?php
							foreach ($countries as $country)
							{
								if($car && $car['country_of_origin'] && $car['country_of_origin']==$country['country_name'])
									echo '<option value="'.$country['country_name'].'" selected>'.$country['country_name'].'</option>';
								else
									echo '<option value="'.$country['country_name'].'">'.$country['country_name'].'</option>';
							}
					   ?>
					   </select></td><td></td>
				</tr>
				
				<tr>
					<td>Notes</td><td>
						<textarea rows="6" type="notes" class="form-control" name="notes"  ><?php
						if ($car) {
							echo $car["notes"];
						}
						?></textarea></td><td></td>
				</tr>
				
				<tr>
					<td>Status</td><td>
						
					   <select class="form-select form-select-sm" name ="brand" >
						<?php
							foreach ($statuses as $statitem)
							{
								if($car && $car['status'] && $car['status']==$statitem['status_name'])
									echo '<option value="'.$statitem['id'].'" selected>'.$statitem['status_name'].'</option>';
								else
									echo '<option value="'.$statitem['id'].'">'.$statitem['status_name'].'</option>';
							}
					   ?>
					  </select></td><td></td>
				</tr>
				
			
				<tr>
					<td></td><td>
						
							<input type="submit" name="submit" value="Update" class="btn btn-primary btn-sm" />
					   
					</td></td><td>
				</tr>

			</table>
			</form>
		</div>
	</div>
</div>


<div class="card shadow">
	<a href="#collapseImages" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseReception">
		<h6 class="m-0 font-weight-bold text-primary">Images</h6> Maximum allowed 40 of type jpg, png, gif
	</a>
	
	
	
	<div class="collapse show" id="collapseImages">
		<div class="card-body">
			
			
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
		<link href="/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
		<link href="/fileinput/themes/explorer-fa5/theme.css" media="all" rel="stylesheet" type="text/css"/>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
		<script src="/fileinput/js/plugins/buffer.min.js" type="text/javascript"></script>
		<script src="/fileinput/js/plugins/filetype.min.js" type="text/javascript"></script>
		<script src="/fileinput/js/plugins/piexif.js" type="text/javascript"></script>
		<script src="/fileinput/js/plugins/sortable.js" type="text/javascript"></script>
		<script src="/fileinput/js/fileinput.js" type="text/javascript"></script>
		<script src="/fileinput/themes/fa5/theme.js" type="text/javascript"></script>
		<script src="/fileinput/themes/explorer-fa5/theme.js" type="text/javascript"></script>
		
	
			<div class="container my-4">
    
				<!--<form action="/cars/edit/<?php echo $code;?>" method="post" accept-charset="utf-8" enctype="multipart/form-data">-->
					<div class="file-loading">
						<input id="kv-explorer" type="file" multiple>
					</div>
					<br>
					<!--
					<button type="submit" class="btn btn-primary">Submit</button>
					<button type="reset" class="btn btn-outline-secondary">Reset</button>
					-->
				<!--</form>-->
				
    
			</div>

			<script>
				
				$("#file-0").fileinput({
					theme: 'fa5',
					uploadUrl: '/cars/edit/<?php echo $code;?>',
					maxFileSize: 2000,
					maxFilesNum: 40,
					allowedFileExtensions: ['jpg', 'png', 'gif']
					
				}).on('filepreupload', function(event, data, previewId, index) {
					alert('The description entered is:\n\n' + ($('#description').val() || ' NULL'));
				});
				
				
				$(".btn-warning").on('click', function () {
					var $el = $("#file-4");
					if ($el.attr('disabled')) {
						$el.fileinput('enable');
					} else {
						$el.fileinput('disable');
					}
				});
				$(".btn-info").on('click', function () {
					$("#file-4").fileinput('refresh', {previewClass: 'bg-info'});
				});
				
				$(document).ready(function () {
					
					$("#kv-explorer").fileinput({
						'theme': 'explorer-fa5',
						'uploadUrl': '/cars/uploadimg/<?php echo $code;?>',
						'allowedFileExtensions': ['jpg', 'png', 'gif'],
						'maxFileSize': 2000,
						'maxFilesNum': 40,
						overwriteInitial: false,
						initialPreviewAsData: true
						
					});
				   
				  
				});
			</script>
			
		</div>
	</div>
</div>


<div class="card shadow">
	<a href="#collapseAdditional" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseReception">
		<h6 class="m-0 font-weight-bold text-primary">Aditional details</h6>
	</a>
	<div class="collapse show" id="collapseAdditional">
		<div class="card-body">
		<?php
		//create the form
		$formulator = new Formulator();
		echo '<table class="table table-sm text-dark font-weight-bold small ml-1" style="width:400px">';
		echo $formulator->formify($additional);
		echo '</table>';

		?>

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


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

    $.ajax({
        type: "POST",
        url: "<?php echo site_url('cars/brandmodels'); ?>", 
        data:{brand: crtbrand},
        dataType:"json",//return type expected as json
        success: function(models){
			   //console.log(models)
               $.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(); ?>