<?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="pro-topcategories-area">
			<?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;
					}
				}
				$topcategories_title = get_theme_mod('topcategories_title', 'OUR COLLECTION');	
                $topcategories_text = get_theme_mod('topcategories_text', 'Find Gorgeous Dress For Any Occasion');
			?>
	        <div class="row justify-content-center">
	            <div class="section-title">
                    <?php if( $topcategories_title){ ?>
                        <div class="heading-brd"></div>
                         <h2><?php echo ($topcategories_title);  ?></h2>
                    <?php } ?>
                    <?php if( $topcategories_text){ ?>
                        <p class="section-text">
                            <?php echo ($topcategories_text);  ?>
                        </p>
                    <?php } ?> 
	            </div>
	        </div>   
            <div class="category">
                <?php 
                    for($s=1; $s<=12; $s++) { 
                        if( get_theme_mod('category'.$s,false)) { 
                            $id1 = get_theme_mod('category'.$s,true);
                        } 
                    } 
                    $id1 = get_theme_mod('category'.$s,true); 
                    if ($id1 == 0) { 
                ?>
                <div class="owl-carousel">
                  <?php for($c=1; $c<=12; $c++) { 
                        echo '<div class="item ">';?>
                          <div class=" cattopbx">
                                <a class="scat_img" href="#">
                                  <img  src="<?php echo get_template_directory_uri(); ?>/images/product1.jpg" > 
                                </a>
                                <div class="conbox">
                                    <a href="">
                                        <div class="tbox">
                                            <h1>Flavoured Organic Ice-Cream</h1>
                                        </div>
                                    </a>
                                     <!-- <div class="cat-icon">
                                        <i class="fa fa-eye" aria-hidden="true"></i>
                                    </div> -->
                                </div>
                              </div>
                        <?php
                   } ?>
                </div> 
                <?php 
                  } else { ?>
                    <div class="owl-carousel">
                      <?php for($c=1; $c<=12; $c++) { 
                         if( get_theme_mod('category'.$c,false)) { 
                            $getcategoryname = get_theme_mod('category'.$c,true);
                            $category = get_term_by( 'id', $getcategoryname, 'product_cat' );
                            if ($category) {
                              // 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=" 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-ovly"></div>
                                </a>
                                <div class="conbox">
                                    <a href="<?php echo get_term_link( $category ) ?>">
                                        <div class="tbox">
                                            <h1><?php echo $cat_name ?></h1>
                                        </div>
                                    </a>
                                </div>
                              </div>
                            </div>
                            <?php
                        }
                          } 
                        } 
                       ?>
                    </div>
                <?php } ?>
            </div>
            <div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
<script>
    $(document).ready(function() {
      $('#topcategories .owl-carousel').owlCarousel({
        refreshClass: 'owl-refresh',
            loop: true,
            margin: 0,
            autoHeight: true,
            autoWidth: false,
            autoplay: true,
            //autoplaySpeed: 2000,
            autoplayTimeout:4000,
            autoplayHoverPause: true,
            responsiveClass: true,
             navText: [
                '<i class="fa fa-caret-left" aria-hidden="true"></i>',
                '<i class="fa fa-caret-right" aria-hidden="true"></i>'
            ],
            responsive: {
              0: {
              items: 1,
              nav: true
            },
            400: {
              items:2,
              nav: false
            },
            576: {
              items:3,
              nav: false
            },
            992: {
              items:5,
            },
            1200: {
              items:6,
              margin: 0
            }
            }
          })
        })
</script>
<?php }  