<?php
$galleryImages = $this->getGalleryImages();
$zoom_image = $this->getEnableZoom();
$lbox_image = $this->getLbox();
$rtl = $this->getRightToLeft();
$_product = $this->getProduct();
$arImage = $_product->getData('mgs_arimage');
$arTemplate = $this->getLayout()->createBlock("MGS\ClaueTheme\Block\AbstractProduct")->setProduct($_product)->setFullWidth(true)->setTemplate("MGS_ClaueTheme::arImage.phtml")->toHtml();
?>

<?php if (! empty($this->getRotateImages())): ?>
    <a class="rotate-image" href="#" onclick="rotate360(); return false"></a>
<?php endif; ?>

<div class="product-thumbnail">
    <div id="owl-carousel-gallery" class="owl-carousel gallery-horizontal">
        <?php $i =0; foreach ($galleryImages as $image):  $i++ ?>
            <?php $lbImage = $image->getLabel() ? $image->getLabel() : $image->getLabelDefault(); ?>
            <?php $isVideo = $image->getMediaType() == 'external-video' ? true : false; ?>
            <?php $href = $isVideo ? $image->getVideoUrl() : $image->getImageZoom(); ?>

            <div class="product item-image imgzoom<?= $isVideo ? ' item-image-video' : '' ?><?= ( $image->getArImage() && $arImage ) ? ' disable-owl-swipe' : '' ?>" data-zoom="<?= $block->escapeUrl($image->getImageZoom()) ?>">
                <?php if ($isVideo): ?>
                    <div class="label-video"><?= __('Video') ?></div>
                <?php endif; ?>

                <?php if ($image->getArImage()): ?>
                    <?php if ($arImage): ?>
                        <?= $arTemplate ?>
                    <?php else: ?>
                        <img class="img-responsive" src="<?= $block->escapeUrl($image->getLargeImageUrl()); ?>" alt="<?= $lbImage ?>"/>
                    <?php endif; ?>
                <?php else: ?>
                    <?php if ($lbox_image): ?>
                        <a class="lb<?= $isVideo ? ' video-link' : '' ?>" href="<?= $block->escapeUrl($href) ?>">
                            <img class="img-fluid" src="<?= $block->escapeUrl($image->getLargeImageUrl()); ?>" alt="<?= $lbImage ?>"/>
                        </a>
                    <?php else: ?>
                        <img class="img-fluid" src="<?= $block->escapeUrl($image->getLargeImageUrl()) ?>" alt="<?= $lbImage ?>"/>
                        <?php if ($isVideo): ?>
                            <a class="popup-video" href="<?= $block->escapeUrl($image->getVideoUrl()) ?>" target="_blank" rel="noopener">
                                <span class="ti-video-camera"></span>
                            </a>
                        <?php endif; ?>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    </div>

    <?php if (! empty($galleryImages)): ?>
        <div class="horizontal-thumbnail-row">
            <div id="horizontal-thumbnail" class="owl-carousel horizontal-thumbnail">
                <?php $i = 0; foreach ($galleryImages as $image): ?>
                    <?php $lbImage = $image->getLabel() ? $image->getLabel() : $image->getLabelDefault(); ?>
                    <?php $isVideo = $image->getMediaType() == 'external-video' ? true : false; ?>
                    <?php $href = $isVideo ? $image->getVideoUrl() : $image->getImageZoom(); ?>

                    <div class="item-thumb imgzoom<?= $i == 0 ? ' active' : '' ?><?= $isVideo ? ' item-image-video' : '' ?>" data-owl="<?= $i ?>">
                        <img class="img-fluid" src="<?= $block->escapeUrl($image->getLargeImageUrl()) ?>" alt="<?= $lbImage ?>"/>

                        <?php if ($isVideo): ?>
                            <div class="popup-video-thumb">
                                <a class="lb<?= $isVideo ? ' video-link' : '' ?>" href="<?= $block->escapeUrl($href) ?>">
                                    <span class="ti-video-camera"></span>
                                </a>
                            </div>
                        <?php elseif ($image->getArImage()): ?>
                            <a class="ar-thumbnail"><span><i class="pe-7s-box2"></i></span></a>
                        <?php endif; ?>
                    </div>
                    <?php $i++; ?>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>
</div>

<script>
    require(['jquery', 'mgsowlcarousel'], function($) {
        const carouselGallery = $('#owl-carousel-gallery').owlCarousel({
            items: 1,
            autoplay: false,
            lazyLoad: false,
            nav: true,
            dots: false,
            navText: ["<i class='pe-7s-angle-left'></i>", "<i class='pe-7s-angle-right'></i>"],
            rtl: <?= $rtl ?>,
            onInitialized: function(){
                var carowselHeight = $('#owl-carousel-gallery .owl-stage-outer').height();
                $('#owl-carousel-gallery .owl-item model-viewer').height(carowselHeight);
            },
            <?php if ($arImage): ?>
                touchDrag: false,
            <?php endif; ?>
            responsive: {
                0: {
                    nav: true,
                    dots: true
                },
                768: {
                    nav: true,
                    dots: false
                }
            }
        });

        const carouselGalleryTimer = setInterval(function() {
            if(carouselGallery.height() > 1) clearInterval(carouselGalleryTimer);
            carouselGallery.trigger('refresh.owl.carousel', [100]);
        }, 300);

        $('#owl-carousel-gallery').on('changed.owl.carousel', function(event) {
            const index = event.item.index;
            $('#horizontal-thumbnail .item-thumb').removeClass('active');
            $('#horizontal-thumbnail .item-thumb[data-owl=' + index + ']').addClass('active');
            $('#horizontal-thumbnail').trigger('to.owl.carousel', index);
        });

        $('#horizontal-thumbnail').owlCarousel({
            items: 4,
            autoplay: false,
            lazyLoad: false,
            nav: true,
            dots: false,
            rtl: <?= $rtl ?>,
            navText: ["<i class='pe-7s-angle-left'></i>", "<i class='pe-7s-angle-right'></i>"],
            responsive: {
                0: {items: 2},
                576: {items: 3},
                992: {items: 4},
                1200: {items: 4}
            },
        });

        $('#horizontal-thumbnail .item-thumb').on('click', function() {
            const position = $(this).attr('data-owl');

            $('#horizontal-thumbnail .item-thumb').removeClass('active');
            $('#owl-carousel-gallery').trigger('to.owl.carousel', position);
            $(this).addClass('active');
        });
    });

    <?php if ($zoom_image): ?>
        require(['jquery', 'zoom-images'], function($) {
            $('.imgzoom').each( function(index) {
                zoomElement(this);
            });
        });
    <?php endif; ?>

    <?php if ($lbox_image): ?>
        require(['jquery', 'magnificPopup'], function($) {
            $('.product.media').magnificPopup({
                delegate: '.imgzoom .lb',
                type: 'image',
                tLoading: 'Loading image #%curr%...',
                mainClass: 'mfp-img-gallery',
                fixedContentPos: true,
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0, 1]
                },
                iframe: {
                    markup: '<div class="mfp-iframe-scaler"><div class="mfp-close"></div><iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe><div class="mfp-bottom-bar"><div class="mfp-title"></div><div class="mfp-counter"></div></div></div>'
                },
                image: {
                    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                },
                callbacks: {
                    elementParse: function (item) {
                        if (item.el[0].className == 'lb video-link') {
                            item.type = 'iframe';
                        } else {
                            item.type = 'image';
                        }
                    }
                }
            });
        });
    <?php endif; ?>
</script>
