@extends('layouts.master')
@section('title', 'Voiture')
@section('accueilactive', 'active') 
@section('content')

<!-- Breadcrumb section --> 
<section class="breadcrumb__section section--padding">
    <div class="container">
        <div class="breadcrumb__content text-center" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="100">
            <h1 class="breadcrumb__title h2">Voiture</h1>
            <ul class="breadcrumb__menu d-flex justify-content-center">
                <li class="breadcrumb__menu--items"><a class="breadcrumb__menu--link" href="{{url('/')}}">Accueil</a></li>
                <li><span><svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.22321 4.65179C5.28274 4.71131 5.3125 4.77976 5.3125 4.85714C5.3125 4.93452 5.28274 5.00298 5.22321 5.0625L1.0625 9.22321C1.00298 9.28274 0.934524 9.3125 0.857143 9.3125C0.779762 9.3125 0.71131 9.28274 0.651786 9.22321L0.205357 8.77679C0.145833 8.71726 0.116071 8.64881 0.116071 8.57143C0.116071 8.49405 0.145833 8.4256 0.205357 8.36607L3.71429 4.85714L0.205357 1.34821C0.145833 1.28869 0.116071 1.22024 0.116071 1.14286C0.116071 1.06548 0.145833 0.997023 0.205357 0.9375L0.651786 0.491071C0.71131 0.431547 0.779762 0.401785 0.857143 0.401785C0.934524 0.401785 1.00298 0.431547 1.0625 0.491071L5.22321 4.65179Z" fill="#706C6C"/>
                    </svg>
                    </span></li>
                <li><span class="breadcrumb__menu--text">Voitures </span></li>
            </ul>
        </div>
    </div>
</section>
<!-- Breadcrumb section .\ -->

