<?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><?= /* @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><?= /* @escapeNotVerified */ __('There are no categories matching the selection.') ?></div></div>
	<?php endif ?>
</div>