{% extends "base.html" %}
{% block title %}Analitik & Monitoring Dapur – SPPG{% endblock %}
{% block page_title %}Business Intelligence & Analitik Monitoring{% endblock %}

{% block extra_css %}
<style>
  .kpi-card {
    border-radius: 12px;
    padding: 1.25rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transition: transform .2s, box-shadow .2s;
  }
  .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }
  .kpi-icon {
    position: absolute;
    right: 1.25rem;
    bottom: 0.75rem;
    font-size: 3.2rem;
    opacity: 0.2;
  }
  .kpi-label {
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: 0.9;
    font-weight: 600;
  }
  .kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    margin: 0.4rem 0;
    white-space: nowrap;
  }
  .kpi-sub {
    font-size: 0.785rem;
    opacity: 0.85;
  }
  .filter-panel {
    background: #fff;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
  }
  .chart-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .chart-card .card-header {
    background: transparent;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
    padding: 0.85rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card .card-body {
    padding: 1.25rem;
    position: relative;
    flex: 1;
  }
  .btn-preset {
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
  }
  .loading-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 12px;
  }
  @media print {
    .sidebar, .topbar, .filter-panel, .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .page-body { padding: 0 !important; }
  }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid p-0">

  <!-- HEADER & CONTROLS -->
  <div class="filter-panel">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
      <div>
        <h5 class="fw-bold mb-1 text-dark">
          <i class="bi bi-graph-up-arrow text-primary me-2"></i>Executive Analytics & Monitoring Dapur
        </h5>
        <small class="text-muted">Pantau tren belanja bahan, biaya operasional, dan serapan anggaran antar unit dapur secara real-time</small>
      </div>
      <div class="d-flex gap-2 flex-wrap no-print">
        <button class="btn btn-outline-danger btn-sm" onclick="bukaModalPagu()">
          <i class="bi bi-bullseye me-1"></i> Atur Pagu
        </button>
        <button class="btn btn-outline-success btn-sm" id="btn-broadcast-analitik" onclick="broadcastRekapDariAnalitik()">
          <i class="bi bi-chat-dots me-1"></i> Broadcast Rekap
        </button>
        <button class="btn btn-outline-secondary btn-sm" onclick="window.print()">
          <i class="bi bi-printer me-1"></i> Cetak Laporan
        </button>
        <button class="btn btn-primary btn-sm" onclick="fetchAnalyticsData()">
          <i class="bi bi-arrow-repeat me-1" id="refresh-icon"></i> Segarkan Data
        </button>
      </div>
    </div>

    <!-- FILTER FORM -->
    <div class="row g-2 align-items-end">
      <!-- Presets -->
      <div class="col-12 mb-1">
        <div class="d-flex gap-1 flex-wrap align-items-center">
          <span class="text-muted small me-2"><i class="bi bi-calendar3 me-1"></i>Periode Cepat:</span>
          <button type="button" class="btn btn-outline-primary btn-preset" onclick="setPreset('today')">Hari Ini</button>
          <button type="button" class="btn btn-outline-primary btn-preset" onclick="setPreset('last7')">7 Hari Terakhir</button>
          <button type="button" class="btn btn-outline-primary btn-preset active" id="btn-preset-month" onclick="setPreset('thisMonth')">Bulan Ini</button>
          <button type="button" class="btn btn-outline-primary btn-preset" onclick="setPreset('lastMonth')">Bulan Lalu</button>
          <button type="button" class="btn btn-outline-primary btn-preset" onclick="setPreset('all')">Sepanjang Masa</button>
        </div>
      </div>

      <!-- Dari Tanggal -->
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1 fw-semibold">Dari Tanggal</label>
        <input type="date" id="filter-dari" class="form-control form-control-sm" value="{{ start_month_iso }}">
      </div>

      <!-- Sampai Tanggal -->
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1 fw-semibold">Sampai Tanggal</label>
        <input type="date" id="filter-sampai" class="form-control form-control-sm" value="{{ today_iso }}">
      </div>

      <!-- Unit Dapur -->
      <div class="col-6 col-md-3">
        <label class="form-label small mb-1 fw-semibold">Unit Dapur</label>
        <select id="filter-dapur" class="form-select form-select-sm" {% if user_role == 'admin_dapur' and user_dapur_id %}disabled title="Terkunci pada dapur Anda"{% endif %}>
          <option value="">-- Semua Unit Dapur --</option>
          {% for d in dapur_list %}
          <option value="{{ d.id }}" {% if user_role == 'admin_dapur' and user_dapur_id == d.id %}selected{% endif %}>{{ d.nama }}</option>
          {% endfor %}
        </select>
      </div>

      <!-- Status Validasi -->
      <div class="col-6 col-md-3">
        <label class="form-label small mb-1 fw-semibold">Status Validasi</label>
        <select id="filter-status" class="form-select form-select-sm">
          <option value="all">Semua Pengajuan</option>
          <option value="validated_only">Hanya yang Sudah Divalidasi</option>
        </select>
      </div>

      <!-- Tombol Terapkan -->
      <div class="col-12 col-md-2">
        <button class="btn btn-primary btn-sm w-100" onclick="fetchAnalyticsData()">
          <i class="bi bi-funnel me-1"></i> Terapkan Filter
        </button>
      </div>
    </div>
  </div>

  <!-- LOADING OVERLAY -->
  <div id="analytics-loading" class="d-none text-center py-5">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="text-muted small mt-2">Menghitung analitik dapur...</div>
  </div>

  <div id="analytics-content">
    <!-- 🎯 EXECUTIVE BUDGET MONITORING (PAGU VS REALISASI) -->
    <div class="card mb-4 border-0" style="border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); background: #fff;">
      <div class="card-body p-3 p-md-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
          <div>
            <span class="badge bg-primary bg-opacity-10 text-primary fw-semibold px-2 py-1 mb-1" style="font-size:0.75rem;">
              <i class="bi bi-shield-check me-1"></i>BUDGETING & VARIANCE CONTROL
            </span>
            <h5 class="fw-bold mb-0 text-dark">
              <i class="bi bi-bullseye text-danger me-2"></i>Monitoring Pagu Anggaran vs Realisasi
              <span id="budget-periode-badge" class="badge bg-light text-secondary border fs-6 ms-2">Oktober 2026</span>
            </h5>
          </div>
          <div class="d-flex gap-2 flex-wrap">
            <a href="{{ url_for('pagu_mbg_view') }}" class="btn btn-sm text-white" style="background: #0d9488; border-color: #0d9488;">
              <i class="bi bi-calculator me-1"></i> Kelola Pagu & RAB MBG
            </a>
            <button type="button" class="btn btn-sm btn-outline-danger" onclick="bukaModalPagu()">
              <i class="bi bi-sliders me-1"></i> Target Bulanan
            </button>
          </div>
        </div>

        <div class="row g-3 align-items-center">
          <!-- Kolom 1: Target vs Realisasi vs Sisa -->
          <div class="col-12 col-md-4 border-end">
            <div class="d-flex justify-content-between text-muted small mb-1">
              <span>Target Pagu Anggaran:</span>
              <strong class="text-dark fs-6" id="budget-pagu-total">Rp 0</strong>
            </div>
            <div class="d-flex justify-content-between text-muted small mb-1">
              <span>Realisasi Pengeluaran:</span>
              <strong class="text-primary fs-6" id="budget-realisasi-total">Rp 0</strong>
            </div>
            <div class="d-flex justify-content-between text-muted small mb-2">
              <span>Sisa Plafon Anggaran:</span>
              <strong id="budget-sisa-total" class="text-success fs-6">Rp 0</strong>
            </div>
            <div class="small text-muted" id="budget-breakdown-sub" style="font-size:0.75rem;">
              Pagu Bahan: Rp 0 &bull; Pagu Ops: Rp 0
            </div>
          </div>

          <!-- Kolom 2: Progress Bar Serapan & Status -->
          <div class="col-12 col-md-5 border-end">
            <div class="d-flex justify-content-between align-items-center mb-1">
              <span class="small fw-semibold text-secondary">Persentase Serapan Anggaran:</span>
              <span class="badge bg-success" id="budget-status-badge" style="font-size:0.8rem;">0% Terpakai</span>
            </div>
            <div class="progress mb-2" style="height: 18px; border-radius: 9px; background: #e9ecef;">
              <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" id="budget-progress-bar"
                   role="progressbar" style="width: 0%; font-size: 0.75rem; font-weight: 700;">0%</div>
            </div>
            <div class="small text-muted" id="budget-status-desc">
              Memuat status penyerapan anggaran...
            </div>
          </div>

          <!-- Kolom 3: Burn Rate & Forecasting -->
          <div class="col-12 col-md-3 bg-light rounded-3 p-3">
            <div class="small text-muted">Burn Rate Harian:</div>
            <div class="fw-bold text-dark fs-6" id="budget-burn-rate">Rp 0 / hari</div>
            <div class="small text-muted mt-2">Estimasi Total Akhir Bulan:</div>
            <div class="fw-bold text-primary fs-6" id="budget-forecast">Rp 0</div>
          </div>
        </div>
      </div>
    </div>

    <!-- STATS / KPI CARDS -->
    <div class="row g-3 mb-4">
      <!-- 1. Grand Total -->
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="kpi-card" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
          <div class="kpi-label">Total Biaya Pengeluaran</div>
          <div class="kpi-value" id="kpi-grand-total">Rp 0</div>
          <div class="kpi-sub d-flex justify-content-between">
            <span id="kpi-total-tx"><i class="bi bi-receipt me-1"></i>0 Transaksi</span>
            <span id="kpi-periode-span" class="badge bg-light text-dark">0 Hari</span>
          </div>
          <i class="bi bi-wallet2 kpi-icon"></i>
        </div>
      </div>

      <!-- 2. Belanja Bahan -->
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="kpi-card" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
          <div class="kpi-label">Belanja Bahan Makanan</div>
          <div class="kpi-value" id="kpi-total-belanja">Rp 0</div>
          <div class="kpi-sub d-flex justify-content-between align-items-center">
            <span id="kpi-count-belanja"><i class="bi bi-basket me-1"></i>0 Pengajuan</span>
            <span class="badge bg-white text-success fw-bold" id="kpi-pct-belanja">0%</span>
          </div>
          <i class="bi bi-cart4 kpi-icon"></i>
        </div>
      </div>

      <!-- 3. Biaya Operasional -->
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="kpi-card" style="background: linear-gradient(135deg, #f09819 0%, #edde5d 100%); color: #333;">
          <div class="kpi-label" style="color: #493306;">Biaya Operasional Dapur</div>
          <div class="kpi-value" id="kpi-total-ops" style="color: #2b1f02;">Rp 0</div>
          <div class="kpi-sub d-flex justify-content-between align-items-center" style="color: #493306;">
            <span id="kpi-count-ops"><i class="bi bi-lightning-charge me-1"></i>0 Pengajuan</span>
            <span class="badge bg-dark text-warning fw-bold" id="kpi-pct-ops">0%</span>
          </div>
          <i class="bi bi-tools kpi-icon" style="color: #6a4706;"></i>
        </div>
      </div>

      <!-- 4. Efisiensi Biaya Admin & Net Transfer -->
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="kpi-card" style="background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);">
          <div class="kpi-label">Total Transfer Bank</div>
          <div class="kpi-value" id="kpi-total-transfer">Rp 0</div>
          <div class="kpi-sub d-flex justify-content-between">
            <span id="kpi-total-admin"><i class="bi bi-cash-stack me-1"></i>Admin: Rp 0</span>
            <span id="kpi-validasi-ratio" class="badge bg-light text-primary">0 Valid</span>
          </div>
          <i class="bi bi-bank kpi-icon"></i>
        </div>
      </div>
    </div>

    <!-- ROW 1: TREN WAKTU & KOMPOSISI -->
    <div class="row g-3 mb-4">
      <!-- Tren Harian Chart -->
      <div class="col-12 col-lg-8">
        <div class="chart-card">
          <div class="card-header">
            <span><i class="bi bi-graph-up text-primary me-2"></i>Tren Pengeluaran Harian</span>
            <span class="badge bg-light text-muted small" id="chart-tren-subtitle">Bahan vs Operasional</span>
          </div>
          <div class="card-body">
            <canvas id="chartTren" style="min-height: 280px; max-height: 320px;"></canvas>
          </div>
        </div>
      </div>

      <!-- Rasio Belanja Bahan vs Operasional -->
      <div class="col-12 col-lg-4">
        <div class="chart-card">
          <div class="card-header">
            <span><i class="bi bi-pie-chart text-success me-2"></i>Rasio Anggaran</span>
            <span class="badge bg-light text-muted small">Proporsi</span>
          </div>
          <div class="card-body d-flex flex-column justify-content-center align-items-center">
            <div style="width: 100%; max-width: 250px;">
              <canvas id="chartRasio"></canvas>
            </div>
            <div class="mt-3 w-100 text-center small text-muted" id="rasio-summary-text">
              Memuat proporsi belanja...
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ROW 2: KATEGORI BREAKDOWN (BAHAN vs OPERASIONAL) -->
    <div class="row g-3 mb-4">
      <!-- Kategori Belanja Bahan -->
      <div class="col-12 col-lg-6">
        <div class="chart-card">
          <div class="card-header">
            <span><i class="bi bi-basket3 text-success me-2"></i>Distribusi Kategori Belanja Bahan</span>
            <span class="badge bg-success bg-opacity-10 text-success small">Bahan Pokok</span>
          </div>
          <div class="card-body">
            <canvas id="chartKategoriBelanja" style="min-height: 260px; max-height: 290px;"></canvas>
          </div>
        </div>
      </div>

      <!-- Kategori Biaya Operasional -->
      <div class="col-12 col-lg-6">
        <div class="chart-card">
          <div class="card-header">
            <span><i class="bi bi-gear-wide-connected text-warning me-2"></i>Distribusi Kategori Operasional</span>
            <span class="badge bg-warning bg-opacity-10 text-warning small">Biaya Rutin</span>
          </div>
          <div class="card-body">
            <canvas id="chartKategoriOps" style="min-height: 260px; max-height: 290px;"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- ROW 3: KOMPARASI ANTAR DAPUR & TOP REKANAN -->
    <div class="row g-3 mb-4">
      <!-- Komparasi Antar Dapur -->
      <div class="col-12 col-lg-6">
        <div class="chart-card">
          <div class="card-header">
            <span><i class="bi bi-building text-primary me-2"></i>Perbandingan Pengeluaran per Unit Dapur</span>
            <span class="badge bg-primary bg-opacity-10 text-primary small">Komparasi Unit</span>
          </div>
          <div class="card-body">
            <canvas id="chartDapur" style="min-height: 260px; max-height: 300px;"></canvas>
          </div>
        </div>
      </div>

      <!-- Top 10 Rekanan Pemasok / Vendor -->
      <div class="col-12 col-lg-6">
        <div class="chart-card">
          <div class="card-header">
            <span><i class="bi bi-trophy text-danger me-2"></i>Top Rekanan Pemasok & Vendor</span>
            <span class="badge bg-danger bg-opacity-10 text-danger small">Serapan Dana Terbesar</span>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive" style="max-height: 320px; overflow-y: auto;">
              <table class="table table-sm table-hover align-middle mb-0">
                <thead class="table-light sticky-top">
                  <tr>
                    <th>#</th>
                    <th>Nama Rekanan</th>
                    <th>Tipe / Bank</th>
                    <th class="text-center">Tx</th>
                    <th class="text-end">Total Serapan</th>
                  </tr>
                </thead>
                <tbody id="top-rekanan-tbody">
                  <tr><td colspan="5" class="text-center text-muted py-3">Memuat data rekanan...</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div> <!-- end #analytics-content -->

