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

{% block content %}
<div class="row justify-content-center">
<div class="col-lg-9">

<!-- Header -->
<div class="card mb-3">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
      <div>
        <div class="text-muted small mb-1">Nomor Pengajuan</div>
        <h5 class="fw-bold mb-0">{{ pengajuan.nomor }}</h5>
      </div>
      <span class="badge kat-{{ pengajuan.kategori.replace(' ','-') }} fs-6 px-3 py-2">
        {{ pengajuan.kategori }}
      </span>
    </div>
    <hr>
    <div class="row g-2 small">
      <div class="col-6 col-md-3">
        <div class="text-muted">Lokasi</div>
        <div class="fw-semibold">{{ pengajuan.lokasi }}</div>
      </div>
      <div class="col-6 col-md-3">
        <div class="text-muted">Tanggal</div>
        <div class="fw-semibold">{{ pengajuan.tanggal.strftime('%A, %d %B %Y') }}</div>
      </div>
      <div class="col-6 col-md-3">
        <div class="text-muted">Status</div>
        <span class="badge bg-{{ 'success' if pengajuan.status=='approved' else 'warning text-dark' if pengajuan.status=='submitted' else 'secondary' }}">
          {{ pengajuan.status.upper() }}
        </span>
      </div>
      <div class="col-6 col-md-3">
        <div class="text-muted">Dibuat</div>
        <div class="fw-semibold">{{ pengajuan.created_at.strftime('%d/%m/%Y %H:%M') }}</div>
      </div>
    </div>

    {% if pengajuan.pemasok %}
    <div class="mt-3 p-2 rounded" style="background:#e8f4fd;border-left:4px solid #2E75B6">
      <div class="text-muted small mb-1"><i class="bi bi-bank me-1"></i>Pemasok / Rekening</div>
      <div class="fw-semibold">
        {{ pengajuan.pemasok.nama }}
        <span class="text-muted mx-1">/</span>
        {{ pengajuan.pemasok.bank }}
        <span class="text-muted mx-1">/</span>
        {{ pengajuan.pemasok.no_rekening }}
      </div>
    </div>
    {% endif %}
  </div>
</div>

<!-- Items Table -->
<div class="card mb-3">
  <div class="card-header"><i class="bi bi-list-ul me-2"></i>Daftar Barang</div>
  <div class="card-body p-0">
    <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead class="table-light">
        <tr>
          <th>No</th>
          <th>Nama Barang</th>
          <th class="text-center">Qty</th>
          <th>Satuan</th>
          <th class="text-end">Harga/satuan</th>
          <th class="text-end">Subtotal</th>
        </tr>
      </thead>
      <tbody>
        {% for item in pengajuan.items %}
        <tr>
          <td class="text-muted">{{ loop.index }}</td>
          <td class="fw-semibold">{{ item.nama_barang }}</td>
          <td class="text-center">{{ item.qty | int if item.qty == item.qty|int else item.qty }}</td>
          <td>{{ item.satuan }}</td>
          <td class="text-end">{{ '{:,.0f}'.format(item.harga_satuan) }}</td>
          <td class="text-end fw-semibold">{{ '{:,.0f}'.format(item.subtotal) }}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr class="table-primary">
          <td colspan="5" class="text-end fw-bold">TOTAL</td>
          <td class="text-end fw-bold fs-5">Rp {{ '{:,.0f}'.format(pengajuan.total) }}</td>
        </tr>
      </tfoot>
    </table>
    </div>
  </div>
</div>

<!-- Action Buttons -->
<div class="d-flex gap-2 flex-wrap">
  <a href="{{ url_for('riwayat') }}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-arrow-left me-1"></i> Kembali
  </a>
  <a href="{{ url_for('pengajuan_edit', pid=pengajuan.id) }}" class="btn btn-warning btn-sm">
    <i class="bi bi-pencil me-1"></i> Edit
  </a>
  <a href="{{ url_for('export_excel', pid=pengajuan.id) }}" class="btn btn-success btn-sm">
    <i class="bi bi-file-earmark-excel me-1"></i> Export Excel
  </a>
  <a href="{{ url_for('export_pdf', pid=pengajuan.id) }}" class="btn btn-danger btn-sm">
    <i class="bi bi-file-earmark-pdf me-1"></i> Export PDF
  </a>
  <button onclick="hapusPengajuan({{ pengajuan.id }})" class="btn btn-outline-danger btn-sm ms-auto">
    <i class="bi bi-trash me-1"></i> Hapus
  </button>
</div>

</div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function hapusPengajuan(id) {
  if (!confirm('Yakin ingin menghapus pengajuan ini?')) return;
  fetch(`/api/pengajuan/${id}`, { method: 'DELETE' })
    .then(r => r.json())
    .then(() => window.location.href = '{{ url_for("riwayat") }}');
}
</script>
{% endblock %}