@extends('layouts.auth')

    @section('content')
        <!-- header start -->
        @include('layouts.header')
        <!-- header end -->

        <!-- blog section starts -->
        <section class="section-lg-t-space section-b-space">
            <div class="custom-container">
                {{-- <form class="auth-form mt-0 p-0 bg-transparent">
                    <div class="form-group">
                        <div class="form-input">
                            <input type="search" class="form-control search wo-filter" id="inputusername"
                                placeholder="Search destinations">
                            <i class="iconsax search-icon" data-icon="search-normal-2"><svg width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M11.5 21.75C5.85 21.75 1.25 17.15 1.25 11.5C1.25 5.85 5.85 1.25 11.5 1.25C17.15 1.25 21.75 5.85 21.75 11.5C21.75 17.15 17.15 21.75 11.5 21.75ZM11.5 2.75C6.67 2.75 2.75 6.68 2.75 11.5C2.75 16.32 6.67 20.25 11.5 20.25C16.33 20.25 20.25 16.32 20.25 11.5C20.25 6.68 16.33 2.75 11.5 2.75Z"
                                        fill="#292D32"></path>
                                    <path
                                        d="M21.9995 22.7514C21.8095 22.7514 21.6195 22.6814 21.4695 22.5314L19.4695 20.5314C19.1795 20.2414 19.1795 19.7614 19.4695 19.4714C19.7595 19.1814 20.2395 19.1814 20.5295 19.4714L22.5295 21.4714C22.8195 21.7614 22.8195 22.2414 22.5295 22.5314C22.3795 22.6814 22.1895 22.7514 21.9995 22.7514Z"
                                        fill="#292D32"></path>
                                </svg>
                            </i>
                        </div>
                    </div>
                </form> --}}
                <br>
                <h3>Latest Rent</h3>
                <br>
                <ul class="service-list">

                    @foreach ($vehicles as $vehicle)
                        <li class="service-box">
                            <div class="service-head">
                                <div class="service-profile">
                                    <img class="img-fluid profile-img"
                                        src="{{ asset('storage/' . $vehicle->vendor->thumbnail) }}" alt="p4">
                                    <h5>{{ $vehicle->vendor->name }}</h5>
                                </div>
                                <h6 class="rating"> <img class="img-fluid star" src="../../assets/images/svg/star-fill.svg"
                                        alt="star">
                                    3.0</h6>
                            </div>
                            <img class="img-fluid w-100" src="{{ asset('storage/' . $vehicle->thumbnail) }}" alt="">
                            <div class="service-details">
                                <div class="d-flex align-items-center justify-content-between">
                                    <a href="service-details.html">
                                        <h5 class="fw-medium title-color service-name">{{ $vehicle->name }}</h5>
                                    </a>
                                    <h4 class="fw-semibold title-color d-flex align-items-center gap-1"> Rp
                                        {{ number_format($vehicle->price, 0, ',', '.') }}<span
                                            class="content-color fw-normal"> <del> $40.50
                                            </del> </span></h4>
                                </div>

                                <div class="service-content">
                                    <div class="d-flex align-items-center mt-2">
                                        <h5 class="timing">
                                            <i class="iconsax" data-icon="clock"></i> {{ $vehicle->rent }}
                                        </h5>
                                        <h6 class="fw-normal title-color ps-2">{{ $vehicle->city->name }}</h6>
                                    </div>
                                </div>
                                <div class=" d-flex align-items-center justify-content-between gap-1 mt-2">
                                    <p>Foamjet tachnology removes dust 2x deeper.</p>
                                    <a href="{{ route('vehicle.detail-vehicle', $vehicle->id) }}"
                                        class="btn-sm theme-btn">Booking</a>
                                </div>
                            </div>
                        </li>
                    @endforeach

                </ul>
            </div>
        </section>
        <!-- blog section starts -->

        <!-- bottom navbar start -->
        @include('layouts.navbar')
        <!-- bottom navbar end -->
    @endsection