{% extends "erp_base.html" %}

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

  <div class="erp-page-actions">
    <a class="erp-btn erp-btn-ghost" href="/expense/">← 내 개인경비</a>
    <form method="get" style="display: inline-flex; gap: 6px; align-items: center;">
      <label class="erp-muted">연도</label>
      <input type="number" name="year" value="{{ year }}" min="2000" max="2100"
             style="width: 100px; padding: 6px 10px; border: 1px solid var(--color-subtle-ash);
                    border-radius: var(--r-input); font-family: inherit;" />
      <button type="submit" class="erp-btn erp-btn-outline">조회</button>
    </form>
    <a class="erp-btn erp-btn-outline"
       href="/expense/api/export.xlsx?from={{ year }}-01-01&to={{ year }}-12-31">엑셀</a>
  </div>

  <div class="erp-card-block">
    <div class="erp-card-block-head">
      <h2>{{ year }}년 월별 / 카테고리별 합계</h2>
      <span class="erp-muted">총 {{ "{:,}".format(grand_total) }} 원</span>
    </div>

    <div class="erp-table-wrap">
      <table class="erp-table">
        <thead>
          <tr>
            <th style="width: 110px;">월</th>
            {% for c in categories %}
            <th style="text-align: right;">{{ c }}</th>
            {% endfor %}
            <th style="text-align: right; background: var(--color-ghost-gray);">합계</th>
          </tr>
        </thead>
        <tbody>
          {% for m in months %}
          {% set row_total = pivot[m].values() | sum %}
          <tr>
            <td><strong>{{ m }}</strong></td>
            {% for c in categories %}
            <td style="text-align: right; font-variant-numeric: tabular-nums;">
              {% if pivot[m].get(c) %}{{ "{:,}".format(pivot[m][c]) }}{% else %}-{% endif %}
            </td>
            {% endfor %}
            <td style="text-align: right; font-variant-numeric: tabular-nums; background: var(--color-ghost-gray);">
              <strong>{{ "{:,}".format(row_total) }}</strong>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="{{ categories | length + 2 }}" class="erp-empty">데이터 없음</td></tr>
          {% endfor %}
        </tbody>
        {% if months %}
        <tfoot>
          <tr style="background: var(--color-ghost-gray);">
            <th>합계</th>
            {% for c in categories %}
            <th style="text-align: right; font-variant-numeric: tabular-nums;">
              {{ "{:,}".format(cat_totals[c]) }}
            </th>
            {% endfor %}
            <th style="text-align: right; font-variant-numeric: tabular-nums;">
              {{ "{:,}".format(grand_total) }}
            </th>
          </tr>
        </tfoot>
        {% endif %}
      </table>
    </div>
  </div>

</section>

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