<?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->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><?= __('We can\'t find categories matching the selection.') ?></div></div>
	<?php endif ?>
</div>