<?php $themeSettingConfig = $this->helper('MGS\ThemeSettings\Helper\Config') ?>
<?php $category = $this->getCurrentCategory() ?>
<?php $themeSettingConfig = $this->getThemeSettingConfig() ?>
<?php $_categories = $category->getChildrenCategories(); ?>
<?php 
	$perRowDefault = $themeSettingConfig->getStoreConfig('themesettings/category_landing/product_per_row');
	$perRowTablet = $themeSettingConfig->getStoreConfig('themesettings/category_landing/product_per_row_tablet');
	$perRowMobile = $themeSettingConfig->getStoreConfig('themesettings/category_landing/product_per_row_mobile');
	
	if($category->getLandingPerRow()!=''){
		$perRowDefault = $category->getLandingPerRow();
	}
	if($category->getLandingPerRowTablet()!=''){
		$perRowTablet = $category->getLandingPerRowTablet();
	}
	if($category->getLandingPerRowMobile()!=''){
		$perRowMobile = $category->getLandingPerRowMobile();
	}
?>
<?php if(count($_categories)>0): ?>
<div class="landing-masonry ">
	<div class="list-subcate line">
		<?php $i =0; foreach ($_categories as $_category): ?>
			<?php $_category = $block->getCategory($_category->getId()); ?>
				<?php if ($_category->getIsActive()): ?>
					<?php $i++; ?>
						<div class="col-des-<?= 12/$perRowDefault?> col-tb-<?= 12/$perRowTablet?> col-mb-<?= 12/$perRowMobile?> landing-masonry-item " >
							<div class=" landing-item">
								<div class="item-subcate">
									<div class="image-subcate">
										<a class="image"  style="background-image: url('<?= $block->getImageUrl($_category->getFbuilderThumbnail()); ?>');" href="<?= $_category->getUrl() ?>" title="<?= $_category->getName() ?>">
											<img src="<?= $block->getImageUrl($_category->getFbuilderThumbnail()); ?>" alt="<?= $_category->getName() ?>" />
										</a>
										
									</div>
									<div class="info-subcate">
										<h3 class="title">
											<a href="<?= $_category->getUrl() ?>" title="<?= $_category->getName() ?>"><?= $_category->getName() ;?></a>
											<span class="sub-title">(
												<?= __('%1 Products', $_category->getProductCount());?>
											)</span>
										</h3>
										
									</div>
								</div>
							</div>
						</div>
				<?php endif; ?>
		<?php endforeach ?>
	</div>
</div>
<?php endif ?>
<script type="text/javascript">
	requirejs([ 
		'require', 
		'jquery', 
		'mgsmasonry',
		'mgsvisible'
	], function( require, $, Masonry) {
		require( [ 'bridget' ], function( jQueryBridget ) {
			jQueryBridget( 'masonry', Masonry, $ );
			$('.landing-masonry .list-subcate').masonry({
				itemSelector: '.landing-masonry-item',
				columnWidth: '.landing-masonry-item',
				horizontalOrder: true
			});
			
			setTimeout(function(){ $('.landing-masonry').addClass('masonry-done'); }, 500);
		});
		
		$(window).scroll(function(){
			$(".landing-masonry .list-subcate > .landing-masonry-item").each(function(){
				if($(this).visible(true,true,'vertical')) {
					$(this).addClass('enable');
				}else {
					$(this).removeClass('enable');
				}
			});
		});
	});
</script>