<?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') : 1;

$itemLg = $themeSettingConfig->getStoreConfig('extragallery/general/per_row_lg') ? $themeSettingConfig->getStoreConfig('extragallery/general/per_row_lg') : 1;

$itemMd = $themeSettingConfig->getStoreConfig('extragallery/general/per_row_md') ? $themeSettingConfig->getStoreConfig('extragallery/general/per_row_md') : 1;

$itemSm = $themeSettingConfig->getStoreConfig('extragallery/general/per_row_sm') ? $themeSettingConfig->getStoreConfig('extragallery/general/per_row_sm') : 1;

$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 (! empty($this->getRotateImage())): ?>
        <a class="rotate-image" href="#" onclick="rotate360(); return false"></a>
    <?php endif; ?>

    <div id="owl-carousel-gallery" class="owl-carousel gallery-top-slide">
        <?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<?= $isVideo ? ' item-image-video' : '' ?>" data-zoom="<?= $block->escapeUrl($image->getImageZoom()) ?>">

                <?php if ($isVideo): ?>
                    <div class="label-video"><?= __('Video') ?></div>
                <?php endif; ?>

                <?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 target="_blank" rel="noopener" class="popup-video" href="<?= $block->escapeUrl($image->getVideoUrl()) ?>">
                            <span class="ti-video-camera"></span>
                        </a>
                    <?php endif ?>
                <?php endif ?>
            </div>
        <?php endforeach ?>
    </div>
</div>

<script>
    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: ["<i class='pe-7s-angle-left'></i>","<i class='pe-7s-angle-right'></i>"],
            responsive : {
                0 : {
                    items : <?= $itemXs ?>
                },
                576 : {
                    items : <?= $itemSm ?>
                },
                768 : {
                    items : <?= $itemMd ?>
                },
                992 : {
                    items : <?= $itemLg ?>
                },
                1200 : {
                    items : <?= $itemXl ?>
                }
            }
        });

        <?php if ($lbox_image): ?>
            var GalleryItems = [];
            var ListUrls = [];

            $('.imgzoom .lb').each(function(i) {
                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 ( ! ListUrls.includes( src ) ){
                    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').on( 'click', function() {
                var src = $(this).attr('href');
                var startAt = ListUrls.indexOf(src);
                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>
