@php
    $allImages = $product->all_images ?? [];
    if (is_object($allImages)) {
        $allImages = (array)$allImages;
    }
    $hasMultipleImages = is_array($allImages) && count($allImages) > 1;
@endphp

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">{{ $product->trans[0]->products_title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center position-relative p-0 py-md-4 py-1">

                <div class="zoom-container position-relative">
                    <div id="modalImageLoader" class="image-loader d-none"><div class="spinner-border text_5" role="status"></div></div>
                    <img src="" id="modalImage" class="img-fluid modal-img" alt="{{ $product->trans[0]->products_title }}">
                    @if($hasMultipleImages)
                        <!-- Swipe hint (mobile only) -->
                        <div id="swipeHint" class="swipe-hint d-none">
                            <i class="fas fa-chevron-up"></i>
                            <span>Swipe</span>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <!-- Navigation Arrows on right side -->
                        <div class="position-absolute top-30 start-5 h-25 d-flex flex-column justify-content-between pe-2">
                            <button class="btn py-1" id="prevImage">
                                <i class="fas fa-chevron-up "></i>
                            </button>

                            <button class="btn py-1" id="nextImage">
                                <i class="fas fa-chevron-down "></i>
                            </button>
                        </div>
                    @endif
                </div>

                <!-- Thumbnails in Modal -->
                {{-- <div class="modal-thumbnails mt-3 mb-4 image-scroll-container">
                    <div class="square-thumbnail">
                        <img
                            src="{{ $mainImageUrl }}"
                            class="img-thumbnail modal-thumb active"
                            width="60px"
                            data-image-id="0"
                            data-full-image="{{ $mainImageUrl }}"
                            onclick="changeModalImage(this)"
                         alt="image">
                    </div>

                    @if(count($product->images)>0)
                    @foreach($product->images as $image)
                                        <div class="square-thumbnail">
                        <img
                            src="{{ $image->products_images_name ? $imagesBaseUrl.'uploads/'.env('accountId').'/products/thumbnail/'.$image->products_images_name : $imagesBaseUrl.'img/no-image.png' }}"
                            class="img-thumbnail modal-thumb"
                            width="60px"
                            data-image-id="{{ $image->products_images_id }}"
                            data-full-image="{{ $fullImageUrl }}"
                            onclick="changeModalImage(this)"
                        >
                    </div>
                    @endforeach
                    @endif
                </div> --}}

                @if($hasMultipleImages)
                    <!-- Thumbnails in Modal -->
                    <div class="swiper-container modal-thumbnails mt-md-3 mt-2 mx-2 mb-3">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="{{ $mainImageUrl }}" class="img-thumbnail modal-thumb active"
                                     data-image-id="{{ $mainImageUrl }}" data-full-image="{{ $mainImageUrl }}"
                                     onclick="changeModalImage(this)" alt="image">
                            </div>
                            @foreach($product->all_images as $image)
                                @if($image == $product->products_img) @continue @endif