<?= $this->extend('rs/template-user', $data); ?>
<?= $this->section('content'); ?>
<?php
echo '<form action="" method="post" accept-charset="utf-8">';

?>
<style>
 select{width:250px!important;}
 input[type=text]{width:250px!important;}
 input[type=date]{width:250px!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="" method="post" id="car_form">-->
				<table class="table table-sm text-dark font-weight-bold small ml-1">

				

				<tr>
					<td style="width:150px!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</td><td>
						
					   <select class="form-select form-select-sm" name ="brand" style="width:250px!important">
					   <?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</td><td>
						
					   <select class="form-select form-select-sm" name ="model" style="width:250px!important">
						<?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>Body type</td><td>
						
					   <select class="form-select form-select-sm" name ="body_type" style="width:250px!important">
						<?php
							
					   ?>
						</select></td><td></td>
				</tr>
			
			
				 <tr>
					<td>Status</td><td>
						
					   <select class="form-select form-select-sm" name ="brand" style="width:250px!important">
						<?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>Cubic capacity (CC)</td><td>
						<input size="50" type="number" class="form-control" name="cubic_capacity"  style="width:220px!important" value="<?php
						if ($car) {
							echo $car["cubic_capacity"];
						}
						?>"/></td><td></td>
				</tr>
			
			
				<tr>
					<td>Power</td><td>
						<table><tr><td style="padding-left:0">
						<input size="50" type="number" name="engine_power_kw" class="form-control" value="<?php
						if ($car) {
							echo $car["engine_power_kw"];
						}
						?>"/>
						</td>
						<td>
						<select class="form-select form-select-sm" id ="unit" style="float:left!important;width:50px!important">
							<option value="HP">HP</option>
							<option value="KW">KW</option>
						</select>
						</td>
						</tr>
						</table></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>
	</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" name='file_data' 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',
						'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">

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


<?= $this->endsection(); ?>