<?php
/**
 *
 * @package Luzuk Premium
 */
if(get_theme_mod('lz_fitness_catproduct_section_disable') != 'on' ){ ?>
<section id="catproduct-section" class="ht-section lz-catproduct-section">
  <div class="container">
                <?php
                $catproduct_title = get_theme_mod('catproduct_title', 'Product Category easfraes');
                ?>
                <?php if( $catproduct_title){ ?>
                <div class="ht-section-title-tagline">          
                    <?php if($catproduct_title){ ?>
                    <h2 class="ht-section-title catproduct-heading"><?php echo($catproduct_title); ?></h2>
                    <?php } ?>
                    <div class="dlab-separator-outer m-b0">
                        <div class="dlab-separator text-primary style-icon"><i class="fa fa-birthday-cake"></i></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <?php } ?>
 
                <div class="row">
                    <div class="col-md-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 ) && count( $product_categories ) > 0 ) {
                            foreach ( $product_categories as $product_category ) {

                                if(function_exists('get_term_meta')){
                                            //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';
                                            }

                                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">' . $product_category->name . '</a></h5></span>';
                                echo '<p class="catdesc">' . $product_category->description . '</p>';

                                 echo' <svg class="procat-separator-svg procat-separator-svg__waves_svg_separator" xmlns="http://www.w3.org/2000/svg" version="1.0" width="1200" fill="#f1f2f4" height="30" viewBox="0 0 1200 30" preserveAspectRatio="none"><path d="M0,0S1.209,1.508,200.671,7.031C375.088,15.751,454.658,30,600,30V0H0ZM1200,0s-90.21,1.511-200.671,7.034C824.911,15.751,745.342,30,600,30V0h600Z"></path></svg>
  </div>
</div>';
                            
                               
                            }
                        }?>


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

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

<?php }