{% extends "base.html" %}
{% block title %}Analisa Saldo VA & Arus Kas – SPPG{% endblock %}
{% block page_title %}Analisa Saldo Virtual Account & Cash Runway{% endblock %}

{% block extra_css %}
<style>
  /* ── Gaya Khusus Analisa Saldo VA ── */
  :root {
    --va-primary: #1F4E79;
    --va-primary-light: #2E75B6;
    --va-success: #059669;
    --va-warning: #D97706;
    --va-danger: #DC2626;
  }

  .va-wrapper {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  }

  /* KPI Grid */
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
  }
  .kpi-stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .kpi-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  }
  .kpi-stat-card .kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin-bottom: 0.35rem;
  }
  .kpi-stat-card .kpi-val {
    font-size: 1.45rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
    font-family: 'Consolas', 'Roboto Mono', monospace;
  }
  .kpi-stat-card .kpi-sub {
    font-size: 0.72rem;
    margin-top: 0.35rem;
    color: #94a3b8;
  }
  .kpi-stat-card .kpi-bg-icon {
    position: absolute;
    right: 0.85rem;
    bottom: 0.65rem;
    font-size: 2.8rem;
    opacity: 0.08;
    pointer-events: none;
  }

  /* Dapur Unit Cards Grid */
  .dapur-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
  }
  .dapur-va-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .2s, box-shadow .2s;
  }
  .dapur-va-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }
  .dapur-va-card.status-danger {
    border-left: 5px solid var(--va-danger);
  }
  .dapur-va-card.status-warning {
    border-left: 5px solid var(--va-warning);
  }
  .dapur-va-card.status-success {
    border-left: 5px solid var(--va-success);
  }

  .va-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .status-pill-health {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
  }

  /* Table Custom */
  .tbl-mutasi th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #f8fafc;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
    padding: 0.65rem 0.75rem;
  }
  .tbl-mutasi td {
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
  }
  .tbl-mutasi tr:hover td {
    background: #f8fafc;
  }

  /* Filter Toolbar */
  .filter-panel-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 0.9rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.02);
  }

  @media print {
    .no-print { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
    body { background: #fff !important; }
  }
  .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="va-wrapper">

  <!-- ══════════════ ACTION & FILTER BAR ══════════════ -->
  <div class="filter-panel-card no-print">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
      
      <!-- Kiri: Filter Controls -->
      <div class="d-flex flex-wrap align-items-center gap-2">
        <div class="d-flex align-items-center gap-1">
          <label class="small fw-bold text-muted text-uppercase mb-0" style="font-size:0.7rem;"><i class="bi bi-buildings text-primary me-1"></i>Dapur:</label>
          <select id="fil-dapur" class="form-select form-select-sm" style="min-width: 170px;" onchange="loadAnalisaVA()">
            <option value="">Semua Unit Dapur</option>
            {% for d in dapurs %}
            <option value="{{ d.id }}">{{ d.nama }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="d-flex align-items-center gap-1">
          <label class="small fw-bold text-muted text-uppercase mb-0" style="font-size:0.7rem;"><i class="bi bi-calendar-range me-1 text-primary"></i>Dari:</label>
          <input type="date" id="fil-dari" class="form-control form-control-sm" style="width: 135px;" onchange="loadAnalisaVA()">
        </div>

        <div class="d-flex align-items-center gap-1">
          <label class="small fw-bold text-muted text-uppercase mb-0" style="font-size:0.7rem;">Sampai:</label>
          <input type="date" id="fil-sampai" class="form-control form-control-sm" style="width: 135px;" onchange="loadAnalisaVA()">
        </div>

        <div class="btn-group btn-group-sm ms-1" role="group">
          <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setPresetDate('today')">Hari Ini</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setPresetDate('7days')">7 Hari</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setPresetDate('30days')">30 Hari</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setPresetDate('all')">Semua</button>
        </div>

        <button class="btn btn-sm btn-outline-secondary" onclick="resetFilterVA()" title="Reset Filter">
          <i class="bi bi-arrow-counterclockwise"></i>
        </button>
      </div>

      <!-- Kanan: Tombol Top-Up & Export -->
      <div class="d-flex align-items-center gap-2">
        {% if current_user and current_user.role in ['super_admin', 'validator'] %}
        <button class="btn btn-sm btn-success fw-semibold px-3 shadow-sm" onclick="bukaModalTopup()" title="Tambah / Top-Up Saldo Virtual Account">
          <i class="bi bi-plus-circle-fill me-1"></i> Top-Up Saldo VA
        </button>
        {% endif %}

        <button class="btn btn-sm btn-outline-primary fw-semibold px-3" onclick="exportDataExcel()" title="Export Buku Kas Mutasi VA ke Excel">
          <i class="bi bi-file-earmark-excel me-1"></i> Export Excel
        </button>

        <button class="btn btn-sm btn-outline-secondary px-2" onclick="window.print()" title="Cetak Ringkasan">
          <i class="bi bi-printer"></i>
        </button>
      </div>

    </div>
  </div>

  <!-- ══════════════ ALERT BANNER: SALDO KRITIS / MENIPIS (KONDISIONAL) ══════════════ -->
  <div id="alert-banner-container" class="mb-3 d-none"></div>

  <!-- ══════════════ 6 KARTU KPI UTAMA ══════════════ -->
  <div class="kpi-row">
    
    <!-- Total Saldo VA Aktif -->
    <div class="kpi-stat-card border-start border-4 border-success">
      <div class="kpi-label">Total Saldo VA Tersedia</div>
      <div class="kpi-val text-success" id="kpi-total-saldo">Rp 0</div>
      <div class="kpi-sub" id="kpi-sub-saldo"><i class="bi bi-shield-check text-success me-1"></i>Kas aktif siap pakai</div>
      <i class="bi bi-wallet-fill kpi-bg-icon text-success"></i>
    </div>

    <!-- Terpotong Belanja Pemasok -->
    <div class="kpi-stat-card border-start border-4 border-primary">
      <div class="kpi-label">Potongan Belanja Bahan</div>
      <div class="kpi-val text-primary" id="kpi-total-belanja">Rp 0</div>
      <div class="kpi-sub"><i class="bi bi-cart-check text-primary me-1"></i>Transfer ke pemasok</div>
      <i class="bi bi-basket3-fill kpi-bg-icon text-primary"></i>
    </div>

    <!-- Terpotong Operasional -->
    <div class="kpi-stat-card border-start border-4 border-warning">
      <div class="kpi-label">Potongan Operasional</div>
      <div class="kpi-val text-warning" id="kpi-total-ops">Rp 0</div>
      <div class="kpi-sub"><i class="bi bi-lightning-charge text-warning me-1"></i>Biaya operasional dapur</div>
      <i class="bi bi-cash-stack kpi-bg-icon text-warning"></i>
    </div>

    <!-- Total Pengeluaran Kas (Belanja + Ops) -->
    <div class="kpi-stat-card border-start border-4 border-danger">
      <div class="kpi-label">Total Arus Kas Keluar</div>
      <div class="kpi-val text-danger" id="kpi-total-keluar">Rp 0</div>
      <div class="kpi-sub"><i class="bi bi-graph-down-arrow text-danger me-1"></i>Akumulasi seluruh transfer</div>
      <i class="bi bi-arrow-up-right-circle-fill kpi-bg-icon text-danger"></i>
    </div>

    <!-- Burn Rate Harian -->
    <div class="kpi-stat-card border-start border-4 border-info">
      <div class="kpi-label">Daily Burn Rate (Rata2/Hari)</div>
      <div class="kpi-val text-info" id="kpi-burn-rate">Rp 0</div>
      <div class="kpi-sub"><i class="bi bi-speedometer2 text-info me-1"></i>Laju pengeluaran harian</div>
      <i class="bi bi-fire kpi-bg-icon text-info"></i>
    </div>

    <!-- Cash Runway (Ketahanan Kas) -->
    <div class="kpi-stat-card border-start border-4 border-dark">
      <div class="kpi-label">Cash Runway (Ketahanan Kas)</div>
      <div class="kpi-val text-dark" id="kpi-runway">0 Hari</div>
      <div class="kpi-sub" id="kpi-sub-runway"><i class="bi bi-hourglass-split me-1"></i>Estimasi sisa hari kas bertahan</div>
      <i class="bi bi-clock-history kpi-bg-icon text-dark"></i>
    </div>

  </div>

  <!-- ══════════════ KARTU REAL-TIME SETIAP DAPUR ══════════════ -->
  <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
    <div class="card-header bg-white py-3 border-0 d-flex align-items-center justify-content-between">
      <div>
        <h6 class="fw-bold mb-0 text-dark"><i class="bi bi-grid-fill me-2 text-primary"></i>Kondisi Real-Time & Ketahanan Saldo Kas per Unit Dapur</h6>
        <small class="text-muted">Status kesehatan kas, batas aman operasional, dan rekening virtual account masing-masing dapur</small>
      </div>
      <span class="badge bg-light text-secondary border px-2 py-1" id="badge-total-dapur">3 Unit Dapur</span>
    </div>
    <div class="card-body pt-0">
      <div class="dapur-grid" id="container-dapur-cards">
        <!-- Render dinamis via JS -->
        <div class="col-12 text-center text-muted py-4"><i class="bi bi-hourglass-split me-2"></i>Memuat kondisi kas dapur...</div>
      </div>
    </div>
  </div>

  <!-- ══════════════ VISUALISASI GRAFIK ══════════════ -->
  <div class="row g-3 mb-4">
    
    <!-- Grafik 1: Tren Pengeluaran Harian VA -->
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm h-100" style="border-radius: 12px;">
        <div class="card-header bg-white py-3 border-0 d-flex align-items-center justify-content-between">
          <div>
            <h6 class="fw-bold mb-0 text-dark"><i class="bi bi-graph-up me-2 text-primary"></i>Tren Pengeluaran Harian dari Saldo VA (14 Hari Terakhir)</h6>
            <small class="text-muted">Perbandingan pemotongan kas untuk Belanja Bahan vs Biaya Operasional</small>
          </div>
        </div>
        <div class="card-body">
          <div style="height: 270px; position: relative;">
            <canvas id="chartTrenVA"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- Grafik 2: Komposisi Pengeluaran Kas -->
    <div class="col-lg-4">
      <div class="card border-0 shadow-sm h-100" style="border-radius: 12px;">
        <div class="card-header bg-white py-3 border-0">
          <h6 class="fw-bold mb-0 text-dark"><i class="bi bi-pie-chart-fill me-2 text-primary"></i>Proporsi Alokasi Pengeluaran</h6>
          <small class="text-muted">Distribusi pemakaian dana kas VA</small>
        </div>
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
          <div style="height: 200px; width: 100%; position: relative;">
            <canvas id="chartProporsiVA"></canvas>
          </div>
          <div class="w-100 mt-3 small" id="legend-proporsi-va"></div>
        </div>
      </div>
    </div>

  </div>

  <!-- ══════════════ TABEL MUTASI BUKU KAS VA ══════════════ -->
  <div class="card border-0 shadow-sm" style="border-radius: 12px;">
    <div class="card-header bg-white py-3 border-0 d-flex flex-wrap align-items-center justify-content-between gap-2">
      <div>
        <h6 class="fw-bold mb-0 text-dark"><i class="bi bi-journal-text me-2 text-primary"></i>Buku Kas & Riwayat Mutasi Saldo Virtual Account</h6>
        <small class="text-muted">Catatan kronologis dana masuk (Top-up/Batal Validasi) dan dana keluar (Belanja/Operasional)</small>
      </div>

      <!-- Filter Pencarian Mutasi -->
      <div class="d-flex align-items-center gap-2">
        <select id="fil-mutasi-kategori" class="form-select form-select-sm" style="width: 140px;" onchange="filterTabelMutasi()">
          <option value="">Semua Kategori</option>
          <option value="TOPUP">Top-Up</option>
          <option value="BELANJA">Belanja Bahan</option>
          <option value="OPERASIONAL">Operasional</option>
          <option value="PENYESUAIAN">Penyesuaian</option>
        </select>
        <div class="input-group input-group-sm" style="width: 200px;">
          <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted"></i></span>
          <input type="text" id="fil-mutasi-search" class="form-control form-control-sm border-start-0" placeholder="Cari keterangan / no.ref..." oninput="filterTabelMutasi()">
        </div>
        <button class="btn btn-sm btn-outline-success fw-semibold text-nowrap ms-1" onclick="exportDataExcel()" title="Export Riwayat Mutasi ke Excel (.xlsx)">
          <i class="bi bi-file-earmark-excel me-1"></i> Export Excel
        </button>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table tbl-mutasi mb-0" id="tbl-mutasi-va">
        <thead>
          <tr>
            <th style="width: 45px;" class="text-center">No</th>
            <th style="width: 125px;">Waktu & Tanggal</th>
            <th style="width: 160px;">Unit Dapur</th>
            <th style="width: 90px;" class="text-center">Tipe</th>
            <th style="width: 130px;">Kategori</th>
            <th style="width: 130px;">No. Referensi</th>
            <th>Keterangan Transaksi</th>
            <th class="text-end" style="width: 130px;">Nominal (Rp)</th>
            <th class="text-end" style="width: 130px;">Sisa Saldo</th>
            <th style="width: 120px;">Operator / Validator</th>
          </tr>
        </thead>
        <tbody id="tbody-mutasi-va">
          <tr><td colspan="10" class="text-center text-muted py-4"><i class="bi bi-inbox fs-3 d-block"></i>Memuat riwayat mutasi VA...</td></tr>
        </tbody>
      </table>
    </div>

    <div class="card-footer bg-white py-2 d-flex align-items-center justify-content-between small text-muted">
      <div>Menampilkan <span id="mutasi-count-shown">0</span> dari <span id="mutasi-count-total">0</span> catatan mutasi</div>
      <div class="font-monospace small">Data real-time disinkronkan dengan validasi belanja & operasional</div>
    </div>
  </div>

</div><!-- end va-wrapper -->

<!-- ══════════════ MODAL TOP-UP SALDO VA ══════════════ -->
<div class="modal fade" id="modalTopupVA" tabindex="-1" aria-labelledby="modalTopupVALabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content shadow border-0" style="border-radius: 12px;">
      
      <div class="modal-header text-white" style="background: linear-gradient(135deg, #059669, #10b981);">
        <h6 class="modal-title fw-bold" id="modalTopupVALabel">
          <i class="bi bi-wallet-fill me-2"></i>Top-Up / Tambah Saldo Virtual Account
        </h6>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body p-3">
        <form id="formTopupVA" onsubmit="submitTopupVA(event)">
          
          <div class="mb-3">
            <label class="form-label small fw-bold text-muted">Unit Dapur Tujuan</label>
            <select id="topup-dapur-id" class="form-select form-select-sm" required onchange="updateInfoDapurTopup()">
              <option value="">-- Pilih Dapur --</option>
              {% for d in dapurs %}
              <option value="{{ d.id }}" data-saldo="{{ d.saldo_va or 0 }}" data-va="{{ d.nomor_va or '' }}" data-bank="{{ d.bank_va or 'BRI' }}">
                {{ d.nama }} (Saldo Saat Ini: Rp {{ '{:,.0f}'.format(d.saldo_va or 0) }})
              </option>
              {% endfor %}
            </select>
          </div>

          <!-- Alert ringkas kondisi dapur saat ini -->
          <div id="topup-info-box" class="p-2 mb-3 bg-light rounded-3 small border d-none">
            <div class="d-flex justify-content-between align-items-center">
              <span class="text-muted">Nomor Rekening VA:</span>
              <span class="fw-bold font-monospace text-dark" id="topup-info-norek">-</span>
            </div>
            <div class="d-flex justify-content-between align-items-center mt-1">
              <span class="text-muted">Saldo Saat Ini:</span>
              <span class="fw-bold text-success font-monospace" id="topup-info-saldo">Rp 0</span>
            </div>
          </div>

          <div class="row g-2 mb-3">
            <div class="col-7">
              <label class="form-label small fw-bold text-muted">Nominal Top-Up (Rp)</label>
              <input type="number" id="topup-nominal" class="form-control form-control-sm font-monospace fw-bold" min="1000" step="1000" placeholder="Contoh: 10000000" required oninput="previewNominalTopup()">
              <small class="text-success fw-semibold font-monospace" id="topup-preview-fmt" style="font-size:0.75rem;"></small>
            </div>
            <div class="col-5">
              <label class="form-label small fw-bold text-muted">Tanggal Setoran</label>
              <input type="date" id="topup-tanggal" class="form-control form-control-sm" value="{{ today_iso }}" required>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label small fw-bold text-muted">No. Referensi Transfer / Bank</label>
            <input type="text" id="topup-ref" class="form-control form-control-sm font-monospace" placeholder="Misal: TRF-BRI-20261022-001">
            <small class="text-muted" style="font-size:0.7rem;">Nomor bukti transfer bank atau referensi setoran yayasan</small>
          </div>

          <div class="mb-3">
            <label class="form-label small fw-bold text-muted">Catatan / Keterangan</label>
            <textarea id="topup-keterangan" class="form-control form-control-sm" rows="2" placeholder="Catatan tambahan (misal: Setoran drop kas operasional minggu ke-3)"></textarea>
          </div>

          <div class="d-flex justify-content-end gap-2 pt-2 border-top">
            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-sm btn-success fw-bold px-3" id="btn-submit-topup">
              <i class="bi bi-check-circle me-1"></i> Simpan Setoran Top-Up
            </button>
          </div>

        </form>
      </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>
let globalAnalisaData = null;
let allMutasiData = [];
let chartTren = null;
let chartProporsi = null;
const modalTopupVA = new bootstrap.Modal(document.getElementById('modalTopupVA'));

// Format Helper
function fmtRp(n) {
  return new Intl.NumberFormat('id-ID', {style:'currency', currency:'IDR', minimumFractionDigits:0}).format(n || 0);
}
function fmtNum(n) {
  return new Intl.NumberFormat('id-ID').format(n || 0);
}

// Salin No Rekening VA
function copyNoVA(nomor, btn) {
  if (!nomor) return;
  navigator.clipboard.writeText(nomor).then(() => {
    if (btn) {
      const orig = btn.innerHTML;
      btn.innerHTML = '<i class="bi bi-check2 text-white me-1"></i><span class="text-white" style="font-size:0.7rem;">Tersalin</span>';
      btn.classList.add('copied');
      setTimeout(() => { 
        btn.innerHTML = orig; 
        btn.classList.remove('copied');
      }, 1500);
    }
  });
}

// Preset Filter Tanggal
function setPresetDate(type) {
  const tglDari = document.getElementById('fil-dari');
  const tglSampai = document.getElementById('fil-sampai');
  const today = new Date();
  
  const toIso = (d) => d.toISOString().split('T')[0];

  if (type === 'today') {
    tglDari.value = toIso(today);
    tglSampai.value = toIso(today);
  } else if (type === '7days') {
    const d7 = new Date();
    d7.setDate(today.getDate() - 7);
    tglDari.value = toIso(d7);
    tglSampai.value = toIso(today);
  } else if (type === '30days') {
    const d30 = new Date();
    d30.setDate(today.getDate() - 30);
    tglDari.value = toIso(d30);
    tglSampai.value = toIso(today);
  } else if (type === 'all') {
    tglDari.value = '';
    tglSampai.value = '';
  }
  loadAnalisaVA();
}

function resetFilterVA() {
  document.getElementById('fil-dapur').value = '';
  document.getElementById('fil-dari').value = '';
  document.getElementById('fil-sampai').value = '';
  loadAnalisaVA();
}

// Load Data Analisa VA via AJAX
async function loadAnalisaVA() {
  const dId = document.getElementById('fil-dapur').value;
  const dari = document.getElementById('fil-dari').value;
  const sampai = document.getElementById('fil-sampai').value;

  const params = new URLSearchParams();
  if (dId) params.append('dapur_id', dId);
  if (dari) params.append('tgl_dari', dari);
  if (sampai) params.append('tgl_sampai', sampai);

  try {
    const res = await fetch(`/api/analisa-va?${params.toString()}`);
    if (!res.ok) throw new Error('Gagal memuat data analisa VA');
    const data = await res.json();
    globalAnalisaData = data;
    allMutasiData = data.mutasi || [];

    renderKPIs(data.summary);
    renderDapurCards(data.dapurs);
    renderCharts(data.tren_harian, data.distribusi_kategori);
    renderAlertBanner(data.dapurs);
    filterTabelMutasi();
  } catch (err) {
    console.error(err);
    Swal.fire({icon: 'error', title: 'Error', text: err.message});
  }
}

// Render KPI Summary
function renderKPIs(s) {
  if (!s) return;
  document.getElementById('kpi-total-saldo').textContent = fmtRp(s.total_saldo_va);
  document.getElementById('kpi-total-belanja').textContent = fmtRp(s.total_belanja);
  document.getElementById('kpi-total-ops').textContent = fmtRp(s.total_operasional);
  document.getElementById('kpi-total-keluar').textContent = fmtRp(s.total_pengeluaran);
  document.getElementById('kpi-burn-rate').textContent = fmtRp(s.burn_rate_harian) + '/hari';
  
  const runwayEl = document.getElementById('kpi-runway');
  const subRunway = document.getElementById('kpi-sub-runway');
  if (s.total_saldo_va <= 0) {
    runwayEl.textContent = '0 Hari (Habis)';
    runwayEl.className = 'kpi-val text-danger';
    subRunway.innerHTML = '<span class="text-danger fw-bold"><i class="bi bi-exclamation-triangle-fill me-1"></i>Kas habis/kritis</span>';
  } else if (s.runway_hari < 3) {
    runwayEl.textContent = `${s.runway_hari} Hari`;
    runwayEl.className = 'kpi-val text-warning';
    subRunway.innerHTML = '<span class="text-warning fw-bold"><i class="bi bi-exclamation-circle-fill me-1"></i>Kas menipis (< 3 hari)</span>';
  } else {
    runwayEl.textContent = `${s.runway_hari} Hari`;
    runwayEl.className = 'kpi-val text-success';
    subRunway.innerHTML = '<span class="text-success fw-bold"><i class="bi bi-check-circle-fill me-1"></i>Kondisi kas aman</span>';
  }

  document.getElementById('badge-total-dapur').textContent = `${s.jumlah_dapur} Unit Dapur`;
}

// Render Kartu Dapur Real-Time
function renderDapurCards(dapurs) {
  const container = document.getElementById('container-dapur-cards');
  if (!dapurs || dapurs.length === 0) {
    container.innerHTML = '<div class="col-12 text-center text-muted py-4">Tidak ada data unit dapur</div>';
    return;
  }

  let html = '';
  dapurs.forEach(d => {
    const isDanger = d.health_status === 'KRITIS';
    const isWarn = d.health_status === 'WASPADA';
    const borderClass = isDanger ? 'status-danger' : (isWarn ? 'status-warning' : 'status-success');
    const badgeBg = isDanger ? 'bg-danger text-white' : (isWarn ? 'bg-warning text-dark' : 'bg-success text-white');
    const saldoColor = isDanger ? '#dc2626' : (isWarn ? '#d97706' : '#059669');

    const norekBtn = d.nomor_va ? `
      <div class="d-flex align-items-center justify-content-between bg-light p-2 rounded-2 mt-2">
        <div>
          <span class="badge bg-secondary-subtle text-secondary me-1" style="font-size:0.65rem;">${d.bank_va}</span>
          <span class="font-monospace small fw-bold text-dark">${d.nomor_va}</span>
        </div>
        <button type="button" class="btn-copy-mini py-0 px-2" style="font-size:0.7rem;" onclick="copyNoVA('${d.nomor_va}', this)">
          <i class="bi bi-clipboard"></i> Salin
        </button>
      </div>` : '<div class="small text-muted fst-italic mt-1">Nomor VA belum diatur</div>';

    html += `
      <div class="dapur-va-card ${borderClass}">
        <div>
          <div class="d-flex align-items-start justify-content-between mb-2">
            <div>
              <span class="badge bg-primary-subtle text-primary font-monospace mb-1">${d.kode}</span>
              <h6 class="fw-bold text-dark mb-0">${d.nama}</h6>
            </div>
            <span class="status-pill-health ${badgeBg}">${d.health_status}</span>
          </div>

          <div class="mt-3">
            <small class="text-muted text-uppercase fw-semibold" style="font-size:0.68rem; letter-spacing:.05em;">Sisa Saldo VA Saat Ini</small>
            <div class="fw-bold font-monospace" style="font-size:1.5rem; color:${saldoColor}; line-height:1.2;">
              ${fmtRp(d.saldo_va)}
            </div>
          </div>

          ${norekBtn}

          <div class="mt-3 pt-2 border-top">
            <div class="d-flex justify-content-between small text-muted mb-1">
              <span>Laju Pengeluaran:</span>
              <span class="fw-semibold font-monospace text-dark">${fmtRp(d.burn_rate_harian)}/hari</span>
            </div>
            <div class="d-flex justify-content-between small text-muted mb-1">
              <span>Estimasi Ketahanan Kas:</span>
              <span class="fw-bold font-monospace ${isDanger?'text-danger':(isWarn?'text-warning':'text-success')}">${d.runway_hari} Hari</span>
            </div>
            <div class="d-flex justify-content-between small text-muted mb-1">
              <span>Pengeluaran Belanja:</span>
              <span class="fw-semibold text-primary font-monospace">${fmtRp(d.total_belanja)}</span>
            </div>
            <div class="d-flex justify-content-between small text-muted">
              <span>Pengeluaran Operasional:</span>
              <span class="fw-semibold text-warning font-monospace">${fmtRp(d.total_operasional)}</span>
            </div>
            ${d.pending_pengeluaran > 0 ? `
            <div class="d-flex justify-content-between small text-danger mt-1 pt-1 border-top border-dashed">
              <span><i class="bi bi-hourglass-split me-1"></i>Pending Validasi:</span>
              <span class="fw-bold font-monospace">${fmtRp(d.pending_pengeluaran)}</span>
            </div>` : ''}
          </div>
        </div>

        <div class="d-flex gap-2 mt-3 pt-2 border-top">
          <button type="button" class="btn btn-xs btn-outline-success flex-fill py-1 fw-semibold" style="font-size:0.75rem;" onclick="bukaModalTopup(${d.id})">
            <i class="bi bi-plus-circle me-1"></i> Top-Up
          </button>
          <button type="button" class="btn btn-xs btn-outline-primary flex-fill py-1 fw-semibold" style="font-size:0.75rem;" onclick="filterMutasiDapur(${d.id})">
            <i class="bi bi-list-check me-1"></i> Mutasi
          </button>
        </div>
      </div>
    `;
  });

  container.innerHTML = html;
}

// Render Alert Banner Jika Ada Dapur Kritis
function renderAlertBanner(dapurs) {
  const container = document.getElementById('alert-banner-container');
  const kritis = dapurs.filter(d => d.health_status === 'KRITIS');
  const waspada = dapurs.filter(d => d.health_status === 'WASPADA');

  if (kritis.length === 0 && waspada.length === 0) {
    container.className = 'mb-3 d-none';
    container.innerHTML = '';
    return;
  }

  let msg = '';
  if (kritis.length > 0) {
    const names = kritis.map(k => `<strong>${k.nama}</strong> (Saldo: ${fmtRp(k.saldo_va)})`).join(', ');
    msg += `<div class="alert alert-danger d-flex align-items-center justify-content-between p-2 px-3 mb-2 shadow-sm rounded-3">
      <div><i class="bi bi-exclamation-octagon-fill fs-5 me-2"></i><strong>PERINGATAN SALDO KRITIS:</strong> Saldo VA habis/minus pada ${names}. Segera lakukan Top-Up dana!</div>
      <button class="btn btn-sm btn-danger fw-bold ms-3" onclick="bukaModalTopup(${kritis[0].id})">Top-Up Sekarang</button>
    </div>`;
  }
  if (waspada.length > 0) {
    const names = waspada.map(w => `<strong>${w.nama}</strong> (${w.runway_hari} hari lagi)`).join(', ');
    msg += `<div class="alert alert-warning d-flex align-items-center justify-content-between p-2 px-3 mb-0 shadow-sm rounded-3">
      <div><i class="bi bi-exclamation-triangle-fill fs-5 me-2"></i><strong>PERINGATAN SALDO MENIPIS:</strong> Saldo kas akan bertahan kurang dari 3 hari pada ${names}.</div>
      <button class="btn btn-sm btn-outline-warning text-dark fw-bold ms-3" onclick="bukaModalTopup(${waspada[0].id})">Top-Up</button>
    </div>`;
  }

  container.className = 'mb-3';
  container.innerHTML = msg;
}

// Render Grafik Tren Harian & Proporsi
function renderCharts(trenHarian, distribusi) {
  // 1. Chart Tren Harian (Stacked Bar)
  const ctxTren = document.getElementById('chartTrenVA');
  if (ctxTren) {
    const labels = (trenHarian || []).map(t => t.label);
    const dataBelanja = (trenHarian || []).map(t => t.belanja);
    const dataOps = (trenHarian || []).map(t => t.operasional);

    if (chartTren) chartTren.destroy();

    chartTren = new Chart(ctxTren, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [
          {
            label: 'Belanja Bahan',
            data: dataBelanja,
            backgroundColor: '#1F4E79',
            borderRadius: 4
          },
          {
            label: 'Biaya Operasional',
            data: dataOps,
            backgroundColor: '#F59E0B',
            borderRadius: 4
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { position: 'top', labels: { boxWidth: 12, font: { size: 11 } } },
          tooltip: {
            callbacks: {
              label: (ctx) => ` ${ctx.dataset.label}: ${fmtRp(ctx.raw)}`
            }
          }
        },
        scales: {
          x: { stacked: true, grid: { display: false } },
          y: {
            stacked: true,
            ticks: {
              callback: (val) => val >= 1000000 ? (val/1000000) + ' Jt' : val
            }
          }
        }
      }
    });
  }

  // 2. Chart Proporsi Kategori (Doughnut)
  const ctxProp = document.getElementById('chartProporsiVA');
  if (ctxProp) {
    const topDist = (distribusi || []).slice(0, 6);
    const labels = topDist.map(d => d.kategori);
    const dataVal = topDist.map(d => d.total);
    const colors = ['#1F4E79', '#059669', '#F59E0B', '#8B5CF6', '#EC4899', '#64748B'];

    if (chartProporsi) chartProporsi.destroy();

    chartProporsi = new Chart(ctxProp, {
      type: 'doughnut',
      data: {
        labels: labels,
        datasets: [{
          data: dataVal,
          backgroundColor: colors.slice(0, labels.length),
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: (ctx) => ` ${ctx.label}: ${fmtRp(ctx.raw)} (${topDist[ctx.dataIndex]?.persen || 0}%)`
            }
          }
        },
        cutout: '68%'
      }
    });

    // Custom legend list
    let legHtml = '';
    topDist.forEach((d, idx) => {
      legHtml += `
        <div class="d-flex justify-content-between align-items-center mb-1">
          <div class="d-flex align-items-center gap-1 text-truncate" style="max-width:180px;">
            <span class="rounded-circle" style="width:8px;height:8px;background:${colors[idx]};flex-shrink:0;"></span>
            <span class="text-secondary small">${d.kategori}</span>
          </div>
          <span class="fw-bold font-monospace small text-dark">${d.persen}%</span>
        </div>`;
    });
    document.getElementById('legend-proporsi-va').innerHTML = legHtml;
  }
}

// Filter dan Render Tabel Mutasi VA
function filterTabelMutasi() {
  const kat = document.getElementById('fil-mutasi-kategori').value;
  const q = document.getElementById('fil-mutasi-search').value.toLowerCase().trim();

  let filtered = allMutasiData.filter(m => {
    if (kat && m.kategori !== kat) return false;
    if (q) {
      const matchKet = (m.keterangan || '').toLowerCase().includes(q);
      const matchRef = (m.ref_nomor || '').toLowerCase().includes(q);
      const matchOp  = (m.operator || '').toLowerCase().includes(q);
      const matchDapur = (m.dapur_nama || '').toLowerCase().includes(q);
      if (!matchKet && !matchRef && !matchOp && !matchDapur) return false;
    }
    return true;
  });

  document.getElementById('mutasi-count-shown').textContent = filtered.length;
  document.getElementById('mutasi-count-total').textContent = allMutasiData.length;

  const tbody = document.getElementById('tbody-mutasi-va');
  if (filtered.length === 0) {
    tbody.innerHTML = '<tr><td colspan="10" class="text-center text-muted py-4"><i class="bi bi-inbox fs-4 d-block mb-1"></i>Tidak ada transaksi mutasi sesuai filter</td></tr>';
    return;
  }

  let html = '';
  filtered.forEach((m, idx) => {
    const isMasuk = m.tipe === 'MASUK';
    const badgeTipe = isMasuk
      ? `<span class="badge bg-success-subtle text-success border border-success-subtle"><i class="bi bi-arrow-down-left me-1"></i>MASUK</span>`
      : `<span class="badge bg-danger-subtle text-danger border border-danger-subtle"><i class="bi bi-arrow-up-right me-1"></i>KELUAR</span>`;

    let katBadge = `<span class="badge bg-secondary-subtle text-secondary">${m.kategori}</span>`;
    if (m.kategori === 'TOPUP') katBadge = `<span class="badge bg-success text-white">TOP-UP</span>`;
    else if (m.kategori === 'BELANJA') katBadge = `<span class="badge bg-primary text-white">BELANJA BAHAN</span>`;
    else if (m.kategori === 'OPERASIONAL') katBadge = `<span class="badge bg-warning text-dark">OPERASIONAL</span>`;

    const nomColor = isMasuk ? '#059669' : '#DC2626';
    const nomSign  = isMasuk ? '+' : '-';

    html += `
      <tr>
        <td class="text-center text-muted small">${idx + 1}</td>
        <td>
          <div class="fw-semibold text-dark">${m.tanggal_str}</div>
          <small class="text-muted font-monospace" style="font-size:0.68rem;">${m.waktu_str ? m.waktu_str.split(' ')[1] : ''} WIB</small>
        </td>
        <td>
          <span class="badge bg-light text-dark border"><i class="bi bi-buildings me-1 text-primary"></i>${m.dapur_nama}</span>
        </td>
        <td class="text-center">${badgeTipe}</td>
        <td>${katBadge}</td>
        <td class="font-monospace text-muted small">${m.ref_nomor || '-'}</td>
        <td class="text-dark small">${m.keterangan || '-'}</td>
        <td class="text-end fw-bold font-monospace" style="color:${nomColor};">${nomSign} ${fmtRp(m.nominal)}</td>
        <td class="text-end font-monospace text-muted small">${fmtRp(m.saldo_sesudah)}</td>
        <td class="small text-secondary"><i class="bi bi-person me-1"></i>${m.operator || 'System'}</td>
      </tr>
    `;
  });

  tbody.innerHTML = html;
}

function filterMutasiDapur(dId) {
  document.getElementById('fil-dapur').value = dId;
  loadAnalisaVA();
  document.getElementById('tbl-mutasi-va').scrollIntoView({behavior: 'smooth'});
}

// Buka Modal Top-Up
function bukaModalTopup(dId = null) {
  const form = document.getElementById('formTopupVA');
  form.reset();
  document.getElementById('topup-preview-fmt').textContent = '';
  document.getElementById('topup-tanggal').value = new Date().toISOString().split('T')[0];

  if (dId) {
    document.getElementById('topup-dapur-id').value = dId;
  }
  updateInfoDapurTopup();
  modalTopupVA.show();
}

function updateInfoDapurTopup() {
  const sel = document.getElementById('topup-dapur-id');
  const opt = sel.options[sel.selectedIndex];
  const box = document.getElementById('topup-info-box');

  if (!sel.value || !opt) {
    box.classList.add('d-none');
    return;
  }

  box.classList.remove('d-none');
  const saldo = parseFloat(opt.getAttribute('data-saldo') || '0');
  const va = opt.getAttribute('data-va') || '-';
  const bank = opt.getAttribute('data-bank') || 'BRI';

  document.getElementById('topup-info-norek').textContent = `${bank} - ${va}`;
  document.getElementById('topup-info-saldo').textContent = fmtRp(saldo);
}

function previewNominalTopup() {
  const nom = parseFloat(document.getElementById('topup-nominal').value || '0');
  document.getElementById('topup-preview-fmt').textContent = nom > 0 ? `= ${fmtRp(nom)}` : '';
}

// Submit Top-Up Form
async function submitTopupVA(e) {
  e.preventDefault();
  const dId = document.getElementById('topup-dapur-id').value;
  const nom = parseFloat(document.getElementById('topup-nominal').value || '0');
  const tgl = document.getElementById('topup-tanggal').value;
  const ref = document.getElementById('topup-ref').value;
  const ket = document.getElementById('topup-keterangan').value;

  if (!dId) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Pilih unit dapur tujuan top-up'});
    return;
  }
  if (nom <= 0) {
    Swal.fire({icon: 'warning', title: 'Perhatian', text: 'Nominal top-up harus lebih dari Rp 0'});
    return;
  }

  const result = await Swal.fire({
    title: 'Konfirmasi Top-Up',
    html: `Apakah Anda yakin ingin menambahkan saldo sebesar <strong>${fmtRp(nom)}</strong> ke unit dapur terpilih?`,
    icon: 'question',
    showCancelButton: true,
    confirmButtonText: 'Ya, Top-Up Saldo',
    cancelButtonText: 'Batal',
    confirmButtonColor: '#059669'
  });

  if (!result.isConfirmed) return;

  const btn = document.getElementById('btn-submit-topup');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...';

  try {
    const res = await fetch(`/api/dapur/${dId}/topup-va`, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        nominal: nom,
        tanggal: tgl,
        ref_nomor: ref,
        keterangan: ket
      })
    });

    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Gagal menyimpan top-up');

    modalTopupVA.hide();
    Swal.fire({
      icon: 'success',
      title: 'Top-Up Berhasil!',
      text: data.message,
      timer: 2000,
      showConfirmButton: false
    });

    loadAnalisaVA();
  } catch (err) {
    console.error(err);
    Swal.fire({icon: 'error', title: 'Gagal', text: err.message});
  } finally {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-check-circle me-1"></i> Simpan Setoran Top-Up';
  }
}

