<?php $attribute = null ?>
<?php if ($this->getData('attribute') != ''): ?>
    <?php $attribute = $this->getData('attribute') ?>
<?php endif ?>
<?php $categories = $this->getCategoryByIds() ?>
<?php $builderHelper = $this->helper('MGS\Fbuilder\Helper\Data'); ?>
<?php $template = 'MGS_Fbuilder::products/deals/grid_item.phtml'; ?>

<div class="content-block mgs-product-tab deals-product-cat-block deals-product-cat-tab-block">
    <?php if (count($categories??[]) > 0): ?>
        <?php $blockId = rand() . time(); ?>
        <?php $useSlider = $this->getUseSlider(); ?>
        <?php $items = $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 $extraClass = 'tab-' . $this->getTabStyle() . ' tab-align-' . $this->getTabAlign() ?>
        <?php if ($this->getTabFontBold()): ?>
            <?php $extraClass .= ' tab-font-bold' ?>
        <?php endif ?>
        <?php if ($this->getTabItalic()): ?>
            <?php $extraClass .= ' tab-italic' ?>
        <?php endif ?>
        <?php if ($this->getTabUppercase()): ?>
            <?php $extraClass .= ' tab-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="product data items mgs-tab <?php echo $extraClass ?>"
             data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php $k = 0;
            foreach ($categories as $category): $k++ ?>
                <div
                    class="data item title item<?php echo $k ?><?php if (count($categories) == $k): ?> last-item<?php endif ?>"
                    aria-labeledby="tab-label-<?php echo $category->getId() . $blockId ?>-title" data-role="collapsible"
                    id="tab-label-<?php echo $category->getId() . $blockId ?>">
                    <a class="data switch" tabindex="-1" data-toggle="switch"
                       href="#<?php echo $category->getId() . $blockId ?>"
                       id="tab-label-<?php echo $category->getId() . $blockId ?>-title">
                        <?php echo $category->getName(); ?>
                    </a>
                </div>
                <div class="data item content" id="<?php echo $category->getId() . $blockId ?>"
                     data-role="content"<?php if ($k != 1): ?> style="display:none"<?php endif ?>>
                    <?php $_productCollection = $this->getProductCollection($category, $attribute); ?>
                    <?php if (count($_productCollection??[]) > 0): ?>
                        <div class="block widget mgs-products deals-products-grid products-grid product-items">
                            <div id="deals<?php echo $category->getId() ?>-products<?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 ($_productCollection as $_product): $i++; ?>

                                    <?php if ($slideMultiRow): ?>
                                        <?php if ($j++ % $columnCount == 0): ?>
                                            <div class="line">
                                        <?php endif ?>
                                    <?php endif ?>

                                    <div
                                        class="product product-item<?php if ($slideMultiRow || !$this->hasData('number_row')): ?> col<?php endif ?>">
                                        <?php echo $this->getLayout()
                                            ->createBlock('MGS\Fbuilder\Block\Products\ProductItem')
                                            ->setProductId($_product->getId())
                                            ->setBlockData($this->getData())
                                            ->setTemplate($template)
                                            ->toHtml(); ?>

                                    </div>

                                    <?php if ($slideMultiRow): ?>
                                        <?php if ($j % $columnCount == 0 || $j == count($_productCollection)): ?>
                                            </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 $slideBy = $slideBy ? $slideBy : 1; ?>
                    <?php $loop = $this->getLoop() ? 'true' : 'false'; ?>
                        <script type="text/javascript">
                            require([
                                'jquery',
                                'mgsowlcarousel'
                            ], function ($) {
                                $('#deals<?php echo $category->getId() ?>-products<?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 ?>,
                                    loop: <?php echo $loop; ?>,
                                    <?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 /* @escapeNotVerified */
                                __('We can\'t find products matching the selection.') ?></div>
                        </div>
                    <?php endif ?>
                </div>
            <?php endforeach ?>
        </div>
    <?php else: ?>
        <div class="message info empty">
            <div><?php echo /* @escapeNotVerified */
                __('There are no categories matching the selection.') ?></div>
        </div>
    <?php endif ?>
</div>
