{{--
  Template Name: Home
--}}

@extends('layouts.app')

@section('content')

    @php($banner = get_field('section_banniere'))
    <div class="banner" style="position: relative;">
        <img
                src="{{ $banner['image']['url'] }}"
                alt="{{ $banner['image']['alt'] ?? 'Bannière d’accueil' }}"
                fetchpriority="high"
                width="1920"
                height="600"
                style="width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;"
        />
        <div class="banner__content">
            <div class="container-max d-flex d-align-center">
                <h1 class="title xl">Découvrir les <span class="alt-color"> véhicules d’occasion </span> de notre réseau
                    professionnel</h1>
            </div>
        </div>
    </div>
    <section class="section__filter container light-background">
        <div class="container-max d-flex d-wrap d-gap-4">
            <div class="filter home">
                <h2 class="title s mb-2 text-center w-100">Trouver votre véhicule</h2>
                <div class="w-100">
                    <form action="/occasions" class="filter__content" id="home-filters-form">
                        @php($filter = lg_get_filters())
                        <div class="row">
                            @isset($filter['types'])
                                <div class="filter-item">
                                    <div class="filter-item__inputs">
                                        <select name="gender" id="gender" class="select-multiple" placeholder="Type"
                                                aria-label="Type" multiple>
                                            @foreach($filter['types'] as $item)
                                                <option value="{{ $item }}">{{ $item }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endisset
                            @isset($filter['cities'])
                                <div class="filter-item">
                                    <div class="filter-item__inputs">
                                        <select name="companyCity" id="companyCity" class="select-multiple"
                                                placeholder="Localisation" aria-label="Localisation" multiple>
                                            @foreach($filter['cities'] as $city)
                                                <option value="{{ $city }}">{{ $city }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endisset
                        </div>
                        <div class="row">
                            @isset($filter['brands'])
                                <div class="filter-item">
                                    <div class="filter-item__inputs">
                                        <select name="brand" id="brand" class="select-multiple" aria-label="Marque"
                                                placeholder="Marque" multiple>
                                            @foreach($filter['brands'] as $brand)
                                                <option value="{{ $brand }}">{{ $brand }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endisset
                            @isset($filter['brandsAndModelsAndCategories'])
                                <div class="filter-item">
                                    <div class="filter-item__inputs">
                                        <select name="family" id="family" class="select-multiple" aria-label="Modèle"
                                                placeholder="Modèle" multiple>
                                            @foreach($filter['brandsAndModelsAndCategories'] as $brandAndModel => $models)
                                                <optgroup label="{{ $brandAndModel }}">
                                                    @foreach($models as $model => $categories)
                                                        <option value="{{ $model }}">{{ $model }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endisset
                        </div>
                        <div class="row">
                            @isset($filter['energies'])
                                <div class="filter-item">
                                    <div class="filter-item__inputs">
                                        <select name="energy" id="energy" class="select-multiple" aria-label="Energie"
                                                placeholder="Energie" multiple>
                                            @foreach($filter['energies'] as $energy)
                                                <option value="{{ $energy }}">{{ $energy }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endisset
                            <div class="filter-item">
                                <div class="filter-item__inputs">
                                    <input type="text" name="rangeSalesPriceIncludingTax-max"
                                           aria-label="Votre budget max"
                                           placeholder="Votre budget max" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="btn">Rechercher</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="estimate-cta d-col d-justify-center text-center"
                 style="background-image: url('