{% extends 'base.html' %}
{% block title %}账单列表{% endblock %}
{% block content %}
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3>账单列表</h3>
    <div class="text-muted">总金额：¥ {{ total_amount }}</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>
        {% for val,label in status_choices %}
          <option value="{{ val }}" {% if status == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-2">
      <button class="btn btn-primary" type="submit">筛选</button>
    </div>
  </form>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>周期</th>
        <th>套餐费用</th>
        <th>超量费用</th>
        <th>调整</th>
        <th>总金额</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    {% for inv in invoices %}
      <tr>
        <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 text-dark">未支付</span>
          {% elif inv.status == 'paid' %}
            <span class="badge bg-success">已支付</span>
          {% elif inv.status == 'cancelled' %}
            <span class="badge bg-secondary">已取消</span>
          {% else %}
            {{ inv.get_status_display }}
          {% endif %}
        </td>
        <td>
          <a href="{% url 'billing:detail' inv.id %}" class="btn btn-sm btn-outline-secondary">详情</a>
          {% if inv.status == 'unpaid' %}
          <a href="{% url 'billing:pay' inv.id %}" class="btn btn-sm btn-primary ms-1">支付</a>
          {% endif %}
        </td>
      </tr>
    {% empty %}
      <tr><td colspan="7" class="text-center">暂无账单</td></tr>
    {% endfor %}
    </tbody>
  </table>
{% endblock %}