{% extends 'base.html' %}{% load static %}
{% block title %}Transaction History — Unity Nation{% endblock %}
{% block extra_css %}
.txn-wrap{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.txn-hd{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:14px;padding:11px 18px;background:rgba(255,255,255,.03);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.txn-row{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid rgba(255,255,255,.04);transition:background var(--tr)}
.txn-row:hover{background:rgba(255,255,255,.025)}
.t-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0}
.ti-g{background:rgba(0,200,168,.15);color:var(--teal)}
.ti-r{background:rgba(239,68,68,.12);color:var(--red)}
.ti-v{background:rgba(123,95,230,.15);color:var(--vlt)}
.t-type{font-weight:600;font-size:.88rem}
.t-meta{font-size:.74rem;color:var(--muted);margin-top:2px}
.t-amt{font-family:var(--ff);font-weight:700;font-size:.94rem;white-space:nowrap}
.amt-g{color:var(--teal)}.amt-r{color:var(--red)}
.fbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.fbar select{background:var(--panel);border:1px solid var(--border);border-radius:9px;color:var(--white);padding:8px 12px;font-size:.83rem;font-family:var(--fb);outline:none;transition:border-color var(--tr)}
.fbar select:focus{border-color:var(--violet)}
.fbar select option{background:var(--panel)}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div class="pg-hd">
  <div class="ey">Finance</div>
  <h1>Transaction History</h1>
  <p>Complete record of every credit, debit, and transfer on your account.</p>
</div>

<!-- Summary cards -->
<div class="stats-grid">
  <div class="stat-card" style="background:linear-gradient(135deg,rgba(0,200,168,.12),rgba(0,200,168,.04));border-color:rgba(0,200,168,.2)">
    <div class="s-lbl">Current Balance</div>
    <div class="s-val s-g">${{ user.wallet_balance|floatformat:2 }}</div>
    <div class="s-sub">Available to withdraw</div>
  </div>
  <div class="stat-card" style="background:linear-gradient(135deg,rgba(123,95,230,.12),rgba(123,95,230,.04));border-color:rgba(123,95,230,.2)">
    <div class="s-lbl">Total Withdrawn</div>
    <div class="s-val s-v">${{ user.total_withdrawal|floatformat:2 }}</div>
    <div class="s-sub">Lifetime earnings out</div>
  </div>
  <div class="stat-card">
    <div class="s-lbl">Total Transactions</div>
    <div class="s-val s-w">{{ transactions.paginator.count|default:transactions|length }}</div>
    <div class="s-sub">All time</div>
  </div>
  <div class="stat-card" style="display:flex;flex-direction:column;justify-content:center;gap:8px">
    <a href="{% url 'withdraw' %}" class="btn btn-teal btn-sm btn-block"><i class="fas fa-arrow-up"></i>Withdraw</a>
    <a href="{% url 'transfer' %}" class="btn btn-ghost btn-sm btn-block"><i class="fas fa-exchange-alt"></i>Transfer</a>
  </div>
</div>

<!-- Filters -->
<div class="fbar">
  <select id="tF" onchange="fTx()">
    <option value="">All Types</option>
    <option value="DAILY_REWARD">Daily Reward</option>
    <option value="REFERRAL_BONUS">Referral Bonus</option>
    <option value="WITHDRAWAL">Withdrawal</option>
    <option value="TRANSFER">Transfer</option>
    <option value="PURCHASE">Purchase</option>
  </select>
  <select id="dF" onchange="fTx()">
    <option value="">All Directions</option>
    <option value="RECEIVED">Received (Credits)</option>
    <option value="SENT">Sent (Debits)</option>
  </select>
</div>

<!-- Table -->
<div class="txn-wrap">
  <div class="txn-hd"><span></span><span>Description</span><span>Amount</span><span>Status</span></div>
  {% for txn in transactions %}
  <div class="txn-row" data-type="{{ txn.transaction_type }}" data-dir="{{ txn.direction|default:'' }}">
    <div class="t-icon {% if txn.direction == 'RECEIVED' %}ti-g{% elif txn.direction == 'SENT' %}ti-r{% else %}ti-v{% endif %}">
      {% if txn.transaction_type == 'DAILY_REWARD' %}<i class="fas fa-coins"></i>
      {% elif txn.transaction_type == 'REFERRAL_BONUS' %}<i class="fas fa-users"></i>
      {% elif txn.transaction_type == 'WITHDRAWAL' %}<i class="fas fa-arrow-up"></i>
      {% elif txn.transaction_type == 'TRANSFER' %}<i class="fas fa-exchange-alt"></i>
      {% elif txn.transaction_type == 'PURCHASE' %}<i class="fas fa-shopping-cart"></i>
      {% else %}<i class="fas fa-circle"></i>{% endif %}
    </div>
    <div>
      <div class="t-type">{{ txn.get_transaction_type_display|default:txn.transaction_type }}</div>
      <div class="t-meta">{{ txn.created_at|date:"M d, Y · H:i" }}{% if txn.related_user %} · {{ txn.related_user.username }}{% endif %}{% if txn.notes %} · {{ txn.notes }}{% endif %}</div>
    </div>
    <div class="t-amt {% if txn.direction == 'RECEIVED' or not txn.direction %}amt-g{% else %}amt-r{% endif %}">
      {% if txn.direction == 'RECEIVED' or not txn.direction %}+{% else %}-{% endif %}${{ txn.amount|floatformat:2 }}
    </div>
    <div><span class="badge {% if txn.status == 'Completed' %}badge-teal{% elif txn.status == 'Pending' %}badge-gold{% else %}badge-muted{% endif %}">{{ txn.status }}</span></div>
  </div>
  {% empty %}
  <div style="text-align:center;padding:60px 20px;color:var(--muted)">
    <i class="fas fa-history" style="font-size:2.5rem;display:block;margin-bottom:14px;opacity:.3"></i>
    <h3 style="font-family:var(--ff);color:var(--white);margin-bottom:7px">No transactions yet</h3>
    <p>Your history will appear here once you start earning daily rewards.</p>
  </div>
  {% endfor %}
</div>

{% if transactions.has_other_pages %}
<div class="pager">
  {% if transactions.has_previous %}<a href="?page={{ transactions.previous_page_number }}">← Prev</a>{% endif %}
  {% for n in transactions.paginator.page_range %}<a href="?page={{ n }}" {% if transactions.number == n %}class="cur"{% endif %}>{{ n }}</a>{% endfor %}
  {% if transactions.has_next %}<a href="?page={{ transactions.next_page_number }}">Next →</a>{% endif %}
</div>
{% endif %}
</div>
<script>function fTx(){const t=document.getElementById('tF').value,d=document.getElementById('dF').value;document.querySelectorAll('.txn-row').forEach(r=>{r.style.display=(!t||r.dataset.type===t)&&(!d||r.dataset.dir===d)?'':'none'})}</script>
{% endblock %}