{% extends 'admin/base.html' %}
{% block title %}Payments{% endblock %}
{% block page_title %}Payment History{% endblock %}
{% block content %}

{# 1. Filter Section (Now correctly placed inside the block) #}
<div style="margin-bottom: 20px; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px;">
    <form method="GET" action="{{ url_for('admin_payments') }}" style="display: flex; gap: 10px; align-items: center;">
        {% if is_super %}
        <label style="color: #ccc; font-size: 13px;">Filter by Site:</label>
        <select name="site_id" style="padding: 8px; border-radius: 5px; background: #1e1b4b; color: white; border: 1px solid #4338ca;">
            <option value="">All Sites (NDUTH & Otuoke)</option>
            {% for site in all_sites %}
            <option value="{{ site.id }}" {% if selected_site == site.id %}selected{% endif %}>
                {{ site.name }}
            </option>
            {% endfor %}
        </select>
        <button type="submit" class="btn btn-purple" style="padding: 8px 16px;">Filter Revenue</button>
        {% endif %}
    </form>
</div>

{# 2. Statistics Grid #}
<div class="stats-grid" style="margin-bottom:20px;">
  <div class="stat-card">
    <div class="stat-icon purple">🧾</div>
    <div>
      <div class="stat-val">{{ logs.total }}</div>
      <div class="stat-label">Total Transactions</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon green">✅</div>
    <div>
      <div class="stat-val">{{ successful_count }}</div>
      <div class="stat-label">Successful</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon red">❌</div>
    <div>
      <div class="stat-val">{{ failed_count }}</div>
      <div class="stat-label">Failed</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon green">💰</div>
    <div>
      <div class="stat-val" style="font-size:18px;">₦{{ "{:,.2f}".format(total_collected) }}</div>
      <div class="stat-label">Total Collected</div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-title" style="display:flex;justify-content:space-between;align-items:center;">
    <span>📋 Subscriber Transactions</span>
    <a href="/admin/settlements" class="btn btn-purple" style="font-size:12px;padding:6px 14px;">
      🏦 View Net Settlements →
    </a>
  </div>

  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Reference</th>
          <th>Subscriber</th>
          <th>Site</th> {# NEW COLUMN #}
          <th>Amount Paid</th>
          <th>Status</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        {% for log in logs.items %}
        {% set sub = subscribers.get(log.subscriber_id) %}
        <tr>
          <td class="mono">{{ log.id }}</td>
          <td class="mono" style="font-size:10px;">{{ log.paystack_ref or '—' }}</td>
          <td>
            {% if sub %}
              <div style="font-weight:700;color:white;font-size:13px;">
                {{ sub.first_name }} {{ sub.surname }}
              </div>
              <div class="mono" style="font-size:11px;color:var(--muted);">
                {{ sub.email }}
              </div>
            {% elif log.subscriber_id %}
              <a href="/admin/subscribers?search={{ log.subscriber_id }}"
                 style="color:#9b6dce;text-decoration:none;">#{{ log.subscriber_id }}</a>
            {% else %}
              <span style="color:var(--muted);">—</span>
            {% endif %}
          </td>
          
          {# NEW: Site Name Display #}
          <td>
             <span style="font-size: 10px; color: #aaa; text-transform: uppercase;">
                 {{ sub.site.slug if sub else '—' }}
             </span>
          </td>

          <td>
            <strong style="color:#4ade80;">
              ₦{{ "{:,.2f}".format(log.amount) if log.amount else '—' }}
            </strong>
          </td>
          <td>
            {% if log.status == 'success' %}
              <span class="badge active">Success</span>
            {% elif log.status == 'failed' %}
              <span class="badge expired">Failed</span>
            {% else %}
              <span class="badge pending">{{ log.status or '—' }}</span>
            {% endif %}
          </td>
          <td class="mono" style="font-size:12px;">
            {{ log.created_at.strftime('%d %b %Y %H:%M') if log.created_at else '—' }}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="7" style="text-align:center;color:var(--muted);padding:32px;">
            No payment records yet
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="pagination" style="margin-top:16px;">
    {% if logs.has_prev %}
      <a href="?page={{ logs.prev_num }}{% if selected_site %}&site_id={{ selected_site }}{% endif %}">← Prev</a>
    {% endif %}
    
    {% for p in logs.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
      {% if p %}
        {% if p == logs.page %}
          <span class="current">{{ p }}</span>
        {% else %}
          <a href="?page={{ p }}{% if selected_site %}&site_id={{ selected_site }}{% endif %}">{{ p }}</a>
        {% endif %}
      {% else %}
        <span>…</span>
      {% endif %}
    {% endfor %}

    {% if logs.has_next %}
      <a href="?page={{ logs.next_num }}{% if selected_site %}&site_id={{ selected_site }}{% endif %}">Next →</a>
    {% endif %}
  </div>

  <div style="margin-top:16px;padding:12px 16px;
              background:rgba(139,92,246,0.08);
              border:1px solid rgba(139,92,246,0.2);
              border-radius:10px;font-size:12px;color:var(--muted);">
    💡 This page shows amounts paid by subscribers.
    To see net revenue after Paystack fees, visit
    <a href="/admin/settlements" style="color:#9b6dce;">Settlements →</a>
  </div>
</div>

{% endblock %}