{% extends "base.html" %}
{% block title %}Manajemen Pemasok – SPPG{% endblock %}
{% block page_title %}Manajemen Pemasok & Rekanan{% endblock %}

{% block extra_css %}
<style>
  .pemasok-card { transition: transform .15s, box-shadow .15s; border-radius: 10px; }
  .pemasok-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.10); }
  .bank-badge { font-size: .7rem; font-weight: 700; padding: .25em .6em; border-radius: 4px; }
  .bank-BRI  { background: #0045A4; color: #fff; }
  .bank-BNI  { background: #FF6200; color: #fff; }
  .bank-BCA  { background: #1B4F9A; color: #fff; }
  .bank-MANDIRI { background: #003087; color: #fff; }
  .bank-BSI  { background: #1E8449; color: #fff; }
  .bank-lain { background: #6c757d; color: #fff; }

  .filter-pill-btn {
    border-radius: 20px; font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.9rem;
    transition: all 0.2s; border: 1px solid #cbd5e1; background: #fff; color: #475569;
  }
  .filter-pill-btn:hover { background: #f1f5f9; color: #0f172a; }
  .filter-pill-btn.active {
    background: #1F4E79; color: #fff; border-color: #1F4E79;
    box-shadow: 0 2px 6px rgba(31,78,121,0.25);
  }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <div>
    <h5 class="fw-bold mb-0 text-dark">Data Rekanan & Pemasok</h5>
    <small class="text-muted">Kelola rekanan bahan belanja dapur dan rekanan biaya operasional</small>
  </div>
  <button class="btn btn-primary btn-sm px-3 shadow-sm" onclick="openModal()">
    <i class="bi bi-plus-circle me-1"></i> Tambah Rekanan / Pemasok
  </button>
</div>

<!-- Filter Bar: Tab Tipe Pemasok -->
<div class="card p-2 px-3 mb-3 border-0 shadow-sm" style="border-radius: 10px; background: #fff;">
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
    <div class="d-flex align-items-center gap-2 flex-wrap">
      <span class="small fw-bold text-muted text-uppercase me-1" style="font-size:0.75rem; letter-spacing:.04em;">
        <i class="bi bi-funnel me-1 text-primary"></i>Tipe:
      </span>
      <button class="filter-pill-btn active" id="btn-tipe-all" onclick="filterTipe(this, '')">
        Semua Rekanan <span class="badge bg-light text-dark ms-1" id="count-all">0</span>
      </button>
      <button class="filter-pill-btn" onclick="filterTipe(this, 'BAHAN')">
        🛒 Bahan / Belanja Dapur <span class="badge bg-light text-dark ms-1" id="count-bahan">0</span>
      </button>
      <button class="filter-pill-btn" onclick="filterTipe(this, 'OPERASIONAL')">
        ⚡ Biaya Operasional <span class="badge bg-light text-dark ms-1" id="count-ops">0</span>
      </button>
      <button class="filter-pill-btn" onclick="filterTipe(this, 'SEMUA')">
        🌐 Umum / Semua Keperluan <span class="badge bg-light text-dark ms-1" id="count-semua">0</span>
      </button>
    </div>
    <div class="d-flex align-items-center gap-2">
      <div class="input-group input-group-sm" style="max-width: 220px;">
        <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted"></i></span>
        <input type="text" id="cari-pemasok" class="form-control border-start-0" placeholder="Cari nama / bank / rek..." oninput="applyFilter()">
      </div>
    </div>
  </div>

  <!-- Sub-filter Kategori Barang/Operasional -->
  <div class="mt-2 pt-2 border-top d-flex align-items-center gap-1 flex-wrap" id="filter-kat-wrap">
    <small class="text-muted fw-semibold me-2" style="font-size:0.72rem;">KATEGORI:</small>
    <div id="sub-kat-buttons" class="d-inline-flex align-items-center gap-1 flex-wrap">
      <!-- Diisi dinamis via JS -->
    </div>
  </div>
</div>

<!-- Grid Pemasok -->
<div class="row g-3" id="pemasok-grid">
  {% for p in pemasok %}
  {% set tipe_val = p.tipe or 'BAHAN' %}
  <div class="col-sm-6 col-lg-4 pemasok-item" data-id="{{ p.id }}" data-tipe="{{ tipe_val }}" data-kat="{{ p.kategori or '' }}" data-nama="{{ p.nama.lower() }}" data-bank="{{ p.bank.lower() }}" data-rek="{{ p.no_rekening }}">
    <div class="card pemasok-card h-100 shadow-sm border-0" onclick="openModal({{ p.id }})" style="cursor: pointer;">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <div>
            <h6 class="fw-bold mb-1 text-primary">{{ p.nama }}</h6>
            {% if tipe_val == 'OPERASIONAL' %}
              <span class="badge bg-warning text-dark border border-warning" style="font-size:0.68rem;">
                <i class="bi bi-wallet2 me-1"></i>Operasional
              </span>
            {% elif tipe_val == 'SEMUA' %}
              <span class="badge bg-secondary" style="font-size:0.68rem;">
                <i class="bi bi-globe me-1"></i>Umum / Semua
              </span>
            {% else %}
              <span class="badge bg-info text-dark" style="font-size:0.68rem;">
                <i class="bi bi-basket me-1"></i>Bahan Belanja
              </span>
            {% endif %}
          </div>
          {% set bup = p.bank.upper() %}
          {% set bank_cls = 'bank-' + (bup if bup in ['BRI','BNI','BCA','MANDIRI','BSI'] else 'lain') %}
          <span class="bank-badge {{ bank_cls }}">{{ bup }}</span>
        </div>

        <div class="p-2 rounded bg-light mb-2">
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted small">No. Rekening:</span>
            <span class="font-monospace fw-semibold text-dark small">{{ p.no_rekening }}</span>
          </div>
          <div class="d-flex justify-content-between align-items-center mt-1">
            <span class="text-muted small">Biaya Admin:</span>
            {% if bup == 'BRI' %}
              <span class="badge bg-success-subtle text-success small" style="font-size:0.7rem;">Gratis (BRI)</span>
            {% else %}
              <span class="badge bg-warning-subtle text-danger small" style="font-size:0.7rem;">Rp 2.500 (non-BRI)</span>
            {% endif %}
          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center">
          <div>
            {% if p.kategori %}
            <span class="badge kat-{{ p.kategori.replace(' ','-') }} badge-kategori">{{ p.kategori }}</span>
            {% else %}
            <span class="badge bg-light text-muted border badge-kategori" style="font-size:0.7rem;">Semua Kategori</span>
            {% endif %}
          </div>
          <div class="d-flex gap-1" onclick="event.stopPropagation();">
            <button class="btn btn-xs btn-outline-primary btn-sm py-0 px-2"
                    onclick="openModal({{ p.id }})" title="Edit Rekanan">
              <i class="bi bi-pencil"></i>
            </button>
            <button class="btn btn-xs btn-outline-danger btn-sm py-0 px-2"
                    onclick="hapusPemasok({{ p.id }})" title="Hapus">
              <i class="bi bi-trash"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% else %}
  <div class="col-12 text-center text-muted py-5" id="empty-state">
    <i class="bi bi-people fs-2 d-block mb-2"></i>Belum ada rekanan / pemasok terdaftar
  </div>
  {% endfor %}
</div>

<!-- ── MODAL FORM ── -->
<div class="modal fade" id="modalPemasok" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content border-0 shadow">
      <div class="modal-header py-2" style="background: linear-gradient(135deg,#1F4E79,#2E75B6); color:#fff;">
        <h6 class="modal-title mb-0" id="modal-title"><i class="bi bi-person-plus me-2"></i>Tambah Rekanan / Pemasok</h6>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="edit-id">

        <!-- Tipe Pemasok -->
        <div class="mb-3">
          <label class="form-label fw-semibold small mb-1">
            <i class="bi bi-tag me-1 text-primary"></i>Tipe / Keperluan Rekanan <span class="text-danger">*</span>
          </label>
          <select id="f-tipe" class="form-select form-select-sm" onchange="onTipePemasokChange()">
            <option value="BAHAN">🛒 Pemasok Bahan / Belanja Dapur</option>
            <option value="OPERASIONAL">⚡ Vendor / Rekanan Biaya Operasional</option>
            <option value="SEMUA">🌐 Rekanan Umum (Bisa untuk Bahan & Operasional)</option>
          </select>
          <div class="form-text small" id="f-tipe-desc">
            Pemasok ini akan otomatis muncul pada form pengajuan bahan belanja dapur.
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold small mb-1">Nama Pemasok / Toko / Vendor <span class="text-danger">*</span></label>
          <input type="text" id="f-nama" class="form-control form-control-sm" placeholder="Contoh: Toko Sayur Berkah / PLN / UD Makmur">
        </div>

        <div class="row g-2 mb-3">
          <div class="col-5">
            <label class="form-label fw-semibold small mb-1">Bank <span class="text-danger">*</span></label>
            <select id="f-bank" class="form-select form-select-sm" onchange="checkBankFeeNotice()">
              <option value="BRI">BRI (Bebas Biaya Admin)</option>
              <option value="BNI">BNI (Potong Rp 2.500)</option>
              <option value="BCA">BCA (Potong Rp 2.500)</option>
              <option value="MANDIRI">MANDIRI (Potong Rp 2.500)</option>
              <option value="BSI">BSI (Potong Rp 2.500)</option>
              <option value="LAINNYA">Bank Lainnya</option>
            </select>
          </div>
          <div class="col-7">
            <label class="form-label fw-semibold small mb-1">Nomor Rekening <span class="text-danger">*</span></label>
            <input type="text" id="f-rekening" class="form-control form-control-sm font-monospace" placeholder="Nomor rekening tujuan">
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold small mb-1" id="lbl-kategori">Kategori Barang / Layanan</label>
          <select id="f-kategori" class="form-select form-select-sm">
            <!-- Diisi dinamis via JS -->
          </select>
          <div class="form-text small">Kosongkan jika rekanan ini melayani beragam kategori</div>
        </div>

        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="f-aktif" checked>
          <label class="form-check-label small fw-semibold" for="f-aktif">Status Rekanan Aktif</label>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-sm btn-primary" id="btn-simpan-pemasok" onclick="simpanPemasok()">
          <i class="bi bi-save me-1"></i> Simpan Rekanan
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script>
const modalEl = document.getElementById('modalPemasok');
const modal = new bootstrap.Modal(modalEl);

// Data dari backend
const allPemasok = {{ pemasok_json | tojson if pemasok_json is defined else '[]' | safe }};
const KAT_BARANG = {{ kategori_barang | tojson if kategori_barang is defined else '[]' | safe }};
const KAT_OPS    = {{ kategori_ops | tojson if kategori_ops is defined else '[]' | safe }};

let selectedTipeFilter = '';
let selectedKatFilter  = '';

function onTipePemasokChange() {
  const tipe = document.getElementById('f-tipe').value;
  const descEl = document.getElementById('f-tipe-desc');
  const selKat = document.getElementById('f-kategori');
  const lblKat = document.getElementById('lbl-kategori');

  let list = [];
  if (tipe === 'OPERASIONAL') {
    descEl.textContent = 'Rekanan ini akan muncul di form Pengajuan Biaya Operasional.';
    lblKat.textContent = 'Kategori Operasional';
    list = KAT_OPS;
  } else if (tipe === 'SEMUA') {
    descEl.textContent = 'Rekanan ini dapat digunakan untuk Belanja Bahan Dapur maupun Operasional.';
    lblKat.textContent = 'Kategori Terkait';
    list = [...KAT_BARANG, ...KAT_OPS];
  } else {
    descEl.textContent = 'Rekanan ini akan muncul di form Belanja Bahan Dapur.';
    lblKat.textContent = 'Kategori Barang';
    list = KAT_BARANG;
  }

  const currentVal = selKat.value;
  let html = '<option value="">Semua Kategori (default)</option>';
  list.forEach(k => {
    html += `<option value="${k}">${k}</option>`;
  });
  selKat.innerHTML = html;
  if (currentVal) selKat.value = currentVal;
}

function checkBankFeeNotice() {
  // Opsi interaktif jika bank non-BRI dipilih
}

function openModal(id = null) {
  document.getElementById('edit-id').value = '';
  document.getElementById('f-tipe').value = 'BAHAN';
  document.getElementById('f-nama').value = '';
  document.getElementById('f-bank').value = 'BRI';
  document.getElementById('f-rekening').value = '';
  document.getElementById('f-aktif').checked = true;
  document.getElementById('modal-title').innerHTML = '<i class="bi bi-person-plus me-2"></i>Tambah Rekanan / Pemasok';

  onTipePemasokChange();

  if (id) {
    const p = allPemasok.find(x => x.id === id);
    if (!p) return;
    document.getElementById('edit-id').value = id;
    document.getElementById('f-tipe').value = p.tipe || 'BAHAN';
    onTipePemasokChange();
    document.getElementById('f-nama').value = p.nama;
    document.getElementById('f-bank').value = (p.bank || 'BRI').toUpperCase();
    document.getElementById('f-rekening').value = p.no_rekening;
    document.getElementById('f-kategori').value = p.kategori || '';
    document.getElementById('f-aktif').checked = p.aktif !== false;
    document.getElementById('modal-title').innerHTML = '<i class="bi bi-pencil-square me-2"></i>Edit Rekanan / Pemasok';
  }
  modal.show();
}

async function simpanPemasok() {
  const id   = document.getElementById('edit-id').value;
  const tipe = document.getElementById('f-tipe').value;
  const nama = document.getElementById('f-nama').value.trim();
  const bank = document.getElementById('f-bank').value.trim();
  const rek  = document.getElementById('f-rekening').value.trim();
  const kat  = document.getElementById('f-kategori').value.trim();
  const aktif= document.getElementById('f-aktif').checked;

  if (!nama || !bank || !rek) {
    Swal.fire({icon: 'warning', title: 'Data Belum Lengkap', text: 'Nama rekanan, bank, dan nomor rekening wajib diisi!', confirmButtonColor: '#1F4E79'});
    return;
  }

  const payload = {
    tipe,
    nama,
    bank,
    no_rekening: rek,
    kategori: kat || null,
    aktif
  };

  const url    = id ? `/api/pemasok/${id}` : '/api/pemasok';
  const method = id ? 'PUT' : 'POST';

  const btn = document.getElementById('btn-simpan-pemasok');
  btn.disabled = true;

  try {
    const resp = await fetch(url, {
      method,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (!resp.ok) throw new Error('Gagal menyimpan data rekanan');
    modal.hide();
    Swal.fire({
      icon: 'success',
      title: 'Tersimpan!',
      text: 'Data rekanan berhasil diperbarui.',
      timer: 1200,
      showConfirmButton: false
    }).then(() => location.reload());
  } catch (e) {
    Swal.fire({icon: 'error', title: 'Terjadi Kesalahan', text: e.message, confirmButtonColor: '#1F4E79'});
    btn.disabled = false;
  }
}

async function hapusPemasok(id) {
  const res = await Swal.fire({
    title: 'Hapus Rekanan Ini?',
    text: 'Data pengajuan & belanja terdahulu tetap tersimpan namun tidak terhubung.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#DC2626',
    cancelButtonColor: '#6c757d',
    confirmButtonText: 'Ya, Hapus',
    cancelButtonText: 'Batal'
  });
  if (!res.isConfirmed) return;

  await fetch(`/api/pemasok/${id}`, { method: 'DELETE' });
  Swal.fire({icon: 'success', title: 'Terhapus', timer: 1000, showConfirmButton: false})
    .then(() => location.reload());
}

// Filter Tipe & Kategori
function filterTipe(btn, tipe) {
  selectedTipeFilter = tipe;
  selectedKatFilter = '';
  document.querySelectorAll('.filter-pill-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  renderSubKatButtons(tipe);
  applyFilter();
}

function filterKat(btn, kat) {
  selectedKatFilter = kat;
  document.querySelectorAll('#sub-kat-buttons .btn').forEach(b => {
    b.classList.remove('btn-outline-primary', 'active');
    b.classList.add('btn-outline-secondary');
  });
  btn.classList.remove('btn-outline-secondary');
  btn.classList.add('btn-outline-primary', 'active');
  applyFilter();
}

function renderSubKatButtons(tipe) {
  const seen = new Set();
  document.querySelectorAll('.pemasok-item').forEach(el => {
    const elTipe = el.dataset.tipe;
    const elKat  = (el.dataset.kat || '').trim();
    if (!elKat) return;
    if (!tipe) { seen.add(elKat); return; }
    if (tipe === 'BAHAN' && (elTipe === 'BAHAN' || elTipe === 'SEMUA' || !elTipe)) seen.add(elKat);
    if (tipe === 'OPERASIONAL' && (elTipe === 'OPERASIONAL' || elTipe === 'SEMUA')) seen.add(elKat);
    if (tipe === 'SEMUA' && elTipe === 'SEMUA') seen.add(elKat);
  });
  const sorted = [...seen].sort();
  const wrap = document.getElementById('sub-kat-buttons');
  let html = `<button class="btn btn-xs btn-outline-primary active py-0 px-2 rounded-pill" style="font-size:0.75rem;" onclick="filterKat(this,'')">Semua</button>`;
  sorted.forEach(k => {
    const safe = k.replace(/&/g,'&amp;').replace(/'/g,'&#39;');
    html += `<button class="btn btn-xs btn-outline-secondary py-0 px-2 rounded-pill" style="font-size:0.75rem;" onclick="filterKat(this,'${safe}')">${k}</button>`;
  });
  wrap.innerHTML = html;
}

function updateCounts() {
  const items = document.querySelectorAll('.pemasok-item');
  let all = 0, bahan = 0, ops = 0, semua = 0;
  items.forEach(el => {
    all++;
    const t = el.dataset.tipe;
    if (t === 'OPERASIONAL') ops++;
    else if (t === 'SEMUA') semua++;
    else bahan++;
  });
  const e = id => document.getElementById(id);
  if (e('count-all'))   e('count-all').textContent = all;
  if (e('count-bahan')) e('count-bahan').textContent = bahan;
  if (e('count-ops'))   e('count-ops').textContent = ops;
  if (e('count-semua')) e('count-semua').textContent = semua;
}

function applyFilter() {
  const cari = (document.getElementById('cari-pemasok').value || '').toLowerCase().trim();
  let visibleCount = 0;
  document.querySelectorAll('.pemasok-item').forEach(el => {
    const elTipe = el.dataset.tipe;
    const elKat  = el.dataset.kat;
    const elNama = el.dataset.nama;
    const elBank = el.dataset.bank;
    const elRek  = (el.dataset.rek || '').toLowerCase();

    let matchTipe = true;
    if (selectedTipeFilter) {
      if (selectedTipeFilter === 'BAHAN') {
        matchTipe = (elTipe === 'BAHAN' || elTipe === 'SEMUA' || !elTipe);
      } else if (selectedTipeFilter === 'OPERASIONAL') {
        matchTipe = (elTipe === 'OPERASIONAL' || elTipe === 'SEMUA');
      } else {
        matchTipe = (elTipe === selectedTipeFilter);
      }
    }

    let matchKat = true;
    if (selectedKatFilter) {
      matchKat = (elKat === selectedKatFilter);
    }

    let matchCari = true;
    if (cari) {
      matchCari = elNama.includes(cari) || elBank.includes(cari) || elRek.includes(cari);
    }

    if (matchTipe && matchKat && matchCari) {
      el.style.display = '';
      visibleCount++;
    } else {
      el.style.display = 'none';
    }
  });

  const emptyEl = document.getElementById('empty-state');
  if (emptyEl) {
    emptyEl.style.display = visibleCount === 0 ? '' : 'none';
  }
}

document.addEventListener('DOMContentLoaded', () => {
  updateCounts();
  renderSubKatButtons('');
});
</script>
{% endblock %}