@extends('layouts.main')
@section('main-section')
<div class="widget-banner-car-listing banner-car-listing-list">
    <div class="themesflat-container full">
        <div class="banner-car-listing">
            <span class="sub-title">Self Driven Cars</span>
            <h1 class="title text-white">Self Driven Cars / <span class="text-red" href="/about">Home</span></h1>
        </div>
    </div>
</div>
<div class="widget-car-list-v2">
    <div class="themesflat-container">
        <div class="tab-content" id="pills-tabContent-v2">
            <div class="tab-pane fade show active" id="pills-cadilliac-service-v2" role="tabpanel">
                <!-- Widget Car Service -->
                <div class="row">
                    @foreach($carrental as $carrentals)
                    <div class="col-12 col-sm-6 col-md-6 col-xl-6 mb-3">
                        <div class="tf-car-service-v2">
                            <a href="/cars" class="image">
                                <div class="thumb">
                                    <img src="{{asset('/public/uploads/post/'.$carrentals->image)}}" class="img-responsive"
                                        alt="Image Car Service">
                                </div>
                            </a>
                            <div class="content">
                                <span class="sub-title">{{$carrentals->company}}</span>
                                <h6 class="title"><a href="/cars">{{$carrentals->name}}</a></h6>
                                <div class="description">
                                    <ul>
                                        <li class="listing-information fuel">
                                            <i class="icon-gasoline-pump-1"></i>
                                            <div class="inner">
                                                <span>Fuel type</span>
                                                <p>{{$carrentals->fueltype}}</p>
                                            </div>
                                        </li>
                                        <li class="listing-information size-engine">
                                            <i class="icon-Group1"></i>
                                            <div class="inner">
                                                <span>Seater</span>
                                                <p>{{$carrentals->seater}}</p>
                                            </div>
                                        </li>
                                        <li class="listing-information transmission">
                                            <i class="icon-gearbox-1"></i>
                                            <div class="inner">
                                                <span>Transmission</span>
                                                <p>{{$carrentals->transmission}}</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="bottom-btn-wrap">
                                    <div class="price-group">
                                        <a class="btn-icon-list2" href="tel:9209551332">
                                            <span>Enquire Now</span>
                                            <i class="icon-edit-1"></i>
                                        </a>

                                    </div>
                                    <div class="btn-group">
                                        <a href="#" class="icon-service">
                                            <i class="icon-heart-1-1"></i>
                                        </a>
                                        <a href="#" class="icon-service">
                                            <i class="icon-shuffle-2-11"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <!-- Widget Car Service -->
            </div>
        </div>
    </div>
</div>
@endsection