@extends('layouts.frontend.main')

{{-- content --}}
@section('content')
<section class="mb-5">

	<div class="row justify-content-md-center mb-3">
		<div class="col col-lg-4">

			<div class="card">
				<div class="card-body">
					@foreach($detail1 as $key => $value)
						<dl class="row small text-muted mb-1">
							<dt class="col-auto me-auto mb-lg-0">
								{!! $value !!}
							</dt>
							<dd class="col-auto mb-0">
								########
							</dd>
						</dl>
					@endforeach
					<img
						class="img-fluid my-3"
						src="http://via.placeholder.com/640x360"
					>
					@foreach($detail2 as $key => $value)
						<dl class="row small text-muted mb-1">
							<dt class="col-auto me-auto mb-lg-0">
								{!! $value !!}
							</dt>
							<dd class="col-auto mb-0">
								########
							</dd>
						</dl>
					@endforeach
				</div>
			</div>

		</div>
	</div>

</section>

<section class="mb-5">

    <div class="text-center mb-3">
        <h4 class="card-title mb-0">
            Applicable vehicles
        </h4>
    </div>

	<div class="row justify-content-md-center mb-3">
		<div class="col col-lg-8">

			<table class="table">
				<colgroup>
					<col>
				</colgroup>
				<thead class="table-group-divider">
					<tr>
						<th>
							<div class="text-center">
								#
							</div>
						</th>
						<th>
							Car Make
						</th>
						<th>
							Car Model
						</th>
						<th>
							Model Year
						</th>
						<th>
							Engine Code
						</th>
						<th>
							Displacement
						</th>
						<th>
							Transmisstion type
						</th>
					</tr>
				</thead>
				<tbody class="table-group-divider">
					@for($i = 1; $i <= 10; $i++)
						<tr>
							<td>
								<div class="text-center">
									{!! $i !!}
								</div>
							</td>
							<td>
								##########
							</td>
							<td>
								##########
							</td>
							<td>
								##########
							</td>
							<td>
								##########
							</td>
							<td>
								##########
							</td>
							<td>
								##########
							</td>
						</tr>
					@endfor
				</tbody>
			</table>

		</div>
	</div>

	<div class="text-center">
		<a
			class="btn btn-outline-secondary btn-sm px-5"
			href="{!! url()->previous(); !!}"
		>
			Back
		</a>
	</div>

</section>
@endsection

{{-- css --}}
@section('css')
<style>

</style>
@stop

{{-- js --}}
@section('js')
<script>
$(function() {

	//
});
</script>
@stop