{% extends 'base.html' %}
{% block title %}运营面板 - 账单列表{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h3>账单管理</h3>
  <div>
    <a class="btn btn-outline-secondary" href="{% url 'admin_panel:dashboard' %}">返回概览</a>
    <a class="btn btn-outline-secondary" href="/admin/billing/invoice/" target="_blank">在 Django Admin 查看</a>
  </div>
</div>

<form method="get" class="row g-2 mb-3">
  <div class="col-md-3">
    <select name="status" class="form-select">
      <option value="">全部状态</option>
      <option value="unpaid" {% if status == 'unpaid' %}selected{% endif %}>未支付</option>
      <option value="paid" {% if status == 'paid' %}selected{% endif %}>已支付</option>
      <option value="cancelled" {% if status == 'cancelled' %}selected{% endif %}>已取消</option>
    </select>
  </div>
  <div class="col-md-3">
    <input type="number" name="user_id" value="{{ user_id }}" class="form-control" placeholder="用户ID（可选）" />
  </div>
  <div class="col-md-2">
    <button class="btn btn-primary" type="submit">筛选</button>
  </div>
  <div class="col-md-4 text-end">
    <span class="text-muted">当前筛选总金额：￥{{ total_amount }}</span>
  </div>
</form>

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>用户</th>
        <th>周期</th>
        <th>套餐费</th>
        <th>超量费</th>
        <th>调整</th>
        <th>总金额</th>
        <th>状态</th>
        <th>支付时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {% for inv in invoices %}
      <tr>
        <td>{{ inv.id }}</td>
        <td>{{ inv.user.username }}</td>
        <td>{{ inv.period_start }} → {{ inv.period_end }}</td>
        <td>￥{{ inv.amount_plan_total }}</td>
        <td>￥{{ inv.amount_overage_total }}</td>
        <td>￥{{ inv.amount_adjustment }}</td>
        <td><strong>￥{{ inv.amount_total }}</strong></td>
        <td>
          {% if inv.status == 'unpaid' %}<span class="badge bg-warning">未支付</span>
          {% elif inv.status == 'paid' %}<span class="badge bg-success">已支付</span>
          {% elif inv.status == 'cancelled' %}<span class="badge bg-secondary">已取消</span>
          {% else %}<span class="badge bg-light text-dark">未知</span>{% endif %}
        </td>
        <td>{% if inv.paid_at %}{{ inv.paid_at|date:'Y-m-d H:i' }}{% else %}-{% endif %}</td>
        <td>
          <a class="btn btn-sm btn-outline-primary" href="{% url 'admin_panel:billing_detail' inv.id %}">详情/调账</a>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="10" class="text-center">暂无账单</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}