@extends('layouts.auth')

@section('content')
    <!-- loader start-->
    {{-- <div class="loader-wrapper" id="loader">
        <span class="loader"></span>
    </div> --}}
    <!-- loader end -->

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

    <!-- banner section starts -->
    <br>
    <section class="section-b-space">
        <div class="swiper-wrapper">

            @foreach($bannerSlides as $bannerSlide)
                <div class="position-relative">
                <img class="img-fluid home-banner w-100 position-relative" src="{{ asset('storage/' . $bannerSlide->image) }}"
                    alt="banner">
                <div class="banner-content position-absolute">
                    <h6 class="fw-medium text-white error-bg px-2 py-1 rounded-pill d-inline-flex">{{ $bannerSlide->headline }}</h6>
                    <h3 class="fw-bold text-uppercase mt-1">{{ $bannerSlide->title }}</h3>
                    <h6 class="content-color fw-normal mt-1">{{ $bannerSlide->description }}</h6>
                    <a href="{{  $bannerSlide->link }}" class="btn theme-btn p-1 px-2 mt-4">Book Now.!</a>
                </div>
            </div>
            @endforeach

        </div>
    </section>
    <!-- banner section end -->

    <!-- offer section start -->
    {{-- <section>
        <div class="custom-container">
            <div class="title">
                <h2>Coupons</h2>
                <a href="coupon.html">View all</a>
            </div>

            <div class="swiper coupon">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="coupon.html" class="offer-box">
                            <div class="offer-icon">
                                <img class="img-fluid offer" src="../../assets/images/svg/coupon-logo.svg" alt="offer">
                            </div>
                            <div class="offer-content">
                                <div>
                                    <h5 class="fw-medium title-color">Bank of America</h5>
                                    <h6 class="content-color fw-normal">Use code <span class="fw-semibold content-color">
                                            #A125 </span>
                                    </h6>
                                </div>
                                <h3 class="fw-bold theme-color">30% OFF</h3>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="coupon.html" class="offer-box">
                            <div class="offer-icon">
                                <img class="img-fluid offer" src="../../assets/images/svg/coupon-logo.svg" alt="offer">
                            </div>
                            <div class="offer-content">
                                <div>
                                    <h5 class="fw-medium title-color">Bank of America</h5>
                                    <h6 class="content-color fw-normal">Use code <span class="fw-semibold content-color">
                                            #A125 </span>
                                    </h6>
                                </div>
                                <h3 class="fw-bold theme-color">30% OFF</h3>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="coupon.html" class="offer-box">
                            <div class="offer-icon">
                                <img class="img-fluid offer" src="../../assets/images/svg/coupon-logo.svg" alt="offer">
                            </div>
                            <div class="offer-content">
                                <div>
                                    <h5 class="fw-medium title-color">Bank of America</h5>
                                    <h6 class="content-color fw-normal">Use code <span class="fw-semibold content-color">
                                            #A125 </span>
                                    </h6>
                                </div>
                                <h3 class="fw-bold theme-color">30% OFF</h3>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
    <!-- offer section end -->

    <!-- categories section starts -->
    <section>
        <div class="custom-container">
            <div class="title">
                <h2>Categories</h2>
                <a href="{{ route('category.index') }}">View all</a>
            </div>
            <div class="row g-3">

                @foreach ($categories as $category)
                    <div class="col-3">
                        <a href="{{ route('category.show', $category->slug) }}">
                            <div class="categories-box color-categories-box">
                                <div class="categories-box">
                                    <img class="categories-icon"
                                        src="{{ asset('storage/' . $category->icon) }}" alt="cleaning">
                                </div>
                            </div>
                            <h5 class="categories-name mt-2 text-center title-color">{{ $category->name }}</h5>
                        </a>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
    <!-- categories section end -->

    <!-- service section starts -->
    <section class="section-b-space">
        <div class="custom-container">
            <div class="title">
                <h2>Latest Rental</h2>
                <a href="{{ route('vehicle.index') }}">View all</a>
            </div>

            <div class="swiper blog-slider">
                <div class="swiper-wrapper">

                    @foreach ($vehicles as $vehicle)
                        <div class="swiper-slide">
                            <div class="blog-box ratio2_3">
                                <a href="{{ route('vehicle.detail-vehicle', $vehicle->id) }}" class="blog-box-img">
                                    <img class="bg-img blog-img" src="{{ asset('storage/' . $vehicle->thumbnail) }}"
                                        alt="1">
                                </a>
                                <div class="blog-details">
                                    <a href="blog-details.html">
                                        <h4>{{ $vehicle->name }}</h4>
                                    </a>
                                    <h6>Sewa: Rp {{ number_format($vehicle->price, 0, ',', '.') }} / {{ $vehicle->rent }}</h6>

                                    <div class="d-flex align-items-center justify-content-between mt-3">
                                        <div class="message">
                                            <i class="iconsax icon" data-icon="message-dots"></i>
                                            <h6>23</h6>
                                        </div>

                                        <h6 class="mt-0 theme-color">{{ $vehicle->city->name }} | {{ $vehicle->vendor->name }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </section>
    <!-- service section starts -->

    <!-- vendor packages section starts -->
    <section>
        <div class="custom-container">
            <div class="title">
                <h2>Vendors</h2>
                <a href="{{ route('vendor.index') }}">View all</a>
            </div>

            <div class="swiper packages">
                <div class="swiper-wrapper">

                    @foreach ($vendors as $vendor)
                        <div class="swiper-slide">
                            <div class="packages-box box2">
                                <a href="{{ route('vendor.detail-vendor', $vendor->id) }}">
                                    <div class="packages-icon-box icon-box-2">
                                        <div class="service-profile">
                                            <img class="img-fluid profile-img" src="{{ asset('storage/' . $vendor->thumbnail) }}"
                                        alt="p4">
                                        </div>
                                    </div>
                                    <h6 class="packages-name">{{ $vendor->name }}</h6>
                                    <h5 class="packages-name"> {{ $vendor->city->name }}</h5>

                                    <div class="d-flex align-items-center justify-content-between mt-3">
                                        <h6 class="more">View More</h6>
                                        <i class="iconsax arrow" data-icon="arrow-right"></i>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </section>
    <!-- vendor packages section end -->

    <!-- service section starts -->
    {{-- <section class="section-b-space">
        <div class="custom-container">
            <div class="title">
                <h2>Featured service</h2>
                <a href="service.html">View all</a>
            </div>

            <ul class="service-list">
                <li class="service-box">
                    <div class="service-head">
                        <div class="service-profile">
                            <img class="img-fluid profile-img" src="../../assets/images/profile/p4.png" alt="p4">
                            <h5>Arlene McCoy</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="../../assets/images/service/1.jpg" 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">Cleaning of bathroom</h5>
                            </a>
                            <h4 class="fw-semibold title-color d-flex align-items-center gap-1"> $30<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> 30mins
                                </h5>
                                <h6 class="fw-normal title-color ps-2">Min 2 servicemen required</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="cart.html" class="btn-sm theme-btn">+ Add</a>
                        </div>
                    </div>
                </li>

                <li class="service-box">
                    <div class="service-head">
                        <div class="service-profile">
                            <img class="img-fluid profile-img" src="../../assets/images/profile/p5.png" alt="p4">
                            <h5>Arlene McCoy</h5>
                        </div>
                        <h6 class="rating"> <img class="img-fluid star" src="../../assets/images/svg/star-fill.svg"
                                alt="star">
                            3.2</h6>
                    </div>
                    <img class="img-fluid w-100" src="../../assets/images/service/2.jpg" 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">Furnishing & carpentry</h5>
                            </a>
                            <h4 class="fw-semibold title-color d-flex align-items-center gap-1"><span
                                    class="content-color fw-normal"></span> $30</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> 30mins
                                </h5>
                                <h6 class="fw-normal title-color ps-2">Min 2 servicemen required</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="cart.html" class="btn-sm theme-btn">+ Add</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section> --}}
    <!-- service section starts -->

    <!-- expert servicer section starts -->
    {{-- <section class="section-b-space box-background">
        <div class="custom-container">
            <div class="title">
                <h2>Expert Servicer</h2>
                <a href="expert-servicer.html">View all</a>
            </div>

            <ul class="servicer-list">
                <li class="servicer-box">
                    <div class="servicer-profile">
                        <img class="profile-img" src="../../assets/images/profile/p11.png" alt="p11">
                    </div>
                    <div class="servicer-details">
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="servicemen-details.html">
                                <h4 class="fw-medium title-color">Leslie Alexander</h4>
                            </a>
                            <h6 class="rating"> <img class="img-fluid star" src="../../assets/images/svg/star-fill.svg"
                                    alt="star">
                                4.2</h6>
                        </div>
                        <h6 class="fw-normal title-color">Painting Service</h6>

                        <div class="location">
                            <i class="iconsax icon" data-icon="location"></i>
                            <h6> Santa Ana, New York</h6>
                        </div>
                    </div>
                </li>
                <li class="servicer-box">
                    <div class="servicer-profile">
                        <img class="profile-img" src="../../assets/images/profile/p10.png" alt="p11">
                    </div>
                    <div class="servicer-details">
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="servicemen-details.html">
                                <h4 class="fw-medium title-color">Esther Howard</h4>
                            </a>
                            <h6 class="rating"> <img class="img-fluid star" src="../../assets/images/svg/star-fill.svg"
                                    alt="star">
                                4.0</h6>
                        </div>
                        <h6 class="fw-normal title-color">Cleaning, Plumber, Electronics Service</h6>

                        <div class="location">
                            <i class="iconsax icon" data-icon="location"></i>
                            <h6> Allentown, New Mexico </h6>
                        </div>
                    </div>
                </li>
                <li class="servicer-box">
                    <div class="servicer-profile">
                        <img class="profile-img" src="../../assets/images/profile/p9.png" alt="p11">
                    </div>
                    <div class="servicer-details">
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="servicemen-details.html">
                                <h4 class="fw-medium title-color">Guy Hawkins</h4>
                            </a>
                            <h6 class="rating"> <img class="img-fluid star" src="../../assets/images/svg/star-fill.svg"
                                    alt="star">
                                3.8</h6>
                        </div>
                        <h6 class="fw-normal title-color">Salon Service</h6>

                        <div class="location">
                            <i class="iconsax icon" data-icon="location"></i>
                            <h6> Mesa, New Jersey</h6>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section> --}}
    <!-- expert servicer section end -->



    <!-- panel-space start -->
    {{-- <div class="panel-space"></div> --}}
    <!-- panel-space end -->

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