<?php
/* Template Name: Investor Page */
get_header();
?>

<div class="container py-5">
<h2 class="text-center mb-4">Choose Investment Plan</h2>

<?php
$categories = get_terms([
  'taxonomy' => 'product_cat',
  'hide_empty' => true
]);

foreach ($categories as $cat):
?>

<section class="mb-5">
  <h3 class="border-bottom pb-2 mb-3">
    <?php echo esc_html($cat->name); ?>
  </h3>

  <div class="row">
  <?php
  $loop = new WP_Query([
    'post_type' => 'product',
    'posts_per_page' => -1,
    'tax_query' => [[
      'taxonomy' => 'product_cat',
      'field' => 'term_id',
      'terms' => $cat->term_id
    ]]
  ]);

  while($loop->have_posts()): $loop->the_post();
  global $product;
  ?>

  <div class="col-md-4 mb-4">
   <div class="card shadow h-100 text-center">
    <?php echo woocommerce_get_product_thumbnail('medium'); ?>
    <div class="card-body">
     <h5><?php the_title(); ?></h5>
     <p class="text-primary">
      <?php echo $product->get_price_html(); ?>
     </p>
     <button class="btn btn-success"
       data-bs-toggle="modal"
       data-bs-target="#termsModal<?php echo get_the_ID(); ?>">
       Invest Now
     </button>
    </div>
   </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="termsModal<?php echo get_the_ID(); ?>" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title"><?php the_title(); ?></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <div class="row text-center mt-4">
            <?php 
            $features = get_post_meta(get_the_ID(), '_invest_features', true);
            if (!empty($features)):
            foreach ($features as $f):
            ?>
            <div class="col-md-4 mb-3">
              <div class="p-3 border rounded shadow-sm">
                <i class="bi <?php echo esc_attr($f['icon']); ?> fs-2 text-primary"></i>
                <h6 class="mt-2"><?php echo esc_html($f['title']); ?></h6>
                <small><?php echo esc_html($f['desc']); ?></small>
              </div>
            </div>
            <?php endforeach; else: ?>
            <p>No features added.</p>
            <?php endif; ?>
          </div>
        </div>

        <div class="modal-footer justify-content-center">
          <a href="<?php the_permalink(); ?>" class="btn btn-success px-4">
            I Agree & Continue
          </a>
        </div>

      </div>
    </div>
  </div>

  <?php endwhile; wp_reset_postdata(); ?>
  </div>
</section>

<?php endforeach; ?>
</div>

<?php get_footer(); ?>