{% extends "base.html" %}
{% block title %}Pengajuan Operasional – SPPG{% endblock %}
{% block page_title %}Pengajuan Biaya Operasional Dapur{% 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.diajukan { background:#FEF9C3; color:#854D0E; }
.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-ops { font-size:.84rem; min-width: 780px; }
.tbl-ops th { font-size:.75rem; text-transform:uppercase; color:#6c757d;
  font-weight:700; letter-spacing:.03em; background:#f8fafc; }
.tbl-ops td { vertical-align: middle; padding:.65rem .85rem; }
.tbl-ops tr { transition: background .2s; }
.row-divalidasi { background: #f0fdf4 !important; }
.row-diajukan   { background: #ffffff; }

/* ── Badge Status ── */
.badge-diajukan  { background:#FEF3C7; color:#92400E; 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; }

/* ── 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 OPERASIONAL ══════════════ -->
  <div class="form-panel" id="panelKiriOperasional">
    <div class="card shadow-sm border-0 mb-3" id="cardFormOperasional">
      <div class="card-header py-2 d-flex justify-content-between align-items-center">
        <span class="fw-semibold"><i class="bi bi-wallet2 me-2"></i>Form Pengajuan Operasional</span>
        <div class="d-flex align-items-center gap-1">
          <button class="btn-card-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFormOperasional" aria-expanded="true" title="Minimize / Expand Form">
            <i class="bi bi-chevron-down" id="iconCollapseFormOps"></i>
          </button>
          <button class="btn-card-toggle" type="button" id="btnHideSlidebarOps" title="Tutup / Sembunyikan Slidebar Form">
            <i class="bi bi-chevron-bar-left"></i>
          </button>
        </div>
      </div>
      <div class="collapse show" id="collapseFormOperasional">
        <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>

          <div class="row g-2 mb-2">
            <div class="col-7">
              <label class="form-label fw-semibold small mb-1">Nomor Pengajuan</label>
              <input type="text" id="f-nomor" class="form-control form-control-sm bg-light font-monospace"
                     value="{{ nomor_saran }}" readonly>
            </div>
            <div class="col-5">
              <label class="form-label fw-semibold small mb-1">Tanggal <span class="text-danger">*</span></label>
              <input type="date" id="f-tanggal" class="form-control form-control-sm"
                     value="{{ today_iso }}">
            </div>
          </div>

          <!-- Kategori Operasional -->
          <div class="mb-2">
            <label class="form-label fw-semibold small mb-1">Kategori Operasional <span class="text-danger">*</span></label>
            <div class="input-group input-group-sm">
              <select id="f-kategori" class="form-select">
                {% for k in kategori_ops %}
                <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 Pemasok / Rekanan
              <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 pemasok) -->
          <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 Dana:
            </div>
            <div class="mb-1">
              <input type="text" id="f-penerima-nama" class="form-control form-control-sm"
                     placeholder="Nama Penerima / Toko / Vendor *">
            </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 Keperluan -->
          <div class="mb-2">
            <label class="form-label fw-semibold small mb-1">Uraian / Rincian Keperluan <span class="text-danger">*</span></label>
            <textarea id="f-keperluan" class="form-control form-control-sm" rows="2"
                      placeholder="Contoh: Pembelian gas LPG 12kg (2 tabung) & sabun cuci"></textarea>
          </div>

          <!-- Nominal -->
          <div class="mb-2">
            <label class="form-label fw-semibold small mb-1">Nominal Biaya (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-nominal" class="form-control" placeholder="0" min="0" step="1000" oninput="hitungFeeDanTransfer()">
            </div>
          </div>

          <!-- Live Calculation Box -->
          <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">Nominal Biaya:</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 / Cair:</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="simpanOperasional()">
            <i class="bi bi-send-check me-1"></i> Simpan Pengajuan Operasional
          </button>
        </div>
      </div>
    </div>

    <!-- Mini Rekap Hari Ini -->
    <div class="card shadow-sm border-0" id="cardRekapOperasional">
      <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-clock-history me-1 text-primary"></i>Operasional 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="#collapseRekapOperasional" aria-expanded="true" title="Sembunyikan / Tampilkan Rekap">
          <i class="bi bi-chevron-down" id="iconCollapseRekapOps"></i>
        </button>
      </div>
      <div class="collapse show" id="collapseRekapOperasional">
        <div class="card-body p-0">
          <table class="table table-sm mb-0" id="tbl-rekap-ops">
            <tbody id="tbody-rekap-ops">
              <tr><td class="text-center text-muted py-3 small">Memuat data...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>

  <!-- ══════════════ PANEL KANAN – TABEL & 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="btnToggleFormPanelOps" title="Sembunyikan / Tampilkan Panel Form Kiri">
            <i class="bi bi-layout-sidebar-inset me-1" id="iconTogglePanelOps"></i>
            <span id="textTogglePanelOps">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;">
          <i class="bi bi-gear me-1"></i> Kelola Dapur
        </a>
      </div>
    </div>

    <!-- Validator 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 menyetujui / memvalidasi pengeluaran</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">
        <input type="text" id="nama-validator" class="form-control form-control-sm"
               placeholder="Nama validator / bendahara (wajib diisi sebelum validasi)" style="max-width:300px">
        <small class="text-muted">Nama ini akan tercatat pada dokumen operasional 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-ops-bar" style="display:none!important;">
        <button type="button" class="btn btn-sm fw-bold text-white"
                id="btn-kirim-notif-validasi-ops"
                onclick="kirimNotifValidasiOpsWA()"
                title="Kirim rekap validasi operasional 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-ops-count">0</span>
        </button>
        <small class="text-muted fst-italic" id="notif-validasi-ops-hint"></small>
      </div>
    </div>

    <!-- Summary Stat Pills -->
    <div class="summary-bar" id="summary-bar">
      <div class="stat-pill total"><i class="bi bi-receipt"></i> <span id="s-total">0</span> pengajuan</div>
      <div class="stat-pill diajukan"><i class="bi bi-hourglass-split"></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-valid">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, '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="loadOperasional()" style="max-width:140px">
      <input type="date" id="fil-sampai" class="form-control" placeholder="Sampai" onchange="loadOperasional()" style="max-width:140px">
      <select id="fil-kategori" class="form-select" onchange="loadOperasional()" style="max-width:170px">
        <option value="">Semua Kategori</option>
        {% for k in kategori_ops %}
        <option value="{{ k }}">{{ k }}</option>
        {% endfor %}
      </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="exportOperasionalExcel()" title="Export Data Operasional 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 yang belum divalidasi (belum selesai)">
        <input type="checkbox" id="chk-hide-valid-ops" onchange="loadOperasional()" 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 Daftar Pengajuan Operasional -->
    <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 Pengajuan Biaya Operasional</span>
        <span class="badge bg-secondary small" id="jumlah-badge">0 data</span>
      </div>
      <div class="table-responsive">
        <table class="table tbl-ops mb-0">
          <thead>
            <tr>
              <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>Keperluan</th>
              <th class="text-center" style="min-width:90px">✓ Valid</th>
              <th class="text-end" style="min-width:80px">Aksi</th>
            </tr>
          </thead>
          <tbody id="tbody-ops">
            <tr><td colspan="9" class="text-center text-muted py-4"><i class="bi bi-inbox fs-3 d-block"></i>Memuat data...</td></tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>
</div>

<!-- ── MODAL EDIT OPERASIONAL ── -->
<div class="modal fade" id="modalEditOps" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title mb-0">Edit Pengajuan Operasional</h6>
        <button type="button" class="btn-close 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</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</label>
            <select id="edit-kategori" class="form-select form-select-sm">
              {% for k in kategori_ops %}
              <option value="{{ k }}">{{ k }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Nama Penerima</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">Keperluan</label>
          <textarea id="edit-keperluan" class="form-control form-control-sm" rows="2"></textarea>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Nominal (Rp)</label>
          <input type="number" id="edit-nominal" class="form-control form-control-sm" min="0">
        </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" onclick="simpanEditOps()">
          <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 backend
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 currentOpsData  = [];

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

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 salinPenerimaOps(btn, encodedNama, encodedNorek) {
  const nama = decodeURIComponent(encodedNama || '');
  const norek = decodeURIComponent(encodedNorek || '');
  const text = norek ? norek : nama;
  salinTeksDenganEfek(text, btn, 'Penerima Dana');
}

function salinKeperluanOps(btn, encodedKep) {
  const kep = decodeURIComponent(encodedKep || '');
  salinTeksDenganEfek(kep, btn, 'Keperluan');
}

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';
}

// ── 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();

  if (dapurId) {
    const selDapur = document.getElementById('f-dapur');
    if (selDapur) selDapur.value = dapurId;
  }
  loadOperasional();
}

// ── Dropdown Dapur & Pemasok ──
function populateDropdowns() {
  // Dapur
  let dOpts = '<option value="">-- Dapur Default / Umum --</option>';
  DAPUR_DATA.forEach(d => {
    dOpts += `<option value="${d.id}">${d.nama} ${d.kode ? `(${d.kode})` : ''}</option>`;
  });
  const fDapur = document.getElementById('f-dapur');
  const editDapur = document.getElementById('edit-dapur');
  fDapur.innerHTML = dOpts;
  editDapur.innerHTML = dOpts;
  if (USER_ROLE === 'admin_dapur' && USER_DAPUR_ID) {
    fDapur.value = USER_DAPUR_ID;
    fDapur.disabled = true;
    editDapur.value = USER_DAPUR_ID;
    editDapur.disabled = true;
  } else if (DAPUR_DATA.length > 0) {
    fDapur.value = DAPUR_DATA[0].id;
  }

  // Pemasok Otomatis
  const opsList   = PEMASOK_DATA.filter(p => p.tipe === 'OPERASIONAL' || p.tipe === 'SEMUA');
  const bahanList = PEMASOK_DATA.filter(p => p.tipe === 'BAHAN' || (!p.tipe && p.tipe !== 'OPERASIONAL' && p.tipe !== 'SEMUA'));

  let pOpts = '<option value="">-- Pilih Rekanan Pemasok (Otomatis) --</option><option value="manual">✍️ Input Manual Penerima Baru</option>';
  if (opsList.length > 0) {
    pOpts += '<optgroup label="⚡ Rekanan Biaya Operasional">';
    opsList.forEach(p => {
      pOpts += `<option value="${p.id}">${p.nama} – ${p.bank} (${p.no_rekening})</option>`;
    });
    pOpts += '</optgroup>';
  }
  if (bahanList.length > 0) {
    pOpts += '<optgroup label="🛒 Rekanan Bahan Lainnya">';
    bahanList.forEach(p => {
      pOpts += `<option value="${p.id}">${p.nama} – ${p.bank} (${p.no_rekening})</option>`;
    });
    pOpts += '</optgroup>';
  }
  document.getElementById('f-pemasok-select').innerHTML = pOpts;

  $('#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;

    // Auto pilih kategori jika ada kecocokan
    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 ──
function hitungFeeDanTransfer() {
  const nominal = parseFloat(document.getElementById('f-nominal').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 & Mode Validator ──
function setFilter(el, status) {
  filterStatus = status;
  document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
  el.classList.add('active');
  loadOperasional();
}

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

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.', 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> Nonaktifkan Mode';
    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');
  }
  loadOperasional();
}

// ── Load & Render Data Operasional ──
async function loadOperasional() {
  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 hideVEl = document.getElementById('chk-hide-valid-ops');
  const hideV   = hideVEl ? hideVEl.checked : false;

  if (hideVEl) {
    localStorage.setItem('sppg_hide_valid_ops', hideV ? 'true' : 'false');
  }

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

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

  // Wajib tampilkan yang belum divalidasi, otomatis sembunyikan yang sudah divalidasi (jika diaktifkan)
  if (hideV) {
    data = data.filter(d => d.status !== 'divalidasi');
  }

  currentOpsData = data;
  renderTabelOps(data);
  updateSummaryOps(data);
  renderRekapHariIni(data);
}

function renderTabelOps(data) {
  const tbody = document.getElementById('tbody-ops');
  document.getElementById('jumlah-badge').textContent = data.length + ' data';

  if (!data.length) {
    tbody.innerHTML = `<tr><td colspan="9"><div class="empty-state">
      <i class="bi bi-inbox"></i>Tidak ada pengajuan operasional 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 subtotalNominal = items.reduce((acc, curr) => acc + (curr.nominal || 0), 0);
    const subtotalTransfer = items.reduce((acc, curr) => acc + (curr.total_transfer || 0), 0);
    const countVal = items.filter(x => x.status === 'divalidasi').length;

    // Header baris kelompok tanggal
    htmlRows += `
      <tr class="tr-date-group">
        <td colspan="3">
          <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} Pengajuan</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(subtotalNominal)}</td>
        <td></td>
        <td class="text-end fw-bold text-primary" style="font-size:0.82rem;">${fmt(subtotalTransfer)}</td>
        <td colspan="3" 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 isVal = d.status === 'divalidasi';
      const rowClass = isVal ? 'row-divalidasi' : 'row-diajukan';
      const bk = d.bank_penerima || '';
      const bankBadge = `<span class="bank-tag ${bankClass(bk)}">${bk.toUpperCase()}</span>`;
      
      const statusBadge = isVal
        ? `<span class="badge-valid"><i class="bi bi-check2-circle me-1"></i>Disetujui</span>`
        : `<span class="badge-diajukan"><i class="bi bi-hourglass-split me-1"></i>Diajukan</span>`;

      const cbChecked  = isVal ? 'checked' : '';
      const cbDisabled = !modeValidator ? 'disabled' : '';

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

      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 class="fw-bold" style="color:${transferColor};">${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>`;

      const validInfo = isVal
        ? `<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>` : '';

      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>` : '';

      const dapurBadge = d.dapur ? `<span class="dapur-badge mb-1"><i class="bi bi-buildings"></i> ${d.dapur.nama}</span>` : '';

      htmlRows += `<tr class="${rowClass}">
        <td style="white-space:nowrap">
          <div class="fw-bold font-monospace small text-primary">${d.nomor}</div>
          <div class="small text-muted" style="font-size:.72rem;">${fmtTgl(d.tanggal)}</div>
          ${jamPengajuan}
        </td>
        <td>
          ${dapurBadge}
          <div><span class="badge" style="background:#8b5cf6; color:#fff; font-size:0.72rem;">${d.kategori}</span></div>
        </td>
        <td>
          <div class="d-flex align-items-center justify-content-between gap-1">
            <div class="fw-semibold small text-truncate" style="max-width:170px;" title="${d.nama_penerima}">${d.nama_penerima}</div>
            <button type="button" class="btn-copy-mini flex-shrink-0"
                    onclick="salinPenerimaOps(this, '${encodeURIComponent(d.nama_penerima)}', '${encodeURIComponent(d.no_rekening_penerima || '')}')"
                    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 small text-muted">${d.no_rekening_penerima}</span></div>
        </td>
        <td class="text-end fw-semibold text-secondary">${fmt(d.nominal)}</td>
        <td class="text-center">${admBadge}</td>
        <td class="text-end">${transferVal}</td>
        <td class="small text-secondary" style="max-width:210px;">
          <div class="d-flex align-items-start justify-content-between gap-1">
            <span class="text-break">${d.keperluan}</span>
            <button type="button" class="btn-copy-mini flex-shrink-0"
                    onclick="salinKeperluanOps(this, '${encodeURIComponent(d.keperluan)}')"
                    title="Salin Keperluan">
              <i class="bi bi-clipboard"></i>
            </button>
          </div>
        </td>
        <td class="text-center">
          <input type="checkbox" class="cb-validasi" ${cbChecked} ${cbDisabled}
                 onchange="toggleStatusOps(${d.id}, this)" title="Centang = setujui/validasi">
          ${validInfo}
        </td>
        <td class="text-end">
          <button class="btn-act edit" onclick="bukaEditOps(${d.id})" title="Edit" ${isVal ? 'disabled style="opacity:0.4;"' : ''}>
            <i class="bi bi-pencil"></i>
          </button>
          <button class="btn-act del" onclick="hapusOps(${d.id})" title="Hapus" ${isVal ? 'disabled style="opacity:0.4;"' : ''}>
            <i class="bi bi-trash"></i>
          </button>
        </td>
      </tr>`;
    });
  });

  tbody.innerHTML = htmlRows;
}

function updateSummaryOps(data) {
  const diajukan = data.filter(d => d.status !== 'divalidasi').length;
  const valid    = data.filter(d => d.status === 'divalidasi').length;
  const totalTf  = data.reduce((s,d) => s + d.total_transfer, 0);
  const totalAdm = data.reduce((s,d) => s + d.biaya_admin, 0);

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

  const rupiahEl = document.getElementById('s-rupiah');
  if (totalAdm > 0) {
    rupiahEl.innerHTML = `${fmt(totalTf)} <small style="font-size:0.75rem;opacity:0.8;">(-${fmt(totalAdm)} adm)</small>`;
  } else {
    rupiahEl.textContent = fmt(totalTf);
  }

  // Tampilkan/sembunyikan tombol Kirim Notifikasi Validasi WA
  const notifBar   = document.getElementById('notif-validasi-ops-bar');
  const badgeCount = document.getElementById('badge-validasi-ops-count');
  const hintEl     = document.getElementById('notif-validasi-ops-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} operasional disetujui — siap kirim rekap ke WA`;
  } else if (notifBar) {
    notifBar.style.setProperty('display', 'none', 'important');
  }
}

// Export Excel Operasional via SheetJS
function exportOperasionalExcel() {
  if (!currentOpsData || currentOpsData.length === 0) {
    Swal.fire({icon: 'info', title: 'Info', text: 'Tidak ada data operasional untuk diexport'});
    return;
  }

  const exportRows = currentOpsData.map((d, idx) => ({
    'No': idx + 1,
    'Nomor': d.nomor || '-',
    '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': d.nama_penerima || '-',
    'Bank': (d.bank_penerima || '').toUpperCase(),
    'No Rekening': d.no_rekening_penerima || '-',
    'Nominal Belanja (Rp)': d.nominal || 0,
    'Biaya Admin (Rp)': d.biaya_admin || 0,
    'Total Transfer (Rp)': d.total_transfer || 0,
    'Keperluan': d.keperluan || '-',
    'Status': d.status === 'divalidasi' ? 'Disetujui' : 'Diajukan',
    '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, "Pengajuan Operasional");

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

function renderRekapHariIni(data) {
  const todayList = data.filter(d => d.tanggal === TODAY);
  const totalHariIni = todayList.reduce((s,d) => s + d.total_transfer, 0);
  document.getElementById('rekap-total-hari-ini').textContent = fmt(totalHariIni);

  const tbody = document.getElementById('tbody-rekap-ops');
  if (!todayList.length) {
    tbody.innerHTML = `<tr><td class="text-center text-muted py-2 small">Belum ada pengajuan hari ini.</td></tr>`;
    return;
  }
  tbody.innerHTML = todayList.map(d => {
    return `<tr>
      <td class="py-1 px-2">
        <div class="small fw-semibold text-truncate" style="max-width:200px;">${d.keperluan}</div>
        <div class="text-muted" style="font-size:0.7rem;">${d.kategori} &bull; ${d.nama_penerima}</div>
      </td>
      <td class="text-end py-1 px-2 fw-bold small text-primary align-middle">${fmt(d.total_transfer)}</td>
    </tr>`;
  }).join('');
}

// ── Simpan Pengajuan Baru ──
async function simpanOperasional() {
  const did       = document.getElementById('f-dapur').value;
  const nomor     = document.getElementById('f-nomor').value.trim();
  const tgl       = document.getElementById('f-tanggal').value;
  const kategori  = document.getElementById('f-kategori').value;
  const pSelect   = $('#f-pemasok-select').val();
  const penerima  = document.getElementById('f-penerima-nama').value.trim();
  const bank      = document.getElementById('f-penerima-bank').value.trim();
  const norek     = document.getElementById('f-penerima-norek').value.trim();
  const keperluan = document.getElementById('f-keperluan').value.trim();
  const nominal   = parseFloat(document.getElementById('f-nominal').value) || 0;

  if (!penerima || !bank || !norek || !keperluan || !nominal) {
    Swal.fire({icon: 'warning', title: 'Lengkapi Data', text: 'Penerima, Bank, No Rekening, Keperluan, dan Nominal wajib diisi!', confirmButtonColor: '#1F4E79'});
    return;
  }

  const payload = {
    dapur_id: did ? parseInt(did) : null,
    pemasok_id: (pSelect && pSelect !== 'manual') ? parseInt(pSelect) : null,
    nomor: nomor,
    tanggal: tgl,
    kategori: kategori,
    nama_penerima: penerima,
    bank_penerima: bank,
    no_rekening_penerima: norek,
    keperluan: keperluan,
    nominal: nominal
  };

  try {
    const resp = await fetch('/api/operasional', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload)
    });
    if (!resp.ok) throw new Error('Gagal menyimpan pengajuan');

    // Reset Form
    $('#f-pemasok-select').val('').trigger('change');
    document.getElementById('f-penerima-nama').value = '';
    document.getElementById('f-penerima-bank').value = '';
    document.getElementById('f-penerima-norek').value = '';
    document.getElementById('f-keperluan').value = '';
    document.getElementById('f-nominal').value = '';
    hitungFeeDanTransfer();

    // Refresh nomor saran
    fetch('/api/operasional').then(r => r.json()).then(() => {
      loadOperasional();
    });

    Swal.fire({icon: 'success', title: 'Berhasil Diajukan!', timer: 1400, showConfirmButton: false});
  } catch(e) {
    Swal.fire({icon: 'error', title: 'Gagal', text: e.message});
  }
}

// ── Kirim Notifikasi Rekap Validasi WA (Operasional) ──
async function kirimNotifValidasiOpsWA() {
  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 Operasional WA',
    html: `Kirim notifikasi konsolidasi operasional yang telah disetujui 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-ops');
  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 Status (Checkbox) ──
async function toggleStatusOps(id, cb) {
  if (!modeValidator) {
    cb.checked = !cb.checked;
    Swal.fire({icon:'info', title:'Mode Validator', text:'Aktifkan mode validator terlebih dahulu.', 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.', confirmButtonColor:'#1F4E79'});
    return;
  }

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

// ── Edit & Hapus ──
async function bukaEditOps(id) {
  const resp = await fetch('/api/operasional');
  const all = await resp.json();
  const d = all.find(x => x.id === id);
  if (!d) return;

  document.getElementById('edit-id').value        = d.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-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-keperluan').value = d.keperluan;
  document.getElementById('edit-nominal').value   = d.nominal;
  modalEditOps.show();
}

async function simpanEditOps() {
  const id        = document.getElementById('edit-id').value;
  const did       = document.getElementById('edit-dapur').value;
  const tgl       = document.getElementById('edit-tanggal').value;
  const kategori  = document.getElementById('edit-kategori').value;
  const penerima  = document.getElementById('edit-penerima').value.trim();
  const bank      = document.getElementById('edit-bank').value.trim();
  const norek     = document.getElementById('edit-norek').value.trim();
  const keperluan = document.getElementById('edit-keperluan').value.trim();
  const nominal   = parseFloat(document.getElementById('edit-nominal').value) || 0;

  const payload = {
    dapur_id: did ? parseInt(did) : null,
    tanggal: tgl,
    kategori: kategori,
    nama_penerima: penerima,
    bank_penerima: bank,
    no_rekening_penerima: norek,
    keperluan: keperluan,
    nominal: nominal
  };

  const resp = await fetch(`/api/operasional/${id}`, {
    method: 'PUT',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(payload)
  });
  if (resp.ok) {
    modalEditOps.hide();
    loadOperasional();
    Swal.fire({icon: 'success', title: 'Tersimpan!', timer: 1200, showConfirmButton: false});
  }
}

async function hapusOps(id) {
  const res = await Swal.fire({
    title: 'Hapus pengajuan ini?',
    text: 'Data yang terhapus tidak dapat dikembalikan.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    confirmButtonText: 'Ya, Hapus',
    cancelButtonText: 'Batal'
  });
  if (!res.isConfirmed) return;

  const resp = await fetch(`/api/operasional/${id}`, {method: 'DELETE'});
  if (resp.ok) {
    loadOperasional();
    Swal.fire({icon: 'success', title: 'Terhapus', timer: 1200, showConfirmButton: false});
  }
}

// ── Init ──
$(document).ready(function() {
  populateDropdowns();
  renderDapurTabs();

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

  loadOperasional();

  // Setup Toggle Panel Kiri (Slidebar Form Operasional)
  const splitLayout = document.querySelector('.split-layout');
  const btnToggleForm = document.getElementById('btnToggleFormPanelOps');
  const btnHideSlidebar = document.getElementById('btnHideSlidebarOps');
  const textToggle = document.getElementById('textTogglePanelOps');
  const iconToggle = document.getElementById('iconTogglePanelOps');

  function updateSlidebarUIOps(isHidden) {
    if (isHidden) {
      splitLayout.classList.add('form-hidden');
      if (textToggle) textToggle.textContent = 'Buka Form Operasional';
      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_ops_form_hidden', isHidden);
  }

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

  if (localStorage.getItem('sppg_ops_form_hidden') === 'true') {
    updateSlidebarUIOps(true);
  }

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

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

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

  // Restore individual card collapse
  if (localStorage.getItem('sppg_ops_form_collapsed') === 'true') {
    $('#collapseFormOperasional').collapse('hide');
  }
  if (localStorage.getItem('sppg_ops_rekap_collapsed') === 'true') {
    $('#collapseRekapOperasional').collapse('hide');
  }
});
</script>
{% endblock %}