@extends('layouts.frontend.main')

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

    <div class="text-center mb-4">
        <h4 class="card-title mb-0">
            Toyota / Aqua
        </h4>
    </div>

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

            <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>

</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-center row-cols-1 row-cols-lg-4 g-3 mb-3">
        @for($i = 1; $i <= 3; $i++)
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title text-center text-primary mb-3">
                            @if($i == 1)
                                LUBRICANT & CHEMICAL
                            @endif

                            @if($i == 2)
                                Multiple OEM part numbers
                            @endif

                            @if($i == 3)
                                Single OEM part number
                            @endif
                        </h5>
                        @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
                        <a
                            class="stretched-link"
                            @if($i == 1)
                                href="{!! route('mocup.page', [
                                    'page8-1',
                                ]) !!}"
                            @endif

                            @if($i == 2)
                                href="{!! route('mocup.page', [
                                    'page8-2',
                                ]) !!}"
                            @endif

                            @if($i == 3)
                                href="{!! route('mocup.page', [
                                    'page9',
                                ]) !!}"
                            @endif
                        ></a>
                    </div>
                </div>
            </div>
        @endfor
    </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