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

<?php
	$themeSettingConfig = $this->getThemeSettingConfig();
	$itemXl = $themeSettingConfig->getStoreConfig('extragallery/general/per_row_xl') ? $themeSettingConfig->getStoreConfig('extragallery/general/per_row_xl') : 3;
	
	$itemLg = $themeSettingConfig->getStoreConfig('extragallery/general/per_row_lg') ? $themeSettingConfig->getStoreConfig('extragallery/general/per_row_lg') : 2;
	
	$itemMd = $themeSettingConfig->getStoreConfig('extragallery/general/per_row_md') ? $themeSettingConfig->getStoreConfig('extragallery/general/per_row_md') : 2;
	
	$itemSm = $themeSettingConfig->getStoreConfig('extragallery/general/per_row_sm') ? $themeSettingConfig->getStoreConfig('extragallery/general/per_row_sm') : 2;
	
	$itemXs = $themeSettingConfig->getStoreConfig('extragallery/general/per_row_xs') ? $themeSettingConfig->getStoreConfig('extragallery/general/per_row_xs') : 1;
?>
<input type="hidden" id="item-xl" value="<?= $itemXl ?>"/>
<input type="hidden" id="item-lg" value="<?= $itemLg ?>"/>
<input type="hidden" id="item-md" value="<?= $itemMd ?>"/>
<input type="hidden" id="item-sm" value="<?= $itemSm ?>"/>
<input type="hidden" id="item-xs" value="<?= $itemXs ?>"/>

<div class="product media item-xl-<?= $itemXl ?>">
	<?php if($this->getRotateImage() && (count($this->getRotateImages())>0)): ?>
		<a class="rotate-image" href="#" onclick="rotate360(); return false"></a>
	<?php endif ?>
	<div id="owl-carousel-gallery" 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->getImageZoom(); ?>
			
			<div class="product item-image imgzoom<?php if($isVideo): ?> item-image-video<?php endif ?>" data-zoom="<?= $image->getImageZoom(); ?>">
			
				<?php if($isVideo): ?><div class="label-video"><?= __('Video') ?></div><?php endif ?>
				
				<?php if($lbox_image): ?>
					<a class="lb<?php if($isVideo): ?> video-link<?php endif ?>" href="<?= $href; ?>">
						<img class="img-fluid" src="<?= $image->getLargeImageUrl(); ?>" alt="<?= $lbImage ?>"/>
					</a>
				<?php else: ?>
					<img class="img-fluid" src="<?= $image->getLargeImageUrl(); ?>" alt="<?= $lbImage ?>"/>
					<?php if($isVideo): ?>
						<a target="_blank" class="popup-video" href="<?= $image->getVideoUrl(); ?>">
							<span class="ti-video-camera"></span>
						</a>
					<?php endif ?>
				<?php endif ?>
			</div>
		<?php endforeach ?>
	</div>
</div>

<script type="text/javascript">
    require([ 
		'jquery', 
		'mgsowlcarousel',
		'zoom-images',
		'magnificPopup'
	], function ($) {
		
		<?php if($zoom_image): ?>
		$('#owl-carousel-gallery').on('initialized.owl.carousel', function(event) {
            $(".imgzoom").each(function( index ) {
                zoomElement(this);
            });
        });
		<?php endif ?>
		
        $('#owl-carousel-gallery').owlCarousel({
            items: <?= $itemXl ?>,
            autoplay: false,
            lazyLoad: false,
			loop: true,
            nav: true,
            dots: true,
            rtl: <?= $rtl ?>,
            navText: ["<span></span>","<span></span>"],
			responsive : {
				0 : {
					items : <?= $itemXs ?>
				},
				576 : {
					items : <?= $itemSm ?>
				},
				768 : {
					items : <?= $itemMd ?>
				},
				992 : {
					items : <?= $itemLg ?>
				},
				1200 : {
					items : <?= $itemXl ?>
				}
			}
        });
		<?php if($lbox_image): ?>
		$(document).ready(function(){
			var GalleryItems = [];
			var ListUrls = [];

             $('.imgzoom .lb').each(function(i){ //Target your wrapping a tag

                 var src = $(this).attr('href');
				 if($(this).hasClass('video-link')){
					 var theSrc = { 
						src: src,
						type: 'iframe'
					  };
				 }else{
					 var theSrc = { 
						src: src,
						type: 'image'
					  };
				 }
				 
                 GalleryItems.push(theSrc);
				 
				 if($.inArray(src, ListUrls) == -1){
					 ListUrls.push(src);
				 }
             });

             var GalleryItems = GalleryItems.reduce(function(previous, current) {

                  var object = previous.filter(object => object.src === current.src);
                  if (object.length == 0) {
                    previous.push(current);
                  }
                  return previous;
                }, []);

			$('.product.media .imgzoom .lb').click(function(){
				var src = $(this).attr('href');
				var startAt = $.inArray(src,ListUrls);
				theGallery(startAt);
			});

             function theGallery(startAt){
                 $('.product.media .owl-stage-outer').magnificPopup({
                    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.',
					},
                    items:GalleryItems,
					callbacks: {
						open: function () {
							$.magnificPopup.instance.goTo(startAt);
						}
					}

                 });
             }
		});
		<?php endif ?>
    });
</script>