</div>

<!-- ── MODAL ATUR PAGU ANGGARAN ── -->
<div class="modal fade" id="modalPagu" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title mb-0 fw-bold"><i class="bi bi-bullseye text-danger me-2"></i>Atur Target Pagu Anggaran</h6>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row g-2 mb-3">
          <div class="col-6">
            <label class="form-label small fw-semibold">Tahun</label>
            <input type="number" id="pagu-tahun" class="form-control form-control-sm" value="2026" onchange="loadPaguForForm()">
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold">Bulan</label>
            <select id="pagu-bulan" class="form-select form-select-sm" onchange="loadPaguForForm()">
              <option value="1">Januari</option>
              <option value="2">Februari</option>
              <option value="3">Maret</option>
              <option value="4">April</option>
              <option value="5">Mei</option>
              <option value="6">Juni</option>
              <option value="7">Juli</option>
              <option value="8">Agustus</option>
              <option value="9">September</option>
              <option value="10" selected>Oktober</option>
              <option value="11">November</option>
              <option value="12">Desember</option>
            </select>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label small fw-semibold">Unit Dapur</label>
          <select id="pagu-dapur" class="form-select form-select-sm" onchange="loadPaguForForm()">
            <option value="">-- Semua Unit Dapur (Konsolidasi Plafon) --</option>
            {% for d in dapur_list %}
            <option value="{{ d.id }}">{{ d.nama }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="row g-2 mb-3">
          <div class="col-6">
            <label class="form-label small fw-semibold">Pagu Belanja Bahan (Rp)</label>
            <input type="number" id="pagu-nominal-belanja" class="form-control form-control-sm" placeholder="0" oninput="hitungTotalPaguForm()">
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold">Pagu Operasional (Rp)</label>
            <input type="number" id="pagu-nominal-ops" class="form-control form-control-sm" placeholder="0" oninput="hitungTotalPaguForm()">
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label small fw-semibold">Total Pagu Anggaran (Rp) <span class="text-danger">*</span></label>
          <input type="number" id="pagu-nominal-total" class="form-control form-control-sm fw-bold" placeholder="0">
          <div class="form-text small">Batas maksimal plafon anggaran untuk periode tersebut.</div>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Catatan / Keterangan</label>
          <input type="text" id="pagu-keterangan" class="form-control form-control-sm" placeholder="Contoh: Plafon 1.500 porsi per hari">
        </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-danger px-3" id="btn-save-pagu" onclick="simpanPagu()">
          <i class="bi bi-check2-circle me-1"></i> Simpan Pagu
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Format Rupiah Helper
function formatRupiah(num) {
  if (num === null || num === undefined) return 'Rp 0';
  return 'Rp ' + Number(num).toLocaleString('id-ID', { maximumFractionDigits: 0 });
}

// Global chart references
let chartTren = null;
let chartRasio = null;
let chartKategoriBelanja = null;
let chartKategoriOps = null;
let chartDapur = null;

// Preset Date Handlers
function setPreset(type) {
  const dari = document.getElementById('filter-dari');
  const sampai = document.getElementById('filter-sampai');
  const today = new Date();
  
  // Remove active from all preset buttons
  document.querySelectorAll('.btn-preset').forEach(b => b.classList.remove('active'));
  event.target.classList.add('active');

  const formatDate = (d) => {
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${y}-${m}-${day}`;
  };

  if (type === 'today') {
    dari.value = formatDate(today);
    sampai.value = formatDate(today);
  } else if (type === 'last7') {
    const d7 = new Date();
    d7.setDate(today.getDate() - 6);
    dari.value = formatDate(d7);
    sampai.value = formatDate(today);
  } else if (type === 'thisMonth') {
    const dMonth = new Date(today.getFullYear(), today.getMonth(), 1);
    dari.value = formatDate(dMonth);
    sampai.value = formatDate(today);
  } else if (type === 'lastMonth') {
    const firstLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
    const lastLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
    dari.value = formatDate(firstLastMonth);
    sampai.value = formatDate(lastLastMonth);
  } else if (type === 'all') {
    dari.value = '2024-01-01';
    sampai.value = formatDate(today);
  }
  fetchAnalyticsData();
}

// Fetch Analytics Summary from API
async function fetchAnalyticsData() {
  const tglDari = document.getElementById('filter-dari').value;
  const tglSampai = document.getElementById('filter-sampai');
  const tglSampaiVal = tglSampai ? tglSampai.value : '';
  const dapurId = document.getElementById('filter-dapur').value;
  const statusFilter = document.getElementById('filter-status').value;

  const refreshIcon = document.getElementById('refresh-icon');
  if (refreshIcon) refreshIcon.classList.add('spin-animation');

  try {
    const params = new URLSearchParams({
      tgl_dari: tglDari,
      tgl_sampai: tglSampaiVal,
      dapur_id: dapurId,
      status: statusFilter
    });

    const res = await fetch(`/api/analytics/summary?${params.toString()}`);
    if (!res.ok) throw new Error('Gagal mengambil data analitik');
    const data = await res.json();

    updateKPIs(data);
    updateBudgetWidget(data.budget, data.periode);
    renderChartTren(data.tren);
    renderChartRasio(data.kpi);
    renderChartKategoriBelanja(data.kategori_belanja);
    renderChartKategoriOps(data.kategori_ops);
    renderChartDapur(data.komparasi_dapur);
    renderTopRekanan(data.top_rekanan);

  } catch (err) {
    console.error(err);
    alert('Terjadi kesalahan saat memuat data analitik: ' + err.message);
  } finally {
    if (refreshIcon) refreshIcon.classList.remove('spin-animation');
  }
}

// Update Top KPI Cards
function updateKPIs(data) {
  const kpi = data.kpi || {};
  const periode = data.periode || {};

  document.getElementById('kpi-grand-total').textContent = formatRupiah(kpi.grand_total);
  document.getElementById('kpi-total-tx').innerHTML = `<i class="bi bi-receipt me-1"></i>${kpi.total_tx || 0} Transaksi`;
  document.getElementById('kpi-periode-span').textContent = `${periode.hari_total || 0} Hari`;

  document.getElementById('kpi-total-belanja').textContent = formatRupiah(kpi.total_belanja);
  document.getElementById('kpi-count-belanja').innerHTML = `<i class="bi bi-basket me-1"></i>${kpi.count_belanja || 0} Nota`;
  document.getElementById('kpi-pct-belanja').textContent = `${kpi.pct_belanja || 0}%`;

  document.getElementById('kpi-total-ops').textContent = formatRupiah(kpi.total_ops);
  document.getElementById('kpi-count-ops').innerHTML = `<i class="bi bi-lightning-charge me-1"></i>${kpi.count_ops || 0} Nota`;
  document.getElementById('kpi-pct-ops').textContent = `${kpi.pct_ops || 0}%`;

  document.getElementById('kpi-total-transfer').textContent = formatRupiah(kpi.total_transfer);
  document.getElementById('kpi-total-admin').innerHTML = `<i class="bi bi-shield-check me-1"></i>Admin: ${formatRupiah(kpi.total_admin)}`;
  document.getElementById('kpi-validasi-ratio').textContent = `${(kpi.valid_belanja || 0) + (kpi.valid_ops || 0)} / ${kpi.total_tx || 0} Valid`;
}

// Update Executive Budget Monitoring (Pagu vs Realisasi)
function updateBudgetWidget(budget, periode) {
  if (!budget) return;

  const monthNames = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                      'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
  const monthName = monthNames[budget.bulan] || 'Bulan';
  if (budget.tipe_pagu === 'mbg_harian') {
    document.getElementById('budget-periode-badge').innerHTML = 
      `<span class="text-success"><i class="bi bi-patch-check-fill me-1"></i>RAB MBG Harian (${(budget.mbg_total_porsi || 0).toLocaleString('id-ID')} Porsi)</span>`;
    document.getElementById('budget-breakdown-sub').innerHTML = 
      `Total RAB Terdaftar: <strong>${formatRupiah(budget.mbg_total_rab)}</strong> &bull; Total Target: <strong>${(budget.mbg_total_porsi || 0).toLocaleString('id-ID')} Paket MBG</strong>`;
  } else {
    document.getElementById('budget-periode-badge').textContent = `${monthName} ${budget.tahun}`;
    document.getElementById('budget-breakdown-sub').innerHTML = 
      `Pagu Bahan: <strong>${formatRupiah(budget.pagu_belanja)}</strong> &bull; Pagu Ops: <strong>${formatRupiah(budget.pagu_ops)}</strong>`;
  }

  document.getElementById('budget-pagu-total').textContent = formatRupiah(budget.pagu_total);
  document.getElementById('budget-realisasi-total').textContent = formatRupiah(budget.realisasi_total);

  const sisaEl = document.getElementById('budget-sisa-total');
  if (budget.sisa_anggaran >= 0) {
    sisaEl.textContent = formatRupiah(budget.sisa_anggaran);
    sisaEl.className = 'text-success fs-6';
  } else {
    sisaEl.textContent = `- ${formatRupiah(Math.abs(budget.sisa_anggaran))} (Defisit)`;
    sisaEl.className = 'text-danger fs-6 fw-bold';
  }

  // Progress Bar
  const pct = budget.persen_serapan || 0;
  const bar = document.getElementById('budget-progress-bar');
  const badge = document.getElementById('budget-status-badge');
  const desc = document.getElementById('budget-status-desc');

  bar.style.width = Math.min(100, pct) + '%';
  bar.textContent = `${pct}%`;

  let colorClass = 'bg-success';
  if (pct > 100) colorClass = 'bg-danger';
  else if (pct >= 90) colorClass = 'bg-danger';
  else if (pct >= 75) colorClass = 'bg-warning text-dark';

  bar.className = `progress-bar progress-bar-striped progress-bar-animated ${colorClass}`;
  badge.className = `badge ${colorClass}`;
  badge.textContent = `${pct}% Terpakai (${budget.status_label})`;

  // Advice
  if (budget.pagu_total === 0) {
    desc.innerHTML = `<span class="text-secondary"><i class="bi bi-info-circle me-1"></i>Pagu anggaran belum diatur untuk bulan ini. Klik <strong>"Atur Target Pagu"</strong> untuk menginput pagu.</span>`;
  } else if (pct > 100) {
    desc.innerHTML = `<span class="text-danger fw-bold"><i class="bi bi-exclamation-triangle-fill me-1"></i>OVERBUDGET: Realisasi telah melampaui pagu sebesar ${formatRupiah(Math.abs(budget.sisa_anggaran))}!</span>`;
  } else if (pct >= 90) {
    desc.innerHTML = `<span class="text-danger fw-semibold"><i class="bi bi-exclamation-circle me-1"></i>KRITIS: Sisa pagu tinggal ${(100 - pct).toFixed(1)}%. Batasi belanja non-prioritas.</span>`;
  } else if (pct >= 75) {
    desc.innerHTML = `<span class="text-warning text-dark"><i class="bi bi-exclamation-circle me-1"></i>WASPADA: Serapan telah mencapai 75%+. Awasi pengeluaran sisa hari.</span>`;
  } else {
    desc.innerHTML = `<span class="text-success"><i class="bi bi-check-circle-fill me-1"></i>AMAN: Penyerapan anggaran berjalan terkendali dan efisien.</span>`;
  }

  // Burn rate & Forecasting
  const hariTotal = (periode && periode.hari_total) ? periode.hari_total : 1;
  const burnRate = budget.realisasi_total / Math.max(1, hariTotal);
  document.getElementById('budget-burn-rate').textContent = `${formatRupiah(burnRate)} / hari`;

  // Estimasi 30 hari
  const forecastMonth = burnRate * 30;
  const forecastEl = document.getElementById('budget-forecast');
  forecastEl.textContent = formatRupiah(forecastMonth);
  if (budget.pagu_total > 0 && forecastMonth > budget.pagu_total) {
    forecastEl.className = 'fw-bold text-danger fs-6';
    forecastEl.title = 'Diproyeksikan overbudget jika ritme belanja tetap berlanjut';
  } else {
    forecastEl.className = 'fw-bold text-primary fs-6';
  }
}

// ── MODAL PAGU ANGGARAN HANDLERS ──
const modalPaguEl = document.getElementById('modalPagu');
const modalPagu = modalPaguEl ? new bootstrap.Modal(modalPaguEl) : null;

function bukaModalPagu() {
  const filterSampai = document.getElementById('filter-sampai').value;
  if (filterSampai) {
    const d = new Date(filterSampai);
    document.getElementById('pagu-tahun').value = d.getFullYear();
    document.getElementById('pagu-bulan').value = d.getMonth() + 1;
  }
  const dapurFilter = document.getElementById('filter-dapur').value;
  if (dapurFilter) {
    document.getElementById('pagu-dapur').value = dapurFilter;
  }
  loadPaguForForm();
  if (modalPagu) modalPagu.show();
}

async function loadPaguForForm() {
  const tahun = document.getElementById('pagu-tahun').value;
  const bulan = document.getElementById('pagu-bulan').value;
  const dapurId = document.getElementById('pagu-dapur').value;

  try {
    const params = new URLSearchParams({ tahun, bulan, dapur_id: dapurId || 'none' });
    const res = await fetch(`/api/pagu?${params.toString()}`);
    if (!res.ok) return;
    const list = await res.json();
    if (list.length > 0) {
      const p = list[0];
      document.getElementById('pagu-nominal-belanja').value = p.nominal_belanja || '';
      document.getElementById('pagu-nominal-ops').value = p.nominal_operasional || '';
      document.getElementById('pagu-nominal-total').value = p.nominal_total || '';
      document.getElementById('pagu-keterangan').value = p.keterangan || '';
    } else {
      document.getElementById('pagu-nominal-belanja').value = '';
      document.getElementById('pagu-nominal-ops').value = '';
      document.getElementById('pagu-nominal-total').value = '';
      document.getElementById('pagu-keterangan').value = '';
    }
  } catch (err) {
    console.error('Error load pagu:', err);
  }
}

function hitungTotalPaguForm() {
  const b = parseFloat(document.getElementById('pagu-nominal-belanja').value) || 0;
  const o = parseFloat(document.getElementById('pagu-nominal-ops').value) || 0;
  document.getElementById('pagu-nominal-total').value = b + o;
}

async function simpanPagu() {
  const tahun = parseInt(document.getElementById('pagu-tahun').value);
  const bulan = parseInt(document.getElementById('pagu-bulan').value);
  const dapurId = document.getElementById('pagu-dapur').value;
  const nomBelanja = parseFloat(document.getElementById('pagu-nominal-belanja').value) || 0;
  const nomOps = parseFloat(document.getElementById('pagu-nominal-ops').value) || 0;
  const nomTotal = parseFloat(document.getElementById('pagu-nominal-total').value) || (nomBelanja + nomOps);
  const keterangan = document.getElementById('pagu-keterangan').value.trim();

  if (nomTotal <= 0) {
    alert('Total Pagu Anggaran wajib diisi lebih dari 0.');
    return;
  }

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

  try {
    const res = await fetch('/api/pagu', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        tahun,
        bulan,
        dapur_id: dapurId || null,
        nominal_belanja: nomBelanja,
        nominal_operasional: nomOps,
        nominal_total: nomTotal,
        keterangan
      })
    });
    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || 'Gagal menyimpan pagu');
    }
    if (modalPagu) modalPagu.hide();
    alert('✅ Target Pagu Anggaran berhasil disimpan!');
    fetchAnalyticsData();
  } catch (err) {
    alert('Gagal: ' + err.message);
  } finally {
    btn.disabled = false;
    btn.innerHTML = origHtml;
  }
}

// 1. Render Tren Chart (Line & Area)
function renderChartTren(tren) {
  const ctx = document.getElementById('chartTren').getContext('2d');
  if (chartTren) chartTren.destroy();

  chartTren = new Chart(ctx, {
    type: 'line',
    data: {
      labels: tren.labels || [],
      datasets: [
        {
          label: 'Total Pengeluaran',
          data: tren.total || [],
          borderColor: '#0d6efd',
          backgroundColor: 'rgba(13, 110, 253, 0.08)',
          fill: true,
          tension: 0.35,
          borderWidth: 2.5,
          pointRadius: 3,
        },
        {
          label: 'Belanja Bahan',
          data: tren.belanja || [],
          borderColor: '#198754',
          backgroundColor: 'rgba(25, 135, 84, 0.05)',
          fill: false,
          tension: 0.3,
          borderWidth: 2,
          pointRadius: 2.5,
          borderDash: [4, 4]
        },
        {
          label: 'Operasional',
          data: tren.ops || [],
          borderColor: '#fd7e14',
          backgroundColor: 'rgba(253, 126, 20, 0.05)',
          fill: false,
          tension: 0.3,
          borderWidth: 2,
          pointRadius: 2.5
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: { mode: 'index', intersect: false },
      plugins: {
        legend: { position: 'top', labels: { boxWidth: 12, font: { size: 11 } } },
        tooltip: {
          callbacks: {
            label: function(c) {
              return `${c.dataset.label}: ${formatRupiah(c.raw)}`;
            }
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            callback: function(v) {
              if (v >= 1000000) return (v / 1000000).toFixed(1) + ' jt';
              if (v >= 1000) return (v / 1000).toFixed(0) + ' rb';
              return v;
            },
            font: { size: 10 }
          },
          grid: { color: 'rgba(0,0,0,0.05)' }
        },
        x: {
          ticks: { font: { size: 10 } },
          grid: { display: false }
        }
      }
    }
  });
}

// 2. Render Rasio Doughnut Chart
function renderChartRasio(kpi) {
  const ctx = document.getElementById('chartRasio').getContext('2d');
  if (chartRasio) chartRasio.destroy();

  const totalBelanja = kpi.total_belanja || 0;
  const totalOps = kpi.total_ops || 0;
  const grand = totalBelanja + totalOps;

  chartRasio = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Belanja Bahan', 'Operasional Dapur'],
      datasets: [{
        data: [totalBelanja, totalOps],
        backgroundColor: ['#198754', '#fd7e14'],
        hoverOffset: 6,
        borderWidth: 2,
        borderColor: '#fff'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      cutout: '68%',
      plugins: {
        legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } },
        tooltip: {
          callbacks: {
            label: function(c) {
              const val = c.raw;
              const pct = grand > 0 ? ((val / grand) * 100).toFixed(1) : 0;
              return `${c.label}: ${formatRupiah(val)} (${pct}%)`;
            }
          }
        }
      }
    }
  });

  const txt = document.getElementById('rasio-summary-text');
  if (grand > 0) {
    txt.innerHTML = `Bahan Pokok: <strong>${kpi.pct_belanja}%</strong> &bull; Biaya Operasional: <strong>${kpi.pct_ops}%</strong>`;
  } else {
    txt.innerHTML = 'Tidak ada transaksi pada filter periode ini';
  }
}

// 3. Render Kategori Belanja Bahan (Horizontal Bar)
function renderChartKategoriBelanja(data) {
  const ctx = document.getElementById('chartKategoriBelanja').getContext('2d');
  if (chartKategoriBelanja) chartKategoriBelanja.destroy();

  chartKategoriBelanja = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.labels.length > 0 ? data.labels : ['Belum Ada Data'],
      datasets: [{
        label: 'Total Belanja (Rp)',
        data: data.values.length > 0 ? data.values : [0],
        backgroundColor: '#20c997',
        borderRadius: 6,
        barPercentage: 0.65
      }]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: (c) => `Total: ${formatRupiah(c.raw)}`
          }
        }
      },
      scales: {
        x: {
          beginAtZero: true,
          ticks: {
            callback: (v) => v >= 1000000 ? (v / 1000000).toFixed(1) + ' jt' : (v >= 1000 ? (v / 1000).toFixed(0) + ' rb' : v),
            font: { size: 10 }
          },
          grid: { color: 'rgba(0,0,0,0.05)' }
        },
        y: {
          ticks: { font: { size: 11, weight: '600' } },
          grid: { display: false }
        }
      }
    }
  });
}

// 4. Render Kategori Operasional
function renderChartKategoriOps(data) {
  const ctx = document.getElementById('chartKategoriOps').getContext('2d');
  if (chartKategoriOps) chartKategoriOps.destroy();

  const colors = ['#fd7e14', '#0dcaf0', '#6f42c1', '#d63384', '#ffc107', '#20c997', '#6c757d', '#0d6efd'];

  chartKategoriOps = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.labels.length > 0 ? data.labels : ['Belum Ada Data'],
      datasets: [{
        label: 'Biaya Operasional (Rp)',
        data: data.values.length > 0 ? data.values : [0],
        backgroundColor: colors.slice(0, data.labels.length || 1),
        borderRadius: 6,
        barPercentage: 0.65
      }]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: (c) => `Biaya: ${formatRupiah(c.raw)}`
          }
        }
      },
      scales: {
        x: {
          beginAtZero: true,
          ticks: {
            callback: (v) => v >= 1000000 ? (v / 1000000).toFixed(1) + ' jt' : (v >= 1000 ? (v / 1000).toFixed(0) + ' rb' : v),
            font: { size: 10 }
          },
          grid: { color: 'rgba(0,0,0,0.05)' }
        },
        y: {
          ticks: { font: { size: 11, weight: '600' } },
          grid: { display: false }
        }
      }
    }
  });
}

// 5. Render Komparasi Antar Dapur (Grouped Bar: Realisasi vs Target Pagu)
function renderChartDapur(data) {
  const ctx = document.getElementById('chartDapur').getContext('2d');
  if (chartDapur) chartDapur.destroy();

  chartDapur = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.labels.length > 0 ? data.labels : ['Unit Dapur'],
      datasets: [
        {
          label: 'Belanja Bahan',
          data: data.belanja || [],
          backgroundColor: '#198754',
          borderRadius: 4,
          stack: 'realisasi'
        },
        {
          label: 'Operasional',
          data: data.ops || [],
          backgroundColor: '#fd7e14',
          borderRadius: 4,
          stack: 'realisasi'
        },
        {
          label: 'Target Pagu Anggaran',
          data: data.pagus || [],
          backgroundColor: 'rgba(220, 53, 69, 0.25)',
          borderColor: '#dc3545',
          borderWidth: 1.5,
          borderRadius: 4,
          stack: 'pagu'
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { position: 'top', labels: { boxWidth: 12, font: { size: 11 } } },
        tooltip: {
          callbacks: {
            label: (c) => `${c.dataset.label}: ${formatRupiah(c.raw)}`
          }
        }
      },
      scales: {
        y: {
          stacked: true,
          beginAtZero: true,
          ticks: {
            callback: (v) => v >= 1000000 ? (v / 1000000).toFixed(1) + ' jt' : (v >= 1000 ? (v / 1000).toFixed(0) + ' rb' : v),
            font: { size: 10 }
          },
          grid: { color: 'rgba(0,0,0,0.05)' }
        },
        x: {
          stacked: true,
          ticks: { font: { size: 11, weight: '600' } },
          grid: { display: false }
        }
      }
    }
  });
}

// 6. Render Top Rekanan Table
function renderTopRekanan(list) {
  const tbody = document.getElementById('top-rekanan-tbody');
  if (!list || list.length === 0) {
    tbody.innerHTML = `<tr><td colspan="5" class="text-center text-muted py-3">Tidak ada data rekanan pada periode ini</td></tr>`;
    return;
  }

  let html = '';
  list.forEach((r, idx) => {
    const medal = idx === 0 ? '🥇' : (idx === 1 ? '🥈' : (idx === 2 ? '🥉' : `${idx + 1}`));
    const tipeBadge = r.tipe === 'OPERASIONAL' 
      ? '<span class="badge bg-warning text-dark" style="font-size:0.65rem">OPS</span>' 
      : '<span class="badge bg-success" style="font-size:0.65rem">BAHAN</span>';
    
    html += `
      <tr>
        <td class="fw-bold">${medal}</td>
        <td>
          <div class="fw-semibold text-dark">${r.nama}</div>
          <div class="text-muted" style="font-size:0.75rem;">
            Bahan: ${formatRupiah(r.belanja)} &bull; Ops: ${formatRupiah(r.ops)}
          </div>
        </td>
        <td>
          ${tipeBadge}
          <span class="badge bg-light text-secondary border ms-1" style="font-size:0.65rem">${r.bank || '-'}</span>
        </td>
        <td class="text-center fw-semibold">${r.tx}</td>
        <td class="text-end fw-bold text-primary">${formatRupiah(r.total)}</td>
      </tr>
    `;
  });
  tbody.innerHTML = html;
}

// Broadcast Rekap ke Telegram/WA dari Dashboard Analitik
async function broadcastRekapDariAnalitik() {
  const dapurId = document.getElementById('filter-dapur').value;
  if (!confirm('Kirim rekap keuangan hari ini ke Telegram dan WhatsApp yang aktif?')) return;

  const btn = document.getElementById('btn-broadcast-analitik');
  const origHtml = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Mengirim...';

  try {
    const res = await fetch('/api/notifications/send-daily-summary', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ dapur_id: dapurId || null })
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.error || 'Gagal mengirim');
    alert('✅ ' + data.message);
  } catch(e) {
    alert('Gagal mengirim broadcast: ' + e.message);
  } finally {
    btn.disabled = false;
    btn.innerHTML = origHtml;
  }
}

// Auto-run on page load
document.addEventListener('DOMContentLoaded', () => {
  fetchAnalyticsData();
});
</script>
<style>
.spin-animation {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
{% endblock %}