<?php
/**
 *
 * This is the section that displays the section on the homepage.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package GrShop
 */
$cproduct_section_label = get_theme_mod( 'cproduct_section_label','Top Category' );
$cproduct_section_title = get_theme_mod( 'cproduct_section_title','Category' );
$cproduct_section_focus = get_theme_mod( 'cproduct_section_focus','Products' );

?>
<?php if (class_exists('WooCommerce')) : ?>
 <!-- Departments CSS -->
 <section class="departments gr-section-padding gr-custom-bg">
    <div class="container">
        <div class="row mb-30">
            <div class="col-12">
                <div class="section-title text-center m-btm-30">
                    <p class="small-title font-stylish m-btm-10 pr-color"><?php echo $cproduct_section_label;?></p>
                    <h2 class="s-content-title"><?php echo $cproduct_section_title;?> <span class="pr-color"><?php echo $cproduct_section_focus;?></span></h2>
                </div>
            </div>
        </div>
        <div class="row">
            <?php
            $category_number = get_theme_mod( 'show_category', 8 );

            // Get product categories
            $product_categories = get_terms( array(
                'taxonomy'   => 'product_cat',
                'hide_empty' => true,
                'number'     => $category_number, // Adjust this value to display the desired number of categories
                'parent'     => 0, // Only retrieve top-level categories
            ) );

            // Loop through product categories
            foreach ( $product_categories as $category ) :
                $category_link = get_term_link( $category );
                ?>
                <div class="col-lg-3 col-md-6 col-12">
                    <!-- Single Department -->
                    <div class="oa-single-department">
                        <?php $category_image_id = get_term_meta( $category->term_id, 'thumbnail_id', true ); ?>
                        <?php if ( $category_image_id ) :?>
                        <div class="oa-single-department__thumb">
                            <?php echo wp_get_attachment_image( $category_image_id, 'grshop-grocery-product-cat-thumb', false); ?>
                        </div>
                        <?php endif;?>
                        <div class="oa-single-department__content">
                            <h2 class="oa-single-department__title">
                                <a href="<?php echo esc_url( $category_link ); ?>"><?php echo esc_html( $category->name ); ?></a>
                            </h2>
                            <p class="oa-single-department__desc"><?php echo esc_html( $category->description ); ?></p>
                            <div class="oa-single-department__button">
                                <a href="<?php echo esc_url( $category_link ); ?>"><?php esc_html_e('Show Products','grshop-grocery');?></a>
                            </div>
                        </div>
                    </div>
                    <!-- End Single Department -->
                </div>
            <?php endforeach; ?>

        </div>
    </div>
</section>
<!-- End Departments CSS -->
<?php endif;?>