{% extends "portal/base.html" %}

{% block title %}充值记录 - cmhub{% endblock %}

{% block content %}
<div class="d-flex flex-column gap-4">
  <div>
    <h1 class="h3 mb-1">充值记录</h1>
    <div class="text-secondary">{{ user.email }}</div>
  </div>

  <div class="row g-3">
    <div class="col-md-4">
      <div class="metric">
        <div class="text-secondary small">充值总额</div>
        <div class="display-6 fw-semibold">{{ recharge_total_amount|floatformat:2 }}</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="metric">
        <div class="text-secondary small">入账点数</div>
        <div class="display-6 fw-semibold">{{ recharge_points_total }}</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="metric">
        <div class="text-secondary small">已支付订单</div>
        <div class="display-6 fw-semibold">{{ paid_recharge_count }}</div>
      </div>
    </div>
  </div>

  <section class="cmhub-surface">
    <h2 class="h5 mb-3">订单列表</h2>
    {% if recharge_orders %}
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">订单号</th>
              <th scope="col">金额</th>
              <th scope="col">支付方式</th>
              <th scope="col">点数</th>
              <th scope="col">状态</th>
              <th scope="col">支付流水</th>
              <th scope="col">创建时间</th>
              <th scope="col">到账时间</th>
            </tr>
          </thead>
          <tbody>
            {% for order in recharge_orders %}
              <tr>
                <td><code>{{ order.order_no }}</code></td>
                <td>{{ order.amount_money|floatformat:2 }} {{ order.currency }}</td>
                <td>{{ order.pay_method }}</td>
                <td>{{ order.points_granted }}</td>
                <td>{{ order.status }}</td>
                <td>{{ order.payment_txn_no|default:"-" }}</td>
                <td>{{ order.created_at|date:"Y-m-d H:i" }}</td>
                <td>{{ order.paid_at|date:"Y-m-d H:i"|default:"-" }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="text-secondary">暂无充值记录</div>
    {% endif %}
  </section>
</div>
{% endblock %}