{% extends "base.html" %}
{% block title %}Home{% endblock %}

{% block content %}
<h1 class="text-info">ShopRITE</h1>
<div class="card mb-3 p-3 text-white" style="background:#ff0500;">
    <h5>My balance</h5>
    <h2>GHS {{ request.user.balance }}</h2>
    <div class="d-flex gap-2">
        <a href="{% url 'recharge' %}" class="btn btn-light btn-sm">Recharge</a>
        <a href="{% url 'withdraw' %}" class="btn btn-dark btn-sm">Withdraw</a>
    </div>
</div>

<div class="row">
{% for product in products %}
    <div class="col-6 mb-3">
        <div class="card p-2">
            <h6>{{ product.name }}</h6>
            <p class="mb-1">Price: <b>GHS {{ product.price }}</b></p>
            <p class="mb-1">Cycle: {{ product.duration_days }} days</p>
            <p>Daily: <b>GHS {{ product.daily_profit }}</b></p>
            <a href="{% url 'invest-now' product.id %}" 
            class="btn btn-warning w-100">
            Invest Now
            </a>
        </div>
    </div>
{% endfor %}
</div>

<!-- Popup Modal -->
<div class="modal fade" id="promoModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <!-- Header -->
      <div class="modal-header text-center">
        <h5 class="modal-title w-100">SHOPRITE</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Body -->
      <div class="modal-body">

        <ol>
          <li>Invest with a minimum of 40gh.</li>
          <li>Registration reward: GHS10.</li>
          <li>Daily profit on your active investments.</li>
          <li>Invite and earn huge rewards.</li>
          <li>Withdraw within few minutes, earn 24/7.</li>
          <li>Launch date: Feb 20, 2026.</li>
        </ol>

      </div>

      <!-- Footer -->
      <div class="modal-footer justify-content-between">

        <a href="https://t.me/shopriteofficialgroup"
           class="btn btn-primary">
           Join Telegram group
        </a>
        <a href="https://t.me/shopritechannel"
           class="btn btn-primary">
           Join Telegram channel
        </a>

        <button type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal">
          OK
        </button>

      </div>

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

{% if show_popup %}
<script>
document.addEventListener("DOMContentLoaded", function () {

    var myModal = new bootstrap.Modal(
        document.getElementById("promoModal")
    );

    myModal.show();

});
</script>
{% endif %}

{% endblock %}