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

<div class="content-block category-grid-block">
    <?php if (count($categories)>0): ?>
        <?php $blockId = rand() . time(); ?>
        <?php $useSlider = $this->getUseSlider(); ?>
        <?php $perRowDefault = $this->getPerrow(); ?>
        <?php $perRowTablet = $this->getPerrowTablet(); ?>
        <?php $perRowMobile = $this->getPerrowMobile(); ?>
        
        <?php if ($useSlider && $this->hasData('number_row') && $this->getNumberRow()>1): ?>
            <?php $slideMultiRow = true; ?>
            <?php $slideBy = 1 ?>
            <?php $columnCount = $perRowDefault * $this->getNumberRow(); ?>
        <?php else: ?>
            <?php $slideBy = $this->getSlideBy() ?>
            <?php $slideMultiRow = false; ?>
        <?php endif ?>
        
        <?php $nameExtraClass = 'category-name' ?>
        <?php if ($this->getFontBold()): ?>
            <?php $nameExtraClass .= ' font-bold' ?>
        <?php endif ?>
        <?php if ($this->getFontItalic()): ?>
            <?php $nameExtraClass .= ' font-italic' ?>
        <?php endif ?>
        <?php if ($this->getUppercase()): ?>
            <?php $nameExtraClass .= ' font-uppercase' ?>
        <?php endif ?>
        
        <?php $otherExtraClass = 'category-product-count' ?>
        <?php if ($this->getOtherFontBold()): ?>
            <?php $otherExtraClass .= ' font-bold' ?>
        <?php endif ?>
        <?php if ($this->getOtherFontItalic()): ?>
            <?php $otherExtraClass .= ' font-italic' ?>
        <?php endif ?>
        <?php if ($this->getOtherUppercase()): ?>
            <?php $otherExtraClass .= ' font-uppercase' ?>
        <?php endif ?>
        
        <?php if ($useSlider): ?>
        
            <?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>"]';
            }
            ?>
        <?php endif ?>
        
        <div class="block widget category-grid-widget">
            <div id="category-grid-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 no-slider row-<?php echo $perRowDefault ?> row-tablet-<?php echo $perRowTablet ?> row-mobile-<?php echo $perRowMobile ?><?php endif ?>">
                <?php $i=0;
                $j=0;
                foreach ($categories as $_category): $i++; ?>
                    
                                    <?php if ($slideMultiRow): ?>
                                        <?php if ($j++ % $columnCount == 0): ?>
                        <div class="line">
                        <?php endif ?>
                    <?php endif ?>
                                    <?php if (!$useSlider): ?>
                        <div class="<?php if ($slideMultiRow || !$this->hasData('number_row')): ?><?php echo $builderHelper->getClearClass($perRowDefault, $i) ?> <?php echo $builderHelper->convertColClass($perRowDefault, $perRowTablet, $perRowMobile) ?><?php endif ?>">
                    <?php endif ?>
                                <div class="item category-item">
                                    <a href="<?php echo $this->getCategoryUrl($_category) ?>">
                                                        <?php echo $this->getCategoryImageHtml($_category) ?>
                                                        <?php if ($this->getShowCategoryName() || $this->getShowProduct()): ?>
                                            <span class="widget-category-infor">
                                                            <?php if ($this->getShowCategoryName()): ?>
                                                    <span class="<?php echo $nameExtraClass ?>"><?php echo $_category->getName() ?></span>
                                                <?php endif ?>

                                                            <?php if ($this->getShowProduct()): ?>
                                                    
                                                                <?php $productCount = $_category->getProductCollection()->count() ?>
                                                    
                                                    <span class="<?php echo $otherExtraClass ?>">
                                                                <?php if ($productCount>1): ?>
                                                                    <?php echo __('<span class="number">%1</span> Products', $productCount) ?>
                                                    <?php else: ?>
                                                        <?php echo __('<span class="number">%1</span> Product', $productCount) ?>
                                                    <?php endif ?>
                                                    </span>
                                                <?php endif ?>
                                            </span>
                                        <?php endif ?>
                                    </a>
                                </div>    
                                        <?php if (!$useSlider): ?>        
                            </div>
                        <?php endif ?>
                            
                                    <?php if ($slideMultiRow): ?>
                                        <?php if ($j % $columnCount == 0 || $j == count($categories)): ?>
                        </div>
                        <?php endif ?>
                    <?php endif ?>
                    
                                <?php endforeach; ?>
            </div>
        </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 $loop = $this->getLoop() ? '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 owlcategorygrid<?php echo $blockId ?> = $('#category-grid-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 ?>,
                        loop: <?php echo $loop ?>,
                        <?php if ($navPosition=='top-left' || $navPosition=='top-right'): ?>
                            onInitialized: function(){
                                $("#category-grid-widget<?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 __('We can\'t find categories matching the selection.') ?></div></div>
    <?php endif ?>
</div>