<?php
    /**
     * Template Name: Homepage 
     *
     * This is the template that displays all pages by default.
     * Please note that this is the WordPress construct of pages
     * and that other 'pages' on your WordPress site will use a
     * different template.
     *
     * @package WordPress
     * @subpackage Twenty_Ten
     * @since Twenty Ten 1.0
     */
    
    get_header(); ?>

<section class="mainWrapper">
    <div class="container-fluid">
        <div class="wrap">
<section class="section">
<tabsleft>
<?php 

// Query WooCommerce product categories
$args = array(
  'taxonomy' => 'product_cat',
  'hide_empty' => true,
);

$categories = get_terms($args);
$currentTabs = "current";
$count = 1;

if (!empty($categories)) {
echo '<div id="tabs-container">';
echo '<div class="row">';
echo '<div class="col-lg-3 col-md-3">';
echo '<ul class="tabs-left">';

  // Loop through the categories to create tabs
  foreach ($categories as $category) {
    if (!empty($categories)) {

        // get the thumbnail id using the queried category term_id
        $thumbnail_id = get_term_meta( $category->term_id, 'thumbnail_id', true ); 
        $image = wp_get_attachment_url( $thumbnail_id ); 

        // Get custom field data for the category (using ACF)
        $customYearly   = get_field('add_subscription_yearly_monthly', $category);
        $customPricing  = get_field('pricing_details', $category);

        
        echo '<li class="' .$currentTabs. '">';
            echo '<a href="#tabs'.$count.'">';
                echo '<div class="row">';
                    echo '<div class="col-md-4">';
                        echo '<img src="' . esc_url($image) . '" alt="' . esc_attr($category->name) . '">';
                    echo '</div>';
                    echo '<div class="col-md-8">';
                        echo '<div class="content">';
                            echo '<div class="title">' . $category->name . '</div>';
                            echo '<div class="subHeading">' . $customYearly . '</div>';
                            echo '<div class="pricing">' . $customPricing . '</div>';
                        echo '</div>';
                    echo '</div>';
                echo '</div>';
            echo '</a>';
        echo '</li>';
      $currentTabs = "";
      $count++;
      
    } 
  }
  echo '</ul>'; // left-tabs;
  echo '</div>';// col-lg-2 col-md-3;


echo '<div class="col-lg-9 col-md-9">';
 echo '<div class="tab-loop">';
// Loop through the categories again to display products under each tab;
        $Active = "block";
        $countDigit = 1;
        $maintabhtml = "maintabhtml";

  foreach ($categories as $category) {

    // Query products for the current category
    $product_args = array(
      'post_type' => 'product',
      'posts_per_page' => -1,
      'order' => 'ASC',
      'tax_query' => array(
        array(
          'taxonomy' => 'product_cat',
          'field' => 'slug',
          'terms' => $category->slug,
        ),
      ),
    );

   
    $products = new WP_Query($product_args);

    if ($products->have_posts()) {
        // custom my code;
        echo '<div id="tabs'.$countDigit.'" class="tabsleft-content '.$maintabhtml.'" style="display: '.$Active.';">'; 
        echo '<div class="row">';

      while ($products->have_posts()) {
        $products->the_post();
        // echo '<div class="product-item">';
        // echo '<h3>' . get_the_title() . '</h3>';
        // // Add more product details or custom fields as needed
        // echo '</div>';


        ?>
            <div class="col-md-6">
                <div class="prodItems">
                    <div class="row">
                        <div class="col-md-9 col-sm-12">
                            <div class="featured">
                                <div class="thumbnail">
                                    <img src="<?php the_post_thumbnail_url('full') ?>" alt=" <?php the_title(); ?> ">
                                </div>
                                <div class="headTitle">
                                    <h3> <?php the_title(); ?> </h3>
                                    <div class="subHeading"><?php the_field('add_subscription_yearlymonthly'); ?></div>
                                    <div class="pricing"><?php the_field('product_price'); ?></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12">
                            <div class="button">
                                <a class="primaryBtn" href="<?php the_field('product_button_link'); ?>" target="_blank"><?php the_field('product_button_title'); ?></a>
                                <!-- <a class="readmoreBtn funnel" data-funnel="pro" href="javascript:void(0);" target="_blank">Learn More</a> -->
                                <a class="readmoreBtn" href="<?php the_permalink(); ?>">Learn More</a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="prodCont">
                                <?php the_content(); ?>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- END col-md-6 -->
        
        <?php 
      }
       echo '</div>'; 
        echo '</div>'; // tabsleft-content;

    } else {

      echo 'No products found for this category.';
    }
    //echo '</div>';
    $Active = "none";
    $countDigit++;
    $maintabhtml = "";
  }
  echo '</div>'; // tab-loop;
  echo '</div>'; // col-lg-10 col-md-9;
}

 ?>

</div>
</tabsleft>
</section>


            <?php // get_template_part( 'loop', 'page' );  ?>
        </div><!-- #content -->
    </div><!-- #container -->
</section>

<?php get_footer(); ?>