@extends('layouts.frontend.main')

{{-- content --}}
@section('content')
<div class="text-center mb-5">
    <h3 class="">
        WEB System
    </h3>
</div>

<section class="mb-5">

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

			<!-- nav -->
			<ul
				class="nav nav-tabs nav-justified"
				role="tablist"
			>
				@foreach($list as $i => $content)
					<li
						class="nav-item"
						role="presentation"
					>
						<button
							class="nav-link py-3 {!! ($i == 0) ? 'active' : '' !!}"
							data-bs-toggle="tab"
							data-bs-target="#tab{!! $i !!}"
							type="button"
							role="tab"
							aria-controls="tab{!! $i !!}"
							aria-selected="{!! ($i == 0) ? 'true' : 'false' !!}"
						>
							<span class="fw-bold text-primary">
								Search by {!! $content['title'] !!}
							</span>
						</button>
					</li>
				@endforeach
			</ul>
			<!-- /.nav -->

			<!-- tab-content -->
			<div class="tab-content p-4 border border-top-0">
				@foreach($list as $i => $content)
					<div
						class="tab-pane fade {!! ($i == 0) ? 'show active' : '' !!}"
						id="tab{!! $i !!}"
						role="tabpanel"
						tabindex="0"
					>
						<!-- nav -->
						<ul
							class="nav nav-pills nav-justified mb-5"
							role="tablist"
						>
							@foreach($content['menu'] as $j => $menu)
								<li
									class="nav-item"
									role="presentation"
								>
									<button
										class="nav-link {!! ($j == 1) ? 'active' : '' !!}"
										data-bs-toggle="tab"
										data-bs-target="#pill{!! $i !!}-{!! $j !!}"
										type="button"
										role="tab"
										aria-controls="pill{!! $i !!}-{!! $j !!}"
										aria-selected="{!! ($j == 0) ? 'true' : 'false' !!}"
									>
										<span class="fw-bold small">
											{!! $menu !!}
										</span>
									</button>
								</li>
							@endforeach
						</ul>
						<!-- /.nav -->

						<!-- tab-content -->
						<div class="tab-content">
							@foreach($content['menu'] as $j => $menu)
								<div
									class="tab-pane fade {!! ($j == 1) ? 'show active' : '' !!}"
									id="pill{!! $i !!}-{!! $j !!}"
									role="tabpanel"
									tabindex="0"
								>

									{{-- AISIN Part Number --}}
									@if($i == 0 && $j == 0)
										<div class="row justify-content-md-center">
											<div class="col col-lg-8">
												<div class="form-floating mb-4">
													{!! Form::text('id', '', [
														'class' => 'form-control',
														'id' => 'input1',
														'placeholder' => '',
													]) !!}
													<label for="input1">
														AISIN Part number
													</label>
												</div>
												<div class="d-grid gap-2">
													<a
														class="btn btn-primary"
														href="{!! route('mocup.page', [
															'page8-2',
														]) !!}"
													>
														Search
													</a>
													<a
														class="btn btn-outline-secondary"
														href="{!! route('mocup.index') !!}"
													>
														Reset
													</a>
												</div>
											</div>
										</div>
									@endif

									{{-- AISIN Part Code --}}
									@if($i == 0 && $j == 1)
										<div class="row justify-content-md-center">
											<div class="col">
												<div class="alert alert-primary text-center mb-0">
                                                    List of products with the same Product name (=AISIN Part code)<br>
                                                    Narrow down the list of products by Applicable vehicles
                                                </div>
											</div>
										</div>
									@endif

									{{-- OE Number --}}
									@if($i == 0 && $j == 2)
										<div class="row justify-content-md-center">
											<div class="col col-lg-8">
												<div class="mb-3">
													{!! Form::select('id', $car_maker, '', [
														'class' => 'form-select',
														'id' => 'input1',
														'placeholder' => 'select car maker',
													]) !!}
												</div>
                                                <div class="form-floating mb-4">
                                                    {!! Form::text('id', '', [
                                                        'class' => 'form-control',
                                                        'id' => 'input2',
                                                        'placeholder' => '',
                                                    ]) !!}
                                                    <label for="input2">
                                                        OE number
                                                    </label>
                                                </div>
												<div class="d-grid gap-2">
													<a
														class="btn btn-primary"
														href="{!! route('mocup.page', [
															'page8-2',
														]) !!}"
													>
														Search
													</a>
													<a
														class="btn btn-outline-secondary"
														href="{!! route('mocup.index') !!}"
													>
														Reset
													</a>
												</div>
											</div>
										</div>
									@endif

									{{-- VIN Number --}}
									@if($i == 1 && $j == 0)
										<div class="row justify-content-md-center">
											<div class="col col-lg-8">
												<div class="form-floating mb-4">
													{!! Form::text('id', '', [
														'class' => 'form-control',
														'id' => 'input1',
														'placeholder' => '',
													]) !!}
													<label for="input1">
														VIN number
													</label>
												</div>
												<div class="d-grid gap-2">
													<a
														class="btn btn-primary"
														href="{!! route('mocup.page', [
															'page6',
														]) !!}"
													>
														Search
													</a>
													<a
														class="btn btn-outline-secondary"
														href="{!! route('mocup.page', [
															'page1_1',
														]) !!}"
													>
														Reset
													</a>
												</div>
											</div>
										</div>
									@endif

									{{-- by vehicle application --}}
									@if($i == 1 && $j == 1)
										<div class="row row-cols-1 row-cols-lg-3 g-2">
											@foreach($car_maker as $key => $value)
												<div class="col">
													<div class="d-grid gap-2">
														<a
															class="btn btn-outline-secondary px-5 py-2"
															href="{!! route('mocup.page', [
																'page3'
															]) !!}"
														>
															<span class="fw-bold">
																{!! $value !!}
															</span>
														</a>
													</div>
												</div>
											@endforeach
										</div>
									@endif

								</div>
							@endforeach
						</div>
						<!-- /.tab-content -->

					</div>
				@endforeach
			</div>
			<!-- /.tab-content -->

		</div>
	</div>

</section>
@endsection

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

</style>
@stop

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