<?php
get_header();

$product = wc_get_product(get_the_ID());
$price = (float) $product->get_price();
?>
<div class="container py-5 single-product">

<div class="row g-5">

  <!-- Left -->
  <div class="col-md-6">
    <div class="card shadow-lg p-3">
      <?php echo woocommerce_get_product_thumbnail('large'); ?>
    </div>

    <!-- Trust -->
    <div class="row text-center mt-4">
      <div class="col">
        <i class="bi bi-shield-check text-success fs-2"></i>
        <p class="small">Secure System</p>
      </div>
      <div class="col">
        <i class="bi bi-lock-fill text-primary fs-2"></i>
        <p class="small">SSL Protected</p>
      </div>
      <div class="col">
        <i class="bi bi-patch-check-fill text-warning fs-2"></i>
        <p class="small">Verified ROI</p>
      </div>
    </div>
  </div>

  <!-- Right -->
  <div class="col-md-6">

    <h1 class="fw-bold"><?php the_title(); ?></h1>
    <div class="fs-4 text-success mb-2">
      <?php echo $product->get_price_html(); ?>
    </div>

    <p class="text-muted">
      <?php echo wp_trim_words(get_the_content(), 45); ?>
    </p>

    <!-- Progress -->
    <div class="mb-3">
      <label>Investment Filled</label>
      <div class="progress">
        <div class="progress-bar bg-success" style="width:70%">70%</div>
      </div>
    </div>

    <!-- ROI Calculator -->
    <div class="card p-3 mb-3">
      <h5>ROI Calculator</h5>
      <input type="number" id="amount" class="form-control mb-2" value="<?php echo $price; ?>">
      <button class="btn btn-outline-success" onclick="calcROI()">Calculate</button>
      <p class="mt-2" id="roiResult"></p>
    </div>

    <!-- Features -->
    <div class="row mt-3">
    <?php
    $features = get_post_meta(get_the_ID(), '_invest_features', true);
    if (!empty($features)):
    foreach ($features as $f):
    ?>
      <div class="col-6 mb-3">
        <div class="border rounded p-3 h-100">
          <i class="bi <?php echo esc_attr($f['icon']); ?> text-primary fs-4"></i>
          <strong><?php echo esc_html($f['title']); ?></strong>
          <p class="small mb-0"><?php echo esc_html($f['desc']); ?></p>
        </div>
      </div>
    <?php endforeach; endif; ?>
    </div>

    <!-- Warning -->
    <div class="alert alert-warning mt-3">
      Investment involves risk. ROI not guaranteed.
    </div>

    <!-- CTA -->
    <div class="mt-4">
  <form action="<?php echo wc_get_cart_url(); ?>" method="post">
  <input type="hidden" name="add-to-cart" value="<?php echo get_the_ID(); ?>">
  <button type="submit" class="btn btn-success btn-lg w-100">
    Invest Now
  </button>
</form>
    </div>

  </div>
</div>

</div>

<script>
function calcROI(){
  let amt = document.getElementById('amount').value;
  let roi = amt * 0.2;
  document.getElementById('roiResult').innerHTML =
   "Estimated Monthly ROI: ৳" + roi;
}
</script>

<?php get_footer(); ?>

