{% extends 'base.html' %}
{% block title %}Bukti Bayar Pajak{% endblock %}
{% block content %}
<div class="d-flex align-items-center gap-2 mb-3">
  <a href="/pajak" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left"></i></a>
  <h4 class="mb-0"><i class="fas fa-receipt text-success me-2"></i>Bukti Bayar Pajak
    <span class="badge bg-warning text-dark ms-1" style="font-size:.65rem"><i class="fas fa-puzzle-piece me-1"></i>Lanjutan</span>
  </h4>
</div>

<div class="alert alert-info py-2 small mb-3">
  <i class="fas fa-circle-info me-1"></i>
  Daftar transaksi <strong>Setor Pajak</strong> yang telah dicatat. Cetak sebagai dokumen internal
  pengganti BPN (Bukti Penerimaan Negara) untuk arsip pembukuan Anda.
</div>

{% if rows %}
<div class="card shadow-sm">
  <div class="card-body p-0">
    <table class="table table-hover mb-0 align-middle small">
      <thead class="table-light">
        <tr>
          <th>Tanggal</th>
          <th>Keterangan</th>
          <th>Jenis Pajak</th>
          <th class="text-end">Nominal Disetor</th>
          <th class="text-center">Aksi</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr>
          <td class="text-nowrap">{{ r.tanggal|tgl }}</td>
          <td>{{ r.keterangan }}</td>
          <td>
            {% if r.akun_kode == '2111' %}
              <span class="badge bg-primary">PPN</span>
            {% elif r.akun_kode == '2112' %}
              <span class="badge bg-danger">PPh 23</span>
            {% else %}
              <span class="badge bg-secondary">Pajak</span>
            {% endif %}
            <span class="text-muted ms-1">{{ r.akun_nama }}</span>
          </td>
          <td class="text-end fw-semibold text-success">{{ r.nominal|rp }}</td>
          <td class="text-center">
            <a href="/pajak/bukti-bayar/{{ r.id }}/cetak" target="_blank"
               class="btn btn-sm btn-outline-success">
              <i class="fas fa-print me-1"></i>Cetak BB
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="text-center text-muted py-5">
  <i class="fas fa-receipt fa-3x mb-3 opacity-25"></i>
  <p class="mb-1">Belum ada transaksi setor pajak yang tercatat.</p>
  <p class="small">Gunakan <a href="/pajak/setor">Setor Pajak</a> untuk mencatat pembayaran pajak ke DJP.</p>
</div>
{% endif %}
{% endblock %}