<?php
if ( get_theme_mod('topcategories_area_disable') != 'on' ) {

    // WooCommerce check (important)
    if ( ! class_exists( 'WooCommerce' ) ) {
        return;
    }
?>
<!-- topcategories Start -->

<?php 
    $topcategories_areaTpadding = '';
    $topcategories_areaBpadding = '';

    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 . $topcategories_areaBpadding); ?>">  

    <?php if ( get_theme_mod('category_img_display1','show') == 'show') : ?>
        <div class="pro-cat-img1">
            <img alt="features" src="<?php echo esc_url(get_template_directory_uri().'/images/cat-img1.png'); ?>" class="img-responsive" />
        </div>
    <?php endif; ?>

    <?php if ( get_theme_mod('category_img_display2','show') == 'show') : ?>
        <div class="pro-cat-img2">
            <img alt="features" src="<?php echo esc_url(get_template_directory_uri().'/images/cat-img2.png'); ?>" class="img-responsive" />
        </div>
    <?php endif; ?>

    <div class="pro-topcategories-area">

        <?php
            $topcategories_title = get_theme_mod('topcategories_title', 'Our Category'); 
        ?>

        <div class="row justify-content-center">
            <div class="section-title">
                <?php if ( $topcategories_title ) { ?>
                    <div class="heading-brd1"></div>
                    <h2><?php echo esc_html($topcategories_title); ?></h2>
                <?php } ?>
            </div>    
        </div>

        <div class="container">
            <div class="catproduct-grid"> 
                <div class="row">
                    <ul>

                    <?php
                        $args = array(
                            'number'     => 5,
                            'orderby'    => 'title',
                            'order'      => 'ASC',
                            'hide_empty' => false
                        );

                        $product_categories = get_terms( 'product_cat', $args );

                        // SAFE CHECK
                        if ( ! is_wp_error( $product_categories ) && ! empty( $product_categories ) ) {

                            foreach ( $product_categories as $product_category ) {

                                $image = esc_url(get_template_directory_uri()).'/images/default.png';

                                if ( function_exists('get_term_meta') && isset($product_category->term_id) ) {
                                    $thumbnail_id = get_term_meta($product_category->term_id, 'thumbnail_id', true);
                                    
                                    if ( $thumbnail_id ) {
                                        $img = wp_get_attachment_url($thumbnail_id);
                                        if ( $img ) {
                                            $image = $img;
                                        }
                                    }
                                }

                                if ( isset($product_category->name) ) {

                                    $term_link = get_term_link($product_category);

                                    if ( ! is_wp_error( $term_link ) ) {
                    ?>

                        <li class="product-bx">
                            <div class="cat-product hvr-float-shadow">
                                <div class="pro-cat-content">
                                    <h5>
                                        <a href="<?php echo esc_url($term_link); ?>" target="_blank">
                                            <span><?php echo esc_html($product_category->name); ?></span>
                                        </a>
                                    </h5>
                                </div>

                                <div class="pro-cat-inn">
                                    <div class="pro-brd"></div>
                                    <div class="pro-cat-area">
                                        <div class="pro-cat-img">
                                            <a href="<?php echo esc_url($term_link); ?>" target="_blank">
                                                <div class="cat-ovly"></div>
                                                <img src="<?php echo esc_url($image); ?>" alt="" width="270" height="377" />
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </li>

                    <?php
                                    }
                                }
                            }
                        }
                    ?>

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

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

<?php } ?>