{% extends 'base.html' %}
{% block title %}运营面板 - 账单详情{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h3>账单详情 #{{ invoice.id }}</h3>
  <div>
    <a class="btn btn-outline-secondary" href="{% url 'admin_panel:billing_list' %}">返回账单列表</a>
    <a class="btn btn-outline-secondary" href="/admin/billing/invoice/{{ invoice.id }}/change/" target="_blank">在 Django Admin 编辑</a>
  </div>
</div>

<div class="row g-3 mb-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <div><strong>用户：</strong> {{ invoice.user.username }}</div>
        <div><strong>周期：</strong> {{ invoice.period_start }} → {{ invoice.period_end }}</div>
        <div><strong>套餐费：</strong> ￥{{ invoice.amount_plan_total }}</div>
        <div><strong>超量费：</strong> ￥{{ invoice.amount_overage_total }}</div>
        <div><strong>调整：</strong> ￥{{ invoice.amount_adjustment }}</div>
        <div><strong>总金额：</strong> ￥{{ invoice.amount_total }}</div>
        <div><strong>状态：</strong>
          {% if invoice.status == 'unpaid' %}<span class="badge bg-warning">未支付</span>
          {% elif invoice.status == 'paid' %}<span class="badge bg-success">已支付</span>
          {% elif invoice.status == 'cancelled' %}<span class="badge bg-secondary">已取消</span>
          {% else %}<span class="badge bg-light text-dark">未知</span>{% endif %}
        </div>
        <div><strong>支付时间：</strong> {% if invoice.paid_at %}{{ invoice.paid_at|date:'Y-m-d H:i' }}{% else %}-{% endif %}</div>

        <div class="mt-3">
          {% if invoice.status == 'unpaid' %}
          <form method="post" action="" onsubmit="return confirm('确认将此账单标记为已支付？');">
            {% csrf_token %}
            <input type="hidden" name="action" value="mark_paid" />
            <button class="btn btn-success">标记为已支付</button>
          </form>
          <form method="post" action="" class="mt-2" onsubmit="return confirm('将对账单涉及的域名执行未支付策略（停服或限速），确认继续？');">
            {% csrf_token %}
            <input type="hidden" name="action" value="apply_overage_policy" />
            <div class="mb-2"><input type="text" name="confirm" class="form-control form-control-sm" placeholder="输入 CONFIRM 以继续" required></div>
            <button class="btn btn-outline-danger">执行未支付策略</button>
          </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">人工调账</h5>
        <form method="post">
          {% csrf_token %}
          <input type="hidden" name="action" value="add_adjustment" />
          <div class="mb-2">
            <label class="form-label">调整说明</label>
            {{ adj_form.description }}
          </div>
          <div class="mb-2">
            <label class="form-label">调整金额（￥）</label>
            {{ adj_form.amount }}
          </div>
          <div class="mb-2 form-check">
            {{ adj_form.is_increase }}
            <label class="form-check-label">增加金额（取消勾选为减少金额）</label>
          </div>
          <div class="mb-2"><input type="text" name="confirm" class="form-control form-control-sm" placeholder="输入 CONFIRM 以继续" required></div>
          <button class="btn btn-primary" type="submit">添加调整项</button>
        </form>

        {% if invoice.status != 'cancelled' %}
        <hr />
        <form method="post" onsubmit="return confirm('确认取消此账单？');">
          {% csrf_token %}
          <input type="hidden" name="action" value="cancel" />
          <div class="mb-2"><input type="text" name="confirm" class="form-control form-control-sm" placeholder="输入 CONFIRM 以继续" required></div>
          <button class="btn btn-outline-danger">取消账单</button>
        </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">账单明细</h5>
    <div class="table-responsive">
      <table class="table table-sm table-striped">
        <thead>
          <tr>
            <th>域名</th>
            <th>说明</th>
            <th>数量</th>
            <th>单价（￥）</th>
            <th>金额（￥）</th>
          </tr>
        </thead>
        <tbody>
          {% for it in items %}
          <tr>
            <td>{% if it.domain %}{{ it.domain.name }}{% else %}-{% endif %}</td>
            <td>{{ it.description }}</td>
            <td>{{ it.quantity }}</td>
            <td>{{ it.unit_price }}</td>
            <td>{{ it.amount }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="5" class="text-center">暂无明细</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}