<?php $galleryImages = $this->getGalleryImages(); ?>
<?php $zoom_image = $this->getEnableZoom(); ?>
<?php $lbox_image = $this->getLbox(); ?>
<?php $product = $this->getProduct(); ?>
<?php $rtl = $this->getRightToLeft(); ?>

<div id="owl-carousel-gallery<?= $product->getId(); ?>" class="owl-carousel gallery-horizontal">
    <?php 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->getLargeImageUrl(); ?>

        <div class="product item-image imgzoom<?php if ( $isVideo ) : ?> item-image-video<?php endif ?>" data-zoom="<?php echo $image->getLargeImageUrl(); ?>">
			<?php if ( $isVideo ) : ?>
                <div class="label-video"><?php echo __('Video') ?></div>
            <?php endif ?>

			<?php if ( $lbox_image ) : ?>
				<a class="lb<?php if ( $isVideo ) : ?> video-link<?php endif ?>" href="<?php echo $href; ?>">
					<img class="img-fluid" src="<?php echo $image->getLargeImageUrl(); ?>" alt="<?php echo $lbImage ?>"/>
				</a>
			<?php else: ?>
				<img class="img-fluid" src="<?php echo $image->getLargeImageUrl(); ?>" alt="<?php echo $lbImage ?>"/>

				<?php if ( $isVideo ) : ?>
					<a target="_blank" rel="noopener" class="popup-video" href="<?php echo $image->getVideoUrl(); ?>">
						<span class="ti-video-camera"></span>
					</a>
				<?php endif ?>
			<?php endif ?>
		</div>
    <?php endforeach ?>
</div>

<script>
    require([ 'jquery', 'mgsowlcarousel', 'magnificPopup' ], function($) {
        $('#owl-carousel-gallery<?= $product->getId(); ?>').owlCarousel({
            items: 1,
            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>"]
        });

		<?php if ( $lbox_image ) : ?>
            $('.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.context.className == 'lb video-link') {
                            item.type = 'iframe';
                        } else {
                            item.type = 'image';
                        }
                    }
                }
            });
		<?php endif; ?>
    });

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