@extends('templates.'.$template.'.layouts.' . $layout)

@section('content')
<div class="row">
    <div class="col-lg-9">
        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link cars-filters-tab-btn" data-tab="vehicle" href="javascript:void(0)">Vehicle</a></li>
            <li class="nav-item"><a class="nav-link cars-filters-tab-btn" data-tab="engine" href="javascript:void(0)">Engine</a></li>
            <li class="nav-item"><a class="nav-link cars-filters-tab-btn" data-tab="colour" href="javascript:void(0)">Colour</a></li>
            <li class="nav-item"><a class="nav-link cars-filters-tab-btn" data-tab="equipment" href="javascript:void(0)">Equipment</a></li>
            <li class="nav-item"><a class="nav-link cars-filters-tab-btn" data-tab="location" href="javascript:void(0)">Location</a></li>
            <li class="nav-item"><a class="nav-link cars-filters-tab-btn" data-tab="price" href="javascript:void(0)">Price</a></li>
        </ul>
	</div>
    <div class="col-lg-3">
        <a href="javascript:void(0);" class="btn btn-primary"><span id="cars-count">{{ $totalCarsLabel }}</span></a>
	</div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div id="tab-vehicle" class="cars-filters-tab">
            @include('templates/'.config('app.template').'/cars/common/tab-vehicle')
        </div>
        <div id="tab-engine" class="cars-filters-tab">
            @include('templates/'.config('app.template').'/cars/common/tab-engine')
        </div>
        <div id="tab-colour" class="cars-filters-tab">
            @include('templates/'.config('app.template').'/cars/common/tab-colour')
        </div>
        <div id="tab-equipment" class="cars-filters-tab">
            Equipment
        </div>
        <div id="tab-location" class="cars-filters-tab">
            Location
        </div>
        <div id="tab-price" class="cars-filters-tab">
            @include('templates/'.config('app.template').'/cars/common/tab-price')
        </div>
    </div>
</div>

<div class="row" style="margin: 15px 0px;">
    <div class="col-lg-6">
        <div class="dropdown pull-left">
            <button class="btn btn-block btn-outline-primary dropdown-toggle" type="button" id="cars-per-page-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span>{{ $carsPerPage }}</span>
            </button>
            <div class="dropdown-menu" aria-labelledby="cars-per-page-btn">
                @foreach (config('cars.cars-per-page') as $carPerPage)
                    <a class="dropdown-item cars-per-page-btn"
                        data-value="{{ $carPerPage }}"
                        href="javscript:void(0);">
                            <i class="far {{ (app('request')->input('cpp', config('cars.default-cars-per-page')) == (string)$carPerPage ? 'fa-check-circle' : 'fa-circle') }}"></i> {{ $carPerPage }} vehicles</a>
                @endforeach
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="dropdown pull-right">
            <button class="btn btn-block btn-outline-primary dropdown-toggle" type="button" id="cars-per-page-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span>{{ @config('cars.cars-order-by')[$orderByValue][session('language', defaultLanguage())] }}</span> vehicles
            </button>
            <div class="dropdown-menu" aria-labelledby="cars-per-page-btn">
                @foreach (config('cars.cars-order-by') as $key=>$orderBy)
                    <a class="dropdown-item cars-per-page-btn"
                    data-value="{{ $key }}"
                    href="javscript:void(0);">
                    <i class="far {{ (app('request')->input('order', config('cars.default-cars-order-by')) == (string)$key ? 'fa-check-circle' : 'fa-circle') }}"></i> {{ $orderBy[session('language', defaultLanguage())] }} vehicles</a>
                @endforeach
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div id="cars-list-wrapper">
            @include('templates/'.config('app.template').'/cars/common/cars-list', [
                'cars' => $cars,
                'appendToPaginate' => $appendToPaginate,
            ])
        </div>
    </div>
</div>
@endsection

{{-- Page script --}}
@section('script')
	<script type="text/javascript">
    var carsListPage = true;
    var modelsValues = [];
    @if(app('request')->input('models'))
        var modelsString = '{{ app('request')->input('models') }}';
        modelsValues = modelsString.split(',').map(Number);
    @endif
    var motorisationsValues = [];
    @if(app('request')->input('motorisations'))
        var motorisationsString = '{{ app('request')->input('motorisations') }}';
        motorisationsValues = motorisationsString.split(',').map(Number);
    @endif
    var carTypesValues = [];
    @if(app('request')->input('types'))
        var carTypesString = '{{ app('request')->input('types') }}';
        carTypesValues = carTypesString.split(',').map(Number);
    @endif
    var carBodyShapes = [];
    @if(app('request')->input('bodies'))
        var carBodyShapesString = '{{ app('request')->input('bodies') }}';
        carBodyShapes = carBodyShapesString.split(',').map(Number);
    @endif
    var carUpholsteries = [];
    @if(app('request')->input('upholstery'))
        var carUpholsteriesString = '{{ app('request')->input('upholstery') }}';
        carUpholsteries = carUpholsteriesString.split(',').map(Number);
    @endif
    var carColours = [];
    @if(app('request')->input('colours'))
        var carColoursString = '{{ app('request')->input('colours') }}';
        carColours = carColoursString.split(',').map(Number);
    @endif
    var carInteriorColours = [];
    @if(app('request')->input('interiorcolours'))
        var carInteriorColoursString = '{{ app('request')->input('interiorcolours') }}';
        carInteriorColours = carInteriorColoursString.split(',').map(Number);
    @endif
    </script>
@endsection