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

  <p class="orden-how">Las ganancias de tus planes se liberan cada 24 h desde la compra. Reclámalas aquí; si no cobras, se acumulan.</p>

  {% if investment_reports %}
  <section class="orden-summary" aria-label="Resumen de ordenes">
    <article class="orden-summary__card">
      <span class="orden-summary__ico" aria-hidden="true">
        <svg viewBox="0 0 24 24" focusable="false"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
      </span>
      <div class="orden-summary__text">
        <span>Activos</span>
        <strong>{{ active_count }}</strong>
      </div>
    </article>
    <article class="orden-summary__card">
      <span class="orden-summary__ico" aria-hidden="true">
        <svg viewBox="0 0 24 24" focusable="false"><path fill="currentColor" d="M21 7H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 10H3V9h18v8zm-9-1c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z"/></svg>
      </span>
      <div class="orden-summary__text">
        <span>Invertido</span>
        <strong>MX$ {{ "%.2f"|format(total_invested or 0) }}</strong>
      </div>
    </article>
    <article class="orden-summary__card orden-summary__card--claim">
      <span class="orden-summary__ico" aria-hidden="true">
        <svg viewBox="0 0 24 24" focusable="false">
          <ellipse cx="12" cy="7.2" rx="7.2" ry="3.2" fill="currentColor" opacity=".55"/>
          <path fill="currentColor" d="M4.8 7.2v3.2c0 1.8 3.2 3.2 7.2 3.2s7.2-1.4 7.2-3.2V7.2c0 1.8-3.2 3.2-7.2 3.2S4.8 9 4.8 7.2z"/>
          <path fill="currentColor" d="M4.8 11.2v3.2c0 1.8 3.2 3.2 7.2 3.2s7.2-1.4 7.2-3.2v-3.2c0 1.8-3.2 3.2-7.2 3.2s-7.2-1.4-7.2-3.2z"/>
          <path fill="currentColor" d="M4.8 15.2v2.4c0 1.8 3.2 3.2 7.2 3.2s7.2-1.4 7.2-3.2v-2.4c0 1.8-3.2 3.2-7.2 3.2s-7.2-1.4-7.2-3.2z"/>
        </svg>
      </span>
      <div class="orden-summary__text">
        <span>Por reclamar</span>
        <strong class="{% if total_claimable and total_claimable > 0 %}is-claim{% endif %}">MX$ {{ "%.2f"|format(total_claimable or 0) }}</strong>
      </div>
    </article>
  </section>

  <div class="orden-list">
    {% for item in investment_reports %}
    <article class="orden-card{% if item.status == 'active' %} is-active{% elif item.status == 'completed' %} is-done{% endif %}{% if item.can_claim %} has-claim{% endif %}">
      <header class="orden-card__head">
        <div>
          <p class="orden-card__label">Producto</p>
          <h2>{{ item.name }}</h2>
        </div>
      </header>

      <div class="orden-card__grid">
        <div class="orden-card__metric-cell">
          <span class="orden-card__metric-ico" aria-hidden="true">
            <svg viewBox="0 0 24 24" focusable="false"><path fill="currentColor" d="M21 7H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 10H3V9h18v8zm-9-1c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z"/></svg>
          </span>
          <div class="orden-card__metric-text">
            <span>Invertido</span>
            <strong>MX$ {{ "%.2f"|format(item.price) }}</strong>
          </div>
        </div>
        <div class="orden-card__metric-cell">
          <span class="orden-card__metric-ico" aria-hidden="true">
            <svg viewBox="0 0 24 24" focusable="false"><path fill="currentColor" d="M5 9.2h3V19H5V9.2zM10.6 5h2.8v14h-2.8V5zm5.6 8H19v6h-2.8v-6z"/></svg>
          </span>
          <div class="orden-card__metric-text">
            <span>Diario</span>
            <strong>MX$ {{ "%.2f"|format(item.daily_profit) }}</strong>
          </div>
        </div>
        <div class="orden-card__metric-cell">
          <span class="orden-card__metric-ico" aria-hidden="true">
            <svg viewBox="0 0 24 24" focusable="false"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
          </span>
          <div class="orden-card__metric-text">
            <span>Ya cobrado</span>
            <strong>MX$ {{ "%.2f"|format(item.earned_amount) }}</strong>
          </div>
        </div>
        <div class="orden-card__metric-cell orden-card__metric-cell--pending">
          <span class="orden-card__metric-ico" aria-hidden="true">
            <svg viewBox="0 0 24 24" focusable="false"><path fill="currentColor" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
          </span>
          <div class="orden-card__metric-text">
            <span>Pendiente</span>
            <strong>MX$ {{ "%.2f"|format(item.claimable_amount) }}</strong>
          </div>
        </div>
      </div>

      {% if item.can_claim %}
      <form method="post" action="{{ url_for('user.claim_product_earnings', investment_id=item.id) }}" class="orden-card__claim">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <p>Tienes <strong>MX$ {{ "%.2f"|format(item.claimable_amount) }}</strong> listos ({{ item.claimable_cycles }} d&iacute;a{% if item.claimable_cycles != 1 %}s{% endif %}).</p>
        <button type="submit">Reclamar ganancias</button>
      </form>
      {% elif item.status == 'active' and item.next_collection_at %}
      <p class="orden-card__wait">Próxima liberación: {{ item.next_collection_at.strftime('%d/%m/%Y %H:%M') }} (hora CDMX)</p>
      {% elif item.status == 'completed' %}
      <p class="orden-card__wait">Producto finalizado. Ya cobraste todo lo disponible.</p>
      {% endif %}
    </article>
    {% endfor %}
  </div>
  <p class="orden-motivate">Sigue creciendo: cada plan suma. Reclama a tiempo y construye tu avance día a día.</p>
  {% else %}
  <section class="orden-empty" aria-live="polite">
    <div class="orden-empty__visual" aria-hidden="true">
      <span class="orden-empty__ring"></span>
      <span class="orden-empty__icon">
        <svg viewBox="0 0 48 48"><rect x="8" y="12" width="32" height="24" rx="4" fill="none" stroke="currentColor" stroke-width="2"/><path d="M16 20h16M16 26h10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M24 8v4M18 36v4M30 36v4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
      </span>
    </div>
    <p class="orden-empty__text">SIN PRODUCTOS POR EL MOMENTO</p>
    <a class="orden-empty__cta" href="{{ url_for('user.dashboard') }}">Ver productos</a>
  </section>
  {% endif %}
</div>
{% endblock %}