<?php
$idBlock = 'category_product_tab_' . rand();
$class_bg_image = '';
if($block->getImageBackGround()){
	$class_bg_image = 'has-banner-image';
}
$height_default_loading = ($block->getData('height_default_loading')) ? $block->getData('height_default_loading') : 300;
$number_row = $block->getData('number_row');
$height_default = $height_default_loading*$number_row;
?>
<?php if($block->getSettingStatus()): ?>
<div class="custom-hover">
    <div class="section section-product wrapper_category_product_tabs container_<?= $block->getData('tab_postions') ?>_tab_postions <?php echo $class_bg_image  ?> <?php if($block->getData('short_description')): ?>has-short-des-on-title<?php endif; ?> <?php if($block->getData('show_description')): ?>short_description<?php endif; ?>" id="<?= $idBlock ?>">
        <?php if($block->getData('title') || $block->getData('short_description')): ?><div class="rokan-title">
            <?php if($block->getData('title')): ?><h3 class="module-title"><span><?= $block->escapeHtml($block->getData('title')) ?></span></h3><?php endif; ?> 
            <?php if($block->getData('short_description')): ?><div class="short_description"><?= $block->escapeHtml($block->getData('short_description')) ?></div><?php endif; ?>
        </div>
        <?php endif; ?> 
        <?php if($categories = $block->getCategories()): 
            $has_one_categories = '';
            if(count($categories) == 1){
                $has_one_categories = ' fixed_only_one_category';
            }
        ?>
        <div class="widget-tabs<?= $has_one_categories;?>">
            <ul>
                <?php foreach ($categories as $category): ?>
                <li>
                    <a class="<?php if($block->getData('show_thumbnail') && $category->getThumbnail()): ?>show_thumbnail<?php endif; ?>" href="<?= $block->getUrl('categorytab/category/view',
                            [
                                'id' => $category->getId(),
                                'limit'=> $block->getData('limit'),
                                'imgT'=> $block->getData('product_image'),
                                'imgW'=> $block->getData('image_width'),
                                'imgH'=> $block->getData('image_height'),
                                'imgHover'=> $block->getData('product_image_hover'),
                                'product_list_mode'=> $block->getData('mode_view'),
                                'number_row'=> $block->getData('number_row'),
                                'product_list_order'=>$block->getData('sorting')
                            ])?>" data-href="<?= $category->getUrl() ?>" >

                        <?php if($block->getData('show_thumbnail') && $category->getThumbnail()): ?>
                            <span class="category-thumbs">
                                <img src="<?= $this->getImageSrcCategory($category->getThumbnail()); ?>" alt="<?= $category->getName(); ?>"/>
                            </span>
                        <?php endif; ?>
                        <span><?= $category->getName(); ?></span>
                    </a>
                </li>
                <?php endforeach; ?>
            </ul>
            <?php if(count($categories) == 0){ ?>
            <div class="alert alert-danger">
                <p><?= __('Categories with ID: %1 does not exist. Please login admin go to Content > Elements > Pages choose edit page then double click on Category Products Tabs to select the categories.', $block->getData('category_ids')); ?></p>
            </div>
            <?php } ?>
            <div class="widget-category-tab-banner">
                <?= $block->getImageBackGround(); ?>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>
<script> 
    require(['jquery', 'jquery-ui-modules/tabs', 'rokanthemes/owl'], function ($) {
            $('#<?= $idBlock ?> .widget-tabs').tabs(
                {
                    cache:true,
                    activate: function( event, ui ) {
                        $(window).trigger('resize');
                    },
                    /* Called before tab content is loaded */
                    beforeLoad: function(event, ui) { 
                        $('#<?= $idBlock ?> .tab-loadding').remove();
                        var height_defaut = <?= $height_default ?>;
						var href = ui.tab.find('a').data('href');
						$('#<?= $idBlock ?> .see-all a').attr("href", href);
                        if ( ui.tab.data( "loaded" ) ) {
                            $('#<?= $idBlock ?>').addClass('loadding');
                            var aria_controls_active = $('#<?= $idBlock ?> .ui-tabs-active').attr('aria-controls');

                            var aria_controls = ui.tab.attr('aria-controls');
                            var height = $('#<?= $idBlock ?> #'+aria_controls_active+' .item-row').height();
                            var set_height = height_defaut;
                            if(height > 0){  
                                set_height = height;
                            }

                            ui.panel.append('<div class="tab-loadding tab-loadded-back-click" style="min-height: '+set_height+'px;"><div class="loading-icon"><span></span><span></span><span></span><span></span></div></div>');
                        }
                        else{
                        
                            $('#<?= $idBlock ?>').addClass('loadding');
                            var aria_controls = $('#<?= $idBlock ?> .ui-tabs-active').attr('aria-controls');
                            var set_height = height_defaut;
                            if(aria_controls){
                                var height = $('#<?= $idBlock ?> #'+aria_controls+' .item-row').height();
                                if(height > 0){
                                    set_height = height;
                                }
                            }

                            ui.panel.append('<div class="tab-loadding" style="min-height: '+set_height+'px;"><div class="loading-icon"><span></span><span></span><span></span><span></span></div></div>');

                            /* if ajax call to retrieve tab content failed */
                            ui.jqXHR.error(function() {
                                $('#<?= $idBlock ?>').removeClass('loadding');
                                ui.tab.find('.tab-loadding').hide();
                                ui.panel.html("<?= __('An error occured while loading store infos'); ?>");
                            });
                        }
                    },
                    /* Called when tab is loaded */
                    load: function(event, ui) {
                        ui.tab.data("loaded",true);
                        ui.tab.find('.tab-loadding').remove();
						
                        $('#<?= $idBlock ?>').removeClass('loadding');
                        <?php foreach($block->getData() as $key=>$value): ?>
                            <?php if(strpos($key, 'owl_') !== FALSE):  ?>
                                <?php if(is_numeric($value) || in_array($value, ['true', 'false'])): ?>
                                    ui.panel.find('.owl-carousel').data('<?= str_replace('owl_', '', $key) ?>', <?= $value ?>);
                                <?php else: ?>
                                    ui.panel.find('.owl-carousel').data('<?= str_replace('owl_', '', $key) ?>', '<?= $value ?>');
                                <?php endif; ?>
                            <?php elseif (strpos($key, 'hide_') !== FALSE  && $value): ?>
                        ui.panel.find('.<?= str_replace('hide_', '', $key) ?>').hide();
                        ui.panel.addClass('<?= $key ?>');
                            <?php endif; ?>
                        <?php endforeach; ?>
                        var id = '#'+ui.tab.attr('aria-controls')+'';
                        ui.panel.trigger('contentUpdated',[id]);
                    }
                }
            );
        }
    );
</script> 
<?php endif; ?>