// Export Excel via SheetJS
function exportDataExcel() {
  const kat = document.getElementById('fil-mutasi-kategori')?.value;
  const q = document.getElementById('fil-mutasi-search')?.value.toLowerCase().trim();

  let dataExport = allMutasiData || [];
  if (kat || q) {
    dataExport = dataExport.filter(m => {
      if (kat && m.kategori !== kat) return false;
      if (q) {
        const matchKet = (m.keterangan || '').toLowerCase().includes(q);
        const matchRef = (m.ref_nomor || '').toLowerCase().includes(q);
        const matchOp  = (m.operator || '').toLowerCase().includes(q);
        const matchDapur = (m.dapur_nama || '').toLowerCase().includes(q);
        if (!matchKet && !matchRef && !matchOp && !matchDapur) return false;
      }
      return true;
    });
  }

  if (!dataExport || dataExport.length === 0) {
    Swal.fire({icon: 'info', title: 'Info', text: 'Tidak ada data mutasi untuk diexport'});
    return;
  }

  const exportRows = dataExport.map((m, idx) => ({
    'No': idx + 1,
    'Tanggal': m.tanggal_str,
    'Waktu': m.waktu_str,
    'Unit Dapur': m.dapur_nama,
    'Tipe': m.tipe,
    'Kategori': m.kategori,
    'No Referensi': m.ref_nomor,
    'Keterangan': m.keterangan,
    'Nominal (Rp)': m.nominal,
    'Sisa Saldo (Rp)': m.saldo_sesudah,
    'Operator': m.operator
  }));

  const ws = XLSX.utils.json_to_sheet(exportRows);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Mutasi Saldo VA");

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

// Jalankan saat halaman dibuka
document.addEventListener('DOMContentLoaded', () => {
  loadAnalisaVA();
});
</script>
{% endblock %}