@extends('layouts.base')

@section('title')
    Senecartours - Accueil
@endsection

@push('css')
    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
@endpush

@section('content')
    <!-- Home Design -->
    <div class="main-banner-wrapper home3_style">
        <div class="banner-style-one no-dots owl-theme owl-carousel">
            @isset($sliders)
                @foreach ($sliders as $slider)
                    <div class="slide slide-one"
                        style="background-image: url({{ asset('storage/' . $slider->image) }});height: 640px;">

                        <div class="container">
                            <div class="row home-content pl20">
                                <div class="col-sm-9 col-md-6 col-lg-5 col-xl-3">
                                    <div class="sliding-box-object">
                                        <div class="car-listing d-none d-sm-block">
                                            <div class="details">
                                                <div class="wrapper">
                                                    {{-- <h5 class="price">{{ __('messages.from') }}
                                                        {{ $slider->vehicules->categorie->price_day }} F CFA /
                                                        {{ __('messages.day') }}</h5> --}}
                                                    <h6 class="title"><a
                                                            href="{{ route('vehicule-details.show', ['slug' => $slider->vehicules->slug]) }}">{{ $slider->vehicules->libelle }}</a>
                                                    </h6>
                                                    <div class="listign_review">
                                                        <ul class="mb0">
                                                            <li class="list-inline-item"><a href="#"><i
                                                                        class="fa fa-star"></i></a></li>
                                                            <li class="list-inline-item"><a href="#"><i
                                                                        class="fa fa-star"></i></a></li>
                                                            <li class="list-inline-item"><a href="#"><i
                                                                        class="fa fa-star"></i></a></li>
                                                            <li class="list-inline-item"><a href="#"><i
                                                                        class="fa fa-star"></i></a></li>
                                                            <li class="list-inline-item"><a href="#"><i
                                                                        class="fa fa-star"></i></a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="listing_footer">
                                                    <ul class="mb15">
                                                        <li class="list-inline-item"><a href="#"><span
                                                                    class="flaticon-calendar me-2"></span>{{ $slider->vehicules->annee }}</a>
                                                        </li>
                                                        <li class="list-inline-item"><a href="#"><span
                                                                    class="flaticon-gas-station me-2"></span>{{ $slider->vehicules->type_carburant }}</a>
                                                        </li>
                                                        <li class="list-inline-item"><a href="#"><span
                                                                    class="flaticon-gear me-2"></span>{{ $slider->vehicules->type_transmission }}</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <a href="{{ route('reservation.index', ['slug' => $slider->vehicules->slug]) }}"
                                                    class="btn btn_home3_style btn-thm">{{ __('messages.reserve') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endisset
        </div>
        <div class="carousel-btn-block banner-carousel-btn">
            <span class="carousel-btn left-btn"><i class="flaticon-left-arrow left"></i></span>
            <span class="carousel-btn right-btn"><i class="flaticon-right-arrow right"></i></span>
        </div>
    </div>

    <!-- We Are The Best -->
    <section class="we-are-best pb90">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 m-auto">
                    <div class="main-title text-center">
                        <h2 style="font-family: Poppins">
                            <h2 style="font-family: Poppins; color: #e7651d"><span class="auto-type"></span></h2>
                            </h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-xl-4 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">
                    <div class="why_chose_us home7_style">
                        <div class="icon style2"><span class="fi fi-rr-flag"></span></div>
                        <div class="details">
                            <h5 class="title">{{ __('messages.mission_title') }}</h5>
                            <p><strong>SENECARTOURS</strong> {{ __('messages.mission_text') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
                    <div class="why_chose_us home7_style">
                        <div class="icon style3"><span class="flaticon-car"></span></div>
                        <div class="details">
                            <h5 class="title">{{ __('messages.parc_title') }}</h5>
                            <p>
                                <strong>SENECARTOURS</strong> {{ __('messages.parc_text') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s">
                    <div class="why_chose_us home7_style">
                        <div class="icon"><span class="fi fi-sr-diamond"></span></div>
                        <div class="details">
                            <h5 class="title">{{ __('messages.specialist_title') }}</h5>
                            <p>
                                <strong>SENECARTOURS</strong>, {{ __('messages.specialist_text') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Product  -->
    <section class="featured-product" style="margin-top: -100px">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="main-title text-center">
                        <h2 style="font-family: Poppins">{{ __('messages.car_for_rent') }}</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="popular_listing_sliders row">
                        <!-- Nav tabs -->
                        <div style="max-width: 650px !important; overflow-x: scroll; overflow: hidden;"
                            class="nav nav-tabs col-lg-12 justify-content-center" role="tablist">
                            @foreach ($types as $type)
                                @if ($loop->first)
                                    <button class="nav-link active" id="nav-{{ $type->libelle }}-tab"
                                        data-bs-toggle="tab" data-bs-target="#nav-{{ $type->libelle }}" role="tab"
                                        aria-controls="nav-{{ $type->libelle }}" aria-selected="true">
                                        {{ $type->libelle }}
                                    </button>
                                @else
                                    <button class="nav-link" id="nav-{{ $type->libelle }}-tab" data-bs-toggle="tab"
                                        data-bs-target="#nav-{{ $type->libelle }}" role="tab"
                                        aria-controls="nav-{{ $type->libelle }}" aria-selected="true">
                                        {{ $type->libelle }}
                                    </button>
                                @endif
                            @endforeach
                        </div>
                        <!-- Tab panes -->
                        <div class="tab-content col-lg-12" id="nav-tabContent">
                            @foreach ($types as $type)
                                @if ($loop->first)
                                    <div class="tab-pane fade show active" id="nav-{{ $type->libelle }}" role="tabpanel"
                                        aria-labelledby="nav-{{ $type->libelle }}-tab">
                                        <div class="row">
                                            @foreach ($type->categories as $category)
                                                @foreach ($category->vehicules as $vehicule)
                                                    <div class="col-sm-6 col-lg-4 col-xl-3">
                                                        <div class="car-listing">
                                                            <a
                                                                href="{{ route('vehicule-details.show', ['slug' => $vehicule->slug]) }}">
                                                                <div class="thumb">
                                                                    <img src="{{ asset('storage/' . $vehicule->image) }}"
                                                                        alt="{{ $vehicule->libelle }}">
                                                                    <div class="thmb_cntnt2">
                                                                    </div>
                                                                </div>
                                                                <div class="details">
                                                                    <div class="wrapper">
                                                                        {{-- <h5 class="price">
                                                                            {{ $category->price_day }} F CFA /
                                                                            {{ __('messages.day') }}</h5> --}}
                                                                        <h6 class="title"><a
                                                                                href="{{ route('vehicule-details.show', ['slug' => $vehicule->slug]) }}">
                                                                                {{ $vehicule->libelle }}
                                                                            </a></h6>
                                                                        <div class="listign_review">
                                                                            <ul class="mb0">
                                                                                <li class="list-inline-item"><a href="#"><i
                                                                                            class="fa fa-star"></i></a>
                                                                                </li>
                                                                                <li class="list-inline-item"><a href="#"><i
                                                                                            class="fa fa-star"></i></a>
                                                                                </li>
                                                                                <li class="list-inline-item"><a href="#"><i
                                                                                            class="fa fa-star"></i></a>
                                                                                </li>
                                                                                <li class="list-inline-item"><a href="#"><i
                                                                                            class="fa fa-star"></i></a>
                                                                                </li>
                                                                                <li class="list-inline-item"><a href="#"><i
                                                                                            class="fa fa-star"></i></a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                    <div class="listing_footer">
                                                                        <ul class="mb0">
                                                                            <li class="list-inline-item"><a href="#"><span
                                                                                        class="flaticon-road-perspective me-2"></span>{{ $vehicule->annee }}</a>
                                                                            </li>
                                                                            <li class="list-inline-item"><a href="#"><span
                                                                                        class="flaticon-gas-station me-2"></span>{{ $vehicule->type_carburant }}</a>
                                                                            </li>
                                                                            <li class="list-inline-item"><a href="#"><span
                                                                                        class="flaticon-gear me-2"></span>{{ $vehicule->type_transmission }}</a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endforeach
                                        </div>
                                    </div>
                                @else
                                    <div class="tab-pane fade" id="nav-{{ $type->libelle }}" role="tabpanel"
                                        aria-labelledby="nav-{{ $type->libelle }}-tab">
                                        <div class="row">
                                            @foreach ($type->categories as $category)
                                                @foreach ($category->vehicules as $vehicule)
                                                    <div class="col-sm-6 col-lg-4 col-xl-3">
                                                        <div class="car-listing">
                                                            <div class="thumb">
                                                                <img src="{{ asset('storage/' . $vehicule->image) }}"
                                                                    alt="1.jpg">
                                                                <div class="thmb_cntnt2">
                                                                    <ul class="mb0">
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="details">
                                                                <div class="wrapper">
                                                                    {{-- <h5 class="price">
                                                                        {{ $category->price_day }} F CFA /
                                                                        {{ __('messages.day') }}</h5> --}}
                                                                    <h6 class="title"><a
                                                                            href="{{ route('vehicule-details.show', ['slug' => $vehicule->slug]) }}">
                                                                            {{ $vehicule->libelle }}
                                                                        </a></h6>
                                                                    <div class="listign_review">
                                                                        <ul class="mb0">
                                                                            <li class="list-inline-item"><a href="#"><i
                                                                                        class="fa fa-star"></i></a>
                                                                            </li>
                                                                            <li class="list-inline-item"><a href="#"><i
                                                                                        class="fa fa-star"></i></a>
                                                                            </li>
                                                                            <li class="list-inline-item"><a href="#"><i
                                                                                        class="fa fa-star"></i></a>
                                                                            </li>
                                                                            <li class="list-inline-item"><a href="#"><i
                                                                                        class="fa fa-star"></i></a>
                                                                            </li>
                                                                            <li class="list-inline-item"><a href="#"><i
                                                                                        class="fa fa-star"></i></a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div class="listing_footer">
                                                                    <ul class="mb0">
                                                                        <li class="list-inline-item"><a href="#"><span
                                                                                    class="flaticon-road-perspective me-2"></span>{{ $vehicule->annee }}</a>
                                                                        </li>
                                                                        <li class="list-inline-item"><a href="#"><span
                                                                                    class="flaticon-gas-station me-2"></span>{{ $vehicule->type_carburant }}</a>
                                                                        </li>
                                                                        <li class="list-inline-item"><a href="#"><span
                                                                                    class="flaticon-gear me-2"></span>{{ $vehicule->type_transmission }}</a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt20">
                <div class="col-lg-12">
                    <div class="text-center">
                        <a href="{{ route('vehicle.show') }}" class="more_listing">{{ __('messages.show_cars') }}
                            <span class="icon"><span class="fas fa-plus"></span></span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Popular Listing -->
    <section class="popular-listing pt0 pb110">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 offset-lg-3">
                    <div class="main-title text-center">
                        <h2 style="font-family: Poppins">{{ __('messages.popular_cars') }}</h2>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="home1_popular_listing home4_style wow fadeIn" data-wow-duration="1s" data-wow-delay="0.1s">
                    <div class="listing_item_car_grid_slider ">
                        @isset($populars)
                            @foreach ($populars as $popular)
                                <div class="item">
                                    <div class="carlisting-popular-vehicles">
                                        <div class="details text-center">
                                            <div class="wrapper">
                                                {{-- <h5 class="price text-thm4">{{ $popular->vehicules->categorie->price_day }}
                                                    F CFA / {{ __('messages.day') }}</h5> --}}
                                                <h6 class="title"><a
                                                        href="{{ route('vehicule-details.show', ['slug' => $popular->vehicules->slug]) }}">{{ $popular->vehicules->libelle }}</a>
                                                </h6>
                                                <div class="listign_review">
                                                    <ul>
                                                        <li class="list-inline-item"><a href="#"><i
                                                                    class="fa fa-star"></i></a></li>
                                                        <li class="list-inline-item"><a href="#"><i
                                                                    class="fa fa-star"></i></a></li>
                                                        <li class="list-inline-item"><a href="#"><i
                                                                    class="fa fa-star"></i></a></li>
                                                        <li class="list-inline-item"><a href="#"><i
                                                                    class="fa fa-star"></i></a></li>
                                                        <li class="list-inline-item"><a href="#"><i
                                                                    class="fa fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="listing_footer">
                                                <ul>
                                                    <li class="list-inline-item"><a href="#"><span
                                                                class="flaticon-calendar me-2"></span>{{ $popular->vehicules->annee }}</a>
                                                    </li>
                                                    <li class="list-inline-item"><a href="#"><span
                                                                class="flaticon-gas-station me-2"></span>{{ $popular->vehicules->type_carburant }}</a>
                                                    </li>
                                                    <li class="list-inline-item"><a href="#"><span
                                                                class="flaticon-gear me-2"></span>{{ $popular->vehicules->type_transmission }}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="thumb">
                                            <img class="img-fluid" src="{{ asset('storage/' . $popular->image) }}"
                                                alt="1.png">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endisset
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Partners -->
    <section class="our-partner pt0 pb100">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 offset-lg-3">
                    <div class="main-title text-center">
                        <h2 style="font-family: Poppins">{{ __('messages.our_brands') }}</h2>
                    </div>
                </div>
            </div>
            <div class="partner_divider">
                <div class="row">
                    @isset($marques)
                        @foreach ($marques as $marque)
                            <div class="col-6 col-xs-6 col-sm-4 col-xl-2 wow fadeInUp" data-wow-duration="1s"
                                data-wow-delay="0.1s">
                                <div class="partner_item">
                                    <img src="{{ asset('storage/' . $marque->image) }}" width="100" height="60" alt="1.png">
                                </div>
                            </div>
                        @endforeach
                    @endisset
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <script src="{{ asset('assets/js/slider.js') }}"></script>
        <script src="{{ asset('js/customs/home.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
        <script>
            var locale = '{{ config('app.locale') }}';

            var typed = new Typed(".auto-type", {
                strings: ['UNE NOUVELLE VISION DU TRANSPORT', 'SENECARTOURS, LEADER DE LA LOCATION DE VEHICULES AU SENEGAL.'],
                typeSpeed: 50,
                backSpeed: 50,
                loop: true
            });
        </script>
        <script>
            $('#date_depart').datepicker();
        </script>
    @endpush
@endsection