@extends('front.layouts.master')
@section('title', __('unlimited'))
@section('content')
    <section id="main_container">
        <!-- end /. navbar -->

        <div class="container">
            <div class="rounded-4 overflow-hidden">
                <div class="row gx-2 zoom-gallery">
                    {{-- Render the main large image on the left --}}
                    <div class="col-md-8">
                        @if (count($galleryImages) > 0)
                            @php
                                // $image = explode('/', $galleryImages[2]);
                                $image = explode('/', $galleryImages[0]);
                            @endphp
                            <a class="d-block position-relative"
                                href="{{ asset('storage/vendor_gallery_images/' . end($image)) }}">
                                <img class="img-fluid w-100" src="{{ asset('storage/vendor_gallery_images/' . end($image)) }}"
                                    alt="Image Description">
                                <div class="position-absolute bottom-0 end-0 mb-3 me-3">
                                    <span
                                        class="align-items-center btn btn-light btn-sm d-flex d-md-none fw-semibold gap-2">
                                        <i class="fa-solid fa-expand"></i>
                                        <span> View photos</span>
                                    </span>
                                </div>
                            </a>
                        @else
                            {{-- Placeholder for main large image --}}
                            <img class="img-fluid w-100" src="{{ asset('admin-assets/assets/img/placeholder.jpg') }}"
                                alt="Placeholder Image">
                        @endif
                    </div>

                    {{-- Render the two smaller images on the right --}}
                    <div class="col-md-4">
                        @if (count($galleryImages) > 1)
                            @php
                                // $image = explode('/', $galleryImages[2]);
                                $image = explode('/', $galleryImages[1]);
                            @endphp
                            <a class="d-block position-relative"
                                href="{{ asset('storage/vendor_gallery_images/' . end($image)) }}">
                                <img class="img-fluid w-100"
                                    src="{{ asset('storage/vendor_gallery_images/' . end($image)) }}"
                                    alt="Image Description">
                            @else
                                {{-- Placeholder for first smaller image --}}
                                <img class="img-fluid w-100" src="{{ asset('admin-assets/assets/img/placeholder.jpg') }}"
                                    alt="Placeholder Image">
                        @endif

                        @if (count($galleryImages) > 2)
                            @php
                                // $image = explode('/', $galleryImages[2]);
                                $image = explode('/', $galleryImages[2]);
                            @endphp
                            <a class="d-block position-relative"
                                href="{{ asset('storage/vendor_gallery_images/' . end($image)) }}">
                                <img class="img-fluid w-100"
                                    src="{{ asset('storage/vendor_gallery_images/' . end($image)) }}"
                                    alt="Image Description">
                                <div class="position-absolute bottom-0 end-0 mb-3 me-3">
                                    <span
                                        class="align-items-center btn btn-light btn-sm d-md-inline-flex d-none fw-semibold gap-2">
                                        <i class="fa-solid fa-expand"></i>
                                        <span> View photos</span>
                                    </span>
                                </div>
                            </a>
                        @else
                            {{-- Placeholder for second smaller image --}}
                            <img class="img-fluid w-100" src="{{ asset('admin-assets/assets/img/placeholder.jpg') }}"
                                alt="Placeholder Image">
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!-- end /.gallery -->



        <!-- start details header -->
        <div class="py-4">
            <div class="container">
                <div class="justify-content-between row align-items-center g-4">
                    @if (session('success'))
                        <div class="col-12">

                            <div class="alert alert-success alert-dismissible fade show w-50 mx-auto" role="alert">
                                <strong>Success!</strong> {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif
                    @if (session('error'))
                        <div class="col-12">
                            <div class="alert alert-danger alert-dismissible fade show w-50 mx-auto" role="alert">
                                <strong>Error!</strong> {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif
                    <div class="col-lg col-xxl-8">
                        <h1 class="h2 page-header-title fw-semibold">{{ $listing->business_name }}</h1>
                        <ul class="list-inline list-separator d-flex align-items-center mb-2">
                            <li class="list-inline-item">
                                <a class="fw- text-capitalize text-dark text-decoration-none"
                                    href="{{ $listing->website }}">Visit Website<i
                                        class="fa-solid fa-arrow-up-right-from-square fs-14 ms-2"></i></a>
                            </li>
                           
                        </ul>
                    </div>
                    <div class="col-lg-auto">
                        <!-- start checkbox bookmark -->
                        <div class="form-check form-check-bookmark mb-2 mb-sm-0">
                            <input class="form-check-input" type="checkbox" value="" id="jobBookmarkCheck">
                            <label class="form-check-label" for="jobBookmarkCheck">
                                <span class="form-check-bookmark-default">
                                    <a href="{{ auth()->user() ? route('user.fav', ['id' => $listing->id]) : route('front.sign-in') }}"
                                        class="text-dark text-decoration-none">
                                        @if ($wishlist == true)
                                            <i class="fa-solid fa-heart me-1"></i> Saved
                                        @else
                                            <i class="fa-regular fa-heart me-1"></i> Save this listing
                                        @endif
                                    </a>
                                </span>
                                <span class="form-check-bookmark-active">
                                    <i class="fa-solid fa-heart me-1"></i> Saved
                                </span>
                            </label>
                        </div>
                        <!-- end /. checkbox bookmark -->
                    </div>
                </div>
            </div>
        </div>
        <!-- end /. details header -->
        <!-- start listing details -->
        <div class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 content">
                        <!-- start pricing section -->
                        @if (count($listing->services) > 0)

                            <div class="mb-4 our-service-sec">
                                <h4 class="fw-semibold fs-3 mb-4">Our Services</h4>
                                <div class="row">
                                    @foreach ($listing->services as $service)
                                        <div class="col-sm-6">
                                            <div class="mb-3 menu pb-2">
                                                <div class="row">
                                                    <div class="col-sm-10">
                                                        <div class="d-flex">
                                                            <img src="{{ $service->image ? asset('storage/' . $service->image) : asset('admin-assets/assets/img/placeholder.jpg') }}"
                                                                alt="{{ $service->name }}" class="serv-icon">
                                                            <div class="detail">
                                                                <h4 class="fs-17 mb-0 menu-title">{{ $service->name }}</h4>
                                                                <div class="fs-14 menu-detail text-muted">
                                                                    {{ $service->description }}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-2 menu-price-detail text-end">
                                                        <h4 class="fs-17 mb-0 menu-price"><span
                                                                class="currency-lab">AED</span>
                                                            {{ round($service->price) }}
                                                        </h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <!-- end /. pricing section -->
                        @endif
                        @if (isset($listing->map_url))
                            <!-- end /. pricing section -->
                            <hr class="my-5">
                            <div class="mb-4">
                                <h4 class="fw-semibold fs-3 mb-4">We Located <span
                                        class="font-caveat text-primary">Location</span></h4>
                                <iframe
                                    src="{{ $listing->map_url ? $listing->map_url : 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1447.0000000000002!2d55.27000000000001!3d25.2048!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5' }}"
                                    width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                            <!-- end /. pricing section -->
                        @endif
                        @if (isset($listing->about_me))
                            <hr class="my-5">
                            <div class="mb-4">
                                <h4 class="fw-semibold fs-3 mb-4">About Us <span
                                        class="font-caveat text-primary">Shop</span>
                                </h4>
                                <p>{{ $listing->about_me }}</p>
                            </div>
                        @endif
                        <hr class="my-5">
                        @if ($reviews !== 0)

                            <!-- start reviews section -->
                            <div class="mb-4">
                                <h4 class="fw-semibold fs-3 mb-4">Latest Property <span
                                        class="font-caveat text-primary">Reviews</span></h4>
                                <div class="border p-4 mb-5 rounded-4">
                                    <div class="row g-4 align-items-center">
                                        <div class="col-4"></div>
                                        <div class="col-4">
                                            <div class="rating-block text-center">
                                                <!-- start title -->
                                                <h5 class="font-caveat fs-4 mb-4">Average user rating</h5>
                                                <!-- end /. title -->
                                                <!-- Start Rating Point -->
                                                <div class="rating-point position-relative ml-auto mr-auto">
                                                    <!-- Start Svg Icon  -->
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width=".5" stroke-linecap="round" stroke-linejoin="round"
                                                        class="feather feather-star text-primary">
                                                        <polygon
                                                            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                                                        </polygon>
                                                    </svg>
                                                    <!-- /.End Svg Icon  -->
                                                    <h3 class="position-absolute mb-0 fs-18 text-primary">
                                                        {{ round($average_rating,1) }}</h3>
                                                </div>
                                                <!-- End Rating Point -->
                                                <span class="fs-13">{{ $reviews_count }} Reviews</span>
                                            </div>
                                        </div>
                                        <div class="col-4"></div>

                                    </div>
                                </div>
                                @foreach ($reviews as $review)
                                    <div class="d-flex mb-4">
                                        <div class="flex-shrink-0">
                                            @php
                                                $image = explode(
                                                    '/',
                                                    \App\Models\VendorModel::find($review->user_id)->user_image,
                                                );
                                            @endphp
                                            <img src="{{ asset('storage/' . config('global.user_image_upload_dir') . '/' . end($image)) }}"
                                                alt="..." height="70" width="70"
                                                class="object-fit-cover rounded-circle">
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <div class="comment-header d-flex flex-wrap gap-2 mb-3">
                                                <div>
                                                    <h4 class="fs-18 mb-0">-
                                                        {{ \App\Models\VendorModel::find($review->user_id)->name }}</h4>
                                                    <div class="comment-datetime fs-12 text-muted">
                                                        {{ date('d-M-Y', strtotime($review->reviewed_at)) }}</div>
                                                </div>
                                                <!-- start rating -->
                                                <div class="d-flex align-items-center gap-2 ms-auto">
                                                    <div class="d-flex align-items-center text-primary rating-stars">
                                                        @for ($i = 1; $i <= 5; $i++)
                                                            @if ($i <= $review->rating)
                                                                <i class="fa-star-icon"></i>
                                                            @else
                                                                <i class="fa-star-icon none"></i>
                                                            @endif
                                                        @endfor
                                                    </div>
                                                    <span
                                                        class="fs-14 fw-semibold rating-points">{{ $review->rating }}/5</span>
                                                </div>
                                                <!-- end /. rating -->
                                            </div>
                                            <div class="fs-15">{{ $review->reviews }}</div>
                                            <!-- end /. review -->
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <!-- end /. reviews section -->
                            <hr class="my-5">
                            <!-- start comment form section -->
                        @endif

                        <div class="mb-4 mb-lg-0">
                            <h4 class="fw-semibold fs-3 mb-4">Leave a <span
                                    class="font-caveat text-primary">Comment</span></h4>
                            <form class="row g-4" action="{{ url('user/submit/review') }}" method="POST">
                                @csrf
                                <div class="col-sm-6">
                                    <!-- start form group -->
                                    <div class="">
                                        <input type="hidden" name="vendor_id" value="{{ $listing->id }}">
                                        <label class=" required fw-medium mb-2">Email Address</label>
                                        <input type="text" required class="form-control" value="{{ old('email') }}"
                                            name="email" required placeholder="Enter your email address">
                                    </div>
                                    <!-- end /. form group -->
                                </div>
                                <div class="col-sm-6">
                                    <!-- start form group -->
                                    <div class="">
                                        <label class="required fw-medium mb-2">Rating</label>
                                        <select class="form-select" name="rating" required>
                                            <option value="">Select Rating</option>
                                            <option value="1">1 Star</option>
                                            <option value="2">2 Stars</option>
                                            <option value="3">3 Stars</option>
                                            <option value="4">4 Stars</option>
                                            <option value="5">5 Stars</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- end /. form group -->
                                <div class="col-sm-12">
                                    <!-- start form group -->
                                    <div class="">
                                        <label class="required fw-medium mb-2">Comment</label>
                                        <textarea class="form-control" rows="7" name="comment" required
                                            placeholder="Tell us what we can help you with!">{{ old('comment') }}</textarea>
                                    </div>
                                    <!-- end /. form group -->
                                </div>
                                <div class="col-sm-12 text-end">
                                    @if (auth()->user())
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    @else
                                        <a href="{{ route('front.sign-in') }}" class="btn btn-primary">Submit</a>
                                    @endif
                                </div>
                            </form>
                        </div>
                        <!-- end /. comment form section -->
                        <!-- Other sections... -->
                    </div>
                    <div class="col-lg-4 ps-xxl-5 sidebar">
                        <!-- start opening hours -->
                        <div class="border mb-4 p-4 rounded-4">
                            <div class="align-items-center d-flex justify-content-between mb-4">
                                <h4 class="w-semibold mb-0">Opening <span class="font-caveat text-primary">Hours</span>
                                </h4>
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                                    fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
                                    <path
                                        d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z">
                                    </path>
                                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"></path>
                                </svg>
                            </div>
                            <!-- Render operating hours dynamically -->
                            @foreach ($operatingHours as $day => $hours)
                                <div class="align-items-center d-flex justify-content-between mb-3">
                                    <span class="fw-semibold">{{ ucfirst($day) }}</span>
                                    <span class="fs-14">{{ $hours['open_time'] }} - {{ $hours['close_time'] }}</span>
                                </div>
                            @endforeach
                        </div>
                        <!-- end /. opening hours -->

                        <!-- start enquiry form section -->
                        <div class="border p-4 rounded-4">
                            <h4 class="fw-semibold mb-4">Enquiry<span class="font-caveat text-primary">online</span></h4>

                            <form class="row g-4" method="POST" action="{{ route('submit.enquiry') }}">
                                @csrf
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="required fw-medium mb-2">Full Name</label>
                                        <input type="text" class="form-control" name="name"
                                            placeholder="Enter your name" required>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="required fw-medium mb-2">Email Address</label>
                                        <input type="email" class="form-control" name="email"
                                            placeholder="Enter your email address" required>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="required fw-medium mb-2">Contact Number</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="dial_code" value="+971"
                                                placeholder="Dial code" required>
                                            <input type="text" class="form-control" name="mobile"
                                                placeholder="Mobile number" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="required fw-medium mb-2">Comment</label>
                                        <textarea class="form-control" name="message" rows="7" placeholder="Tell us what we can help you with!"
                                            required></textarea>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <button type="submit" class="btn btn-primary w-100">Submit</button>
                                </div>
                            </form>
                        </div>
                        <!-- end /. enquiry form section -->

                    </div>
                </div>
            </div>
        </div>
        <!-- end /. listing details -->

        <!-- start listings carousel -->
        @if (count($similarListings) > 2)

            <div class="py-5 position-relative overflow-hidden">
                <div class="container py-4">
                    <div class="row justify-content-center">
                        <div class="col-sm-10 col-md-10 col-lg-8 col-xl-7">
                            <!-- Section header -->
                            <div class="section-header text-center mb-5" data-aos="fade-down">
                                <div
                                    class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">
                                    Similar Listings</div>
                                <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Similar
                                    Listings
                                    you
                                    may like</h2>
                                <div class="sub-title fs-16">Discover exciting categories. <span
                                        class="text-primary fw-semibold">Find what you’re looking for.</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="listings-carousel owl-carousel owl-theme owl-nav-bottom">
                        @foreach ($similarListings as $similarListing)
                            <!-- Listing card -->
                            <div class="card rounded-3 w-100 flex-fill overflow-hidden">
                                <!-- Card link -->
                                <a href="{{ url('/listing-details/' . $similarListing->id) }}"
                                    class="stretched-link"></a>
                                <!-- Card image wrap -->
                                <div class="card-img-wrap card-image-hover overflow-hidden">
                                    @php
                                        $image = explode('/', $similarListing->user_image);
                                        // var_dump($image);
                                    @endphp
                                    <img src="{{ asset('storage/vendor_profile_image/' . end($image)) }}"
                                        alt="{{ $similarListing->name }}" class="img-fluid">
                                    <!-- Example: Display discount badge -->
                                    @if ($similarListing->discount)
                                        <div class="bg-primary card-badge d-inline-block text-white position-absolute">
                                            {{ $similarListing->discount }}</div>
                                    @endif
                                </div>
                                <!-- Card content -->
                                <div class="d-flex flex-column h-100 position-relative p-4">
                                    <!-- Category icon -->
                                    <div
                                        class="align-items-center bg-primary cat-icon d-flex justify-content-center position-absolute rounded-circle text-white">
                                        <i class="fa-solid fa-shop"></i>
                                    </div>
                                    <!-- Ratings -->
                                    {{-- <div class="align-items-center d-flex flex-wrap gap-1 text-primary card-start">
                                    <i class="fa-solid fa-star"></i>
                                    <span class="fw-medium text-primary"><span
                                            class="fs-5 fw-semibold me-1">({{ $similarListing->rating }})</span>{{ $similarListing->reviews_count }}
                                        reviews</span>
                                </div> --}}
                                    <!-- Card title -->
                                    <h4 class="fs-5 fw-semibold mb-0">{{ $similarListing->name }}</h4>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        <!-- end /. listings carousel -->
    </section>

    <!-- Footer Section Start -->

@endsection

@push('styles')
    <link href="{{ asset('front/assets/plugins/aos/aos.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/fontawesome/css/all.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/OwlCarousel2/css/owl.carousel.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/OwlCarousel2/css/owl.theme.default.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css') }}"
        rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/ion.rangeSlider/ion.rangeSlider.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/magnific-popup/magnific-popup.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/select2/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/select2-bootstrap-5/select2-bootstrap-5-theme.min.css') }}"
        rel="stylesheet">
    <style>
        @media (min-width: 1200px) {
            #main_container {
                max-width: 1140px !important;
                margin: auto;
            }
        }
    </style>
@endpush

@push('script')
    <!-- Optional JavaScript -->
    <script src="{{ asset('front/assets/plugins/jQuery/jquery.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/aos/aos.min.js') }}"></script>
    <!-- SlickNav js file -->
    <script src="{{ asset('front/assets/js/jquery.slicknav.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/macy/macy.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/simple-parallax/simpleParallax.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/OwlCarousel2/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/waypoints/jquery.waypoints.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/counter-up/jquery.counterup.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.ui.widget.js') }}">
    </script>
    <script src="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fileupload.js') }}">
    </script>
    <script
        src="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.iframe-transport.js') }}">
    </script>
    <script
        src="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fancy-fileupload.js') }}">
    </script>
    <script src="{{ asset('front/assets/plugins/ion.rangeSlider/ion.rangeSlider.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/magnific-popup/jquery.magnific-popup.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/select2/select2.min.js') }}"></script>
    <!-- Custom script for this template -->
    <script src="{{ asset('front/assets/js/script.js') }}"></script>
@endpush