{% extends "base.html" %}
{% block title %}Riwayat Pengajuan – SPPG{% endblock %}
{% block page_title %}Riwayat Pengajuan{% endblock %}

{% block content %}
<!-- Filter -->
<div class="card mb-3">
  <div class="card-body py-2">
    <form method="get" class="row g-2 align-items-end">
      <div class="col-md-3">
        <label class="form-label form-label-sm fw-semibold mb-1">Dari Tanggal</label>
        <input type="date" name="tgl_dari" class="form-control form-control-sm"
               value="{{ tgl_dari }}">
      </div>
      <div class="col-md-3">
        <label class="form-label form-label-sm fw-semibold mb-1">Sampai Tanggal</label>
        <input type="date" name="tgl_sampai" class="form-control form-control-sm"
               value="{{ tgl_sampai }}">
      </div>
      <div class="col-md-3">
        <label class="form-label form-label-sm fw-semibold mb-1">Kategori</label>
        <select name="kategori" class="form-select form-select-sm">
          <option value="">Semua Kategori</option>
          {% for k in kategori_list %}
          <option value="{{ k }}" {% if k == kategori_filter %}selected{% endif %}>{{ k }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3 d-flex gap-2">
        <button type="submit" class="btn btn-primary btn-sm flex-fill">
          <i class="bi bi-search me-1"></i> Filter
        </button>
        <a href="{{ url_for('riwayat') }}" class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-x"></i>
        </a>
        {% if tgl_dari %}
        <a href="{{ url_for('export_rekap', tanggal=tgl_dari) }}"
           class="btn btn-success btn-sm" title="Export Excel tanggal mulai">
          <i class="bi bi-file-earmark-excel"></i>
        </a>
        {% endif %}
      </div>
    </form>
  </div>
</div>

<!-- Table -->
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-table me-2"></i>Daftar Pengajuan</span>
    <span class="badge bg-secondary">{{ pengajuan.total }} data</span>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
    <table class="table table-hover table-sm mb-0">
      <thead>
        <tr>
          <th>No Pengajuan</th>
          <th>Tanggal</th>
          <th>Kategori</th>
          <th>Pemasok</th>
          <th>Bank / Rekening</th>
          <th class="text-end">Total (Rp)</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
      {% for p in pengajuan.items %}
      <tr>
        <td class="text-muted small font-monospace">{{ p.nomor }}</td>
        <td>{{ p.tanggal.strftime('%d/%m/%Y') }}</td>
        <td>
          <span class="badge kat-{{ p.kategori.replace(' ','-') }} badge-kategori">
            {{ p.kategori }}
          </span>
        </td>
        <td class="small">{{ p.pemasok.nama if p.pemasok else '–' }}</td>
        <td class="small text-muted">
          {% if p.pemasok %}
            {{ p.pemasok.bank }} / {{ p.pemasok.no_rekening }}
          {% else %}–{% endif %}
        </td>
        <td class="text-end fw-semibold">{{ '{:,.0f}'.format(p.total) }}</td>
        <td>
          <div class="d-flex gap-1">
            <a href="{{ url_for('pengajuan_detail', pid=p.id) }}"
               class="btn btn-xs btn-outline-primary btn-sm py-0 px-1" title="Detail">
              <i class="bi bi-eye"></i>
            </a>
            <a href="{{ url_for('pengajuan_edit', pid=p.id) }}"
               class="btn btn-xs btn-outline-warning btn-sm py-0 px-1" title="Edit">
              <i class="bi bi-pencil"></i>
            </a>
            <a href="{{ url_for('export_excel', pid=p.id) }}"
               class="btn btn-xs btn-outline-success btn-sm py-0 px-1" title="Excel">
              <i class="bi bi-file-earmark-excel"></i>
            </a>
            <button onclick="hapus({{ p.id }})"
                    class="btn btn-xs btn-outline-danger btn-sm py-0 px-1" title="Hapus">
              <i class="bi bi-trash"></i>
            </button>
          </div>
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="7" class="text-center text-muted py-5">
          <i class="bi bi-inbox fs-2 d-block mb-2"></i>
          Tidak ada data pengajuan
        </td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
    </div>
  </div>

  <!-- Pagination -->
  {% if pengajuan.pages > 1 %}
  <div class="card-footer d-flex justify-content-center">
    <nav>
      <ul class="pagination pagination-sm mb-0">
        {% if pengajuan.has_prev %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for('riwayat', page=pengajuan.prev_num,
             tgl_dari=tgl_dari, tgl_sampai=tgl_sampai, kategori=kategori_filter) }}">
            &laquo;
          </a>
        </li>
        {% endif %}
        {% for pg in pengajuan.iter_pages() %}
          {% if pg %}
          <li class="page-item {% if pg==pengajuan.page %}active{% endif %}">
            <a class="page-link" href="{{ url_for('riwayat', page=pg,
               tgl_dari=tgl_dari, tgl_sampai=tgl_sampai, kategori=kategori_filter) }}">
              {{ pg }}
            </a>
          </li>
          {% else %}
          <li class="page-item disabled"><span class="page-link">…</span></li>
          {% endif %}
        {% endfor %}
        {% if pengajuan.has_next %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for('riwayat', page=pengajuan.next_num,
             tgl_dari=tgl_dari, tgl_sampai=tgl_sampai, kategori=kategori_filter) }}">
            &raquo;
          </a>
        </li>
        {% endif %}
      </ul>
    </nav>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
function hapus(id) {
  if (!confirm('Hapus pengajuan ini?')) return;
  fetch(`/api/pengajuan/${id}`, { method: 'DELETE' })
    .then(() => location.reload());
}
</script>
{% endblock %}