<?php
    $images = productimage()->getGalleryImages($product);

?>
@inject ('wishListHelper', 'Webkul\Customer\Helpers\Wishlist')
<div class="item-inner upper-section">
    <product-gallery></product-gallery>
</div>
@if(count($images)>1)
<div class="upper-section-left-mobile">
    <div class="upper-section-left-mobile-wrapper">
    @foreach ($images as $image)

            <div class="img-container @if ($loop->index == 0)triggered @endif">
                <img id="changer" src="{{ $image['medium_image_url'] }}"  alt="{{ $product->name }}">
            </div>
    @endforeach

    </div>
</div>
@endif
@push('scripts')
    <script type="text/x-template" id="product-gallery-template">
        <div class="upper-section-left-wrapper">
            <div class="upper-section-left upper-section-left-container swiper-container" v-if="thumbs.length>1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide img-container" v-for='(thumb, index) in thumbs'
                         @mouseover="changeImage(thumb)"
                         :class="[thumb.large_image_url == currentLargeImageUrl ? 'triggered' : '']">
                        <video v-if="thumb.type == 'video'" width="100%" height="100%" onclick="this.paused ? this.play() : this.pause();">
                            <source :src="thumb.video_url" type="video/mp4">
                            {{ __('admin::app.catalog.products.not-support-video') }}
                        </video>

                        <img v-else  :src="thumb.small_image_url" alt=""/>
                    </div>
                </div>
                <div class="swiper-button-next" @click="moveThumbs('top')" v-if="(thumbs.length > 4) && this.is_move.up"></div>
                <div class="swiper-button-prev" @click="moveThumbs('bottom')" v-if="(thumbs.length > 4) && this.is_move.down"></div>

            </div>
            <div class="upper-section-left-second">
                <div class="active-img">
                    <video :key="currentVideoUrl" v-if="currentType == 'video'" width="100%" height="420" controls>
                        <source :src="currentVideoUrl" :data-image="currentOriginalImageUrl"  type="video/mp4">

                        {{ __('admin::app.catalog.products.not-support-video') }}
                    </video>

                    <img v-else :src="currentLargeImageUrl" id="pro-img" :data-image="currentOriginalImageUrl" alt=""/>
                </div>
            </div>
        </div>
    </script>
    <script src="{{ bagisto_asset('scripts/swiper-bundle.min.js')}}"></script>
    <script>
        let galleryImages = @json($images);

        Vue.component('product-gallery', {

            template: '#product-gallery-template',

            data: function() {
                return {
                    images: galleryImages,

                    thumbs: [],

                    currentLargeImageUrl: '',

                    currentOriginalImageUrl: '',

                    currentVideoUrl: '',

                    currentType: '',

                    counter: {
                        up: 0,
                        down: 0,
                    },

                    is_move: {
                        up: true,
                        down: true,
                    }
                }
            },

            watch: {
                'images': function(newVal, oldVal) {
                    this.changeImage(this.images[0]);

                    this.prepareThumbs();
                }
            },

            created: function() {
                this.changeImage(this.images[0]);

                this.prepareThumbs();
            },

            methods: {
                prepareThumbs: function() {
                    let self = this;

                    self.thumbs = [];

                    this.images.forEach(function(image) {
                        self.thumbs.push(image);
                    });
                },

                changeImage: function(image) {
                    this.currentType = image.type;

                    if (image.type == 'video') {
                        this.currentVideoUrl = image.video_url;

                        this.currentLargeImageUrl = image.large_image_url = image.video_url;
                    } else {
                        this.currentLargeImageUrl = image.large_image_url;

                        this.currentOriginalImageUrl = image.original_image_url;
                    }

                    // if ($(window).width() > 580 && image.original_image_url) {
                    //     $('img#pro-img').data('zoom-image', image.original_image_url).ezPlus({
                    //         zoomType: 'lens',
                    //         lensShape: 'round',
                    //         lensSize: 200,
                    //         scrollZoom: true
                    //     });
                    // }
                },

                moveThumbs: function(direction) {
                    let len = this.thumbs.length;

                    if (direction === "top") {
                        const moveThumb = this.thumbs.splice(len - 1, 1);

                        this.thumbs = [moveThumb[0]].concat((this.thumbs));

                        this.counter.up = this.counter.up+1;

                        this.counter.down = this.counter.down-1;

                    } else {
                        const moveThumb = this.thumbs.splice(0, 1);

                        this.thumbs = [].concat((this.thumbs), [moveThumb[0]]);

                        this.counter.down = this.counter.down+1;

                        this.counter.up = this.counter.up-1;
                    }

                    if ((len-4) == this.counter.down) {
                        this.is_move.down = false;
                    } else {
                        this.is_move.down = true;
                    }

                    if ((len-4) == this.counter.up) {
                        this.is_move.up = false;
                    } else {
                        this.is_move.up = true;
                    }
                },
            }
        });
    </script>
    <script type="text/javascript">
        function indexer(elClassName, addedElClassName, startNumber) {
            let counter = startNumber;
            let obj = document.querySelectorAll(`.${elClassName}`);
            obj.forEach((el) => {
                el.classList.add(`${addedElClassName}-${counter}`);
                counter++;
            });
        }
        $(document).ready(function(){
            // if ($(window).width() > 580) {
            //     $('img#pro-img').data('zoom-image', $('img#pro-img').data('image')).ezPlus({
            //         zoomType: 'lens',
            //         lensShape: 'round',
            //         lensSize: 200,
            //         scrollZoom: true
            //     });
            // }

{{--            @if (auth()->guard('customer')->user())--}}
{{--            let wishlist = "{{ $wishListHelper->getWishlistProduct($product) ? 'true' : 'false' }}";--}}

{{--            $(document).mousemove(function(event) {--}}
{{--                if ($('.add-to-wishlist').length || wishlist != 0) {--}}
{{--                    if (event.pageX > $('.add-to-wishlist').offset().left && event.pageX < $('.add-to-wishlist').offset().left+32 && event.pageY > $('.add-to-wishlist').offset().top && event.pageY < $('.add-to-wishlist').offset().top+32) {--}}

{{--                        $(".zoomContainer").addClass("show-wishlist");--}}

{{--                    } else {--}}
{{--                        $(".zoomContainer").removeClass("show-wishlist");--}}
{{--                    }--}}
{{--                };--}}

{{--                if ($("body").hasClass("rtl")) {--}}
{{--                    $(".zoomWindow").addClass("zoom-image-direction");--}}
{{--                } else {--}}
{{--                    $(".zoomWindow").removeClass("zoom-image-direction");--}}
{{--                }--}}
{{--            });--}}
{{--            @endif--}}
            // IMAGE SLIDER ============================
            const swiper = new Swiper('.swiper-container', {
                // Optional parameters
                direction: 'vertical',
                freeMode: true,
                slidesPerView: 3,
                autoplay: true,

                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

            });

            if ( swiper.slides.length < 2 ) {
                swiper.disable();
            }
            // IMAGE SLIDER end ============================

            // IMAGE SLIDER CLICK EVENTS ===================

            indexer('img-container', 'img-container', 1);
            let imgTriggerId = document.querySelectorAll('#changer');
            let imgTrigger = document.querySelectorAll('.img-container');
            let imgPath = [];
            imgTriggerId.forEach((el) => {
                imgPath.push(el.getAttribute('src'));
            });
            for (let i = 1; i <= imgPath.length; i++) {
                let trig = document.querySelector(`.img-container-${i}`);
                trig.addEventListener('click', () => {
                    imgTrigger.forEach((el) => {
                        el.classList.remove('triggered');
                    });
                    trig.classList.add('triggered');
                    // let changed = document.getElementById('changed');
                    // changed.src = imgPath[i - 1];
                });
            }
        });

    </script>
@endpush

