@extends('layouts.base')

@section('title')
    Senecartours - {{ $vehicule->libelle }}
@endsection

@push('css')
@endpush

@section('content')
    <!-- Agent Single Grid View -->
    <section class="our-agent-single pb90 bt1 pt30 mt70-992">
        <div class="container">
            <div class="row mb30">
                <div class="col-xl-12">
                    <div class="breadcrumb_content style2">
                        <ol class="breadcrumb float-start">
                            <li class="breadcrumb-item"><a href="{{ route('home.show') }}">{{__('messages.home')}}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('vehicle.show') }}">{{__('messages.car_for_rent')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ $vehicule->libelle }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid p0">
            <div class="row">
                <div class="col-lg-12">
                    <div class="single_page6_single_slider dots_none">
                        @foreach ($vehicule->images as $image)
                        <div class="item">
                            <div class="sp6_single_slider">
                                <div class="thumb">
                                    <img class="img-fluid" src="{{ asset('storage/' . $image->path) }}" width="300" height="300" alt="sp6_slider2.jpg">
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row mt30 mb30">
                <div class="col-lg-7 col-xl-8">
                    <div class="single_page_heading_content">
                        <div class="car_single_content_wrapper">
                            <h2 class="title">{{ $vehicule->libelle }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-xl-4">
                    <div class="single_page_heading_content text-start text-lg-end">
                        <div class="price_content">
                            <div class="price mt60 mb10 mt10-md">
                                <h3><small class="mr15"></small>{{ $vehicule->categorie->price_day }} F CFA / Jour</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-xl-8">
                    <div class="popular_listing_sliders single_page6_tabs row pr15">
                        <!-- Nav tabs -->
                        <div class="nav nav-tabs col-lg-12" role="tablist">
                            <button class="nav-link active" id="nav-location-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-location" role="tab" aria-controls="nav-location"
                                aria-selected="true">{{__('messages.location_info')}}</button>
                            <button class="nav-link" id="nav-description-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-description" role="tab" aria-controls="nav-description"
                                aria-selected="true">{{__('messages.description')}}</button>
                            <button class="nav-link" id="nav-overview-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-overview" role="tab" aria-controls="nav-overview"
                                aria-selected="false">{{__('messages.details_car')}}</button>
                        </div>
                        <!-- Tab panes -->
                        <div class="tab-content col-lg-12" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-location" role="tabpanel"
                                aria-labelledby="nav-location-tab">
                                <div class="opening_hour_widgets p30 bdr_none pl0 pr0">
                                    <div class="wrapper">
                                        <h4 class="title">{{__('messages.overview')}}</h4>
                                        <ul class="list-group">
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Prix Kilomètre</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->categorie->price_km }} F CFA</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Prix Jour</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->categorie->price_day }} F CFA</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Prix Semaine</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->categorie->price_week }} CFA</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Prix Mois</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->categorie->price_month }} F CFA</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-description" role="tabpanel"
                                aria-labelledby="nav-description-tab">
                                <div class="listing_single_description bdr_none pl0 pr0">
                                    <h4 class="mb30">{{__('messages.description')}} <span class="float-end body-color fz13">
                                            </span></h4>
                                    <p class="first-para">
                                        {{ $vehicule->description }}
                                    </p>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-overview" role="tabpanel"
                                aria-labelledby="nav-overview-tab">
                                <div class="opening_hour_widgets p30 bdr_none pl0 pr0">
                                    <div class="wrapper">
                                        <h4 class="title">{{__('messages.overview')}}</h4>
                                        <ul class="list-group">
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Fabriquant</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->modele->libelle }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Modele</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->modele->libelle }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Couleur</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->couleur }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Type de véhicule</div>
                                                </div>
                                                <span class="schedule">4x4</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Transmission</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->type_transmission }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Année</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->annee }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Nombre de Places</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->places }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Type de carburant</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->type_carburant }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Nombre de Portes</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->portes }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Nombre de Cylindres</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->cylindres }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto">
                                                    <div class="day">Confort</div>
                                                </div>
                                                <span class="schedule">{{ $vehicule->confort }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-xl-4">
                    <div class="offer_btns">
                        <div class="text-end">
                            <a href="{{ route('reservation.index', ['slug'=>$vehicule->slug]) }}" class="btn btn-thm ofr_btn1 btn-block mt0 mb20 d-flex align-items-center justify-content-center"><span
                                    class="flaticon-coin mr10 fz18 vam"></span>{{__('messages.reserve')}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Shopping Product -->
    <section class="our-shop pb100 bgc-f9">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="main-title text-center text-md-start mb15-sm">
                        <h2>{{__('messages.similar_cars')}}</h2>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center text-md-end mb30-sm">
                        <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 class="row">
                <div class="col-lg-12">
                    <div class="listing_item_4grid_slider nav_none">
                        @foreach ($similar_cars as $car)
                        <div class="item">
                            <div class="car-listing">
                                <div class="thumb">
                                    <img src="{{ asset('storage/' . $car->image) }}" alt="1.jpg">
                                    <div class="thmb_cntnt2">
                                        <ul class="mb0">
                                        </ul>
                                    </div>
                                    <div class="thmb_cntnt3">
                                        <ul class="mb0">
                                            <li class="list-inline-item"><a href="#"><span
                                                        class="flaticon-shuffle-arrows"></span></a></li>
                                            <li class="list-inline-item"><a href="#"><span
                                                        class="flaticon-heart"></span></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="details">
                                    <div class="wrapper">
                                        <h5 class="price">{{ $car->categorie->price_day }} F CFA</h5>
                                        <h6 class="title"><a href="{{ route('vehicule-details.show', ['slug'=>$car->slug]) }}">{{ $car->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-calendar me-2"></span>{{ $car->annee }}</a></li>
                                            <li class="list-inline-item"><a href="#"><span
                                                        class="flaticon-gas-station me-2"></span>{{ $car->type_carburant }}</a></li>
                                            <li class="list-inline-item"><a href="#"><span
                                                        class="flaticon-gear me-2"></span>{{ $car->type_transmission }}</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
    <script src="{{ asset('assets/js/slider.js') }}"></script>
    <script src="{{ asset('js/customs/details.js') }}"></script>
    @endpush
@endsection