<x-frontoffice.front-layout>

    <div class="no-bottom no-top" id="content">
        <div id="top"></div>

        <section id="section-hero" aria-label="section" class="jarallax">
            <img src="{{ asset('website/images/background/1.jpg') }}" class="jarallax-img" alt="">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-12 text-light">
                        <div class="spacer-double"></div>
                        <div class="spacer-double"></div>
                        <h1 class="mb-2" style="font-size: 51px;">Vous cherchez un <span
                                class="id-color theme-btn-cl-orange">véhicule</span> ? Vous êtes au bon endroit.</h1>
                        <div class="spacer-single"></div>
                    </div>

                    <div class="col-lg-12">
                        <div class="spacer-single sm-hide"></div>
                        <div class="p-4 rounded-3 shadow-soft" data-bgcolor="#ffffff">
                            {{-- <form name="contactForm" id='contact_form' method="post">

                                <div id="step-1" class="row">
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <div class="col-lg-6 mb20">
                                                <h5>Pick Up Location</h5>
                                                <input type="text" name="PickupLocation" onfocus="geolocate()"
                                                    placeholder="Enter your pickup location" id="autocomplete"
                                                    autocomplete="off" class="form-control">

                                                <div class="jls-address-preview jls-address-preview--hidden">
                                                    <div class="jls-address-preview__header">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-lg-6 mb20">
                                                <h5>Drop Off Location</h5>
                                                <input type="text" name="DropoffLocation" onfocus="geolocate()"
                                                    placeholder="Enter your dropoff location" id="autocomplete2"
                                                    autocomplete="off" class="form-control">

                                                <div class="jls-address-preview jls-address-preview--hidden">
                                                    <div class="jls-address-preview__header">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-lg-6 mb20">
                                                <h5>Pick Up Date & Time</h5>
                                                <div class="date-time-field">
                                                    <input type="text" id="date-picker" name="Pick Up Date"
                                                        value="">
                                                    <select name="Pick Up Time" id="pickup-time">
                                                        <option selected disabled value="Select time">Time</option>
                                                        <option value="00:00">00:00</option>
                                                        <option value="00:30">00:30</option>
                                                        <option value="01:00">01:00</option>
                                                        <option value="01:30">01:30</option>
                                                        <option value="02:00">02:00</option>
                                                        <option value="02:30">02:30</option>
                                                        <option value="03:00">03:00</option>
                                                        <option value="03:30">03:30</option>
                                                        <option value="04:00">04:00</option>
                                                        <option value="04:30">04:30</option>
                                                        <option value="05:00">05:00</option>
                                                        <option value="05:30">05:30</option>
                                                        <option value="06:00">06:00</option>
                                                        <option value="06:30">06:30</option>
                                                        <option value="07:00">07:00</option>
                                                        <option value="07:30">07:30</option>
                                                        <option value="08:00">08:00</option>
                                                        <option value="08:30">08:30</option>
                                                        <option value="09:00">09:00</option>
                                                        <option value="09:30">09:30</option>
                                                        <option value="10:00">10:00</option>
                                                        <option value="10:30">10:30</option>
                                                        <option value="11:00">11:00</option>
                                                        <option value="11:30">11:30</option>
                                                        <option value="12:00">12:00</option>
                                                        <option value="12:30">12:30</option>
                                                        <option value="13:00">13:00</option>
                                                        <option value="13:30">13:30</option>
                                                        <option value="14:00">14:00</option>
                                                        <option value="14:30">14:30</option>
                                                        <option value="15:00">15:00</option>
                                                        <option value="15:30">15:30</option>
                                                        <option value="16:00">16:00</option>
                                                        <option value="16:30">16:30</option>
                                                        <option value="17:00">17:00</option>
                                                        <option value="17:30">17:30</option>
                                                        <option value="18:00">18:00</option>
                                                        <option value="18:30">18:30</option>
                                                        <option value="19:00">19:00</option>
                                                        <option value="19:30">19:30</option>
                                                        <option value="20:00">20:00</option>
                                                        <option value="20:30">20:30</option>
                                                        <option value="21:00">21:00</option>
                                                        <option value="21:30">21:30</option>
                                                        <option value="22:00">22:00</option>
                                                        <option value="22:30">22:30</option>
                                                        <option value="23:00">23:00</option>
                                                        <option value="23:30">23:30</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-lg-6 mb20">
                                                <h5>Return Date & Time</h5>
                                                <div class="date-time-field">
                                                    <input type="text" id="date-picker-2" name="Collection Date"
                                                        value="">
                                                    <select name="Collection Time" id="collection-time">
                                                        <option selected disabled value="Select time">Time</option>
                                                        <option value="00:00">00:00</option>
                                                        <option value="00:30">00:30</option>
                                                        <option value="01:00">01:00</option>
                                                        <option value="01:30">01:30</option>
                                                        <option value="02:00">02:00</option>
                                                        <option value="02:30">02:30</option>
                                                        <option value="03:00">03:00</option>
                                                        <option value="03:30">03:30</option>
                                                        <option value="04:00">04:00</option>
                                                        <option value="04:30">04:30</option>
                                                        <option value="05:00">05:00</option>
                                                        <option value="05:30">05:30</option>
                                                        <option value="06:00">06:00</option>
                                                        <option value="06:30">06:30</option>
                                                        <option value="07:00">07:00</option>
                                                        <option value="07:30">07:30</option>
                                                        <option value="08:00">08:00</option>
                                                        <option value="08:30">08:30</option>
                                                        <option value="09:00">09:00</option>
                                                        <option value="09:30">09:30</option>
                                                        <option value="10:00">10:00</option>
                                                        <option value="10:30">10:30</option>
                                                        <option value="11:00">11:00</option>
                                                        <option value="11:30">11:30</option>
                                                        <option value="12:00">12:00</option>
                                                        <option value="12:30">12:30</option>
                                                        <option value="13:00">13:00</option>
                                                        <option value="13:30">13:30</option>
                                                        <option value="14:00">14:00</option>
                                                        <option value="14:30">14:30</option>
                                                        <option value="15:00">15:00</option>
                                                        <option value="15:30">15:30</option>
                                                        <option value="16:00">16:00</option>
                                                        <option value="16:30">16:30</option>
                                                        <option value="17:00">17:00</option>
                                                        <option value="17:30">17:30</option>
                                                        <option value="18:00">18:00</option>
                                                        <option value="18:30">18:30</option>
                                                        <option value="19:00">19:00</option>
                                                        <option value="19:30">19:30</option>
                                                        <option value="20:00">20:00</option>
                                                        <option value="20:30">20:30</option>
                                                        <option value="21:00">21:00</option>
                                                        <option value="21:30">21:30</option>
                                                        <option value="22:00">22:00</option>
                                                        <option value="22:30">22:30</option>
                                                        <option value="23:00">23:00</option>
                                                        <option value="23:30">23:30</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <input type='submit' id='send_message' value='Find a Vehicle'
                                            class="btn-main pull-right">
                                    </div>

                                </div>

                                

                            </form> --}}
                            <form method="post" action="{{ route('search.car') }}">
                                @csrf
                                <div class="form-row row">
                                    <div class="form-group col-md-4">
                                        <label for="inputState">Type de véhicule</label>
                                        <select id="inputState" class="form-control js-example-basic-single"
                                            name="type_id">
                                            @forelse ($types as $type)
                                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="start">Date de prise</label>
                                        <input class="form-control" id="start"
                                            placeholder="Choisir la date de depart">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="end">Date de retour</label>
                                        <input class="form-control" id="end" placeholder="Choisir la date de fin">
                                    </div>
                                </div>

                                <button type="submit"
                                    class="btn btn-dark w-100 mt-3 theme-btn-bg-orange">Rechercher</button>
                            </form>
                        </div>
                    </div>

                    {{-- <div class="spacer-double"></div> --}}

                    {{-- <div class="row">
                        <div class="col-lg-12 text-light">
                            <div class="container-timeline">
                                <ul>
                                    <li>
                                        <h4>Choisir un véhicule</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor incididunt ut labore</p>
                                    </li>
                                    <li>
                                        <h4>Lieu et date de la sélection</h4>
                                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                                            eu fugiat nulla</p>
                                    </li>
                                    <li>
                                        <h4>Faire une demande de réservation</h4>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                                            aliquip ex ea commodo</p>
                                    </li>
                                    <li>
                                        <h4>Asseyez-vous &amp ; détendez-vous</h4>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                                            aliquip ex ea commodo</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div> --}}

                </div>
            </div>
        </section>


        <section id="section-cars">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 offset-lg-3 text-center">
                        <h2>Notre selection <span class="theme-btn-cl-blue">Range Rover</span></h2>
                        <p>Sit labore et officia eiusmod tempor officia eiusmod dolor exercitation nulla dolore ut id
                            velit et ut anim.</p>
                        <div class="spacer-20"></div>
                    </div>

                    <div class="clearfix"></div>

                    @forelse ($rangeRoverCars as $rangeRoverCar)
                        @php
                            $images = $rangeRoverCar->images;
                        @endphp
                        <div class="col-lg-4">
                            <div class="de-item mb30">
                                <div class="d-img">
                                    <img src="{{ asset('storage/' . $images[0]->image_path) }}" class="img-fluid"
                                        alt="">
                                </div>
                                <div class="d-info">
                                    <div class="d-text">
                                        <h4>{{ mb_strtoupper($rangeRoverCar->brand->name) . ' ' . mb_strtoupper($rangeRoverCar->modele->name) }}

                                            <div class="d-item_like">
                                                <i class="fa fa-heart"></i><span>21</span>
                                            </div>
                                            <div class="d-atr-group">
                                                <span class="d-atr"><img src="website/images/icons/1.svg"
                                                        alt="">{{ $rangeRoverCar->number_of_places }}</span>
                                                <span class="d-atr d-none"><img src="website/images/icons/2.svg"
                                                        alt="">2</span>
                                                <span class="d-atr"><img src="website/images/icons/3.svg"
                                                        alt="">{{ $rangeRoverCar->number_of_doors }}</span>
                                                <span class="d-atr d-none"><img src="website/images/icons/4.svg"
                                                        alt="">SUV</span>
                                            </div>
                                            <div class="d-price">
                                                Prix par jour
                                                <span>{{ number_format($rangeRoverCar->price, 0, ',', ' ') . ' XOF' }}</span>
                                                <a class="btn-main theme-btn-bg-orange"
                                                    href="{{ route('car.details', $rangeRoverCar->id) }}">Consulter</a>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @empty
                    <span class="text-center text-danger fs-6">Aucun vehicule disponible</span>
                    @endforelse


                </div>
            </div>
        </section>

        <section class="text-light jarallax" aria-label="section">
            <img src="{{ asset('website/images/background/3.jpg') }}" alt="" class="jarallax-img">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-light">
                        <div class="container-timeline">
                            <ul>
                                <li>
                                    <h4>Choisir un véhicule</h4>
                                    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                                        do eiusmod tempor
                                        incididunt ut</p>
                                </li>
                                <li>
                                    <h4>Lieu & date</h4>
                                    <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit
                                        esse cillum dolore eu
                                        fugiat nulla</p>
                                </li>
                                <li>
                                    <h4>Faire la demande de réservation</h4>
                                    <p class="text-justify">Ut enim ad minim veniam, quis nostrud exercitation ullamco
                                        laboris </p>
                                </li>
                                <li>
                                    <h4>Asseyez-vous &amp ; détendez-vous</h4>
                                    <p class="text-justify">Ut enim ad minim veniam, quis nostrud exercitation ullamco
                                        laboris </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        {{-- <section aria-label="section" class="pt40 pb40 text-light" data-bgcolor="#181818">
            <div class="wow fadeInRight d-flex">
                <div class="de-marquee-list">
                    <div class="d-item">

                        @forelse($brands as $brand)
                            <span class="d-item-txt">{{ ucfirst($brand->name) }}</span>
                            <span class="d-item-display">
                                <i class="d-item-dot"></i>
                            </span>
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
        </section> --}}

        <section aria-label="section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 offset-lg-3 text-center">
                        <h2>Nos caractéristiques</h2>
                        <p>Dolor esse sint officia est voluptate et qui deserunt et est eiusmod cillum mollit sunt nulla
                            cillum sit ut culpa ullamco.</p>
                        <div class="spacer-20"></div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-lg-3">
                        <div class="box-icon s2 p-small mb20 wow fadeInRight" data-wow-delay=".5s">
                            <i class="fa bg-color fa-trophy"></i>
                            <div class="d-inner text-justify">
                                <h4>Des services de premier ordre</h4>
                                Est dolore ut laboris eu enim eu veniam nostrud esse laborum duis consequat nostrud id
                            </div>
                        </div>
                        <div class="box-icon s2 p-small mb20 wow fadeInL fadeInRight" data-wow-delay=".75s">
                            <i class="fa bg-color fa-road"></i>
                            <div class="d-inner text-justify">
                                <h4>Assistance routière 24/7</h4>
                                Est dolore ut laboris eu enim eu veniam nostrud esse laborum duis consequat nostrud id
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <img src="{{ asset('website/images/misc/car.png') }}" alt=""
                            class="img-fluid wow fadeInUp">
                    </div>

                    <div class="col-lg-3">
                        <div class="box-icon s2 d-invert p-small mb20 wow fadeInL fadeInLeft" data-wow-delay="1s">
                            <i class="fa bg-color fa-tag"></i>
                            <div class="d-inner text-justify">
                                <h4>La qualité à moindre coût</h4>
                                Est dolore ut laboris eu enim eu veniam nostrud esse laborum duis consequat nostrud id
                            </div>
                        </div>
                        <div class="box-icon s2 d-invert p-small mb20 wow fadeInL fadeInLeft" data-wow-delay="1.25s">
                            <i class="fa bg-color fa-map-pin"></i>
                            <div class="d-inner text-justify">
                                <h4>Prise en charge et dépôt gratuits</h4>
                                Est dolore ut laboris eu enim eu veniam nostrud esse laborum duis consequat nostrud id
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section class="text-light jarallax">
            <img src="{{ asset('website/images/background/2.jpg') }}" class="jarallax-img" alt="">
            <div class="container">

                <div class="spacer-double"></div>
                <div class="row text-center">
                    <div class="col-md-3 col-sm-6 mb-sm-30">
                        <div class="de_count transparent text-light wow fadeInUp">
                            <h3 class="timer" data-to="15425" data-speed="3000">0</h3>
                            Heures de travail
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 mb-sm-30">
                        <div class="de_count transparent text-light wow fadeInUp">
                            <h3 class="timer" data-to="8745" data-speed="3000">0</h3>
                            Clients pris en charge
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 mb-sm-30">
                        <div class="de_count transparent text-light wow fadeInUp">
                            <h3 class="timer" data-to="235" data-speed="3000">0</h3>
                            Prix remportés
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 mb-sm-30">
                        <div class="de_count transparent text-light wow fadeInUp">
                            <h3 class="timer" data-to="15" data-speed="3000">0</h3>
                            Années d'expérience
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="section-car">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 offset-lg-3 text-center">
                        <h2>Notre flotte de <span class="theme-btn-cl-blue">véhicules</span></h2>
                        <p>Sit labore et officia eiusmod tempor officia eiusmod dolor exercitation nulla dolore ut id
                            velit et ut anim.</p>
                        <div class="spacer-20"></div>
                    </div>

                    <div id="items-carousel" class="owl-carousel wow fadeIn">


                        {{-- <div class="col-lg-12">
                            <div class="de-item mb30">
                                <div class="d-img">
                                    <img src="{{ asset('website/images/cars/jeep-renegade.jpg') }}" class="img-fluid" alt="">
                                </div>
                                <div class="d-info">
                                    <div class="d-text">
                                        <h4>Jeep Renegade</h4>
                                        <div class="d-item_like">
                                            <i class="fa fa-heart"></i><span>74</span>
                                        </div>
                                        <div class="d-atr-group">
                                            <span class="d-atr"><img src="images/icons/1.svg" alt="">5</span>
                                            <span class="d-atr"><img src="images/icons/2.svg" alt="">2</span>
                                            <span class="d-atr"><img src="images/icons/3.svg" alt="">4</span>
                                            <span class="d-atr"><img src="images/icons/4.svg" alt="">SUV</span>
                                        </div>
                                        <div class="d-price">
                                            Daily rate from <span>$265</span>
                                            <a class="btn-main theme-btn-bg-orange" href="car-single.html">Rent Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}

                        @forelse($cars as $car)
                            @php
                                $images = $car->images->toArray();
                                $path = $images[0]['image_path'];
                            @endphp
                            <div class="col-lg-12">
                                <div class="de-item mb30">
                                    <div class="">
                                        @if ($car['status'] === 2)
                                            <span class="bg-danger p-3 text-white">Occupée</span>   
                                        {{-- @else --}}
                                            
                                        @endif
                                    </div>
                                    <div class="d-img">
                                        <img src="{{ asset('car_images/' .  $path) }}" class="img-fluid"
                                            alt="">
                                    </div>
                                    <div class="d-info">
                                        <div class="d-text">
                                            <h4>{{ mb_strtoupper($car->brand->name) . ' ' . mb_strtoupper($car->modele->name) }}
                                            </h4>
                                            <div class="d-item_like">
                                                <i class="fa fa-heart"></i><span>74</span>
                                            </div>
                                            <div class="d-atr-group">
                                                <span class="d-atr"><img src="website/images/icons/1.svg"
                                                        alt="">{{ $car->number_of_places }}</span>
                                                <span class="d-atr d-none"><img src="website/images/icons/2.svg"
                                                        alt="">2</span>
                                                <span class="d-atr"><img src="website/images/icons/3.svg"
                                                        alt="">{{ $car->number_of_doors }}</span>
                                                <span class="d-atr d-none"><img src="website/images/icons/4.svg"
                                                        alt="">SUV</span>
                                            </div>
                                            <div class="d-price">
                                                Prix par jour
                                                <span>{{ number_format($car->price, 0, ',', ' ') . ' XOF' }}</span>
                                                <a class="btn-main text-white"
                                                    href="{{ route('car.details', $car->id) }}">Consulter</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                        @endforelse

                    </div>

                </div>
            </div>
        </section>

        <section id="section-call-to-action" class="pt60 pb60 text-light theme-btn-bg-orange">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 offset-lg-1">
                        <h2 class="s2" style="font-size: 33px;line-height: 40px;">Appellez-nous pour plus
                            d'informations. Le service clientèle de Rentaly est là pour vous aider à tout moment.</h2>
                    </div>

                    <div class="col-lg-5 text-lg-center text-sm-center">
                        <div class="phone-num-big ">
                            <i class="fa fa-phone"></i>
                            <span class="pnb-text">
                                Contactez-nous
                            </span>
                            <span class="pnb-num">
                                + 225 07 01 255 450
                            </span>
                        </div>
                        <a href="#" class="btn-main theme-btn-bg-orange">Contact Us</a>
                    </div>
                </div>
            </div>
        </section>










        <section aria-label="section" class="pt40 pb40 text-light" data-bgcolor="#181818">
            <div class="wow fadeInRight d-flex">
                <div class="de-marquee-list">
                    <div class="d-item">
                        @forelse($brands as $brand)
                            <span class="item-txt">{{ ucfirst($brand->name) }}</span>
                            <span class="d-item-display">
                                <i class="d-item-dot"></i>
                            </span>
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
        </section>

    </div>

    </x-website.app-layout>
