<?php
$response = $this->getWidgetInstagramData();
if ($response['status'] == 'success') {
    $images = $response['data'];
} else {
    $images = [];
}
?>

<?php $builderHelper = $this->helper('MGS\Fbuilder\Helper\Data'); ?>

<div class="content-block instagram-block">
    <?php if (is_array($images) && count($images) > 0): ?>
        <?php
        $limit = count($images);
        $blockId = rand() . time();
        $useSlider = $this->getUseSlider();
        $items = $perRowDefault = $this->getPerrow();

        $perRowTablet = $this->getPerrowTablet() ? $this->getPerrowTablet() : 3;
        $perRowMobile = $this->getPerrowMobile() ? $this->getPerrowMobile() : 1;

        if ($useSlider && $this->hasData('number_row') && $this->getNumberRow() > 1) {
            $slideMultiRow = true;
            $slideBy = 1;
            $columnCount = $perRowDefault * $this->getNumberRow();
        } else {
            $slideBy = $this->getSlideBy();
            $slideMultiRow = false;
        }


        $images = array_slice($images, 0, $limit);
        ?>

        <?php
        $settingMode = 'multiple';
        $navPosition = $this->getNavigationPosition();

        $navType = $builderHelper->getStoreConfig('fbuilder/' . $settingMode . '_slider/navigation');
        if ($navType == 'image') {
            $nextIcon = $builderHelper->getStoreConfig('fbuilder/' . $settingMode . '_slider/next_image');
            $prevIcon = $builderHelper->getStoreConfig('fbuilder/' . $settingMode . '_slider/prev_image');
            $navHtml = '["<span><img src=\'' . $builderHelper->getMediaUrl() . 'mgs/fbuilder/slider/' . $prevIcon .
                '\'/></span>", "<span><img src=\'' . $builderHelper->getMediaUrl() . 'mgs/fbuilder/slider/' .
                $nextIcon . '\'/></span>"]';
        } else {
            $nextIcon = $builderHelper->getStoreConfig('fbuilder/' . $settingMode . '_slider/next_font_class');
            $prevIcon = $builderHelper->getStoreConfig('fbuilder/' . $settingMode . '_slider/prev_font_class');
            $navHtml = '["<span><em class=\'' . $prevIcon . '\'></em></span>", "<span><em class=\'' . $nextIcon .
                '\'></em></span>"]';
        }
        ?>
            <div class="content-heading">
                <h3 class="title">@ FOLLOW US ON INSTAGRAM</h3>
            </div>
            <div id="instagram-widget<?php echo $blockId ?>"
                 class="items<?php if ($useSlider): ?> owl-carousel mgs-owl-carousel mgs-carousel-<?php echo $settingMode ?> nav-type-<?php echo $navType ?> nav-position-<?php echo $navPosition ?> <?php if ($this->getHideNav() &&
                     ((($items == 1) && ($navPosition != 'middle-outside')) || (($items > 1) && ($navPosition ==
                                 'middle-inside')))): ?> autohide-nav<?php endif ?> dot-position-<?php echo $this->getPaginationPosition() ?><?php else: ?> line row-<?php echo $perRowDefault ?> row-tablet-<?php echo $perRowTablet ?> row-mobile-<?php echo $perRowMobile ?><?php endif ?>">
                <?php $i = 0;
                $j = 0;
                foreach ($images as $image): $i++; ?>

                    <?php if ($slideMultiRow): ?>
                        <?php if ($j++ % $columnCount == 0): ?>
                            <div class="line row-<?php echo $perRowDefault ?> row-tablet-<?php echo $perRowTablet ?> row-mobile-<?php echo $perRowMobile ?>">
                        <?php endif ?>
                    <?php endif ?>

                    <div class="<?php if ($slideMultiRow || !$this->hasData('number_row')): ?> col<?php endif ?>">
                        <div class="instagram-item">
                            <a href="<?= $image['link'] ?>" target="_blank" rel="noopener">
                                <img class="img-responsive" src="<?= $image['src'] ?>" alt="" />
                            </a>

                            <?php if ($image['like'] !== null): ?>
                                <span class="social-count"> <span class="like-count"><span class="fa fa-heart-o"></span>
                                <span class="number"><?= (int)$image['like'] ?></span></span>
                            <?php endif; ?>

                            <?php if ($image['comment'] !== null): ?>
                                <span class="comment-count"><span class="fa fa-comments-o"></span>
                                <span class="number"><?= $image['comment'] ?></span></span> </span>
                            <?php endif; ?>
                        </div>
                    </div>

                    <?php if ($slideMultiRow): ?>
                        <?php if ($j % $columnCount == 0 || $j == count($images)): ?>
                            </div>
                        <?php endif ?>
                    <?php endif ?>

                <?php endforeach; ?>
            </div>

    <?php if ($useSlider): ?>
    <?php $autoPlay = $this->getAutoplay() ? 'true' : 'false'; ?>
    <?php $stopAuto = $this->getStopAuto() ? 'true' : 'false'; ?>
    <?php $nav = $this->getNavigation() ? 'true' : 'false'; ?>
    <?php $dot = $this->getPagination() ? 'true' : 'false'; ?>
    <?php $rtl = $this->getRtl() ? 'true' : 'false'; ?>
    <?php $slideBy = $slideBy ? $slideBy : 1; ?>

    <?php $margin = 0; ?>
    <?php if ($this->getSlideMargin() != ''): ?>
        <?php $margin = $this->getSlideMargin(); ?>
    <?php endif ?>

        <script type="text/javascript">
            require([
                'jquery',
                'mgsowlcarousel'
            ], function ($) {
                var owlinstagram<?php echo $blockId ?> = $('#instagram-widget<?php echo $blockId ?>').owlCarousel({
                    <?php if ($slideMultiRow): ?>
                    items: 1,
                    <?php else: ?>
                    items: <?php echo $perRowDefault; ?>,
                    <?php endif ?>
                    autoplay: <?php echo $autoPlay ?>,
                    autoplayHoverPause: <?php echo $stopAuto ?>,
                    nav: <?php echo $nav ?>,
                    dots: <?php echo $dot ?>,
                    slideBy: <?php echo $slideBy ?>,
                    rtl: <?php echo $rtl; ?>,
                    margin: <?php echo $margin ?>,
                    <?php if ($navPosition == 'top-left' || $navPosition == 'top-right'): ?>
                    onInitialized: function () {
                        $("#<?php echo $blockType ?>-products<?php echo $blockId ?> .owl-nav").attr('style', 'top:<?php echo $this->getNavTop() ?>px');
                    },
                    <?php endif ?>
                    <?php if (!$slideMultiRow): ?>
                    responsive: {
                        0: {
                            items:<?php echo $perRowMobile; ?>,
                            nav: false,
                        },
                        571: {
                            items:<?php echo $perRowTablet; ?>
                        },
                        1200: {
                            items:<?php echo $perRowDefault; ?>
                        }
                    },
                    <?php endif ?>
                    navText: <?php echo $navHtml ?>,
                    autoHeight: true
                });
            });
        </script>
    <?php endif ?>

    <?php else: ?>
        <div class="message info empty">
            <div><?php echo __(sprintf('Can not get Instagram data or your instagram account have not any images. Here is the current error message: %s',$response['message'])) ?></div>
        </div>
    <?php endif ?>
</div>
