{% extends "base.html" %}
{% block title %}Validasi Belanja Pemasok – SPPG{% endblock %}
{% block page_title %}Riwayat & Validasi Belanja Pemasok{% endblock %}

{% block extra_css %}
<style>
/* ── Layout ── */
.split-layout { display: grid; grid-template-columns: 380px 1fr; gap: 1.25rem; align-items: start; transition: all 0.3s ease; }
.split-layout.form-hidden { grid-template-columns: 1fr; }
.split-layout.form-hidden .form-panel { display: none !important; }
@media (max-width: 991px) { .split-layout { grid-template-columns: 1fr; } }

/* ── Dapur Tabs ── */
.dapur-tabs-container { margin-bottom: 1rem; }
.dapur-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.dapur-tabs::-webkit-scrollbar { display: none; }
.dapur-tab {
  padding: 6px 14px; border-radius: 8px; background: #fff;
  border: 1px solid #e2e8f0; color: #475569; font-weight: 600;
  font-size: 13px; cursor: pointer; white-space: nowrap; transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dapur-tab:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.dapur-tab.active { background: #1F4E79; color: #ffffff; border-color: #1F4E79; box-shadow: 0 2px 6px rgba(31,78,121,0.25); }
.dapur-badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: #e0f2fe; color: #0369a1; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }

/* ── Form Panel (Slidebar Form) ── */
.form-panel { transition: all 0.3s ease; }
@media (min-width: 992px) {
  .form-panel {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 85px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    padding-right: 4px;
  }
  .form-panel::-webkit-scrollbar { width: 5px; }
  .form-panel::-webkit-scrollbar-track { background: transparent; }
  .form-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
  .form-panel::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
}
@media (max-width: 991.98px) {
  .split-layout { grid-template-columns: 100% !important; }
  .form-panel { position: static !important; top: auto !important; width: 100% !important; margin-bottom: 1.25rem; }
  .card-body { padding: 1rem; }
}

/* ── Table Custom Horizontal Scrollbar ── */
.table-responsive::-webkit-scrollbar { height: 8px; width: 8px; }
.table-responsive::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.table-responsive::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.table-responsive::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.form-panel .card-header { background: linear-gradient(135deg,#1F4E79,#2E75B6); color:#fff; border-radius: 12px 12px 0 0; }
.btn-card-toggle { background: none; border: none; color: inherit; padding: 2px 6px; border-radius: 4px; cursor: pointer; opacity: 0.85; transition: all 0.2s; }
.btn-card-toggle:hover { opacity: 1; background: rgba(255,255,255,0.2); }

/* ── Summary Bar ── */
.summary-bar {
  display: flex; gap: .75rem; flex-wrap: wrap;
  background: #fff; border-radius: 12px;
  padding: .85rem 1.25rem; margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.stat-pill { display: flex; align-items: center; gap: .5rem; padding: .4rem .9rem;
  border-radius: 20px; font-size: .82rem; font-weight: 600; }
.stat-pill.total  { background:#EBF5FB; color:#1F4E79; }
.stat-pill.belum  { background:#FEF9C3; color:#854D0E; }
.stat-pill.ajukan { background:#DCFCE7; color:#166534; }
.stat-pill.valid  { background:#F0FDF4; color:#15803D; border: 2px solid #86EFAC; }
.stat-pill.rupiah { background:#F3E8FF; color:#6B21A8; }

/* ── Filter Bar ── */
.filter-bar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.filter-bar .form-select, .filter-bar .form-control { font-size:.82rem; height:34px; padding:.3rem .7rem; }
.filter-tabs { display:flex; gap:.4rem; }
.filter-tab { padding:.3rem .9rem; border-radius:20px; background:#f1f5f9; border:1px solid #e2e8f0;
  color:#64748b; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; white-space:nowrap; }
.filter-tab:hover { background:#e2e8f0; }
.filter-tab.active { background:#0f172a; color:#fff; border-color:#0f172a; }

/* ── Table ── */
.tbl-validasi { font-size:.84rem; min-width: 880px; }
.tbl-validasi th { font-size:.75rem; text-transform:uppercase; color:#6c757d;
  font-weight:700; letter-spacing:.03em; background:#f8fafc; }
.tbl-validasi td { vertical-align: middle; padding:.65rem .85rem; }
.tbl-validasi tr { transition: background .2s; }
.row-divalidasi { background: #f0fdf4 !important; }
.row-diajukan   { background: #fefce8 !important; }

/* ── Badge Status ── */
.badge-belum   { background:#FEF3C7; color:#92400E; font-size:.72rem; padding:.28em .65em; border-radius:6px; font-weight:700; }
.badge-ajukan  { background:#D1FAE5; color:#065F46; font-size:.72rem; padding:.28em .65em; border-radius:6px; font-weight:700; }
.badge-valid   { background:#A7F3D0; color:#064E3B; font-size:.72rem; padding:.28em .65em; border-radius:6px; font-weight:700; border:1px solid #6EE7B7; }

/* ── Bank Badge ── */
.bank-bri     { background:#003087; color:#fff; }
.bank-bni     { background:#FF6200; color:#fff; }
.bank-bca     { background:#005BAC; color:#fff; }
.bank-mandiri { background:#003D7C; color:#FFD700; }
.bank-bsi     { background:#1E8449; color:#fff; }
.bank-other   { background:#6c757d; color:#fff; }
.bank-tag     { font-size:.68rem; font-weight:700; padding:.2em .55em; border-radius:4px; letter-spacing:.03em; }

/* ── Validator Panel ── */
.validator-panel { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:1rem; margin-bottom:1rem; }
.validator-panel.active { background:#ecfdf5; border-color:#6EE7B7; }
.mode-badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700;
  padding:.3rem .8rem; border-radius:20px; background:#fef3c7; color:#92400E; }
.mode-badge.on { background:#d1fae5; color:#065F46; }

/* ── Checkbox Validasi ── */
.cb-validasi { width:18px; height:18px; cursor:pointer; accent-color:#16a34a; }
.cb-validasi:disabled { opacity:.35; cursor:not-allowed; }

/* ── Empty state ── */
.empty-state { text-align:center; padding:3rem 1rem; color:#94a3b8; }
.empty-state i { font-size:3rem; display:block; margin-bottom:.75rem; }

/* ── Tombol aksi kecil ── */
.btn-act { border:none; background:none; padding:.25rem .4rem; border-radius:5px;
  cursor:pointer; font-size:.85rem; transition: background .15s; }
.btn-act:hover { background:#e2e8f0; }
.btn-act.edit  { color:#2563EB; }
.btn-act.del   { color:#DC2626; }
.btn-act.ajukan-btn { color:#059669; }
.btn-act.batal-btn  { color:#D97706; }

/* ── Date Group Header ── */
.tr-date-group { background: #f1f5f9 !important; border-top: 2px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; }
.tr-date-group td { padding: 0.6rem 0.85rem !important; }
.date-group-badge { font-size: 0.82rem; font-weight: 700; color: #1e293b; display: inline-flex; align-items: center; gap: 6px; }
.date-group-subtotal { font-size: 0.78rem; font-weight: 600; color: #0369a1; background: #e0f2fe; padding: 3px 8px; border-radius: 6px; }

@media (max-width: 768px) {
  .summary-bar { flex-direction: column; gap: 0.5rem; }
  .stat-pill.rupiah { margin-left: 0 !important; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-control, .filter-bar .form-select { max-width: 100% !important; }
}

/* ── Efek Visual Salin (Copy) Baris & Kolom ── */
.cell-copied-highlight {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.row-copied-highlight {
  box-shadow: inset 0 0 0 2px #10b981 !important;
  transition: box-shadow 0.3s ease;
}
.btn-copy-mini {
  border: 1px solid #0284c7;
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  color: #ffffff !important;
  padding: 3px 8px;
  font-size: 0.73rem;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
  vertical-align: middle;
}
.btn-copy-mini i {
  color: #ffffff !important;
  font-size: 0.78rem;
}
.btn-copy-mini:hover {
  background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
  color: #ffffff !important;
  border-color: #1d4ed8;
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.45);
}
.btn-copy-mini:active {
  transform: translateY(0) scale(0.96);
}
.btn-copy-mini.copied {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 5px rgba(16, 185, 129, 0.5) !important;
}
.btn-copy-mini.copied i, .btn-copy-mini.copied span {
  color: #ffffff !important;
}
</style>
{% endblock %}

{% block content %}
<div class="split-layout">

  <!-- ══════════════ PANEL KIRI – FORM INPUT BELANJA BAHAN (DETAIL PERSIS OPERASIONAL) ══════════════ -->
  <div class="form-panel" id="panelKiriBelanja">
    <div class="card shadow-sm border-0 mb-3" id="cardFormBelanja">
      <div class="card-header py-2 d-flex justify-content-between align-items-center">
        <span class="fw-semibold"><i class="bi bi-cart-check me-2"></i>Form Belanja Bahan Dapur</span>
        <div class="d-flex align-items-center gap-1">
          <button class="btn-card-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFormBelanja" aria-expanded="true" title="Minimize / Expand Form">
            <i class="bi bi-chevron-down" id="iconCollapseFormBelanja"></i>
          </button>
          <button class="btn-card-toggle" type="button" id="btnHideSlidebarBelanja" title="Tutup / Sembunyikan Slidebar Form">
            <i class="bi bi-chevron-bar-left"></i>
          </button>
        </div>
      </div>
      <div class="collapse show" id="collapseFormBelanja">
        <div class="card-body">

          <!-- Pilihan Dapur -->
          <div class="mb-2">
            <label class="form-label fw-semibold small mb-1">
              <i class="bi bi-buildings me-1 text-primary"></i>Dapur / Unit <span class="text-danger">*</span>
            </label>
            <select id="f-dapur" class="form-select form-select-sm">
              <!-- Diisi via JS -->
            </select>
          </div>

          <!-- Tanggal Belanja -->
          <div class="mb-2">
            <label class="form-label fw-semibold small mb-1">
              <i class="bi bi-calendar3 me-1 text-primary"></i>Tanggal Belanja <span class="text-danger">*</span>
            </label>
            <input type="date" id="f-tanggal" class="form-control form-control-sm" value="{{ today_iso }}">
          </div>

          <!-- Kategori Belanja Bahan -->
          <div class="mb-2">
            <label class="form-label fw-semibold small mb-1">Kategori Bahan Belanja <span class="text-danger">*</span></label>
            <div class="input-group input-group-sm">
              <select id="f-kategori" class="form-select">
                {% for k in kategori_barang %}
                <option value="{{ k }}">{{ k }}</option>
                {% endfor %}
              </select>
              <a href="{{ url_for('pengaturan') }}#card-kategori" class="btn btn-outline-secondary" title="Atur Kategori di Pengaturan">
                <i class="bi bi-gear"></i>
              </a>
            </div>
          </div>

          <!-- Pilih Pemasok / Rekanan Otomatis -->
          <div class="mb-2">
            <label class="form-label fw-semibold small mb-1">
              <i class="bi bi-person-badge me-1 text-primary"></i>Pilih Rekanan / Pemasok
              <span class="badge bg-light text-muted border ms-1" style="font-size:0.68rem;">Otomatis</span>
            </label>
            <select id="f-pemasok-select" class="form-select form-select-sm" style="width:100%" onchange="onPemasokSelected(this.value)">
              <option value="">-- Pilih Rekanan Pemasok (Otomatis) --</option>
              <option value="manual">✍️ Input Manual Penerima Baru</option>
            </select>
          </div>

          <!-- Detail Penerima (Otomatis terisi jika pilih rekanan) -->
          <div class="p-2 mb-2 rounded border bg-light" id="box-penerima">
            <div class="small fw-bold text-muted mb-1" style="font-size:0.75rem;">
              <i class="bi bi-bank me-1"></i>Data Rekening Penerima Transfer:
            </div>
            <div class="mb-1">
              <input type="text" id="f-penerima-nama" class="form-control form-control-sm"
                     placeholder="Nama Pemasok / Penerima / Toko *">
            </div>
            <div class="row g-1">
              <div class="col-5">
                <input type="text" id="f-penerima-bank" class="form-control form-control-sm text-uppercase"
                       placeholder="Bank (cth: BRI)*" oninput="hitungFeeDanTransfer()">
              </div>
              <div class="col-7">
                <input type="text" id="f-penerima-norek" class="form-control form-control-sm font-monospace"
                       placeholder="Nomor Rekening *">
              </div>
            </div>
            <div id="penerima-bank-badge" class="mt-1 d-none"></div>
          </div>

          <!-- Uraian / Keterangan Belanja -->
          <div class="mb-2">
            <label class="form-label fw-semibold small mb-1">Uraian / Keterangan Belanja</label>
            <textarea id="f-ket" class="form-control form-control-sm" rows="2"
                      placeholder="Contoh: Belanja beras 50kg, minyak goreng 10L, bumbu dapur"></textarea>
          </div>

          <!-- Total Belanja Nominal -->
          <div class="mb-2">
            <label class="form-label fw-semibold small mb-1">Total Belanja (Rp) <span class="text-danger">*</span></label>
            <div class="input-group input-group-sm">
              <span class="input-group-text">Rp</span>
              <input type="number" id="f-total" class="form-control" placeholder="0" min="0" step="1000" oninput="hitungFeeDanTransfer()">
            </div>
          </div>

          <!-- Live Calculation Box (Identik Operasional) -->
          <div class="p-2 rounded mb-3" style="background:#f1f5f9; font-size:0.8rem; border-left:3px solid #1F4E79;">
            <div class="d-flex justify-content-between mb-1">
              <span class="text-muted">Total Belanja:</span>
              <span class="fw-semibold" id="prev-nominal">Rp 0</span>
            </div>
            <div class="d-flex justify-content-between mb-1">
              <span class="text-muted">Potongan Admin Bank:</span>
              <span class="fw-semibold text-danger" id="prev-admin">Rp 0</span>
            </div>
            <hr class="my-1">
            <div class="d-flex justify-content-between fw-bold">
              <span style="color:#1F4E79;">Total Transfer / Bersih:</span>
              <span class="fs-6" style="color:#1F4E79;" id="prev-transfer">Rp 0</span>
            </div>
          </div>

          <button class="btn btn-primary btn-sm w-100 py-2 shadow-sm" onclick="simpanCatatan()">
            <i class="bi bi-plus-circle me-1"></i> Simpan Catatan Belanja
          </button>
        </div>
      </div>
    </div>

    <!-- Mini Rekap Hari Ini -->
    <div class="card shadow-sm border-0" id="cardRekapBelanja">
      <div class="card-header py-2 small fw-bold d-flex justify-content-between align-items-center bg-white border-bottom">
        <div class="d-flex align-items-center gap-2">
          <span><i class="bi bi-calendar-check me-1 text-primary"></i>Belanja Hari Ini</span>
          <span class="badge bg-primary" id="rekap-total-hari-ini">Rp 0</span>
        </div>
        <button class="btn-card-toggle text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRekapBelanja" aria-expanded="true" title="Sembunyikan / Tampilkan Rekap">
          <i class="bi bi-chevron-down" id="iconCollapseRekapBelanja"></i>
        </button>
      </div>
      <div class="collapse show" id="collapseRekapBelanja">
        <div class="card-body p-0">
          <div class="p-2 border-bottom bg-light d-flex align-items-center justify-content-between">
            <small class="text-muted">Pilih Tanggal:</small>
            <input type="date" id="tgl-rekap" class="form-control form-control-sm"
                   style="width:145px; height:28px; font-size:0.75rem;" value="{{ today_iso }}" onchange="loadRekap()">
          </div>
          <table class="table table-sm mb-0" id="tbl-rekap">
            <thead><tr>
              <th style="font-size:.72rem">Penerima</th>
              <th style="font-size:.72rem" class="text-end">Transfer</th>
              <th style="font-size:.72rem" class="text-center">Status</th>
            </tr></thead>
            <tbody id="tbody-rekap">
              <tr><td colspan="3" class="text-center text-muted py-3 small">Memuat data...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- ══════════════ PANEL KANAN – TABEL RIWAYAT & VALIDASI ══════════════ -->
  <div>

    <!-- Dapur Tabs Bar -->
    <div class="card p-2 px-3 mb-3 border-0 shadow-sm" style="border-radius: 10px; background: #ffffff;">
      <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2 overflow-auto py-1" style="max-width: 100%;">
          <button class="btn btn-sm btn-outline-primary py-1 px-2 text-nowrap fw-semibold me-1" id="btnToggleFormPanelBelanja" title="Sembunyikan / Tampilkan Panel Form Kiri">
            <i class="bi bi-layout-sidebar-inset me-1" id="iconTogglePanelBelanja"></i>
            <span id="textTogglePanelBelanja">Sembunyikan Form</span>
          </button>
          <span class="small fw-bold text-muted text-uppercase me-1" style="letter-spacing: .05em; font-size: 0.75rem; white-space: nowrap;">
            <i class="bi bi-buildings me-1 text-primary"></i>Dapur:
          </span>
          <div class="dapur-tabs" id="dapurTabs">
            <!-- Tabs diisi via JS -->
          </div>
        </div>
        <a href="{{ url_for('pengaturan') }}#card-dapur" class="btn btn-xs btn-outline-secondary btn-sm py-1 px-2 text-nowrap" style="font-size: 0.78rem;" title="Kelola Dapur di Pengaturan">
          <i class="bi bi-gear me-1"></i> Kelola Dapur
        </a>
      </div>
    </div>

    <!-- Validator Mode Panel -->
    <div class="validator-panel shadow-sm" id="validator-panel">
      <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-2">
        <div class="d-flex align-items-center gap-2">
          <span class="mode-badge" id="mode-badge">
            <i class="bi bi-lock"></i> Mode Lihat
          </span>
          <span class="text-muted small">Aktifkan untuk memvalidasi anggaran yang telah diajukan</span>
        </div>
        <button class="btn btn-sm btn-outline-success" id="btn-toggle-validator" onclick="toggleModeValidator()">
          <i class="bi bi-shield-check me-1"></i> Aktifkan Mode Validator
        </button>
      </div>
      <div class="d-flex align-items-center gap-2" id="validator-input-wrap">
        <input type="text" id="nama-validator" class="form-control form-control-sm"
               placeholder="Nama validator (wajib diisi sebelum memvalidasi)" style="max-width:300px">
        <small class="text-muted">Nama ini akan tercatat pada bukti belanja yang disetujui</small>
      </div>
      <!-- Tombol Kirim Notifikasi Validasi WA -->
      <div class="mt-2 d-flex align-items-center gap-2 flex-wrap" id="notif-validasi-bar" style="display:none!important;">
        <button type="button" class="btn btn-sm fw-bold text-white"
                id="btn-kirim-notif-validasi"
                onclick="kirimNotifValidasiWA()"
                title="Kirim rekap semua validasi hari ini ke WhatsApp"
                style="background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);border:none;box-shadow:0 2px 8px rgba(18,140,126,0.4);">
          <i class="bi bi-whatsapp me-1"></i> Kirim Notifikasi Validasi WA
          <span class="badge bg-white text-success ms-1 fw-bold" id="badge-validasi-count">0</span>
        </button>
        <small class="text-muted fst-italic" id="notif-validasi-hint"></small>
      </div>
    </div>

    <!-- Summary Stat Pills -->
    <div class="summary-bar" id="summary-bar">
      <div class="stat-pill total"><i class="bi bi-list-ul"></i> <span id="s-total">0</span> catatan</div>
      <div class="stat-pill belum"><i class="bi bi-clock"></i> <span id="s-belum">0</span> belum diajukan</div>
      <div class="stat-pill ajukan"><i class="bi bi-send"></i> <span id="s-diajukan">0</span> diajukan</div>
      <div class="stat-pill valid"><i class="bi bi-check-circle-fill"></i> <span id="s-divalidasi">0</span> disetujui</div>
      <div class="stat-pill rupiah ms-auto"><i class="bi bi-cash-stack"></i> <span id="s-rupiah">Rp 0</span></div>
    </div>

    <!-- Filter Bar -->
    <div class="filter-bar">
      <div class="filter-tabs" id="filter-tabs">
        <span class="filter-tab active" onclick="setFilter(this,'')">Semua</span>
        <span class="filter-tab" onclick="setFilter(this,'belum')">🔴 Belum</span>
        <span class="filter-tab" onclick="setFilter(this,'diajukan')">🟡 Diajukan</span>
        <span class="filter-tab" onclick="setFilter(this,'divalidasi')">🟢 Disetujui</span>
      </div>
      <input type="date" id="fil-dari" class="form-control" placeholder="Dari" onchange="loadCatatan()" style="max-width:140px">
      <input type="date" id="fil-sampai" class="form-control" placeholder="Sampai" onchange="loadCatatan()" style="max-width:140px">
      <select id="fil-kategori" class="form-select" onchange="loadCatatan()" style="max-width:160px">
        <option value="">Semua Kategori</option>
        {% for k in kategori_barang %}
        <option value="{{ k }}">{{ k }}</option>
        {% endfor %}
      </select>
      <select id="fil-pemasok" class="form-select" onchange="loadCatatan()" style="max-width:170px">
        <option value="">Semua Pemasok</option>
      </select>
      <button class="btn btn-sm btn-outline-secondary" onclick="resetFilter()" title="Reset Filter">
        <i class="bi bi-x-lg"></i>
      </button>
      <button class="btn btn-sm btn-outline-success fw-semibold ms-1" onclick="exportBelanjaExcel()" title="Export Data Belanja Bahan ke Excel (.xlsx)">
        <i class="bi bi-file-earmark-excel me-1"></i> Export Excel
      </button>
      <label class="ms-auto d-flex align-items-center gap-1 small text-muted" style="cursor:pointer" title="Hanya tampilkan pengajuan belanja yang belum divalidasi (belum selesai)">
        <input type="checkbox" id="chk-hide-valid" onchange="loadCatatan()" checked>
        <span class="fw-semibold text-dark"><i class="bi bi-eye-slash me-1 text-primary"></i>Sembunyikan yang sudah divalidasi</span>
      </label>
    </div>

    <!-- Tabel Riwayat Catatan Belanja -->
    <div class="card shadow-sm border-0">
      <div class="card-header d-flex align-items-center justify-content-between py-2">
        <span class="small fw-bold"><i class="bi bi-table me-1"></i>Daftar Belanja Bahan Pemasok</span>
        <span class="badge bg-secondary small" id="jumlah-badge">0 data</span>
      </div>
      <div class="table-responsive">
        <table class="table tbl-validasi mb-0">
          <thead>
            <tr>
              <th style="width:36px">
                <input type="checkbox" id="cb-all" onchange="toggleSelectAll(this)" title="Pilih semua">
              </th>
              <th>Tanggal</th>
              <th>Dapur / Kategori</th>
              <th>Penerima Dana</th>
              <th class="text-end">Total Belanja</th>
              <th class="text-center">Adm</th>
              <th class="text-end">Transfer</th>
              <th>Keterangan</th>
              <th class="text-center">Status</th>
              <th class="text-center" style="min-width:90px">✓ Valid</th>
              <th style="min-width:100px" class="text-end">Aksi</th>
            </tr>
          </thead>
          <tbody id="tbody-catatan">
            <tr><td colspan="11" class="text-center text-muted py-4"><i class="bi bi-inbox fs-3 d-block"></i>Memuat data...</td></tr>
          </tbody>
        </table>
      </div>

      <!-- Bulk action bar -->
      <div class="card-footer d-flex align-items-center gap-2 py-2 d-none" id="bulk-bar">
        <small class="text-muted me-1"><span id="bulk-count">0</span> dipilih</small>
        <button class="btn btn-sm btn-outline-success" onclick="bulkAjukan()">
          <i class="bi bi-send me-1"></i> Ajukan Semua
        </button>
        <button class="btn btn-sm btn-outline-danger" onclick="bulkHapus()">
          <i class="bi bi-trash me-1"></i> Hapus Semua
        </button>
      </div>
    </div>

  </div>
</div><!-- end split-layout -->

<!-- ── MODAL EDIT CATATAN BELANJA ── -->
<div class="modal fade" id="modalEdit" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2" style="background: linear-gradient(135deg,#1F4E79,#2E75B6); color:#fff;">
        <h6 class="modal-title mb-0"><i class="bi bi-pencil-square me-2"></i>Edit Catatan Belanja Bahan</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">
        <div class="mb-2">
          <label class="form-label small fw-semibold">Dapur / Unit</label>
          <select id="edit-dapur" class="form-select form-select-sm"></select>
        </div>
        <div class="row g-2 mb-2">
          <div class="col-6">
            <label class="form-label small fw-semibold">Tanggal Belanja</label>
            <input type="date" id="edit-tanggal" class="form-control form-control-sm">
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold">Kategori Bahan</label>
            <select id="edit-kategori" class="form-select form-select-sm">
              {% for k in kategori_barang %}
              <option value="{{ k }}">{{ k }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Rekanan / Pemasok Terdaftar (Opsional)</label>
          <select id="edit-pemasok" class="form-select form-select-sm" onchange="onEditPemasokSelected(this.value)">
            <!-- Diisi via JS -->
          </select>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Nama Penerima / Toko</label>
          <input type="text" id="edit-penerima" class="form-control form-control-sm">
        </div>
        <div class="row g-2 mb-2">
          <div class="col-5">
            <label class="form-label small fw-semibold">Bank</label>
            <input type="text" id="edit-bank" class="form-control form-control-sm text-uppercase">
          </div>
          <div class="col-7">
            <label class="form-label small fw-semibold">No Rekening</label>
            <input type="text" id="edit-norek" class="form-control form-control-sm font-monospace">
          </div>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Total Belanja (Rp)</label>
          <input type="number" id="edit-total" class="form-control form-control-sm" min="0" step="1000">
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Keterangan / Uraian</label>
          <textarea id="edit-ket" class="form-control form-control-sm" rows="2"></textarea>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
        <button class="btn btn-sm btn-primary" onclick="simpanEdit()">
          <i class="bi bi-save me-1"></i> Simpan Perubahan
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">

<script>
// ── Data dari server ──
const PEMASOK_DATA   = {{ pemasok_json | tojson if pemasok_json is defined else '[]' | safe }};
const DAPUR_DATA     = {{ dapur_json | tojson if dapur_json is defined else '[]' | safe }};
const TODAY          = '{{ today_iso }}';
const USER_ROLE      = '{{ current_user.role if current_user else "" }}';
const USER_NAMA      = '{{ current_user.nama_lengkap if current_user else "" }}';
const USER_DAPUR_ID  = '{{ current_user.dapur_id if (current_user and current_user.dapur_id) else "" }}';
window.dapurList = DAPUR_DATA;

let filterStatus    = '';
let selectedDapurId = (USER_ROLE === 'admin_dapur' && USER_DAPUR_ID) ? String(USER_DAPUR_ID) : '';
let modeValidator   = false;
let selectedIds     = new Set();
let currentBelanjaData = [];

const modalEdit = new bootstrap.Modal(document.getElementById('modalEdit'));

// ── Helpers ──
function fmt(n) {
  return new Intl.NumberFormat('id-ID', {style:'currency', currency:'IDR', minimumFractionDigits:0}).format(n);
}

function salinTeksDenganEfek(textToCopy, btn, label) {
  if (!textToCopy || textToCopy === '–' || textToCopy === '-') return;

  const triggerVisual = () => {
    if (btn) {
      const origHtml = btn.innerHTML;
      btn.innerHTML = '<i class="bi bi-check2 text-white me-1"></i><span class="text-white fw-bold" style="font-size:0.7rem;">Tersalin</span>';
      btn.classList.add('copied');
      const td = btn.closest('td');
      const tr = btn.closest('tr');
      if (td) td.classList.add('cell-copied-highlight');
      if (tr) tr.classList.add('row-copied-highlight');

      setTimeout(() => {
        btn.innerHTML = origHtml;
        btn.classList.remove('copied');
        if (td) td.classList.remove('cell-copied-highlight');
        if (tr) tr.classList.remove('row-copied-highlight');
      }, 1500);
    }
  };

  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(textToCopy).then(triggerVisual).catch(() => {
      manualCopyFallback(textToCopy);
      triggerVisual();
    });
  } else {
    manualCopyFallback(textToCopy);
    triggerVisual();
  }
}

function manualCopyFallback(str) {
  const ta = document.createElement('textarea');
  ta.value = str;
  ta.style.position = 'fixed';
  ta.style.left = '-9999px';
  document.body.appendChild(ta);
  ta.select();
  try { document.execCommand('copy'); } catch(e) {}
  document.body.removeChild(ta);
}

function salinPenerimaDana(btn, encodedNama, encodedNorek) {
  const nama = decodeURIComponent(encodedNama || '');
  const norek = decodeURIComponent(encodedNorek || '');
  const text = norek ? norek : nama;
  salinTeksDenganEfek(text, btn, 'Penerima Dana');
}

function salinKeterangan(btn, encodedKet) {
  const ket = decodeURIComponent(encodedKet || '');
  salinTeksDenganEfek(ket, btn, 'Keterangan');
}

function copyNominalTRF(nominal, btn) {
  const valStr = Math.round(nominal || 0).toString();
  salinTeksDenganEfek(valStr, btn, 'Nominal Transfer');
}
function fmtTgl(iso) {
  if (!iso) return '-';
  const d = new Date(iso);
  return d.toLocaleDateString('id-ID', {weekday:'short', day:'2-digit', month:'short', year:'numeric'});
}
function bankClass(b) {
  const bk = (b||'').toUpperCase();
  if (bk.includes('BRI')) return 'bank-bri';
  if (bk.includes('BNI')) return 'bank-bni';
  if (bk.includes('BCA')) return 'bank-bca';
  if (bk.includes('MANDIRI')) return 'bank-mandiri';
  if (bk.includes('BSI')) return 'bank-bsi';
  return 'bank-other';
}

// ── Render Tab Dapur ──
function renderDapurTabs() {
  const container = document.getElementById('dapurTabs');
  if (!container) return;

  let html = `<div class="dapur-tab ${selectedDapurId === '' ? 'active' : ''}" onclick="pilihDapurTab('')">
    <i class="bi bi-grid-fill"></i> Semua Dapur
  </div>`;

  DAPUR_DATA.forEach(d => {
    const isActive = String(d.id) === String(selectedDapurId);
    html += `<div class="dapur-tab ${isActive ? 'active' : ''}" onclick="pilihDapurTab('${d.id}')">
      <i class="bi bi-buildings"></i> ${d.nama} ${d.kode ? `(${d.kode})` : ''}
    </div>`;
  });

  container.innerHTML = html;
}

function pilihDapurTab(dapurId) {
  selectedDapurId = dapurId;
  renderDapurTabs();

  // Sinkronkan pilihan form input di kiri jika dapur spesifik dipilih
  if (dapurId) {
    const selDapur = document.getElementById('f-dapur');
    if (selDapur) selDapur.value = dapurId;
  }

  loadCatatan();
  loadRekap();
}

// ── Isi dropdown dapur ──
function populateDapurDropdowns() {
  let opts = '<option value="">-- Dapur Default / Umum --</option>';
  DAPUR_DATA.forEach(d => {
    opts += `<option value="${d.id}">${d.nama} ${d.kode ? `(${d.kode})` : ''}</option>`;
  });

  const fDapur = document.getElementById('f-dapur');
  if (fDapur) {
    fDapur.innerHTML = opts;
    if (USER_ROLE === 'admin_dapur' && USER_DAPUR_ID) {
      fDapur.value = USER_DAPUR_ID;
      fDapur.disabled = true; // Kunci dapur sesuai unit akun
    } else if (DAPUR_DATA.length > 0 && !fDapur.value) {
      fDapur.value = DAPUR_DATA[0].id;
    }
  }

  const editDapur = document.getElementById('edit-dapur');
  if (editDapur) {
    editDapur.innerHTML = opts;
    if (USER_ROLE === 'admin_dapur' && USER_DAPUR_ID) {
      editDapur.value = USER_DAPUR_ID;
      editDapur.disabled = true;
    }
  }
}

// ── Isi dropdown pemasok otomatis ──
function populatePemasokDropdowns() {
  // Pisahkan pemasok bahan belanja vs umum vs operasional
  const bahanList = PEMASOK_DATA.filter(p => !p.tipe || p.tipe === 'BAHAN' || p.tipe === 'SEMUA');
  const opsList   = PEMASOK_DATA.filter(p => p.tipe === 'OPERASIONAL');

  let pOpts = '<option value="">-- Pilih Rekanan Pemasok (Otomatis) --</option>';
  pOpts += '<option value="manual">✍️ Input Manual Penerima Baru</option>';

  if (bahanList.length > 0) {
    pOpts += '<optgroup label="🛒 Rekanan Bahan / Belanja Dapur">';
    bahanList.forEach(p => {
      pOpts += `<option value="${p.id}">${p.nama} – ${p.bank} (${p.no_rekening})</option>`;
    });
    pOpts += '</optgroup>';
  }

  if (opsList.length > 0) {
    pOpts += '<optgroup label="⚡ Rekanan Operasional Lainnya">';
    opsList.forEach(p => {
      pOpts += `<option value="${p.id}">${p.nama} – ${p.bank} (${p.no_rekening})</option>`;
    });
    pOpts += '</optgroup>';
  }

  document.getElementById('f-pemasok-select').innerHTML = pOpts;

  // Filter pemasok di panel tabel
  let filOpts = '<option value="">Semua Pemasok</option>';
  PEMASOK_DATA.forEach(p => {
    filOpts += `<option value="${p.id}">${p.nama}</option>`;
  });
  document.getElementById('fil-pemasok').innerHTML = filOpts;

  // Modal edit pemasok
  let editOpts = '<option value="">-- Tidak Ditautkan ke Rekanan --</option>';
  PEMASOK_DATA.forEach(p => {
    editOpts += `<option value="${p.id}">${p.nama} (${p.bank} - ${p.no_rekening})</option>`;
  });
  document.getElementById('edit-pemasok').innerHTML = editOpts;

  // Select2 untuk form utama
  $('#f-pemasok-select').select2({
    theme: 'bootstrap-5',
    placeholder: '-- Pilih Rekanan Pemasok --',
    allowClear: true,
    dropdownParent: document.getElementById('f-pemasok-select').closest('.card')
  });

  $('#f-pemasok-select').on('change', function() {
    onPemasokSelected($(this).val());
  });
}

// ── Event Saat Pemasok Dipilih ──
function onPemasokSelected(val) {
  const badgeEl = document.getElementById('penerima-bank-badge');
  if (!val || val === 'manual') {
    if (val === 'manual') {
      document.getElementById('f-penerima-nama').value = '';
      document.getElementById('f-penerima-bank').value = '';
      document.getElementById('f-penerima-norek').value = '';
      document.getElementById('f-penerima-nama').focus();
    }
    badgeEl.classList.add('d-none');
    hitungFeeDanTransfer();
    return;
  }

  const p = PEMASOK_DATA.find(x => String(x.id) === String(val));
  if (p) {
    document.getElementById('f-penerima-nama').value = p.nama;
    document.getElementById('f-penerima-bank').value = p.bank;
    document.getElementById('f-penerima-norek').value = p.no_rekening;

    // Jika rekanan punya kategori bawaan, set ke kategori tersebut jika ada
    if (p.kategori) {
      const selKat = document.getElementById('f-kategori');
      if (selKat) {
        for (let i = 0; i < selKat.options.length; i++) {
          if (selKat.options[i].value === p.kategori) {
            selKat.selectedIndex = i;
            break;
          }
        }
      }
    }

    badgeEl.innerHTML = `<span class="bank-tag ${bankClass(p.bank)} me-1">${p.bank.toUpperCase()}</span> Rekanan Terverifikasi`;
    badgeEl.classList.remove('d-none');
  }
  hitungFeeDanTransfer();
}

// ── Live Calculation Fee & Transfer (Persis Operasional) ──
function hitungFeeDanTransfer() {
  const nominal = parseFloat(document.getElementById('f-total').value) || 0;
  const bank = (document.getElementById('f-penerima-bank').value || '').trim().toUpperCase();

  let admin = 0;
  if (bank && bank !== 'BRI' && nominal > 0) {
    admin = 2500;
  }
  const transfer = Math.max(0, nominal - admin);

  document.getElementById('prev-nominal').textContent = fmt(nominal);
  document.getElementById('prev-admin').textContent   = admin > 0 ? `-${fmt(admin)} (non-BRI)` : 'Rp 0';
  document.getElementById('prev-transfer').textContent= fmt(transfer);
}

// ── Filter Status (Tabs) ──
function setFilter(el, status) {
  filterStatus = status;
  document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
  el.classList.add('active');
  loadCatatan();
}

function resetFilter() {
  document.getElementById('fil-dari').value = '';
  document.getElementById('fil-sampai').value = '';
  document.getElementById('fil-kategori').value = '';
  document.getElementById('fil-pemasok').value = '';
  document.getElementById('chk-hide-valid').checked = false;
  filterStatus = '';
  document.querySelectorAll('.filter-tab').forEach((t,i) => {
    t.classList.toggle('active', i === 0);
  });
  pilihDapurTab('');
}

// ── Mode Validator ──
function toggleModeValidator() {
  if (USER_ROLE && USER_ROLE !== 'super_admin' && USER_ROLE !== 'validator') {
    Swal.fire({
      icon:'error',
      title:'Akses Ditolak',
      text:'Hanya akun dengan peran Validator atau Super Admin yang dapat mengaktifkan mode validasi.',
      confirmButtonColor:'#1F4E79'
    });
    return;
  }
  const namaInp = document.getElementById('nama-validator');
  if (USER_NAMA && !namaInp.value) {
    namaInp.value = USER_NAMA;
  }
  const nama = namaInp.value.trim();
  if (!modeValidator && !nama) {
    Swal.fire({
      icon:'warning',
      title:'Isi Nama Validator',
      text:'Nama validator wajib diisi sebelum mengaktifkan mode validasi.',
      confirmButtonColor:'#1F4E79'
    });
    namaInp.focus();
    return;
  }
  modeValidator = !modeValidator;

  const btn   = document.getElementById('btn-toggle-validator');
  const badge = document.getElementById('mode-badge');
  const panel = document.getElementById('validator-panel');

  if (modeValidator) {
    btn.innerHTML   = '<i class="bi bi-lock-fill me-1"></i> Kunci / Nonaktifkan';
    btn.className   = 'btn btn-sm btn-danger';
    badge.innerHTML = '<i class="bi bi-shield-fill-check"></i> Mode Validator Aktif';
    badge.className = 'mode-badge on';
    panel.classList.add('active');
  } else {
    btn.innerHTML   = '<i class="bi bi-shield-check me-1"></i> Aktifkan Mode Validator';
    btn.className   = 'btn btn-sm btn-outline-success';
    badge.innerHTML = '<i class="bi bi-lock"></i> Mode Lihat';
    badge.className = 'mode-badge';
    panel.classList.remove('active');
  }
  loadCatatan();
}

// ── Load Semua Catatan ──
async function loadCatatan() {
  const params = new URLSearchParams();
  if (filterStatus)    params.set('status', filterStatus);
  if (selectedDapurId) params.set('dapur_id', selectedDapurId);
  const dari   = document.getElementById('fil-dari').value;
  const sampai = document.getElementById('fil-sampai').value;
  const kat    = document.getElementById('fil-kategori').value;
  const pId    = document.getElementById('fil-pemasok').value;
  const hideVEl = document.getElementById('chk-hide-valid');
  const hideV   = hideVEl ? hideVEl.checked : false;
  if (hideVEl) {
    localStorage.setItem('sppg_hide_valid_belanja', hideV ? 'true' : 'false');
  }

  if (dari)   params.set('tgl_dari', dari);
  if (sampai) params.set('tgl_sampai', sampai);
  if (kat)    params.set('kategori', kat);
  if (pId)    params.set('pemasok_id', pId);

  const resp = await fetch('/api/catatan-belanja?' + params.toString());
  let data = await resp.json();

  if (hideV) data = data.filter(d => !d.divalidasi);

  currentBelanjaData = data;
  renderTabel(data);
  updateSummary(data);
}

// ── Render Tabel ──
function renderTabel(data) {
  const tbody = document.getElementById('tbody-catatan');
  document.getElementById('jumlah-badge').textContent = data.length + ' data';
  selectedIds.clear();
  updateBulkBar();

  if (!data.length) {
    tbody.innerHTML = `<tr><td colspan="11"><div class="empty-state">
      <i class="bi bi-inbox"></i>Tidak ada catatan belanja ditemukan</div></td></tr>`;
    return;
  }

  // ── Kelompokkan data per hari (tanggal) ──
  const groups = {};
  data.forEach(d => {
    const tgl = d.tanggal || 'Tanpa Tanggal';
    if (!groups[tgl]) {
      groups[tgl] = [];
    }
    groups[tgl].push(d);
  });

  // Urutkan tanggal menurun (terbaru di atas)
  const sortedDates = Object.keys(groups).sort().reverse();

  let htmlRows = '';
  sortedDates.forEach(tglKey => {
    const items = groups[tglKey];
    const subtotalBelanja = items.reduce((acc, curr) => acc + (curr.total_belanja || 0), 0);
    const subtotalTransfer = items.reduce((acc, curr) => acc + (curr.total_transfer || 0), 0);
    const countVal = items.filter(x => x.divalidasi).length;

    // Header baris kelompok tanggal
    htmlRows += `
      <tr class="tr-date-group">
        <td colspan="4">
          <div class="d-flex align-items-center gap-2 flex-wrap">
            <span class="date-group-badge">
              <i class="bi bi-calendar-event text-primary"></i> ${fmtTgl(tglKey)}
            </span>
            <span class="badge bg-secondary" style="font-size:0.7rem;">${items.length} Nota</span>
            ${countVal === items.length ? '<span class="badge bg-success" style="font-size:0.7rem;"><i class="bi bi-check-all"></i> Semua Disetujui</span>' : ''}
          </div>
        </td>
        <td class="text-end fw-bold text-dark" style="font-size:0.82rem;">${fmt(subtotalBelanja)}</td>
        <td></td>
        <td class="text-end fw-bold text-primary" style="font-size:0.82rem;">${fmt(subtotalTransfer)}</td>
        <td colspan="4" class="text-end">
          <span class="date-group-subtotal"><i class="bi bi-calculator me-1"></i>Subtotal Hari Ini</span>
        </td>
      </tr>
    `;

    // Baris item-item di tanggal tersebut
    items.forEach(d => {
      const namaPenerima = d.nama_penerima || (d.pemasok ? d.pemasok.nama : '-');
      const bankPenerima = (d.bank_penerima || (d.pemasok ? d.pemasok.bank : '')).toUpperCase();
      const norekPenerima= d.no_rekening_penerima || (d.pemasok ? d.pemasok.no_rekening : '');

      const bankBadge = bankPenerima
        ? `<span class="bank-tag ${bankClass(bankPenerima)}">${bankPenerima}</span>`
        : '';

      const statusBadge = d.divalidasi
        ? `<span class="badge-valid"><i class="bi bi-check2-circle me-1"></i>Disetujui</span>`
        : d.diajukan
          ? `<span class="badge-ajukan"><i class="bi bi-send me-1"></i>Diajukan</span>`
          : `<span class="badge-belum"><i class="bi bi-clock me-1"></i>Belum</span>`;

      const rowClass = d.divalidasi ? 'row-divalidasi' : d.diajukan ? 'row-diajukan' : '';

      const cbChecked  = d.divalidasi ? 'checked' : '';
      const cbDisabled = (!modeValidator || !d.diajukan) ? 'disabled' : '';

      const btnAjukan = d.divalidasi ? '' : d.diajukan
        ? `<button class="btn-act batal-btn" onclick="ajukan(${d.id})" title="Batalkan pengajuan">
             <i class="bi bi-arrow-counterclockwise"></i>
           </button>`
        : `<button class="btn-act ajukan-btn" onclick="ajukan(${d.id})" title="Tandai sudah diajukan">
             <i class="bi bi-send-fill"></i>
           </button>`;

      const validInfo = d.divalidasi
        ? `<div style="font-size:.68rem;color:#059669;margin-top:2px;">
             <i class="bi bi-check-circle me-1"></i>${d.validated_by}
             ${d.validated_time_str ? `<span class="d-block text-muted" style="font-size:.62rem;"><i class="bi bi-clock me-1"></i>${d.validated_time_str} WIB</span>` : ''}
           </div>` : '';

      // Jam pengajuan
      const jamPengajuan = d.created_time_str
        ? `<div class="text-muted" style="font-size:.68rem;"><i class="bi bi-clock me-1"></i>${d.created_time_str} WIB</div>` : '';

      // Admin fee badge
      const admBadge = d.biaya_admin > 0
        ? `<span class="badge bg-warning text-dark" style="font-size:.68rem" title="Potongan admin non-BRI">
             -${fmt(d.biaya_admin)}
           </span>`
        : `<span class="text-muted" style="font-size:.75rem">Gratis</span>`;

      // Transfer amount — highlight biru/merah + tombol copy nominal angka bersih (misal: 4131000)
      const transferColor = d.biaya_admin > 0 ? '#DC2626' : '#1F4E79';
      const cleanNominalTrf = Math.round(d.total_transfer || 0);
      const transferVal = `
        <div class="d-inline-flex align-items-center gap-1 justify-content-end">
          <span style="color:${transferColor};font-weight:700;">${fmt(d.total_transfer)}</span>
          <button type="button" class="btn-copy-mini flex-shrink-0"
                  onclick="copyNominalTRF(${cleanNominalTrf}, this)" title="Copy nominal murni (${cleanNominalTrf}) untuk transfer">
            <i class="bi bi-clipboard"></i>
          </button>
        </div>`;

      // Dapur & Kategori
      const dapurNama = d.dapur ? d.dapur.nama : 'Umum';
      const katNama   = d.kategori || 'Bahan Belanja';

      htmlRows += `<tr class="${rowClass}" data-id="${d.id}">
        <td><input type="checkbox" class="cb-row" value="${d.id}"
             onchange="onRowCheck(this)" ${d.divalidasi?'disabled':''}></td>
        <td style="white-space:nowrap">
          <div class="fw-semibold text-dark">${fmtTgl(d.tanggal)}</div>
          ${jamPengajuan}
        </td>
        <td>
          <span class="dapur-badge mb-1"><i class="bi bi-buildings"></i> ${dapurNama}</span>
          <div class="small fw-semibold text-muted" style="font-size:.75rem;">${katNama}</div>
        </td>
        <td>
          <div class="d-flex align-items-center justify-content-between gap-1">
            <div class="fw-semibold text-truncate" style="font-size:.85rem; max-width:170px;" title="${namaPenerima}">${namaPenerima}</div>
            <button type="button" class="btn-copy-mini flex-shrink-0"
                    onclick="salinPenerimaDana(this, '${encodeURIComponent(namaPenerima)}', '${encodeURIComponent(norekPenerima)}')"
                    title="Salin Data Penerima / Rekening">
              <i class="bi bi-clipboard"></i>
            </button>
          </div>
          <div class="mt-1 d-flex align-items-center gap-1">${bankBadge} <span class="font-monospace" style="font-size:.72rem;color:#64748b">${norekPenerima}</span></div>
        </td>
        <td class="text-end fw-semibold" style="color:#1F4E79">${fmt(d.total_belanja)}</td>
        <td class="text-center">${admBadge}</td>
        <td class="text-end">${transferVal}</td>
        <td style="max-width:210px;">
          <div class="d-flex align-items-start justify-content-between gap-1">
            <span class="text-muted text-break" style="font-size:.8rem;">${d.keterangan || '–'}</span>
            ${d.keterangan ? `
            <button type="button" class="btn-copy-mini flex-shrink-0"
                    onclick="salinKeterangan(this, '${encodeURIComponent(d.keterangan)}')"
                    title="Salin Keterangan">
              <i class="bi bi-clipboard"></i>
            </button>` : ''}
          </div>
        </td>
        <td class="text-center">${statusBadge}</td>
        <td class="text-center">
          <input type="checkbox" class="cb-validasi" ${cbChecked} ${cbDisabled}
                 onchange="validasi(${d.id}, this)" title="Centang = tervalidasi">
          ${validInfo}
        </td>
        <td class="text-end">
          <div class="d-flex justify-content-end gap-1">
            ${btnAjukan}
            ${!d.divalidasi ? `<button class="btn-act edit" onclick="bukaEdit(${d.id})" title="Edit">
              <i class="bi bi-pencil"></i></button>` : ''}
            ${!d.divalidasi ? `<button class="btn-act del" onclick="hapus(${d.id})" title="Hapus">
              <i class="bi bi-trash"></i></button>` : ''}
          </div>
        </td>
      </tr>`;
    });
  });

  tbody.innerHTML = htmlRows;
}

// ── Update Summary Pills ──
function updateSummary(data) {
  const belum    = data.filter(d => !d.diajukan).length;
  const diajukan = data.filter(d => d.diajukan && !d.divalidasi).length;
  const valid    = data.filter(d => d.divalidasi).length;
  const totalTransfer = data.reduce((s,d) => s + (d.total_transfer || 0), 0);
  const totalAdmin    = data.reduce((s,d) => s + (d.biaya_admin || 0), 0);

  document.getElementById('s-total').textContent      = data.length;
  document.getElementById('s-belum').textContent      = belum;
  document.getElementById('s-diajukan').textContent   = diajukan;
  document.getElementById('s-divalidasi').textContent = valid;

  const rupiahEl = document.getElementById('s-rupiah');
  if (totalAdmin > 0) {
    rupiahEl.innerHTML = `${fmt(totalTransfer)} <small style="opacity:.7;font-size:.75em">(-${fmt(totalAdmin)} adm.)</small>`;
  } else {
    rupiahEl.textContent = fmt(totalTransfer);
  }

  // Tampilkan/sembunyikan tombol Kirim Notifikasi Validasi WA
  const notifBar   = document.getElementById('notif-validasi-bar');
  const badgeCount = document.getElementById('badge-validasi-count');
  const hintEl     = document.getElementById('notif-validasi-hint');
  if (notifBar && valid > 0) {
    notifBar.style.removeProperty('display');
    notifBar.style.setProperty('display', 'flex', 'important');
    if (badgeCount) badgeCount.textContent = valid;
    if (hintEl) hintEl.textContent = `${valid} transaksi sudah divalidasi — siap dikirim rekap ke WA`;
  } else if (notifBar) {
    notifBar.style.setProperty('display', 'none', 'important');
  }
}

// Export Excel Belanja Pemasok via SheetJS
function exportBelanjaExcel() {
  if (!currentBelanjaData || currentBelanjaData.length === 0) {
    Swal.fire({icon: 'info', title: 'Info', text: 'Tidak ada data belanja bahan untuk diexport'});
    return;
  }

  const exportRows = currentBelanjaData.map((d, idx) => {
    const namaPenerima = d.nama_penerima || (d.pemasok ? d.pemasok.nama : '-');
    const bankPenerima = (d.bank_penerima || (d.pemasok ? d.pemasok.bank : '')).toUpperCase();
    const norekPenerima = d.no_rekening_penerima || (d.pemasok ? d.pemasok.no_rekening : '-');
    const statusStr = d.divalidasi ? 'Disetujui' : (d.diajukan ? 'Diajukan' : 'Belum Diajukan');

    return {
      'No': idx + 1,
      'Tanggal': d.tanggal || '-',
      'Waktu Input': d.created_time_str ? `${d.created_time_str} WIB` : '-',
      'Unit Dapur': d.dapur ? d.dapur.nama : 'Pusat / Semua',
      'Kategori': d.kategori || '-',
      'Penerima / Toko': namaPenerima,
      'Bank': bankPenerima || '-',
      'No Rekening': norekPenerima,
      'Total Belanja (Rp)': d.total_belanja || 0,
      'Biaya Admin (Rp)': d.biaya_admin || 0,
      'Total Transfer (Rp)': d.total_transfer || 0,
      'Keterangan': d.keterangan || '-',
      'Status': statusStr,
      'Validator': d.validated_by || '-',
      'Waktu Validasi': d.validated_time_str ? `${d.validated_time_str} WIB` : '-'
    };
  });

  const ws = XLSX.utils.json_to_sheet(exportRows);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Belanja Bahan Pemasok");

  const nowStr = new Date().toISOString().split('T')[0];
  XLSX.writeFile(wb, `Laporan_Belanja_Pemasok_${nowStr}.xlsx`);
}

// ── Simpan Catatan Belanja Baru ──
async function simpanCatatan() {
  const pid   = $('#f-pemasok-select').val();
  const did   = document.getElementById('f-dapur').value;
  const tgl   = document.getElementById('f-tanggal').value;
  const kat   = document.getElementById('f-kategori').value;
  const namaP = document.getElementById('f-penerima-nama').value.trim();
  const bankP = document.getElementById('f-penerima-bank').value.trim();
  const norekP= document.getElementById('f-penerima-norek').value.trim();
  const total = parseFloat(document.getElementById('f-total').value) || 0;
  const ket   = document.getElementById('f-ket').value.trim();

  if (!tgl || !total || (!pid && !namaP)) {
    Swal.fire({
      icon:'warning',
      title:'Lengkapi Data',
      text:'Tanggal, penerima / rekanan pemasok, dan total belanja wajib diisi!',
      confirmButtonColor:'#1F4E79'
    });
    return;
  }

  const payload = {
    pemasok_id: (pid && pid !== 'manual') ? parseInt(pid) : null,
    dapur_id: did ? parseInt(did) : null,
    tanggal: tgl,
    kategori: kat,
    nama_penerima: namaP,
    bank_penerima: bankP,
    no_rekening_penerima: norekP,
    total_belanja: total,
    keterangan: ket
  };

  const resp = await fetch('/api/catatan-belanja', {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify(payload)
  });

  if (resp.ok) {
    $('#f-pemasok-select').val(null).trigger('change');
    document.getElementById('f-penerima-nama').value = '';
    document.getElementById('f-penerima-bank').value = '';
    document.getElementById('f-penerima-norek').value = '';
    document.getElementById('f-total').value         = '';
    document.getElementById('f-ket').value           = '';
    document.getElementById('penerima-bank-badge').classList.add('d-none');
    hitungFeeDanTransfer();

    Swal.fire({icon:'success', title:'Tersimpan!', timer:1200, showConfirmButton:false});
    loadCatatan();
    loadRekap();
  } else {
    const err = await resp.json();
    Swal.fire({icon:'error', title:'Gagal Menyimpan', text: err.error || 'Terjadi kesalahan sistem.'});
  }
}

// ── Ajukan / Batalkan ──
async function ajukan(id) {
  const resp = await fetch(`/api/catatan-belanja/${id}/ajukan`, {method:'POST'});
  if (resp.ok) { loadCatatan(); loadRekap(); }
}

// ── Kirim Notifikasi Rekap Validasi WA ──
async function kirimNotifValidasiWA() {
  const tglFil = document.getElementById('fil-dari').value || new Date().toISOString().split('T')[0];
  const dapurId = selectedDapurId || null;

  const dapurLabel = dapurId
    ? (window.dapurList || []).find(d => String(d.id) === String(dapurId))?.nama || `Dapur #${dapurId}`
    : 'Semua Dapur';

  const { isConfirmed } = await Swal.fire({
    icon: 'question',
    title: '<i class="bi bi-whatsapp text-success me-2"></i>Kirim Rekap Validasi WA',
    html: `Kirim notifikasi konsolidasi semua transaksi yang telah divalidasi ke WhatsApp?<br>
           <span class="badge bg-success mt-2 p-2"><i class="bi bi-buildings me-1"></i>${dapurLabel}</span>
           <span class="badge bg-primary mt-2 p-2 ms-1"><i class="bi bi-calendar3 me-1"></i>${tglFil}</span>`,
    showCancelButton: true,
    confirmButtonColor: '#25d366',
    cancelButtonColor: '#6c757d',
    confirmButtonText: '<i class="bi bi-whatsapp me-1"></i> Ya, Kirim Sekarang',
    cancelButtonText: 'Batal',
    focusConfirm: false
  });

  if (!isConfirmed) return;

  const btn = document.getElementById('btn-kirim-notif-validasi');
  const origHtml = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Mengirim...';

  try {
    const resp = await fetch('/api/notifications/send-validation-summary', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ dapur_id: dapurId ? parseInt(dapurId) : null, tanggal: tglFil })
    });
    const res = await resp.json();

    if (res.ok) {
      Swal.fire({
        icon: 'success',
        title: 'Rekap Terkirim! ✅',
        html: `<div class="text-start">${res.message}</div>
               ${res.preview ? `<details class="mt-3 text-start"><summary class="small text-muted">Lihat Preview Pesan</summary>
               <pre class="small mt-2 text-start p-2 bg-light rounded" style="white-space:pre-wrap;font-size:.72rem;">${res.preview}</pre></details>` : ''}`,
        confirmButtonColor: '#25d366',
        confirmButtonText: '<i class="bi bi-check-lg me-1"></i> OK'
      });
    } else {
      Swal.fire({ icon: 'error', title: 'Gagal Mengirim', text: res.error || 'Terjadi kesalahan.' });
    }
  } catch(e) {
    Swal.fire({ icon: 'error', title: 'Error', text: 'Gagal terhubung ke server: ' + e.message });
  } finally {
    btn.disabled = false;
    btn.innerHTML = origHtml;
  }
}

// ── Validasi (Centang Oleh Validator) ──
async function validasi(id, cb) {
  if (!modeValidator) {
    cb.checked = !cb.checked;
    Swal.fire({
      icon:'info',
      title:'Mode Validator Belum Aktif',
      text:'Aktifkan mode validator terlebih dahulu dengan memasukkan nama bendahara/validator.',
      confirmButtonColor:'#1F4E79'
    });
    return;
  }
  const namaV = document.getElementById('nama-validator').value.trim();
  if (!namaV) {
    cb.checked = !cb.checked;
    Swal.fire({
      icon:'warning',
      title:'Nama Validator Kosong',
      text:'Isi nama validator terlebih dahulu pada kolom validator.',
      confirmButtonColor:'#1F4E79'
    });
    return;
  }

  const resp = await fetch(`/api/catatan-belanja/${id}/validasi`, {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({validator: namaV})
  });
  if (resp.ok) { loadCatatan(); loadRekap(); }
}

// ── Edit Catatan ──
function bukaEdit(id) {
  fetch('/api/catatan-belanja?status=').then(r => r.json()).then(all => {
    const d = all.find(x => x.id === id);
    if (!d) return;
    document.getElementById('edit-id').value       = id;
    document.getElementById('edit-dapur').value    = d.dapur_id || '';
    document.getElementById('edit-tanggal').value  = d.tanggal;
    document.getElementById('edit-kategori').value = d.kategori || '';
    document.getElementById('edit-pemasok').value  = d.pemasok_id || '';
    document.getElementById('edit-penerima').value = d.nama_penerima || '';
    document.getElementById('edit-bank').value     = d.bank_penerima || '';
    document.getElementById('edit-norek').value    = d.no_rekening_penerima || '';
    document.getElementById('edit-total').value    = d.total_belanja;
    document.getElementById('edit-ket').value      = d.keterangan || '';
    modalEdit.show();
  });
}

function onEditPemasokSelected(pid) {
  if (!pid) return;
  const p = PEMASOK_DATA.find(x => String(x.id) === String(pid));
  if (p) {
    document.getElementById('edit-penerima').value = p.nama;
    document.getElementById('edit-bank').value     = p.bank;
    document.getElementById('edit-norek').value    = p.no_rekening;
  }
}

async function simpanEdit() {
  const id    = document.getElementById('edit-id').value;
  const did   = document.getElementById('edit-dapur').value;
  const pid   = document.getElementById('edit-pemasok').value;
  const tgl   = document.getElementById('edit-tanggal').value;
  const kat   = document.getElementById('edit-kategori').value;
  const namaP = document.getElementById('edit-penerima').value.trim();
  const bankP = document.getElementById('edit-bank').value.trim();
  const norekP= document.getElementById('edit-norek').value.trim();
  const tot   = parseFloat(document.getElementById('edit-total').value) || 0;
  const ket   = document.getElementById('edit-ket').value.trim();

  const payload = {
    pemasok_id: pid ? parseInt(pid) : null,
    dapur_id: did ? parseInt(did) : null,
    tanggal: tgl,
    kategori: kat,
    nama_penerima: namaP,
    bank_penerima: bankP,
    no_rekening_penerima: norekP,
    total_belanja: tot,
    keterangan: ket
  };

  const resp = await fetch(`/api/catatan-belanja/${id}`, {
    method:'PUT',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify(payload)
  });
  if (resp.ok) {
    modalEdit.hide();
    Swal.fire({icon:'success', title:'Perubahan Tersimpan', timer:1100, showConfirmButton:false});
    loadCatatan();
    loadRekap();
  }
}

// ── Hapus ──
async function hapus(id) {
  const res = await Swal.fire({
    title:'Hapus catatan ini?',
    text: 'Data yang dihapus tidak dapat dipulihkan.',
    icon:'warning',
    showCancelButton:true,
    confirmButtonColor:'#DC2626',
    confirmButtonText:'Ya, Hapus',
    cancelButtonText:'Batal'
  });
  if (!res.isConfirmed) return;
  await fetch(`/api/catatan-belanja/${id}`, {method:'DELETE'});
  loadCatatan(); loadRekap();
}

// ── Checkbox Select All & Bulk Actions ──
function onRowCheck(cb) {
  if (cb.checked) selectedIds.add(parseInt(cb.value));
  else selectedIds.delete(parseInt(cb.value));
  updateBulkBar();
}
function toggleSelectAll(cbAll) {
  document.querySelectorAll('.cb-row:not(:disabled)').forEach(cb => {
    cb.checked = cbAll.checked;
    if (cbAll.checked) selectedIds.add(parseInt(cb.value));
    else selectedIds.delete(parseInt(cb.value));
  });
  updateBulkBar();
}
function updateBulkBar() {
  const bar = document.getElementById('bulk-bar');
  document.getElementById('bulk-count').textContent = selectedIds.size;
  bar.classList.toggle('d-none', selectedIds.size === 0);
}

async function bulkAjukan() {
  if (!selectedIds.size) return;
  const res = await Swal.fire({
    title:`Ajukan ${selectedIds.size} catatan belanja?`,
    icon:'question',
    showCancelButton:true,
    confirmButtonText:'Ya, Ajukan',
    confirmButtonColor:'#059669',
    cancelButtonText:'Batal'
  });
  if (!res.isConfirmed) return;
  await Promise.all([...selectedIds].map(id =>
    fetch(`/api/catatan-belanja/${id}/ajukan`, {method:'POST'})
  ));
  loadCatatan(); loadRekap();
}

async function bulkHapus() {
  if (!selectedIds.size) return;
  const res = await Swal.fire({
    title:`Hapus ${selectedIds.size} catatan belanja?`,
    icon:'warning',
    showCancelButton:true,
    confirmButtonText:'Ya, Hapus Semua',
    confirmButtonColor:'#DC2626',
    cancelButtonText:'Batal'
  });
  if (!res.isConfirmed) return;
  await Promise.all([...selectedIds].map(id =>
    fetch(`/api/catatan-belanja/${id}`, {method:'DELETE'})
  ));
  loadCatatan(); loadRekap();
}

// ── Rekap Hari Ini ──
async function loadRekap() {
  const tgl = document.getElementById('tgl-rekap').value;
  if (!tgl) return;
  let url = `/api/catatan-belanja?tgl_dari=${tgl}&tgl_sampai=${tgl}`;
  if (selectedDapurId) url += `&dapur_id=${selectedDapurId}`;

  const resp = await fetch(url);
  const data = await resp.json();

  const sumTotal = data.reduce((s,d) => s + (d.total_transfer || 0), 0);
  document.getElementById('rekap-total-hari-ini').textContent = fmt(sumTotal);

  const tbody = document.getElementById('tbody-rekap');
  if (!data.length) {
    tbody.innerHTML = `<tr><td colspan="3" class="text-center text-muted py-3 small">Belum ada transaksi di tanggal ini</td></tr>`;
    return;
  }

  tbody.innerHTML = data.map(d => {
    const namaPenerima = d.nama_penerima || (d.pemasok ? d.pemasok.nama : '-');
    const badge = d.divalidasi
      ? `<span class="badge-valid" style="font-size:.65rem">✓ Valid</span>`
      : d.diajukan
        ? `<span class="badge-ajukan" style="font-size:.65rem">→ Diajukan</span>`
        : `<span class="badge-belum" style="font-size:.65rem">◷ Belum</span>`;
    return `<tr>
      <td style="font-size:.78rem">
        <div class="fw-semibold text-truncate" style="max-width:140px;">${namaPenerima}</div>
        <small class="text-muted" style="font-size:0.68rem;">${d.kategori || ''}</small>
      </td>
      <td class="text-end fw-bold" style="font-size:.78rem;color:#1F4E79">${fmt(d.total_transfer)}</td>
      <td class="text-center">${badge}</td>
    </tr>`;
  }).join('');
}

// ── Init ──
$(document).ready(function() {
  populatePemasokDropdowns();
  populateDapurDropdowns();
  renderDapurTabs();
  document.getElementById('f-tanggal').value = TODAY;

  // Restore preferensi sembunyikan yang sudah divalidasi
  const savedHideValidBelanja = localStorage.getItem('sppg_hide_valid_belanja');
  const chkHideBelanja = document.getElementById('chk-hide-valid');
  if (chkHideBelanja) {
    if (savedHideValidBelanja !== null) {
      chkHideBelanja.checked = (savedHideValidBelanja === 'true');
    } else {
      chkHideBelanja.checked = true; // Default aktif: sembunyikan yang sudah divalidasi
    }
  }

  loadCatatan();
  loadRekap();

  // Setup Toggle Panel Kiri (Slidebar Form Belanja)
  const splitLayout = document.querySelector('.split-layout');
  const btnToggleForm = document.getElementById('btnToggleFormPanelBelanja');
  const btnHideSlidebar = document.getElementById('btnHideSlidebarBelanja');
  const textToggle = document.getElementById('textTogglePanelBelanja');
  const iconToggle = document.getElementById('iconTogglePanelBelanja');

  function updateSlidebarUI(isHidden) {
    if (isHidden) {
      splitLayout.classList.add('form-hidden');
      if (textToggle) textToggle.textContent = 'Buka Form Belanja';
      if (iconToggle) iconToggle.className = 'bi bi-layout-sidebar-inset me-1';
      if (btnToggleForm) {
        btnToggleForm.classList.remove('btn-outline-primary');
        btnToggleForm.classList.add('btn-primary', 'shadow-sm');
      }
    } else {
      splitLayout.classList.remove('form-hidden');
      if (textToggle) textToggle.textContent = 'Sembunyikan Form';
      if (iconToggle) iconToggle.className = 'bi bi-layout-sidebar me-1';
      if (btnToggleForm) {
        btnToggleForm.classList.remove('btn-primary', 'shadow-sm');
        btnToggleForm.classList.add('btn-outline-primary');
      }
    }
    localStorage.setItem('sppg_belanja_form_hidden', isHidden);
  }

  window.toggleFormSlidebarBelanja = function() {
    const willHide = !splitLayout.classList.contains('form-hidden');
    updateSlidebarUI(willHide);
  };

  if (localStorage.getItem('sppg_belanja_form_hidden') === 'true') {
    updateSlidebarUI(true);
  }

  if (btnToggleForm) {
    btnToggleForm.addEventListener('click', () => toggleFormSlidebarBelanja());
  }
  if (btnHideSlidebar) {
    btnHideSlidebar.addEventListener('click', () => toggleFormSlidebarBelanja());
  }

  // Handle accordion chevron rotate
  $('#collapseFormBelanja').on('hidden.bs.collapse', function() {
    $('#iconCollapseFormBelanja').removeClass('bi-chevron-down').addClass('bi-chevron-up');
    localStorage.setItem('sppg_belanja_form_collapsed', 'true');
  }).on('shown.bs.collapse', function() {
    $('#iconCollapseFormBelanja').removeClass('bi-chevron-up').addClass('bi-chevron-down');
    localStorage.setItem('sppg_belanja_form_collapsed', 'false');
  });

  $('#collapseRekapBelanja').on('hidden.bs.collapse', function() {
    $('#iconCollapseRekapBelanja').removeClass('bi-chevron-down').addClass('bi-chevron-up');
    localStorage.setItem('sppg_belanja_rekap_collapsed', 'true');
  }).on('shown.bs.collapse', function() {
    $('#iconCollapseRekapBelanja').removeClass('bi-chevron-up').addClass('bi-chevron-down');
    localStorage.setItem('sppg_belanja_rekap_collapsed', 'false');
  });

  // Restore individual card collapse
  if (localStorage.getItem('sppg_belanja_form_collapsed') === 'true') {
    $('#collapseFormBelanja').collapse('hide');
  }
  if (localStorage.getItem('sppg_belanja_rekap_collapsed') === 'true') {
    $('#collapseRekapBelanja').collapse('hide');
  }
});
</script>
{% endblock %}