@extends('layouts.frontend.main')

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

    <div class="row justify-content-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-center mb-3">
		<div class="col col-lg-4">
            <p class="text-center">
                This part is compatible with the following vehicles that use its corresponding OEM part.
            </p>
        </div>
    </div>

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

            <div class="row justify-content-center row-cols-1 row-cols-lg-2 g-3 mb-3">
                @for($i = 1; $i <= 4; $i++)
                    <div class="col">
                        <div class="d-grid gap-2">
                            <a
                                class="btn btn-outline-secondary py-3"
                                href="{!! route('mocup.page', [
                                    'page9',
                                ]) !!}"
                            >
                                <dl class="row small mb-1">
                                    <dt class="col-auto me-auto mb-lg-0">
                                        Car maker
                                    </dt>
                                    <dd class="col-auto mb-0">
                                        ########
                                    </dd>
                                </dl>
                                <dl class="row small mb-1">
                                    <dt class="col-auto me-auto mb-lg-0">
                                        OE Part Number
                                    </dt>
                                    <dd class="col-auto mb-0">
                                        ########
                                    </dd>
                                </dl>
                                <dl class="row small mb-0">
                                    <dt class="col-auto me-auto mb-lg-0">
                                        Part Name
                                    </dt>
                                    <dd class="col-auto mb-0">
                                        ########
                                    </dd>
                                </dl>
                            </a>
                        </div>
                    </div>
                @endfor
            </div>

        </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() {

    $('#input1').on('change', function() {
        window.location.href = '{!! route('mocup.page', [
            'page1_5',
        ]) !!}';
    });
});
</script>
@stop