{% extends "erp_base.html" %}

{% block content %}
<section class="erp-pending">

  <div class="erp-page-actions">
    <a class="erp-btn erp-btn-ghost" href="/expense/">← 내 개인경비</a>
    <a class="erp-btn erp-btn-outline" href="/expense/api/export.xlsx?scope=all">엑셀(전체)</a>
  </div>

  <div class="erp-card-block">
    <div class="erp-card-block-head">
      <h2>승인 대기 ({{ items | length }}건)</h2>
      <span class="erp-muted">제출 상태 항목 — 승인/반려 처리</span>
    </div>

    <div class="erp-table-wrap">
      <table class="erp-table">
        <thead>
          <tr>
            <th style="width: 110px;">사용일</th>
            <th style="width: 200px;">소유자</th>
            <th style="width: 90px;">분류</th>
            <th>가맹점/메모</th>
            <th style="width: 120px; text-align: right;">금액</th>
            <th style="width: 260px; text-align: right;">결재</th>
          </tr>
        </thead>
        <tbody id="pend-tbody">
          {% for it in items %}
          <tr data-id="{{ it.id }}">
            <td>{{ it.spent_at }}</td>
            <td>{{ it.owner }}</td>
            <td>{{ it.category }}</td>
            <td>
              <div>{{ it.merchant }}</div>
              {% if it.memo %}<div class="erp-row-sub">{{ it.memo }}</div>{% endif %}
            </td>
            <td style="text-align: right; font-variant-numeric: tabular-nums;">
              {{ "{:,}".format(it.amount) }} 원
            </td>
            <td style="text-align: right;">
              <a class="erp-btn erp-btn-ghost erp-btn-sm" href="/expense/api/items/{{ it.id }}/attachments" target="_blank">첨부</a>
              <button class="erp-btn erp-btn-outline erp-btn-sm js-reject">반려</button>
              <button class="erp-btn erp-btn-primary erp-btn-sm js-approve">승인</button>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="6" class="erp-empty">대기 항목이 없습니다.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</section>

<style>
  .erp-page-actions { display: flex; gap: var(--sp-8); margin-bottom: var(--sp-16); }
</style>
{% endblock %}

{% block scripts %}
<script>
document.getElementById("pend-tbody").addEventListener("click", async (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  const tr = btn.closest("tr[data-id]");
  const id = tr.dataset.id;

  if (btn.classList.contains("js-approve")) {
    if (!confirm("승인할까요?")) return;
    const res = await fetch(`/expense/api/items/${id}/approve`, { method: "POST" });
    if (res.ok) { tr.remove(); }
    else { alert((await res.json()).detail || "승인 실패"); }
  } else if (btn.classList.contains("js-reject")) {
    const reason = prompt("반려 사유를 입력하세요:");
    if (!reason || !reason.trim()) return;
    const res = await fetch(`/expense/api/items/${id}/reject`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ reason: reason.trim() }),
    });
    if (res.ok) { tr.remove(); }
    else { alert((await res.json()).detail || "반려 실패"); }
  }
});
</script>
{% endblock %}