@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="text-center mb-3">
                <h4 class="card-title mb-1">
                    Toyota
                </h4>
                <h5 class="card-title mb-0">
                    Aqua
                </h5>
            </div>

            <div class="card">
                <div class="card-body">
                    <dl class="row mb-1">
                        <dt class="col-auto me-auto mb-lg-0">
                            <small>
                                Model Year
                            </small>
                        </dt>
                        <dd class="col-auto mb-0">
                            ########
                        </dd>
                    </dl>
                    <dl class="row mb-1">
                        <dt class="col-auto me-auto mb-lg-0">
                            <small>
                                Engine Code
                            </small>
                        </dt>
                        <dd class="col-auto mb-0">
                            ########
                        </dd>
                    </dl>
                    <dl class="row mb-1">
                        <dt class="col-auto me-auto mb-lg-0">
                            <small>
                                Displacement
                            </small>
                        </dt>
                        <dd class="col-auto mb-0">
                            ########
                        </dd>
                    </dl>
                    <dl class="row mb-0">
                        <dt class="col-auto me-auto mb-lg-0">
                            <small>
                                Transmisstion type
                            </small>
                        </dt>
                        <dd class="col-auto mb-0">
                            ########
                        </dd>
                    </dl>
                </div>
            </div>

        </div>
    </div>

    <div class="text-center">
        <a
            class="btn btn-outline-secondary btn-sm px-5"
            href="{!! route('mocup.page', [
                'page2_4',
            ]) !!}"
        >
            Back
        </a>
    </div>

</section>

<section class="mb-5">

    <div class="text-center mb-3">
        <h4 class="card-title mb-0">
            Select by product
        </h4>
    </div>

    <div class="row justify-content-md-center mb-3">
		<div class="col col-lg-4">
            <div class="form-floating mb-0">
                {!! Form::select('id', [''=>'select ...'], '', [
                    'class' => 'form-select',
                    'id' => 'input1',
                    'placeholder' => 'select car maker',
                ]) !!}
                <label for="input1">
                    Filter by category
                </label>
            </div>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-lg-4 g-3 mb-3">
        @for($i = 1; $i <= 8; $i++)
            <div class="col">
                <div class="card h-100">
					<img
						class="img-fluid"
						src="http://via.placeholder.com/640x360"
					>
                    <div class="card-body">
                        <h5 class="card-title text-center mb-3">
                            Part name / product line-up
                        </h5>
                        @foreach($list 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
                        <a
                            class="stretched-link"
                            href="{!! route('mocup.page', [
                                'page2_7',
                            ]) !!}"
                        ></a>
                    </div>
                </div>
            </div>
        @endfor
    </div>
</section>
@endsection

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

</style>
@stop

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