{% extends "base.html" %}
{% block title %}Database Vendor - FinansialApp{% endblock %}
{% block page_title %}Database Vendor{% endblock %}
{% block content %}
{% from '_pagination.html' import pagination with context %}

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <div class="d-flex align-items-center gap-2 flex-wrap">
    <span style="font-size:.78rem;font-weight:600;color:var(--tx2)">Urutkan:</span>
    {% set sorts = [('abjad','Abjad A-Z','fa-arrow-down-a-z'),
                    ('belanja','Belanja Tertinggi','fa-cart-shopping'),
                    ('jt','Hutang Jatuh Tempo','fa-clock')] %}
    {% for key, lbl, ic in sorts %}
    <a href="/database/vendor?sort={{ key }}"
       class="btn btn-sm {% if sort==key %}btn-primary{% else %}btn-outline-secondary{% endif %}"
       style="font-size:.76rem"><i class="fas {{ ic }} me-1"></i>{{ lbl }}</a>
    {% endfor %}
  </div>
  {% if session.role in ('ADMIN','FINANCE') %}
  <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalVend">
    <i class="fas fa-truck me-1"></i>Tambah Vendor</button>
  {% endif %}
</div>

<div class="card">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover table-sm mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th class="ps-3">Nama</th>
            <th>Kontak</th>
            <th class="text-end">Total Belanja</th>
            <th class="text-end">Hutang J.T.</th>
            <th class="text-end pe-3">Aksi</th>
          </tr>
        </thead>
        <tbody>
          {% for v in vends %}
          <tr style="cursor:pointer" onclick="location.href='/database/vendor/{{ v.id }}'">
            <td class="ps-3 fw-semibold"><i class="fas fa-truck-field me-1 text-muted"></i>{{ v.nama }}</td>
            <td class="text-muted">{{ v.telepon or '-' }}</td>
            <td class="text-end text-rp">{{ v.belanja|rp }}</td>
            <td class="text-end text-rp {% if v.hutang_jt > 0 %}text-danger fw-semibold{% else %}text-muted{% endif %}">{{ v.hutang_jt|rp }}</td>
            <td class="text-end pe-3" onclick="event.stopPropagation()">
              <a href="/database/vendor/{{ v.id }}" class="btn btn-xs btn-outline-primary" title="Detail"><i class="fas fa-eye"></i></a>
              {% if session.role in ('ADMIN','FINANCE') %}
              <form method="POST" action="/database/vendor/{{ v.id }}/hapus" class="d-inline"
                    onsubmit="return confirm('Hapus vendor ini dari database? Data transaksi tetap utuh.')">
                <button class="btn btn-xs btn-outline-danger" title="Hapus"><i class="fas fa-trash"></i></button>
              </form>
              {% endif %}
            </td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="text-center text-muted py-4">
            <i class="fas fa-truck-field fa-2x mb-2 d-block opacity-50"></i>
            Belum ada vendor. Centang "Simpan ke database vendor" saat input pengeluaran,
            atau klik "Tambah Vendor".
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% if session.role in ('ADMIN','FINANCE') %}
<div class="modal fade" id="modalVend" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" style="max-width:440px">
    <div class="modal-content">
      <form method="POST" action="/database/vendor/baru">
        <div class="modal-header py-2">
          <h6 class="modal-title"><i class="fas fa-truck text-primary me-2"></i>Tambah Vendor</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body py-3">
          <div class="mb-2">
            <label class="form-label small fw-semibold mb-1">Nama <span class="text-danger">*</span></label>
            <input type="text" name="nama" class="form-control form-control-sm" required placeholder="Nama vendor / pemasok">
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold mb-1">Kontak</label>
            <input type="text" name="telepon" class="form-control form-control-sm" placeholder="No HP / WA / email / PIC">
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold mb-1">Alamat</label>
            <textarea name="alamat" class="form-control form-control-sm" rows="2"></textarea>
          </div>
          <div class="mb-1">
            <label class="form-label small fw-semibold mb-1">Keterangan</label>
            <textarea name="catatan" class="form-control form-control-sm" rows="2"></textarea>
          </div>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-save me-1"></i>Simpan</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endif %}
{{ pagination(pg) }}
{% endblock %}