@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">
                <img
                    class="img-fluid"
                    src="http://via.placeholder.com/640x360"
                >
                <div class="card-body pb-2">
                    <h5 class="card-title text-center mb-3">
                        Part name / product line-up
                    </h5>
                    @foreach($list as $key => $value)
                        <dl class="row small 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>

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

</section>

<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-3">
                    Applicable vehicles
                </h4>
                <div class="form-floating mb-3">
                    {!! Form::select('id', [0=>'Model1', 1=>'Model2'], 0, [
                        'class' => 'form-select',
                        'id' => 'input1',
                        'placeholder' => 'select model',
                    ]) !!}
                    <label for="input1">
                        Model
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-md-center mb-3">
		<div class="col col-lg-8">
            <div class="row row-cols-1 row-cols-lg-2 justify-content-md-center g-3">
                @for($i = 1; $i <= 8; $i++)
                    <div class="col">
                        <div class="card h-100">
                            <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>
                            <a
                                class="stretched-link"
                                href="{!! route('mocup.page', [
                                    'page2_6',
                                ]) !!}"
                            ></a>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </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