<?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 class="topcategories-area wow zoomIn" id="topcategories">  
		<div class="container">
			<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', 'TOP CATEGORIES');	
				
				?>
				<div class="row">
					<div class="section-title pd-0">
						<h2><?php echo ($topcategories_title);?></h2>

					</div>
				</div>
				<div class="row s-border">
					<div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="catproduct-grid">

                    <div class="owl-carousel owl-theme">  
                        <?php
                        $args = array(
                            'number'     => 0,
                            'orderby'    => 'title',
                            'order'      => 'ASC',
                            'hide_empty' => false
                        );
                    $product_categories = get_terms( 'product_cat', $args );

                        if ( ! is_wp_error( $product_categories ) && ! empty( $product_categories ) ) {
                            foreach ( $product_categories as $product_category ) {

                                if(function_exists('get_term_meta')){
                                    if( isset( $product_category->term_id ) ){
                                    //show parent categories
                                        $thumbnail_id = get_term_meta($product_category->term_id, 'thumbnail_id', true);
                                      }
                                    // get the image URL for parent category
                                        $image = wp_get_attachment_url($thumbnail_id);
                                    }else{
                                        $image = esc_html(get_template_directory_uri()).'/images/default.png';
                                    }
                                if( isset( $product_category->name ) ){
                                echo '<div class="item cat-product hvr-float-shadow"> ';

                                  echo' <figure class="pro-cat-img">   
                                    <a href="' . get_term_link( $product_category ) . '" target="_blank"><img src="'.$image.'" alt="" width="270" height="377" /></a>
                                    </figure>  ';

                                 echo ' <div class="pro-cat-content"> ';

                                echo '<span class="rolln"><h5><a href="' . get_term_link( $product_category ) . '" target="_blank" data-hover="' . $product_category->name . '" >
                               		<span> ' . $product_category->name . '</span>
                               	 </a>
                                </h5></span>';

                                 echo'
								  </div>
								</div>';
                    }
                            }
                        }?>


<!--     <div class="clearfix"></div> -->
                                    </div>

                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>

			</div>
		 
		<div class="clearfix"></div>
		</div>
	</div>
	 <script>
            $(document).ready(function() {
              $('.topcategories-area .owl-carousel').owlCarousel({
                loop: true,
                margin: 30,
                responsiveClass: true,
                responsive: {
                  0: {
                    items: 1,
                    nav: true
                  },
                  600: {
                    items:2,
                    nav: false
                  },
                  1000: {
                    items:6,
                    nav: true,
                    loop: false,
                    margin: 25
                  }
                }
              })
            })
          </script>

	<!-- topcategories Area End -->
<?php }  