<x-frontoffice.front-layout>

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

        <!-- section begin -->
        <section id="subheader" class="jarallax text-light">
            <img src="{{ asset('website/images/background/2.jpg') }}" class="jarallax-img" alt="">
            <div class="center-y relative text-center">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            {{-- <h1>{{ mb_strtoupper($car->brand->name) . ' ' . mb_strtoupper($car->modele->name) }}</h1> --}}
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- section close -->

        <section id="section-cars">
            <div class="container">
                <div class="row align-items-center">

                    @forelse ($cars as $car)
                        @php
                            $images = $car->images->toArray();
                            $path = $images[0]['image_path'];
                        @endphp
                        <div class="col-lg-4">
                            <div class="de-item mb30">
                                <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) }}

                                            <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="">{{ $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"
                                                    href="{{ route('car.details', $car->id) }}">Reserver</a>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                    <p class="text-center text-danger">Aucun véhicule de ce type n'est disponible pour l'instant</p>
                    @endforelse


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


    </div>

</x-frontoffice.front-layout>
