@extends('layouts.auth')

@section('content')
    <!-- loader start-->
    {{-- <div class="loader-wrapper" id="loader">
        <span class="loader"></span>
    </div> --}}
    <!-- loader end -->
    <!-- header starts -->
    <header class="swiper header-panel-lg">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class="img-fluid header-img w-100" src="{{ asset('storage/' . $vehicles->photos[0]->photo) }}"
                    alt="7">
            </div>

        </div>
    </header>
    <div class="header-img-panel">
        <a href="{{ route('vehicle.index') }}">
            <i class="iconsax icon-btn" data-icon="chevron-left"> </i>
        </a>
        <a href="#">
            <img class="img-fluid icon-btn error-bg p-2" src="../../assets/images/svg/heart-fill.svg" alt="heart">
        </a>
    </div>
    <div class="header-img-content">
        <h3>{{ $vehicles->name }}</h3>
        <h6 class="d-flex align-items-center"><img src="../../assets/images/svg/star-fill.svg" alt="star"> 3.8</h6>
    </div>
    <!-- header end -->

    <!-- amount section starts -->
    <div class="amount-wrapper">
        <div class="amount-content d-flex align-items-center justify-content-between">
            <h6 class="fw-normal theme-color">Amount</h6>
            <h3 class="fw-semibold theme-color">Rp {{ number_format($vehicles->price, 0, ',', '.') }}</h3>
        </div>
    </div>
    <!-- amount section starts -->

    <!-- Facility section starts -->
    <section>
        <div class="custom-container">
            <div class="title">
                <h2>Facility</h2>
            </div>
            <div class="row g-3">
                @foreach ($vehicles->category->facilities as $facility)
                    <div class="col-3">
                        <div class="categories-box color-categories-box">
                            <div class="categories-box">
                                <img class="categories-icon" src="{{ asset('storage/' . $facility->icon) }}" alt="cleaning">
                            </div>
                        </div>
                        <h5 class="categories-name mt-2 text-center title-color">{{ $facility->name }}</h5>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- Facility  section end -->

    <!-- service details section starts -->
    <section class="section-b-space">
        <div class="custom-container">
            <div class="service-details-wrapper">
                <ul class="listing">
                    <li>
                        <div class="listing-box">
                            <i class="iconsax icon" data-icon="clock"> </i>
                            <div>
                                <h6 class="title-color listing-title ps-2">Rent</h6>
                                <h5 class="content-color ps-2"> Per {{ $vehicles->rent }}</h5>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="listing-box">
                            <i class="iconsax icon" data-icon="layers-1"> </i>
                            <div>
                                <h6 class="title-color listing-title ps-2">Category</h6>
                                <h5 class="content-color ps-2">{{ $vehicles->category->name }}</h5>
                            </div>
                        </div>
                    </li>
                </ul>

                <ul class="listing border-0">
                    <li>
                        <div class="listing-box">
                            <i class="iconsax icon" data-icon="tag-user"> </i>
                            <div>
                                <h6 class="title-color listing-title ps-2">{{ $vehicles->city->name }}</h6>
                                <h5 class="content-color ps-2">2 Servicemen</h5>
                            </div>
                        </div>
                    </li>
                </ul>

                <div class="line-box">
                    <div class="dot1"></div>
                    <div class="dot2"></div>
                </div>
            </div>

            <div class="description mt-3">
                <h6 class="inner-sub-title">Description</h6>
                <p class="content-color fw-normal mt-1">{{ $vehicles->about }} <span class="fw-medium"> Read more.</span>
                </p>
            </div>

            <div class="provider-details-box flex-column p-0 gap-0">
                <div class="provider-details-head w-100">
                    <h6 class="title-color fw-normal">Vendor details</h6>
                    <a href="provider-details.html">
                        <h6 class="more">More <i class="iconsax arrow" data-icon="arrow-right"> </i>
                        </h6>
                    </a>
                </div>

                <div class="provider-details w-100 flex-column align-items-stretch">
                    <div class="provider-profile">
                        <img class="img-fluid profile-img" src="{{ asset('storage/' . $vehicles->vendor->thumbnail) }}"
                            alt="">

                        <div class="profile-content">
                            <h5>{{ $vehicles->vendor->name }}</h5>
                            <h6 class="d-flex align-items-center gap-1 title-color">
                                <img src="../../assets/images/svg/star-fill.svg" alt="star"> 3.0
                            </h6>
                        </div>
                    </div>

                    <div class="total-experience">
                        <h6 class="content-color fw-normal">Total Experience :</h6>
                        <h6 class="title-color fw-normal">3 years Experience</h6>
                    </div>
                    <div class="pt-2 d-flex align-items-center justify-content-between">
                        <h6 class="content-color fw-normal">Services Delivered :</h6>
                        <h6 class="fw-bold theme-color"><span>250 </span> Service</h6>
                    </div>
                </div>

            </div>

            <div class="title mt-3">
                <h3 class="inner-sub-title">Reviews</h3>
                <a href="review.html">View all</a>
            </div>

            <ul class="review-list">
                <li class="review-box">
                    <div class="review-profile">
                        <img class="img-fluid profile-img" src="../../assets/images/profile/p12.png" alt="">

                        <div class="profile-content">
                            <div>
                                <h5 class="fw-medium title-color">Devon Lane</h5>
                                <h6 class="content-color mt-1">12 min ago</h6>
                            </div>
                            <h6 class="d-flex align-items-center">
                                <img src="../../assets/images/svg/star-fill.svg" alt="star"> 3.0
                            </h6>
                        </div>
                    </div>

                    <p class="review-content">“This is amazing service i have ever get”</p>
                </li>
            </ul>

            <div class="title mt-3">
                <h5 class="inner-sub-title">Provided Services</h5>
                <a href="service.html">View all</a>
            </div>

            <div class="swiper service-slider">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="service-box p-3">
                            <div class="service-image">
                                <img class="img-fluid service-img" src="../../assets/images/service/11.jpg"
                                    alt="11">

                            </div>
                            <div class="service-details">
                                <div class="d-flex align-items-center justify-content-between mt-2">
                                    <h5 class="fw-medium title-color white-nowrap">Ac water drop solutions</h5>
                                    <h6 class="d-flex align-items-center gap-1 title-color">
                                        <img src="../../assets/images/svg/star-fill.svg" alt="star"> 3.0
                                    </h6>
                                </div>
                                <span>Ac repair</span>

                                <div class="mt-1 d-flex align-items-center justify-content-between">
                                    <h4 class="fw-semibold title-color">$30.56</h4>
                                    <a href="cart.html" class="btn-sm theme-btn">+ Add</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fixed-btn">
            <div class="custom-container">
                <a href="cart.html" class="btn theme-btn w-100">Add to cart</a>
            </div>
        </div>
    </section>
    <!-- service details section end -->

    <!-- panel-space start -->
    <div class="panel-space"></div>
    <!-- panel-space end -->
@endsection