<?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="category">
                <div id="carousel" class="owl-carousel">
                    <?php 
                    $categories_displayed = false;

                    // Loop through possible category settings
                    for ($c = 1; $c <= 10; $c++) {
                        $category_id = get_theme_mod('category' . $c, false);

                        if ($category_id) {
                            $category = get_term_by('id', $category_id, 'product_cat');
                            if ($category && $category->count > 0) {
                                // 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;
                                ?>
                                <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 echo esc_attr($cat_name) ?>" />
                                                <div class="cat_oly"></div>
                                            </a>
                                        </div>
                                        <div class="conbox">
                                            <div class="tbox">
                                                <a href="<?php echo get_term_link($category) ?>">
                                                    <h2><?php echo $cat_name ?></h2>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <?php 
                                $categories_displayed = true;
                            }
                        }
                    }
                    ?>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<script>
        $(document).ready(function() {
          $('.topcategories-area .owl-carousel').owlCarousel({
            refreshClass: 'owl-refresh',
            autoplayTimeout:7000,
            loop: true,
            margin: 30,
            autoHeight: true,
            autoWidth: false,
            autoplay: false,
            // animateOut: 'lightSpeedOut',
            // animateOut: 'slideOutDown',
            animateOut: 'fadeOutRight',
            animateIn: 'fadeInLeft',
            navText: [
                    '<i class="fa fa-angle-left"></i> ',
                    '<i class="fa fa-angle-right"></i>'
                ],
            responsiveClass: true,

            responsive: {
              0: {
                items: 1,
                nav: true,
                margin: 40
              },
              350: {
                items: 2,
                nav: true,
                margin: 10
              },
              576: {
                items:3,
                nav: true,
                margin: 20
              },
            992: {
                items:4,
                nav: true,
                margin: 20
              },
              1200: {
                items:6,
                nav: true,
                loop: true,
                margin: 30
              }
            }
          })
        })

</script>
<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 }  