{{-- Swiper - Horizontal Thumbnails --}}
<div class="gallery-container">
    @if (!empty($price))
        <div class="p-price-tag">{!! $price !!}</div>
    @endif
    <div class="swiper main-gallery">
        @php
            $picturesCollection = collect($pictures);
            $images = $picturesCollection->filter(fn($pic) => str_starts_with($pic['mime_type'], 'image/'))->values(); // reindex

            $videos = $picturesCollection->filter(fn($pic) => str_starts_with($pic['mime_type'], 'video/'))->values(); // reindex

            $orderedPictures = $images->concat($videos)->values();
        @endphp

        <div class="swiper-wrapper main-wrapper">
            @forelse($orderedPictures as $key => $media)
                <div class="swiper-slide main-slide">
                    @if (str_starts_with($media['mime_type'], 'image/'))
                        {!! imgTag($media['filename'], 'big', ['alt' => $titleSlug . '-big-' . $key]) !!}
                    @elseif (str_starts_with($media['mime_type'], 'video/'))
                        <video width="100%" height="100%" controls style="max-height:100vh; display:block;">
                            <source src="{{ asset('storage/' . $media['filename']) }}" type="{{ $media['mime_type'] }}">
                            Your browser does not support the video tag.
                        </video>
                    @endif
                </div>
            @empty
                <div class="swiper-slide">
                    <img src="{{ imgUrl(config('larapen.core.picture.default'), 'big') }}" alt="img"
                        class="default-picture">
                </div>
            @endforelse
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper thumbs-gallery">
        <div class="swiper-wrapper">
            @forelse($orderedPictures as $key => $media)
                <div class="swiper-slide">
                    @if (str_starts_with($media['mime_type'], 'image/'))
                        {!! imgTag($media['filename'], 'small', ['alt' => $titleSlug . '-small-' . $key]) !!}
                    @elseif (str_starts_with($media['mime_type'], 'video/'))
                        <div class="video-thumb">
                            <i class="fa fa-play"></i>
                        </div>
                    @endif
                </div>
            @empty
                <div class="swiper-slide">
                    <img src="{{ imgUrl(config('larapen.core.picture.default'), 'small') }}" alt="img"
                        class="default-picture">
                </div>
            @endforelse
        </div>
    </div>
</div>

@section('after_styles')
    @parent
    <link href="{{ url('assets/plugins/swiper/7.4.1/swiper-bundle.min.css') }}" rel="stylesheet" />
    <link href="{{ url('assets/plugins/swiper/7.4.1/swiper-horizontal-thumbs.css') }}" rel="stylesheet" />
    @if (config('lang.direction') == 'rtl')
        <link href="{{ url('assets/plugins/swiper/7.4.1/swiper-horizontal-thumbs-rtl.css') }}" rel="stylesheet" />
    @endif

    <style>
        .main-gallery {
            height: 400px;
        }

        .main-wrapper,
        .main-slide {
            height: 100% !important;
        }
    </style>
@endsection
@section('after_scripts')
    @parent
    <script src="{{ url('assets/plugins/swiper/7.4.1/swiper-bundle.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            var thumbsGalleryOptions = {
                slidesPerView: 2,
                spaceBetween: 5,
                freeMode: true,
                watchSlidesProgress: true,
                /* Responsive breakpoints */
                breakpoints: {
                    /* when window width is >= 320px */
                    320: {
                        slidesPerView: 3
                    },
                    /* when window width is >= 576px */
                    576: {
                        slidesPerView: 4
                    },
                    /* when window width is >= 768px */
                    768: {
                        slidesPerView: 5
                    },
                    /* when window width is >= 992px */
                    992: {
                        slidesPerView: 6
                    },
                },
                centerInsufficientSlides: true,
                direction: 'horizontal',
            };
            var thumbsGallery = new Swiper('.thumbs-gallery', thumbsGalleryOptions);

            var mainGalleryOptions = {
                speed: 300,
                loop: true,
                spaceBetween: 10,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                thumbs: {
                    swiper: thumbsGallery,
                },
                autoHeight: true,
                grabCursor: true,
            };
            var mainGallery = new Swiper('.main-gallery', mainGalleryOptions);

            mainGallery.on('click', function(swiper, event) {
                if (typeof swiper.clickedSlide === 'undefined') {
                    return false;
                }

                var imgEl = swiper.clickedSlide.querySelector('img');
                if (!imgEl) {
                    // If it's a video slide, do nothing (avoid error)
                    return false;
                }

                var currentSrc = imgEl.src;
                var imgTitle = "{{ data_get($post, 'title') }}";

                var wrapperSelector =
                    '.main-gallery .swiper-slide:not(.swiper-slide-duplicate) img:not(.default-picture)';
                var imgSrcArray = getFullSizeSrcOfAllImg(wrapperSelector, currentSrc);
                if (!imgSrcArray || imgSrcArray.length === 0) {
                    return false;
                }

                // Load full-size image slides dynamically
                var swipeboxItems = formatImgSrcArrayForSwipebox(imgSrcArray, imgTitle);
                var swipeboxOptions = {
                    hideBarsDelay: (1000 * 60 * 5),
                    loopAtEnd: false
                };
                $.swipebox(swipeboxItems, swipeboxOptions);
            });
        });
    </script>
@endsection