@extends('layout.mainlayout')
@section('content')	
@component('components.breadcrumb')
        @slot('title')
		Cars
        @endslot
        @slot('item1')
       index
        @endslot
        @slot('item3')
		Cars
        @endslot
        @slot('item2')
		Car Grid
        @endslot
       @endcomponent


       <!-- Page Wrapper -->
    <div class="content">
        <div class="container">

            <!-- Car Search -->
            <div class="banner-form card">
                <div class="card-body">
                    <form action="#">
                        <div class="tab-content">
                            <div class="tab-pane fade active show" id="Cars">
                                <div class="d-flex align-items-center justify-content-between flex-wrap mb-2">
                                    <div class="d-flex align-items-center flex-wrap">
                                        <div class="form-check d-flex align-items-center me-3 mb-2">
                                            <input class="form-check-input mt-0" type="radio" name="drop" id="same-drop" value="same-drop" checked>
                                            <label class="form-check-label fs-14 ms-2" for="same-drop">
                                                Same drop-off
                                            </label>
                                        </div>
                                        <div class="form-check d-flex align-items-center me-3 mb-2">
                                            <input class="form-check-input mt-0" type="radio" name="drop" id="different-drop" value="different-drop">
                                            <label class="form-check-label fs-14 ms-2" for="different-drop">
                                                Different Drop off
                                            </label>
                                        </div>
                                        <div class="form-check d-flex align-items-center me-3 mb-2">
                                            <input class="form-check-input mt-0" type="radio" name="drop" id="airport" value="airport">
                                            <label class="form-check-label fs-14 ms-2" for="airport">
                                                Airport
                                            </label>
                                        </div>
                                        <div class="form-check d-flex align-items-center me-3 mb-2">
                                            <input class="form-check-input mt-0" type="radio" name="drop" id="hourly-drop" value="hourly-drop">
                                            <label class="form-check-label fs-14 ms-2" for="hourly-drop">
                                                Hourly Package
                                            </label>
                                        </div>
                                    </div>
                                    <h6 class="fw-medium fs-16 mb-2">Book Car for rental</h6>
                                </div>
                                <div class="d-lg-flex">
                                    <div class="d-flex  form-info">
                                        <div class="form-item dropdown from-location">
                                            <div data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" role="menu">
                                                <label class="form-label fs-14 text-default mb-1">From</label>
                                                <input type="text" class="form-control" value="Newyork">
                                                <p class="fs-12 mb-0">USA</p>
                                            </div>
                                            <div class="dropdown-menu dropdown-md p-0">
                                                <div class="input-search p-3 border-bottom">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="Search for Cars">
                                                        <span class="input-group-text px-2 border-start-0"><i class="isax isax-search-normal"></i></span>
                                                    </div>
                                                </div>
                                                <ul>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">USA</h6>
                                                            <p>2000 Cars</p>
                                                        </a>
                                                    </li>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Japan</h6>
                                                            <p>3000 Cars</p>
                                                        </a>
                                                    </li>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Singapore</h6>
                                                            <p>8000 Cars</p>
                                                        </a>
                                                    </li>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Russia</h6>
                                                            <p>8000 Cars</p>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Germany</h6>
                                                            <p>6000 Cars</p>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="form-item dropdown pickup-airport">
                                            <div data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" role="menu">
                                                <label class="form-label fs-14 text-default mb-1">From</label>
                                                <input type="text" class="form-control" value="Newyork">
                                                <p class="fs-12 mb-0">Ken International Airport</p>
                                            </div>
                                            <div class="dropdown-menu dropdown-md p-0">
                                                <div class="input-search p-3 border-bottom">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="Search for Airport">
                                                        <span class="input-group-text px-2 border-start-0"><i class="isax isax-search-normal"></i></span>
                                                    </div>
                                                </div>
                                                <ul>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Hartsfield-Jackson Atlanta International</h6>
                                                            <p>USA</p>
                                                        </a>
                                                    </li>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Dallas/Fort Worth International</h6>
                                                            <p>USA</p>
                                                        </a>
                                                    </li>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">London Heathrow</h6>
                                                            <p>UK</p>
                                                        </a>
                                                    </li>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Seoul Incheon</h6>
                                                            <p>South Korea</p>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Singapore Changi International</h6>
                                                            <p>Singapore</p>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="form-item dropdown to-location ps-2 ps-sm-3">
                                            <div data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" role="menu">
                                                <label class="form-label fs-14 text-default mb-1">To</label>
                                                <input type="text" class="form-control" value="Newyork">
                                                <p class="fs-12 mb-0">USA</p>
                                                <span class="way-icon badge badge-primary rounded-pill translate-middle">
													<i class="fa-solid fa-arrow-right-arrow-left"></i>
												</span>
                                            </div>
                                            <div class="dropdown-menu dropdown-md p-0">
                                                <div class="input-search p-3 border-bottom">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="Search for Cars">
                                                        <span class="input-group-text px-2 border-start-0"><i class="isax isax-search-normal"></i></span>
                                                    </div>
                                                </div>
                                                <ul>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">USA</h6>
                                                            <p>2000 Cars</p>
                                                        </a>
                                                    </li>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Japan</h6>
                                                            <p>3000 Cars</p>
                                                        </a>
                                                    </li>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Singapore</h6>
                                                            <p>8000 Cars</p>
                                                        </a>
                                                    </li>
                                                    <li class="border-bottom">
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Russia</h6>
                                                            <p>8000 Cars</p>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:void(0);">
                                                            <h6 class="fs-16 fw-medium">Germany</h6>
                                                            <p>6000 Cars</p>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="form-item">
                                            <label class="form-label fs-14 text-default mb-1">Departure</label>
                                            <input type="text" class="form-control datetimepicker" value="21-10-2024">
                                            <p class="fs-12 mb-0">Monday</p>
                                        </div>
                                        <div class="form-item return-drop">
                                            <label class="form-label fs-14 text-default mb-1">Return</label>
                                            <input type="text" class="form-control datetimepicker" value="23-10-2024">
                                            <p class="fs-12 mb-0">Wednesday</p>
                                        </div>
                                        <div class="form-item">
                                            <label class="form-label fs-14 text-default mb-1">Pickup Time</label>
                                            <input type="text" class="form-control timepicker" value="11:45 PM">
                                        </div>
                                        <div class="form-item dropoff-time">
                                            <label class="form-label fs-14 text-default mb-1">Dropoff Time</label>
                                            <input type="text" class="form-control timepicker" value="11:45 PM">
                                        </div>
                                        <div class="form-item hourly-time">
                                            <label class="form-label fs-14 text-default mb-1">Hours</label>
                                            <h5>02 Hrs 10 Kms</h5>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary search-btn rounded">Search</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /Car Search -->

            <!-- Tour Types -->
            <div class="mb-2">
                <div class="mb-3">
                    <h5 class="mb-2">Choose type of Cars you are interested</h5>
                </div>
                <div class="row">
                    <div class="col-xxl-2 col-lg-3 col-md-4 col-sm-6">
                        <div class="d-flex align-items-center hotel-type-item mb-3">
                            <a href="{{ url('car-grid')}}" class="avatar avatar-lg">
                                <img src="{{URL::asset('build/img/cars/car-01.jpg')}}" class="rounded-circle" alt="img">
                            </a>
                            <div class="ms-2">
                                <h6 class="fs-16 fw-medium"><a href="{{ url('car-grid')}}">Sedan</a></h6>
                                <p class="fs-14">216 Cars</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-lg-3 col-md-4 col-sm-6">
                        <div class="d-flex align-items-center hotel-type-item mb-3">
                            <a href="{{ url('car-grid')}}" class="avatar avatar-lg">
                                <img src="{{URL::asset('build/img/cars/car-02.jpg')}}" class="rounded-circle" alt="img">
                            </a>
                            <div class="ms-2">
                                <h6 class="fs-16 fw-medium"><a href="{{ url('car-grid')}}">Sports</a></h6>
                                <p class="fs-14">569 Cars</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-lg-3 col-md-4 col-sm-6">
                        <div class="d-flex align-items-center hotel-type-item mb-3">
                            <a href="{{ url('car-grid')}}" class="avatar avatar-lg">
                                <img src="{{URL::asset('build/img/cars/car-03.jpg')}}" class="rounded-circle" alt="img">
                            </a>
                            <div class="ms-2">
                                <h6 class="fs-16 fw-medium"><a href="{{ url('car-grid')}}">SUV</a></h6>
                                <p class="fs-14">129 Cars</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-lg-3 col-md-4 col-sm-6">
                        <div class="d-flex align-items-center hotel-type-item mb-3">
                            <a href="{{ url('car-grid')}}" class="avatar avatar-lg">
                                <img src="{{URL::asset('build/img/cars/car-04.jpg')}}" class="rounded-circle" alt="img">
                            </a>
                            <div class="ms-2">
                                <h6 class="fs-16 fw-medium"><a href="{{ url('car-grid')}}">Convertible</a></h6>
                                <p class="fs-14">600 Cars</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-lg-3 col-md-4 col-sm-6">
                        <div class="d-flex align-items-center hotel-type-item mb-3">
                            <a href="{{ url('car-grid')}}" class="avatar avatar-lg">
                                <img src="{{URL::asset('build/img/cars/car-05.jpg')}}" class="rounded-circle" alt="img">
                            </a>
                            <div class="ms-2">
                                <h6 class="fs-16 fw-medium"><a href="{{ url('car-grid')}}">Crossover</a></h6>
                                <p class="fs-14">200 Cars</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-2 col-lg-3 col-md-4 col-sm-6">
                        <div class="d-flex align-items-center hotel-type-item mb-3">
                            <a href="{{ url('car-grid')}}" class="avatar avatar-lg">
                                <img src="{{URL::asset('build/img/cars/car-17.jpg')}}" class="rounded-circle" alt="img">
                            </a>
                            <div class="ms-2">
                                <h6 class="fs-16 fw-medium"><a href="{{ url('car-grid')}}">EV</a></h6>
                                <p class="fs-14">180 Cars</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Tour Types -->

            <div class="row">

                <!-- Sidebar -->
                <div class="col-xl-3 col-lg-4 theiaStickySidebar">
                    <div class="card filter-sidebar mb-4 mb-lg-0">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5>Filters</h5>
                            <a href="javascript:void(0);" class="fs-14 link-primary">Reset</a>
                        </div>
                        <div class="card-body p-0">
                            <form action="{{ url('search')}}">
                                <div class="p-3 border-bottom">
                                    <label class="form-label fs-16">Search by Car Name</label>
                                    <div class="input-icon">
                                        <span class="input-icon-addon">
											<i class="isax isax-search-normal"></i>
										</span>
                                        <input type="text" class="form-control" placeholder="Search by Car Name">
                                    </div>
                                </div>
                                <div class="accordion accordion-list">
                                    <div class="accordion-item border-bottom p-3">
                                        <div class="accordion-header">
                                            <div class="accordion-button p-0" data-bs-toggle="collapse" data-bs-target="#accordion-populars" aria-expanded="true" aria-controls="accordion-populars" role="button">
                                                <i class="isax isax-coin me-2 text-primary"></i>Price Per Day
                                            </div>
                                        </div>
                                        <div id="accordion-populars" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="filter-range">
                                                    <input type="text" id="range_03">
                                                </div>
                                                <div class="filter-range-amount">
                                                    <p class="fs-14">Range : <span class="text-gray-9 fw-medium">$200 - $5695</span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-bottom p-3">
                                        <div class="accordion-header">
                                            <div class="accordion-button p-0" data-bs-toggle="collapse" data-bs-target="#accordion-hotel" aria-expanded="true" aria-controls="accordion-hotel" role="button">
                                                <i class="isax isax-car me-2 text-primary"></i>Car Brands
                                            </div>
                                        </div>
                                        <div id="accordion-hotel" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="more-content">
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="hotel1" type="checkbox" id="hotel1" checked>
                                                        <label class="form-check-label ms-2" for="hotel1">
                                                            Toyota
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="hotel2" type="checkbox" id="hotel2" checked>
                                                        <label class="form-check-label ms-2" for="hotel2">
                                                            Ford
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="hotel3" type="checkbox" id="hotel3" checked>
                                                        <label class="form-check-label ms-2" for="hotel3">
                                                            Honda
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="hotel4" type="checkbox" id="hotel4" checked>
                                                        <label class="form-check-label ms-2" for="hotel4">
                                                            BMW
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="hotel5" type="checkbox" id="hotel5">
                                                        <label class="form-check-label ms-2" for="hotel5">
                                                            Mercedes-Benz
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="hotel6" type="checkbox" id="hotel6" checked>
                                                        <label class="form-check-label ms-2" for="hotel6">
                                                            Tesla
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="hotel7" type="checkbox" id="hotel7" checked>
                                                        <label class="form-check-label ms-2" for="hotel7">
                                                            Audi
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="hotel8" type="checkbox" id="hotel8">
                                                        <label class="form-check-label ms-2" for="hotel8">
                                                            Chevrolet
                                                        </label>
                                                    </div>
                                                </div>
                                                <a href="javascript:void(0);" class="more-view text-primary fw-medium fs-14">See Less</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-bottom p-3">
                                        <div class="accordion-header">
                                            <div class="accordion-button p-0" data-bs-toggle="collapse" data-bs-target="#accordion-amenity" aria-expanded="true" aria-controls="accordion-amenity" role="button">
                                                <i class="isax isax-smart-car me-2 text-primary"></i>Car Type
                                            </div>
                                        </div>
                                        <div id="accordion-amenity" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="more-content">
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="amenity1" type="checkbox" id="amenity1" checked>
                                                        <label class="form-check-label ms-2" for="amenity1">
                                                            Sedan
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="amenity2" type="checkbox" id="amenity2">
                                                        <label class="form-check-label ms-2" for="amenity2">
                                                            EV
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="amenity3" type="checkbox" id="amenity3">
                                                        <label class="form-check-label ms-2" for="amenity3">
                                                            Crossover
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="amenity4" type="checkbox" id="amenity4" checked>
                                                        <label class="form-check-label ms-2" for="amenity4">
                                                            Sports
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="amenity5" type="checkbox" id="amenity5">
                                                        <label class="form-check-label ms-2" for="amenity5">
                                                            Van
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="amenity6" type="checkbox" id="amenity6">
                                                        <label class="form-check-label ms-2" for="amenity6">
                                                            Wagon
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="amenity7" type="checkbox" id="amenity7" checked>
                                                        <label class="form-check-label ms-2" for="amenity7">
                                                            SUV
                                                        </label>
                                                    </div>

                                                </div>
                                                <a href="javascript:void(0);" class="more-view fw-medium fs-14">Show All</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-bottom p-3">
                                        <div class="accordion-header">
                                            <div class="accordion-button p-0" data-bs-toggle="collapse" data-bs-target="#accordion-cusine" aria-expanded="true" aria-controls="accordion-cusine" role="button">
                                                <i class="isax isax-gas-station me-2 text-primary"></i>Fuel
                                            </div>
                                        </div>
                                        <div id="accordion-cusine" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="cusine1" type="checkbox" id="cusine1">
                                                        <label class="form-check-label ms-2" for="cusine1">
                                                            Petrol
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="cusine2" type="checkbox" id="cusine2">
                                                        <label class="form-check-label ms-2" for="cusine2">
                                                            Diesel
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="cusine3" type="checkbox" id="cusine3">
                                                        <label class="form-check-label ms-2" for="cusine3">
                                                            Hybrid
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="cusine4" type="checkbox" id="cusine4">
                                                        <label class="form-check-label ms-2" for="cusine4">
                                                            CNG
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0">
                                                        <input class="form-check-input ms-0 mt-0" name="cusine5" type="checkbox" id="cusine5">
                                                        <label class="form-check-label ms-2" for="cusine5">
                                                            EV
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-bottom p-3">
                                        <div class="accordion-header">
                                            <div class="accordion-button p-0" data-bs-toggle="collapse" data-bs-target="#accordion-meal" aria-expanded="true" aria-controls="accordion-meal" role="button">
                                                <i class="isax isax-kanban me-2 text-primary"></i>Gear
                                            </div>
                                        </div>
                                        <div id="accordion-meal" class="accordion-collapse collapse show">
                                            <div class="accordion-body pt-2">
                                                <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                    <input class="form-check-input ms-0 mt-0" name="meals1" type="checkbox" id="meals1">
                                                    <label class="form-check-label ms-2" for="meals1">
                                                        Manual
                                                    </label>
                                                </div>
                                                <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                    <input class="form-check-input ms-0 mt-0" name="meals2" type="checkbox" id="meals2">
                                                    <label class="form-check-label ms-2" for="meals2">
                                                        Auto
                                                    </label>
                                                </div>
                                                <div class="form-check d-flex align-items-center ps-0">
                                                    <input class="form-check-input ms-0 mt-0" name="meals3" type="checkbox" id="meals3">
                                                    <label class="form-check-label ms-2" for="meals3">
                                                        Hybrid
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-bottom p-3">
                                        <div class="accordion-header">
                                            <div class="accordion-button p-0" data-bs-toggle="collapse" data-bs-target="#accordion-style" aria-expanded="true" aria-controls="accordion-style" role="button">
                                                <i class="isax isax-tag-user me-2 text-primary"></i>Capacity
                                            </div>
                                        </div>
                                        <div id="accordion-style" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="style1" type="checkbox" id="style1">
                                                        <label class="form-check-label ms-2" for="style1">
                                                            2 Seater
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="style2" type="checkbox" id="style2">
                                                        <label class="form-check-label ms-2" for="style2">
                                                            4 Seater
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                        <input class="form-check-input ms-0 mt-0" name="style3" type="checkbox" id="style3">
                                                        <label class="form-check-label ms-2" for="style3">
                                                            5 Seater
                                                        </label>
                                                    </div>
                                                    <div class="form-check d-flex align-items-center ps-0">
                                                        <input class="form-check-input ms-0 mt-0" name="style4" type="checkbox" id="style4" checked>
                                                        <label class="form-check-label ms-2" for="style4">
                                                            7 Seater
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-bottom p-3">
                                        <div class="accordion-header">
                                            <div class="accordion-button p-0" data-bs-toggle="collapse" data-bs-target="#accordion-popular" aria-expanded="true" aria-controls="accordion-popular" role="button">
                                                <i class="isax isax-routing-2 me-2 text-primary"></i>Travelled
                                            </div>
                                        </div>
                                        <div id="accordion-popular" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="filter-range">
                                                    <input type="text" id="range_04">
                                                </div>
                                                <div class="filter-range-amount">
                                                    <p class="fs-14">Range : <span class="text-gray-9 fw-medium">10000 Km - 20000 Km</span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-bottom p-3">
                                        <div class="accordion-header">
                                            <div class="accordion-button p-0" data-bs-toggle="collapse" data-bs-target="#accordion-brand" aria-expanded="true" aria-controls="accordion-brand" role="button">
                                                <i class="isax isax-discount-shape me-2 text-primary"></i>Reviews
                                            </div>
                                        </div>
                                        <div id="accordion-brand" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                    <input class="form-check-input ms-0 mt-0" name="review1" type="checkbox" id="review1">
                                                    <label class="form-check-label ms-2" for="review1">
                                                        <span class="rating d-flex align-items-center">
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary"></i>
                                                            <span class="ms-2">5 Star</span>
                                                        </span>
                                                    </label>
                                                </div>
                                                <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                    <input class="form-check-input ms-0 mt-0" name="review2" type="checkbox" id="review2">
                                                    <label class="form-check-label ms-2" for="review2">
                                                        <span class="rating d-flex align-items-center">
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary"></i>
                                                            <span class="ms-2">4 Star</span>
                                                        </span>
                                                    </label>
                                                </div>
                                                <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                    <input class="form-check-input ms-0 mt-0" name="review3" type="checkbox" id="review3">
                                                    <label class="form-check-label ms-2" for="review3">
                                                        <span class="rating d-flex align-items-center">
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary"></i>
                                                            <span class="ms-2">3 Star</span>
                                                        </span>
                                                    </label>
                                                </div>
                                                <div class="form-check d-flex align-items-center ps-0 mb-2">
                                                    <input class="form-check-input ms-0 mt-0" name="review4" type="checkbox" id="review4">
                                                    <label class="form-check-label ms-2" for="review4">
                                                        <span class="rating d-flex align-items-center">
                                                            <i class="fas fa-star filled text-primary me-1"></i>
                                                            <i class="fas fa-star filled text-primary"></i>
                                                            <span class="ms-2">2 Star</span>
                                                        </span>
                                                    </label>
                                                </div>
                                                <div class="form-check d-flex align-items-center ps-0 mb-0">
                                                    <input class="form-check-input ms-0 mt-0" name="review5" type="checkbox" id="review5">
                                                    <label class="form-check-label ms-2" for="review5">
                                                        <span class="rating d-flex align-items-center">
                                                            <i class="fas fa-star filled text-primary"></i>
                                                            <span class="ms-2">1 Star</span>
                                                        </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /Sidebar -->

                <div class="col-xl-9 col-lg-8">
                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                        <h6 class="mb-3">1920 Cars Found on Your Search</h6>
                        <div class="d-flex align-items-center flex-wrap">
                            <div class="list-item d-flex align-items-center mb-3">
                                <a href="{{ url('car-grid')}}" class="list-icon active me-2"><i class="isax isax-grid-1"></i></a>
                                <a href="{{ url('car-list')}}" class="list-icon me-2"><i class="isax isax-firstline"></i></a>
                                <a href="{{ url('car-map')}}" class="list-icon me-2"><i class="isax isax-map-1"></i></a>
                            </div>
                            <div class="dropdown mb-3">
                                <a href="javascript:void(0);" class="dropdown-toggle py-2" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="fw-medium text-gray-9">Sort By : </span>Recommended
                                </a>
                                <div class="dropdown-menu dropdown-sm">
                                    <form action="{{ url('car-grid')}}">
                                        <h6 class="fw-medium fs-16 mb-3">Sort By</h6>
                                        <div class="form-check d-flex align-items-center ps-0 mb-2">
                                            <input class="form-check-input ms-0 mt-0" name="recommend" type="checkbox" id="recommend1" checked>
                                            <label class="form-check-label ms-2" for="recommend1">Recommended</label>
                                        </div>
                                        <div class="form-check d-flex align-items-center ps-0 mb-2">
                                            <input class="form-check-input ms-0 mt-0" name="recommend" type="checkbox" id="recommend2">
                                            <label class="form-check-label ms-2" for="recommend2">Price: low to high</label>
                                        </div>
                                        <div class="form-check d-flex align-items-center ps-0 mb-2">
                                            <input class="form-check-input ms-0 mt-0" name="recommend" type="checkbox" id="recommend3">
                                            <label class="form-check-label ms-2" for="recommend3">Price: high to low</label>
                                        </div>
                                        <div class="form-check d-flex align-items-center ps-0 mb-2">
                                            <input class="form-check-input ms-0 mt-0" name="recommend" type="checkbox" id="recommend4">
                                            <label class="form-check-label ms-2" for="recommend4">Newest</label>
                                        </div>
                                        <div class="form-check d-flex align-items-center ps-0 mb-2">
                                            <input class="form-check-input ms-0 mt-0" name="recommend" type="checkbox" id="recommend5">
                                            <label class="form-check-label ms-2" for="recommend5">Ratings</label>
                                        </div>
                                        <div class="form-check d-flex align-items-center ps-0 mb-0">
                                            <input class="form-check-input ms-0 mt-0" name="recommend" type="checkbox" id="recommend6">
                                            <label class="form-check-label ms-2" for="recommend6">Reviews</label>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-end border-top pt-3 mt-3">
                                            <a href="javascript:void(0);" class="btn btn-light btn-sm me-2">Reset</a>
                                            <button type="submit" class="btn btn-primary btn-sm">Apply</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-info br-10 p-3 pb-2 mb-4">
                        <div class="d-flex align-items-center justify-content-between flex-wrap">
                            <p class="fs-14 fw-medium mb-2 d-inline-flex align-items-center"><i class="isax isax-info-circle me-2"></i>Save an average of 15% on thousands of hotels when you're signed in</p>
                            <a href="{{ url('login')}}" class="btn btn-white btn-sm mb-2">Sign In</a>
                        </div>
                    </div>
                    <div class="row justify-content-center">

                        <!-- Car Grid -->
                        <div class="col-xxl-4 col-md-6 d-flex">
                            <div class="place-item mb-4 flex-fill">
                                <div class="place-img">
                                    <div class="img-slider image-slide owl-carousel nav-center">
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-06.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-07.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-08.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>

                                    </div>
                                    <div class="fav-item">
                                        <a href="javascript:void(0);" class="fav-icon selected">
                                            <i class="isax isax-heart5"></i>
                                        </a>
                                        <span class="badge bg-info d-inline-flex align-items-center"><i class="isax isax-ranking me-1"></i>Trending</span>
                                    </div>

                                </div>
                                <div class="place-content">
                                    <a href="javascript:void(0);" class="avatar avatar-md ms-3 car-avatar-image">
                                        <img src="{{URL::asset('build/img/users/user-08.jpg')}}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <div class="d-flex flex-wrap align-items-center">
                                            <span class="badge badge-secondary  fs-10 fw-medium me-1">Sedan</span>
                                        </div>
                                    </div>
                                    <h5 class="mb-1 text-truncate"><a href="{{ url('car-details')}}">Toyota Camry SE 400</a></h5>
                                    <p class="d-flex align-items-center mb-3"><i class="isax isax-location5 me-2"></i>Ciutat Vella, Barcelona</p>
                                    <div class="mb-3 p-2 border rounded">
                                        <div class="row">
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-gas-station me-1"></i>Fuel</span>
                                                <p class="text-dark fs-14">Hybrid</p>
                                            </div>
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-kanban me-1"></i>Gear</span>
                                                <p class="text-dark fs-14">Manual</p>
                                            </div>
                                            <div class="col">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-routing-2 me-1"></i>Travelled</span>
                                                <p class="text-dark fs-14">14,000 KM</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between border-top pt-3">
                                        <div class="d-flex flex-wrap align-items-center me-2">
                                            <h5 class="text-primary">$500 <span class="fs-14 text-gray-6 fw-normal">/ day</span></h5>

                                        </div>
                                        <div class="ms-2 d-flex align-items-center">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-1">5.0</span>
                                                <p class="fs-14">(400 Reviews)</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Car Grid -->

                        <!-- Car Grid -->
                        <div class="col-xxl-4 col-md-6 d-flex">
                            <div class="place-item mb-4 flex-fill">
                                <div class="place-img">
                                    <div class="img-slider image-slide owl-carousel nav-center">
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-07.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-08.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-09.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>

                                    </div>
                                    <div class="fav-item">
                                        <a href="javascript:void(0);" class="fav-icon">
                                            <i class="isax isax-heart5"></i>
                                        </a>
                                        <span class="badge bg-info d-inline-flex align-items-center"><i class="isax isax-ranking me-1"></i>Trending</span>
                                    </div>

                                </div>
                                <div class="place-content">
                                    <a href="javascript:void(0);" class="avatar avatar-md ms-3 car-avatar-image">
                                        <img src="{{URL::asset('build/img/users/user-09.jpg')}}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <div class="d-flex flex-wrap align-items-center">
                                            <span class="badge badge-secondary  fs-10 fw-medium me-1">Sedan</span>
                                        </div>
                                    </div>
                                    <h5 class="mb-1 text-truncate"><a href="{{ url('car-details')}}">Ford Mustang 4.0 AT</a></h5>
                                    <p class="d-flex align-items-center mb-3"><i class="isax isax-location5 me-2"></i>Oxford Street, London</p>
                                    <div class="mb-3 p-2 border rounded">
                                        <div class="row">
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-gas-station me-1"></i>Fuel</span>
                                                <p class="text-dark fs-14">Diesel</p>
                                            </div>
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-kanban me-1"></i>Gear</span>
                                                <p class="text-dark fs-14">Manual</p>
                                            </div>
                                            <div class="col">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-routing-2 me-1"></i>Travelled</span>
                                                <p class="text-dark fs-14">10,300 KM</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between border-top pt-3">
                                        <div class="d-flex flex-wrap align-items-center me-2">
                                            <h5 class="text-primary">$600 <span class="fs-14 text-gray-6 fw-normal">/ day</span></h5>

                                        </div>
                                        <div class="ms-2 d-flex align-items-center">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-1">4.7</span>
                                                <p class="fs-14">(300 Reviews)</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Car Grid -->

                        <!-- Car Grid -->
                        <div class="col-xxl-4 col-md-6 d-flex">
                            <div class="place-item mb-4 flex-fill">
                                <div class="place-img">
                                    <div class="img-slider image-slide owl-carousel nav-center">
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-08.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-09.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-10.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>

                                    </div>
                                    <div class="fav-item">
                                        <a href="javascript:void(0);" class="fav-icon">
                                            <i class="isax isax-heart5"></i>
                                        </a>
                                        <span class="badge bg-info d-inline-flex align-items-center"><i class="isax isax-ranking me-1"></i>Trending</span>
                                    </div>

                                </div>
                                <div class="place-content">
                                    <a href="javascript:void(0);" class="avatar avatar-md ms-3 car-avatar-image">
                                        <img src="{{URL::asset('build/img/users/user-10.jpg')}}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <div class="d-flex flex-wrap align-items-center">
                                            <span class="badge badge-secondary  fs-10 fw-medium me-1">Sedan</span>
                                        </div>
                                    </div>
                                    <h5 class="mb-1 text-truncate"><a href="{{ url('car-details')}}">Ferrari 458 MM Special</a></h5>
                                    <p class="d-flex align-items-center mb-3"><i class="isax isax-location5 me-2"></i>Princes Street, Edinburgh</p>
                                    <div class="mb-3 p-2 border rounded">
                                        <div class="row">
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-gas-station me-1"></i>Fuel</span>
                                                <p class="text-dark fs-14">Hybrid</p>
                                            </div>
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-kanban me-1"></i>Gear</span>
                                                <p class="text-dark fs-14">Auto</p>
                                            </div>
                                            <div class="col">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-routing-2 me-1"></i>Travelled</span>
                                                <p class="text-dark fs-14">13,000 KM</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between border-top pt-3">
                                        <div class="d-flex flex-wrap align-items-center me-2">
                                            <h5 class="text-primary">$300 <span class="fs-14 text-gray-6 fw-normal">/ day</span></h5>

                                        </div>
                                        <div class="ms-2 d-flex align-items-center">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-1">4.0</span>
                                                <p class="fs-14">(320 Reviews)</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Car Grid -->

                        <!-- Car Grid -->
                        <div class="col-xxl-4 col-md-6 d-flex">
                            <div class="place-item mb-4 flex-fill">
                                <div class="place-img">
                                    <div class="img-slider image-slide owl-carousel nav-center">
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-09.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-10.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-11.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>

                                    </div>
                                    <div class="fav-item">
                                        <a href="javascript:void(0);" class="fav-icon">
                                            <i class="isax isax-heart5"></i>
                                        </a>
                                        <span class="badge bg-info d-inline-flex align-items-center"><i class="isax isax-ranking me-1"></i>Trending</span>
                                    </div>

                                </div>
                                <div class="place-content">
                                    <a href="javascript:void(0);" class="avatar avatar-md ms-3 car-avatar-image">
                                        <img src="{{URL::asset('build/img/users/user-11.jpg')}}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <div class="d-flex flex-wrap align-items-center">
                                            <span class="badge badge-secondary  fs-10 fw-medium me-1">Sedan</span>
                                        </div>
                                    </div>
                                    <h5 class="mb-1 text-truncate"><a href="{{ url('car-details')}}">Mercedes-benz Convertible</a></h5>
                                    <p class="d-flex align-items-center mb-3"><i class="isax isax-location5 me-2"></i>Princes Street, Edinburgh</p>
                                    <div class="mb-3 p-2 border rounded">
                                        <div class="row">
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-gas-station me-1"></i>Fuel</span>
                                                <p class="text-dark fs-14">Hybrid</p>
                                            </div>
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-kanban me-1"></i>Gear</span>
                                                <p class="text-dark fs-14">Auto</p>
                                            </div>
                                            <div class="col">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-routing-2 me-1"></i>Travelled</span>
                                                <p class="text-dark fs-14">10,000 KM</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between border-top pt-3">
                                        <div class="d-flex flex-wrap align-items-center me-2">
                                            <h5 class="text-primary">$400 <span class="fs-14 text-gray-6 fw-normal">/ day</span></h5>

                                        </div>
                                        <div class="ms-2 d-flex align-items-center">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-1">4.0</span>
                                                <p class="fs-14">(380 Reviews)</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Car Grid -->

                        <!-- Car Grid -->
                        <div class="col-xxl-4 col-md-6 d-flex">
                            <div class="place-item mb-4 flex-fill">
                                <div class="place-img">
                                    <div class="img-slider image-slide owl-carousel nav-center">
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-10.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-11.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-12.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>

                                    </div>
                                    <div class="fav-item">
                                        <a href="javascript:void(0);" class="fav-icon">
                                            <i class="isax isax-heart5"></i>
                                        </a>
                                        <span class="badge bg-info d-inline-flex align-items-center"><i class="isax isax-ranking me-1"></i>Trending</span>
                                    </div>

                                </div>
                                <div class="place-content">
                                    <a href="javascript:void(0);" class="avatar avatar-md ms-3 car-avatar-image">
                                        <img src="{{URL::asset('build/img/users/user-12.jpg')}}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <div class="d-flex flex-wrap align-items-center">
                                            <span class="badge badge-secondary  fs-10 fw-medium me-1">Sedan</span>
                                        </div>
                                    </div>
                                    <h5 class="mb-1 text-truncate"><a href="{{ url('car-details')}}">BMW 3.0 Gran Turismo</a></h5>
                                    <p class="d-flex align-items-center mb-3"><i class="isax isax-location5 me-2"></i>King’s Road, Chelsea</p>
                                    <div class="mb-3 p-2 border rounded">
                                        <div class="row">
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-gas-station me-1"></i>Fuel</span>
                                                <p class="text-dark fs-14">Petrol</p>
                                            </div>
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-kanban me-1"></i>Gear</span>
                                                <p class="text-dark fs-14">Manual</p>
                                            </div>
                                            <div class="col">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-routing-2 me-1"></i>Travelled</span>
                                                <p class="text-dark fs-14">12,800 KM</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between border-top pt-3">
                                        <div class="d-flex flex-wrap align-items-center me-2">
                                            <h5 class="text-primary">$550 <span class="fs-14 text-gray-6 fw-normal">/ day</span></h5>

                                        </div>
                                        <div class="ms-2 d-flex align-items-center">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-1">4.3</span>
                                                <p class="fs-14">(300 Reviews)</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Car Grid -->

                        <!-- Car Grid -->
                        <div class="col-xxl-4 col-md-6 d-flex">
                            <div class="place-item mb-4 flex-fill">
                                <div class="place-img">
                                    <div class="img-slider image-slide owl-carousel nav-center">
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-11.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-12.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-13.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>

                                    </div>
                                    <div class="fav-item">
                                        <a href="javascript:void(0);" class="fav-icon">
                                            <i class="isax isax-heart5"></i>
                                        </a>
                                        <span class="badge bg-info d-inline-flex align-items-center"><i class="isax isax-ranking me-1"></i>Trending</span>
                                    </div>

                                </div>
                                <div class="place-content">
                                    <a href="javascript:void(0);" class="avatar avatar-md ms-3 car-avatar-image">
                                        <img src="{{URL::asset('build/img/users/user-13.jpg')}}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <div class="d-flex flex-wrap align-items-center">
                                            <span class="badge badge-secondary  fs-10 fw-medium me-1">Sedan</span>
                                        </div>
                                    </div>
                                    <h5 class="mb-1 text-truncate"><a href="{{ url('car-details')}}">Infiniti QX60 </a></h5>
                                    <p class="d-flex align-items-center mb-3"><i class="isax isax-location5 me-2"></i>Bold Street, Liverpool</p>
                                    <div class="mb-3 p-2 border rounded">
                                        <div class="row">
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-gas-station me-1"></i>Fuel</span>
                                                <p class="text-dark fs-14">Diesel</p>
                                            </div>
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-kanban me-1"></i>Gear</span>
                                                <p class="text-dark fs-14">Auto</p>
                                            </div>
                                            <div class="col">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-routing-2 me-1"></i>Travelled</span>
                                                <p class="text-dark fs-14">13,500 KM</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between border-top pt-3">
                                        <div class="d-flex flex-wrap align-items-center me-2">
                                            <h5 class="text-primary">$450 <span class="fs-14 text-gray-6 fw-normal">/ day</span></h5>

                                        </div>
                                        <div class="ms-2 d-flex align-items-center">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-1">4.1</span>
                                                <p class="fs-14">(450 Reviews)</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Car Grid -->

                        <!-- Car Grid -->
                        <div class="col-xxl-4 col-md-6 d-flex">
                            <div class="place-item mb-4 flex-fill">
                                <div class="place-img">
                                    <div class="img-slider image-slide owl-carousel nav-center">
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-12.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-13.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-14.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>

                                    </div>
                                    <div class="fav-item">
                                        <a href="javascript:void(0);" class="fav-icon">
                                            <i class="isax isax-heart5"></i>
                                        </a>
                                        <span class="badge bg-info d-inline-flex align-items-center"><i class="isax isax-ranking me-1"></i>Trending</span>
                                    </div>

                                </div>
                                <div class="place-content">
                                    <a href="javascript:void(0);" class="avatar avatar-md ms-3 car-avatar-image">
                                        <img src="{{URL::asset('build/img/users/user-14.jpg')}}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <div class="d-flex flex-wrap align-items-center">
                                            <span class="badge badge-secondary  fs-10 fw-medium me-1">Sedan</span>
                                        </div>
                                    </div>
                                    <h5 class="mb-1 text-truncate"><a href="{{ url('car-details')}}">Toyota 86 Sports</a></h5>
                                    <p class="d-flex align-items-center mb-3"><i class="isax isax-location5 me-2"></i>Broad Street, Bristol</p>
                                    <div class="mb-3 p-2 border rounded">
                                        <div class="row">
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-gas-station me-1"></i>Fuel</span>
                                                <p class="text-dark fs-14">Hybrid</p>
                                            </div>
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-kanban me-1"></i>Gear</span>
                                                <p class="text-dark fs-14">Auto</p>
                                            </div>
                                            <div class="col">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-routing-2 me-1"></i>Travelled</span>
                                                <p class="text-dark fs-14">15,000 KM</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between border-top pt-3">
                                        <div class="d-flex flex-wrap align-items-center me-2">
                                            <h5 class="text-primary">$350 <span class="fs-14 text-gray-6 fw-normal">/ day</span></h5>

                                        </div>
                                        <div class="ms-2 d-flex align-items-center">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-1">4.6</span>
                                                <p class="fs-14">(520 Reviews)</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Car Grid -->

                        <!-- Car Grid -->
                        <div class="col-xxl-4 col-md-6 d-flex">
                            <div class="place-item mb-4 flex-fill">
                                <div class="place-img">
                                    <div class="img-slider image-slide owl-carousel nav-center">
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-13.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-14.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-11.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>

                                    </div>
                                    <div class="fav-item">
                                        <a href="javascript:void(0);" class="fav-icon">
                                            <i class="isax isax-heart5"></i>
                                        </a>
                                        <span class="badge bg-info d-inline-flex align-items-center"><i class="isax isax-ranking me-1"></i>Trending</span>
                                    </div>

                                </div>
                                <div class="place-content">
                                    <a href="javascript:void(0);" class="avatar avatar-md ms-3 car-avatar-image">
                                        <img src="{{URL::asset('build/img/users/user-15.jpg')}}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <div class="d-flex flex-wrap align-items-center">
                                            <span class="badge badge-secondary  fs-10 fw-medium me-1">Sedan</span>
                                        </div>
                                    </div>
                                    <h5 class="mb-1 text-truncate"><a href="{{ url('car-details')}}">Jeep Wrangler</a></h5>
                                    <p class="d-flex align-items-center mb-3"><i class="isax isax-location5 me-2"></i>Chapel Street, Salford</p>
                                    <div class="mb-3 p-2 border rounded">
                                        <div class="row">
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-gas-station me-1"></i>Fuel</span>
                                                <p class="text-dark fs-14">Diesel</p>
                                            </div>
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-kanban me-1"></i>Gear</span>
                                                <p class="text-dark fs-14">Manual</p>
                                            </div>
                                            <div class="col">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-routing-2 me-1"></i>Travelled</span>
                                                <p class="text-dark fs-14">10,300 KM</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between border-top pt-3">
                                        <div class="d-flex flex-wrap align-items-center me-2">
                                            <h5 class="text-primary">$700 <span class="fs-14 text-gray-6 fw-normal">/ day</span></h5>

                                        </div>
                                        <div class="ms-2 d-flex align-items-center">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-1">4.2</span>
                                                <p class="fs-14">(360 Reviews)</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Car Grid -->

                        <!-- Car Grid -->
                        <div class="col-xxl-4 col-md-6 d-flex">
                            <div class="place-item mb-4 flex-fill">
                                <div class="place-img">
                                    <div class="img-slider image-slide owl-carousel nav-center">
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-14.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-11.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>
                                        <div class="slide-images">
                                            <a href="{{ url('car-details')}}">
                                                <img src="{{URL::asset('build/img/cars/car-12.jpg')}}" class="img-fluid" alt="img">
                                            </a>
                                        </div>

                                    </div>
                                    <div class="fav-item">
                                        <a href="javascript:void(0);" class="fav-icon">
                                            <i class="isax isax-heart5"></i>
                                        </a>
                                        <span class="badge bg-info d-inline-flex align-items-center"><i class="isax isax-ranking me-1"></i>Trending</span>
                                    </div>

                                </div>
                                <div class="place-content">
                                    <a href="javascript:void(0);" class="avatar avatar-md ms-3 car-avatar-image">
                                        <img src="{{URL::asset('build/img/users/user-16.jpg')}}" class="rounded-circle" alt="img">
                                    </a>
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <div class="d-flex flex-wrap align-items-center">
                                            <span class="badge badge-secondary  fs-10 fw-medium me-1">Sedan</span>
                                        </div>
                                    </div>
                                    <h5 class="mb-1 text-truncate"><a href="{{ url('car-details')}}">Jaguar XK</a></h5>
                                    <p class="d-flex align-items-center mb-3"><i class="isax isax-location5 me-2"></i>Castle Street, Cambridge</p>
                                    <div class="mb-3 p-2 border rounded">
                                        <div class="row">
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-gas-station me-1"></i>Fuel</span>
                                                <p class="text-dark fs-14">Petrol</p>
                                            </div>
                                            <div class="col border-end">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-kanban me-1"></i>Gear</span>
                                                <p class="text-dark fs-14">Auto</p>
                                            </div>
                                            <div class="col">
                                                <span class="fs-14 d-flex align-items-center text-dark"><i class="isax isax-routing-2 me-1"></i>Travelled</span>
                                                <p class="text-dark fs-14">13,800 KM</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between border-top pt-3">
                                        <div class="d-flex flex-wrap align-items-center me-2">
                                            <h5 class="text-primary">$650 <span class="fs-14 text-gray-6 fw-normal">/ day</span></h5>

                                        </div>
                                        <div class="ms-2 d-flex align-items-center">
                                            <div class="d-flex align-items-center flex-wrap">
                                                <span class="badge badge-warning badge-xs text-gray-9 fs-13 fw-medium me-1">4.8</span>
                                                <p class="fs-14">(500 Reviews)</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Car Grid -->

                    </div>

                    <!-- Pagination -->
                    <nav class="pagination-nav">
                        <ul class="pagination justify-content-center">
                            <li class="page-item disabled">
                                <a class="page-link" href="javascript:void(0);" aria-label="Previous">
                                    <span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
                            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
                            <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
                            <li class="page-item active"><a class="page-link" href="javascript:void(0);">4</a></li>
                            <li class="page-item"><a class="page-link" href="javascript:void(0);">5</a></li>
                            <li class="page-item">
                                <a class="page-link" href="javascript:void(0);" aria-label="Next">
                                    <span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <!-- /Pagination -->

                </div>

            </div>
        </div>
    </div>
    <!-- /Page Wrapper -->
@endsection