<?php
if(get_theme_mod('topcategories_area_disable') != 'on' ){
	?>
	<!-- topcategories Start -->
	<?php 
		if( get_theme_mod('topcategories_areaTpadding',true) ) {
			$topcategories_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('topcategories_areaTpadding')).';';
		}
		if( get_theme_mod('topcategories_areaBpadding',true) ) {
			$topcategories_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('topcategories_areaBpadding')).';';
		}
	?>			
	<div id="topcategories" class="topcategories-area"  style="<?php echo esc_attr($topcategories_areaTpadding); ?>" "<?php echo esc_attr($topcategories_areaBpadding); ?>">  
        <div class="container">
			<?php
				$showStatic = true;
				for( $i = 1; $i < 4; $i++ ){
					$luzuk_topcategories_page_id = get_theme_mod('luzuk_topcategories_page'.$i); 
					if(!empty($luzuk_topcategories_page_id)){
						$showStatic = false;
						break;
					}
				}				
			?>
	        <div class="row">
                <?php
                    $topcategories_title = get_theme_mod('topcategories_title', 'Our Top Categories');  
                ?>
                <?php if( $topcategories_title){ ?>
	            <div class="section-title">                         
                    <h2><?php echo ($topcategories_title);  ?></h2>
	            </div>   
                <?php } ?>          
            </div>   
            <div class="category">
                <?php 
                    for($s=1; $s<=10; $s++) { 
                        if( get_theme_mod('category'.$s,false)) { 
                            $id1 = get_theme_mod('category'.$s,true);
                        } 
                    } 
                    $id1 = get_theme_mod('category'.$s,true); 
                    if ($id1 == '') { 
                ?>
                <!-- <div class="owl-carousel"> -->
                <div class="row ">
                  <?php for($c=1; $c<=10; $c++) { 
                        echo '<div class="catMbx ">';?>
                    <div class=" cattopbx">
                        <a class="scat_img" href="#">
                            <img  src="<?php echo get_template_directory_uri(); ?>/images/product1.jpg" >
                            <div class="cat_oly"></div>
                            <div class="cat-icon">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </div>
                            <div class="conbox">
                                <div class="tbox">
                                    <h2>Decorative Kandil</h2>
                                </div>
                            </div> 
                        </a>                        
                    </div>
                        <?php
                   } ?>
                </div> 
                <?php 
                  } else { ?>
                    <!-- <div class="owl-carousel"> -->
                    <div class="row ">
                      <?php for($c=1; $c<=10; $c++) { 
                         if( get_theme_mod('category'.$c,false)) { 
                            $getcategoryname = get_theme_mod('category'.$c,true);
                            $category = get_term_by( 'id', $getcategoryname, 'product_cat' );
                              // get image
                              $thumbnail_id = get_term_meta( $category->term_id, 'thumbnail_id', true ); 
                              $cat_image = wp_get_attachment_url( $thumbnail_id ); 
                              // get name
                              $cat_name = $category->name;
                              $products_count = $category->count;
                            ?>
                            <!-- <div class="item "> -->
                            <div class="catMbx ">
                              <div class=" cattopbx">
                                <a class="scat_img" href="<?php echo get_term_link( $category )?>"><img src="<?php echo $cat_image?>" alt="<?php $cat_name ?>"  />
                                    <div class="cat_oly"></div>
                                    <div class="cat-icon">
                                        <i class="fa fa-eye" aria-hidden="true"></i>
                                    </div> 
                                    <div class="conbox">      
                                        <div class="tbox">
                                            <h2><?php echo $cat_name ?></h2>
                                        </div>
                                        
                                    </div>
                                </a>
                              </div>
                            </div>
                            <?php
                          } 
                        } 
                       ?>
                    </div>
                <?php } ?>
            </div>
            <div class="clearfix"></div>
		</div>
	</div>

<script>
        var maxHeight = -1,
        elems = document.querySelectorAll("#topcategories .cattopbx > *");
        elems = [].slice.call(elems) 

        elems.forEach(function(e){
            maxHeight = Math.max(maxHeight, e.offsetHeight);
        });

        elems.forEach(function(e){
            e.style.height = maxHeight + "px";
        });

  </script>
<?php }  