<!-- Listing page section -->
<section class="listing__page--section section--padding">
    <div class="container">
        <div class="row column-reverse-md">
            <div class="col-lg-4">
                <div class="listing__widget">
                    <div class="widget__search mb-30" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="100">
                        <div class="widget__search--input position-relative">
                            <input class="widget__search--input__field" placeholder="Rechercher un produit" type="text">
                            <button class="widget__search--btn"><svg width="16" height="17" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.10714 9.54464C9.89286 8.75893 10.2857 7.81548 10.2857 6.71429C10.2857 5.61309 9.89286 4.67262 9.10714 3.89286C8.32738 3.10714 7.38691 2.71428 6.28571 2.71428C5.18452 2.71428 4.24107 3.10714 3.45536 3.89286C2.6756 4.67262 2.28571 5.61309 2.28571 6.71429C2.28571 7.81548 2.6756 8.75893 3.45536 9.54464C4.24107 10.3244 5.18452 10.7143 6.28571 10.7143C7.38691 10.7143 8.32738 10.3244 9.10714 9.54464ZM14.8571 14.1429C14.8571 14.4524 14.744 14.7202 14.5179 14.9464C14.2917 15.1726 14.0238 15.2857 13.7143 15.2857C13.3929 15.2857 13.125 15.1726 12.9107 14.9464L9.84822 11.8929C8.78274 12.631 7.59524 13 6.28571 13C5.43452 13 4.61905 12.8363 3.83929 12.5089C3.06548 12.1756 2.39583 11.7292 1.83036 11.1696C1.27083 10.6042 0.824405 9.93452 0.491071 9.16071C0.16369 8.38095 0 7.56548 0 6.71429C0 5.86309 0.16369 5.05059 0.491071 4.27678C0.824405 3.49702 1.27083 2.82738 1.83036 2.26786C2.39583 1.70238 3.06548 1.25595 3.83929 0.928571C4.61905 0.595237 5.43452 0.428571 6.28571 0.428571C7.13691 0.428571 7.94941 0.595237 8.72322 0.928571C9.50298 1.25595 10.1726 1.70238 10.7321 2.26786C11.2976 2.82738 11.744 3.49702 12.0714 4.27678C12.4048 5.05059 12.5714 5.86309 12.5714 6.71429C12.5714 8.02381 12.2024 9.21131 11.4643 10.2768L14.5268 13.3393C14.747 13.5595 14.8571 13.8274 14.8571 14.1429Z" fill="currentColor"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="listing__widget--inner" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="150">
                        <div class="widget__list mb-30">
                            <h2 class="widget__title mb-15">A vendre / A louer</h2>
                            <ul class="widget__catagories">
                                <li class="widget__catagories__list">
                                    <label class="widget__catagories--label" for="check1">A vendre</label>
                                    <input class="widget__catagories--input" id="check1" type="checkbox">
                                    <span class="widget__catagories--checkmark"></span>
                                </li>
                                <li class="widget__catagories__list">
                                    <label class="widget__catagories--label" for="check2">A louer</label>
                                    <input class="widget__catagories--input" id="check2" type="checkbox">
                                    <span class="widget__catagories--checkmark"></span>
                                </li>
                                
                            </ul>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="listing__page--wrapper">
                    
                    <div class="listing__main--content">
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="grid">
                                <div class="listing__featured--grid">
                                    <div class="row mb--n30">
                                        @foreach(listVoiture() as $listVoitures)
                                        <div class="col-lg-6 col-md-6 col-sm-6 mb-30" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="50">
                                            
                                            <article class="featured__card">
                                                <div class="featured__thumbnail position-relative">
                                                    <div class="media">
                                                        <a class="featured__thumbnail--link" href="{{url('detailVoiture/'.$listVoitures->id)}}"><img class="featured__thumbnail--img" src="{{asset(firstImageVoiture($listVoitures->id)->picture)}}" alt="featured-img"></a>
                                                    </div>
                                                    <div class="featured__badge">
                                                        
                                                        <span class="badge__field style2">{{$listVoitures->operation}}</span>
                                                    </div>
                                                </div>
                                                <div class="featured__content">
                                                    <div class="featured__content--top d-flex align-items-center justify-content-between" style="height: 40px; overflow: hidden; ">
                                                        <h3 class="featured__card--title" ><a href="{{url('detailVoiture/'.$listVoitures->id)}}"> {{$listVoitures->libelleVoiture}}</a></h3>
                                                        <span class="featured__card--price">

                                                        @if($listVoitures->operation == "A louer")

                                                            {{$listVoitures->prix}} XOF/Mois
                                                        @else
                                                        {{$listVoitures->prix}} XOF
                                                        @endif
                                                        </span>
                                                    </div>
                                                    <p class="featured__content--desc">
                                                        
                                                        <div style="height: 50px !important; overflow: hidden;">
                                                            {!! $listVoitures->details !!}
                                                        </div>
                                                        
                                                         </p>
                                                        
                                                    <div class="featured__content--footer d-flex align-items-center justify-content-between">
                                                        <div class="featured__author d-flex align-items-center" style="cursor: pointer;" onclick="window.location.href='{{url('detailVoiture/'.$listVoitures->id)}}'">
                                                            <span class="featured__author--name">En savoir plus</span>
                                                        </div>
                                                        <ul class="featured__content--share d-flex">
                                                          <li class="featured__share--btn__list position-relative">
                                                            <a class="featured__share--btn" href="#" aria-label="share button"  aria-expanded="false" data-bs-toggle="dropdown"><svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M12.5111 11.2118C11.5684 11.2118 10.7529 11.6195 10.1923 12.282L5.86064 10.0396C6.06451 9.63191 6.16636 9.17334 6.16636 8.68916C6.16636 8.20498 6.03892 7.74642 5.86064 7.33868L10.1923 5.09633C10.7529 5.75879 11.5938 6.16652 12.5111 6.16652C14.1929 6.16652 15.5944 4.79065 15.5944 3.08326C15.5944 1.40149 14.2185 0 12.5111 0C10.8038 0.000355502 9.42786 1.45268 9.42786 3.13445C9.42786 3.54218 9.50429 3.89892 9.63173 4.25565L5.2236 6.52344C4.66302 5.96286 3.89856 5.63152 3.05765 5.63152C1.40149 5.63152 0 7.03301 0 8.71478C0 10.3966 1.37587 11.798 3.08326 11.798C3.92413 11.798 4.6886 11.4667 5.24922 10.9061L9.65734 13.1739C9.5299 13.5306 9.45347 13.8874 9.45347 14.2951C9.45347 15.9769 10.8293 17.3784 12.5367 17.3784C14.2439 17.3784 15.62 16.0025 15.62 14.2951C15.6196 12.5879 14.1928 11.2118 12.5112 11.2118L12.5111 11.2118ZM12.5111 1.09595C13.6323 1.09595 14.575 2.01325 14.575 3.15984C14.575 4.28104 13.6577 5.22374 12.5111 5.22374C11.3644 5.22391 10.447 4.28099 10.447 3.13441C10.447 2.01321 11.3644 1.0959 12.5111 1.0959V1.09595ZM3.08324 10.7786C1.96204 10.7786 1.01934 9.86132 1.01934 8.71474C1.01934 7.59354 1.93665 6.65084 3.08324 6.65084C4.20444 6.65084 5.14714 7.56815 5.14714 8.71474C5.14731 9.83593 4.20439 10.7786 3.08324 10.7786ZM12.5111 16.3334C11.3899 16.3334 10.4472 15.4161 10.4472 14.2695C10.4472 13.123 11.3645 12.2056 12.5111 12.2056C13.6577 12.2056 14.575 13.123 14.575 14.2695C14.575 15.4161 13.6321 16.3334 12.5111 16.3334Z" fill="currentColor"></path>
                                                            </svg>
                                                            <span class="visually-hidden">Partager</span>
                                                            </a>
                                                            <ul class="dropdown-menu share__dropdown--menu ">
                                                                <li class="social__share--list"><a class="social__share--link" data-bs-toggle="modal" href="http://www.facebook.com/share.php?u={{url('detailVoiture/'.$listVoitures->id)}}"><span>Facebook</span> 
                                                                <svg width="8" height="15" viewBox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M6.52148 5.07812L6.29297 7.3125H4.49023V13.8125H1.82422V7.3125H0.478516V5.07812H1.79883V3.73242C1.79883 3.27539 1.84115 2.86914 1.92578 2.51367C2.02734 2.14128 2.19661 1.83659 2.43359 1.59961C2.67057 1.3457 2.9668 1.15104 3.32227 1.01562C3.69466 0.880208 4.15169 0.8125 4.69336 0.8125H6.49609V3.04688H5.37891C5.15885 3.04688 4.98958 3.07227 4.87109 3.12305C4.7526 3.1569 4.65951 3.21615 4.5918 3.30078C4.54102 3.36849 4.50716 3.46159 4.49023 3.58008C4.47331 3.68164 4.46484 3.80859 4.46484 3.96094V5.07812H6.49609H6.52148Z" fill="currentColor" fill-opacity="1"/>
                                                                    </svg>
                                                                    </a>
                                                                </li>
                                                                
                                                            </ul>
                                                          </li>
                                                          <li class="featured__share--btn__list">
                                                            <a class="featured__share--btn" href="{{url('detailVoiture/'.$listVoitures->id)}}">
                                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M7.855 0C5.77166 0 3.77371 0.82758 2.30076 2.30076C0.82758 3.77375 0 5.77171 0 7.855C0 9.9383 0.82758 11.9363 2.30076 13.4092C3.77375 14.8824 5.7717 15.71 7.855 15.71C9.9383 15.71 11.9363 14.8824 13.4092 13.4092C14.8824 11.9363 15.71 9.9383 15.71 7.855C15.7073 5.77252 14.8789 3.77621 13.4062 2.30395C11.9338 0.831315 9.93743 0.00286936 7.85518 0.000182413L7.855 0ZM7.855 14.1388C6.18845 14.1388 4.59008 13.4767 3.41151 12.2983C2.23313 11.1197 1.571 9.52132 1.571 7.85482C1.571 6.18832 2.23313 4.5899 3.41151 3.41133C4.59008 2.23295 6.1885 1.57082 7.855 1.57082C9.5215 1.57082 11.1199 2.23295 12.2985 3.41133C13.4769 4.5899 14.139 6.18832 14.139 7.85482C14.1376 9.521 13.4751 11.1187 12.2969 12.2967C11.1189 13.4749 9.52118 14.1374 7.855 14.1388Z" fill="currentColor"></path>
                                                                    <path d="M11.5835 7.06853H8.64034V4.12541C8.64034 3.84469 8.49072 3.58552 8.24772 3.44511C8.00471 3.30475 7.70514 3.30475 7.46213 3.44511C7.21912 3.58547 7.06951 3.84467 7.06951 4.12541V7.06853H4.12639C3.84567 7.06853 3.58649 7.21815 3.44609 7.46115C3.30573 7.70416 3.30573 8.00373 3.44609 8.24674C3.58645 8.48975 3.84564 8.63936 4.12639 8.63936H7.06951V11.5825C7.06951 11.8632 7.21912 12.1224 7.46213 12.2628C7.70513 12.4031 8.00471 12.4031 8.24772 12.2628C8.49072 12.1224 8.64034 11.8632 8.64034 11.5825V8.63936H11.5835C11.8642 8.63936 12.1234 8.48975 12.2638 8.24674C12.4041 8.00374 12.4041 7.70416 12.2638 7.46115C12.1234 7.21815 11.8642 7.06853 11.5835 7.06853Z" fill="currentColor"></path>
                                                                </svg>                                                   
                                                                <span class="visually-hidden">#</span>
                                                            </a>
                                                          </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </article>
                                            
                                        </div>

                                        @endforeach
                                        
                                        
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <div class="page__pagination--area">
                            {{listImmolibier()->links()}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Listing page section . -->

@endsection