{% extends "base.html" %}
{% block title %}VIP | BancaNet{% endblock %}
{% block content %}
<div class="products-page vip-page">
  <section class="vip-hero-banner" aria-label="VIP">
    <img src="{{ url_for('static', filename='images/5e6454645.png') }}?v=1" alt="VIP" width="1672" height="941" loading="eager" decoding="async">
  </section>

  {% if vip %}
  <section class="vip-board">
    <div class="vip-board__summary">
      <div>
        <span>Invitados verificados con recarga y compra</span>
        <strong>{{ vip.invite_count }}</strong>
      </div>
      <div>
        <span>Nivel actual</span>
        <strong>{% if vip.level %}VIP {{ vip.level }}{% else %}Sin VIP{% endif %}</strong>
      </div>
      <div>
        <span>Ya cobrado</span>
        <strong>MX$ {{ "%.2f"|format(vip.paid_amount or 0) }}</strong>
      </div>
    </div>

    <div class="vip-claim">
      <div class="vip-claim__info">
        <span>Listo para reclamar</span>
        <strong>MX$ {{ "%.2f"|format(vip.claimable or 0) }}</strong>
      </div>
      <form method="post" action="{{ url_for('user.vip_claim') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="vip-claim__btn" {% if (vip.claimable or 0)|float <= 0 %}disabled{% endif %}>
          Reclamar ganancia
        </button>
      </form>
    </div>

    <p class="vip-board__note">Al llegar a un nivel cobras ese premio. Si subes de nivel, reclamas solo la diferencia. El conteo reinicia cada lunes (hora México).</p>

    <div class="vip-tiers">
      {% for tier in vip.tiers_view %}
      <article class="vip-pass{% if tier.claimed %} is-done{% elif tier.done %} is-current{% endif %}">
        <div class="vip-pass__side">
          <span>VIP</span>
          <strong>{{ tier.level }}</strong>
        </div>
        <div class="vip-pass__main">
          <div class="vip-pass__row">
            <span>Premio</span>
            <strong>MX$ {{ "%.0f"|format(tier.reward) }}</strong>
          </div>
          <div class="vip-pass__row">
            <span>Requisito</span>
            <strong>{{ tier.invites }} invitados / sem</strong>
          </div>
          <div class="vip-pass__row vip-pass__row--accent">
            <span>Avance</span>
            <strong>{{ tier.progress }}/{{ tier.invites }}</strong>
          </div>
          {% if tier.claimed %}<em>Cobrado</em>{% elif tier.done %}<em class="is-live">Listo para reclamar</em>{% elif tier.current %}<em class="is-live">En curso</em>{% endif %}
        </div>
      </article>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <section class="vip-footer-banner" aria-label="VIP">
    <img src="{{ url_for('static', filename='images/ubnfiwsefbnwuenf.png') }}?v=1" alt="" loading="lazy" decoding="async">
  </section>
</div>
{% endblock %}