{% extends 'base.html' %}
{% block title %}账单详情{% endblock %}
{% block content %}
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h3>账单详情</h3>
      <div class="text-muted">周期：{{ invoice.period_start }} ~ {{ invoice.period_end }}</div>
      <div class="text-muted">状态：{{ invoice.get_status_display }}</div>
    </div>
    <div>
      {% if invoice.status == 'unpaid' %}
      <form method="post" onsubmit="return confirm('确认将该账单标记为已支付？');">
        {% csrf_token %}
        <input type="hidden" name="action" value="mark_paid" />
        <button type="submit" class="btn btn-success">标记为已支付</button>
      </form>
      <a class="btn btn-primary ms-2" href="{% url 'billing:pay' invoice.id %}">立即支付</a>
      {% endif %}
      <a class="btn btn-outline-secondary" href="{% url 'billing:detail_csv' invoice.id %}">导出 CSV</a>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header">费用汇总</div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-3">套餐费用：¥ {{ plan_total }}</div>
        <div class="col-md-3">超量费用：¥ {{ overage_total }}</div>
        <div class="col-md-3">调整：¥ {{ adjustment }}</div>
        <div class="col-md-3"><strong>总金额：¥ {{ amount_total }}</strong></div>
      </div>
    </div>
  </div>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>域名</th>
        <th>描述</th>
        <th class="text-end">数量（GB）</th>
        <th class="text-end">单价</th>
        <th class="text-end">金额</th>
      </tr>
    </thead>
    <tbody>
      {% for it in items %}
      <tr>
        <td>{% if it.domain %}<a href="/domains/{{ it.domain.id }}/">{{ it.domain.name }}</a>{% else %}-{% endif %}</td>
        <td>
          <div>{{ it.description }}</div>
          {% if it.description == '基础套餐费用' %}
            <div class="text-muted small">每域名当月基础月费。</div>
          {% elif it.description == '超量流量费用' %}
            <div class="text-muted small">超出包含/免费额度的部分，按单价计费。</div>
          {% elif it.description %}
            <div class="text-muted small">{{ it.description }}</div>
          {% endif %}
        </td>
        <td class="text-end">{{ it.quantity }}</td>
        <td class="text-end">¥ {{ it.unit_price }}</td>
        <td class="text-end"><strong>¥ {{ it.amount }}</strong></td>
      </tr>
      {% empty %}
      <tr><td colspan="5" class="text-center">暂无账单项</td></tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="card mb-3">
    <div class="card-header">账单周期流量统计（引用）</div>
    <div class="card-body">
      <div class="text-muted mb-2">周期：{{ period_start }} ~ {{ period_end }}，统计为参考，可能与套餐变更及赠送额度生效时间相关。</div>
      <div class="table-responsive">
        <table class="table table-sm table-striped">
          <thead>
            <tr><th>域名</th><th>用量（GB）</th><th>查看详情</th></tr>
          </thead>
          <tbody>
            {% for s in domain_stats %}
            <tr>
              <td>{{ s.domain.name }}</td>
              <td>{{ s.gb }}</td>
              <td><a class="btn btn-sm btn-outline-primary" href="/domains/{{ s.domain.id }}/">用户侧详情</a></td>
            </tr>
            {% empty %}
            <tr><td colspan="3" class="text-center">暂无数据</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="text-muted small">当前暂未包含请求数/状态码分布的数据库统计，如需请在“域名详情 → 统计”查看。</div>
    </div>
  </div>

  <a href="/billing/" class="btn btn-outline-secondary">返回列表</a>
{% endblock %}