{% extends "base.html" %}
{% block title %}Monitoring Harga Pasar & Standar Biaya Masukan (Wonogiri) – SPPG MBG{% endblock %}
{% block page_title %}Monitoring Harga Pasar & Benchmarking Komoditas Pangan (Wonogiri){% endblock %}

{% block extra_css %}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
  :root {
    --price-primary: #0284c7; --price-primary-dark: #0369a1;
    --price-success: #10b981; --price-warning: #f59e0b;
    --price-danger: #ef4444; --price-bg: #f8fafc;
  }

  .bench-wrap { font-family: 'Inter', sans-serif; color: #334155; }

  /* KPI Grid */
  .bench-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
  .bench-kpi-card {
    background: white; border-radius: 12px; padding: 18px 20px; border: 1px solid #e2e8f0;
    display: flex; align-items: center; gap: 15px; box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .bench-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
  .bench-kpi-icon {
    width: 48px; height: 48px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: 24px; color: white; flex-shrink: 0;
  }
  .bench-kpi-title { font-size: 12px; color: #64748b; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
  .bench-kpi-val { font-size: 18px; font-weight: 700; color: #0f172a; line-height: 1.2; }

  /* Filter Bar */
  .filter-panel {
    background: white; border-radius: 12px; padding: 14px 20px; border: 1px solid #e2e8f0;
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  }
  .filter-group { display: flex; align-items: center; gap: 8px; }
  .filter-group label { font-size: 13px; font-weight: 600; color: #475569; white-space: nowrap; }
  .filter-group select, .filter-group input {
    padding: 7px 12px; border-radius: 8px; border: 1px solid #cbd5e1; outline: none;
    font-size: 13px; color: #334155; font-weight: 600; background: white;
  }

  /* Table Style */
  .card-table { background: white; border-radius: 14px; padding: 22px; border: 1px solid #e2e8f0; box-shadow: 0 2px 6px rgba(0,0,0,0.03); margin-bottom: 22px; }
  .tbl-custom { width: 100%; border-collapse: collapse; min-width: 800px; font-size: 13px; }
  .tbl-custom th {
    background: #f8fafc; padding: 12px 14px; text-align: left; color: #64748b;
    font-size: 11.5px; text-transform: uppercase; font-weight: 700; border-bottom: 2px solid #e2e8f0;
  }
  .tbl-custom td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
  .tbl-custom tbody tr:hover td { background: #fafafe; }

  /* Badges */
  .badge-kat { padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
  .badge-beras { background: #dcfce7; color: #15803d; }
  .badge-hewani { background: #fee2e2; color: #b91c1c; }
  .badge-nabati { background: #f3e8ff; color: #7e22ce; }
  .badge-bumbon { background: #ffedd5; color: #c2410c; }
  .badge-sayur { background: #ccfbf1; color: #0f766e; }
  .badge-buah { background: #fef9c3; color: #a16207; }
  .badge-lainnya { background: #f1f5f9; color: #475569; }

  /* Anomali box */
  .alert-box { padding: 12px 16px; border-radius: 10px; margin-bottom: 12px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
  .alert-box-warning { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }
</style>
{% endblock %}

{% block content %}
<div class="bench-wrap">

  <!-- Info Header Wonogiri -->
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
    <div>
      <h5 class="fw-bold mb-1" style="color: #0f172a;">
        <i class="bi bi-geo-alt-fill text-danger me-1"></i> Standar Harga Pasar & Benchmarking Wilayah Wonogiri
      </h5>
      <p class="text-muted small mb-0">
        Rujukan harga acuan komoditas pangan dari Pasar Kota Wonogiri, Pasar Krisak, KJA Waduk Gajah Mungkur, dan sentra produsen lokal untuk audit belanja dapur MBG.
      </p>
    </div>
    <div class="d-flex gap-2 align-items-center flex-wrap">
      <span class="badge bg-danger-subtle text-danger border border-danger-subtle d-inline-flex align-items-center gap-1 px-2 py-1" style="font-size:11px;">
        <span class="spinner-grow spinner-grow-sm text-danger" role="status" style="width: 8px; height: 8px;"></span>
        <b>LIVE</b> Wonogiri
      </span>
      {% if current_user and current_user.role in ['super_admin', 'validator'] %}
      <button class="btn btn-sm btn-outline-danger fw-semibold" id="btnLiveSync" onclick="sinkronisasiRealtimePasar()" title="Sinkronkan Harga Pasar Hari Ini secara Realtime">
        <i class="bi bi-broadcast me-1"></i> Sync Realtime Hari Ini
      </button>
      {% endif %}
      <button class="btn btn-sm btn-outline-success fw-semibold" onclick="exportHargaKeExcel()">
        <i class="bi bi-file-earmark-excel me-1"></i> Export Excel
      </button>
      {% if current_user and current_user.role in ['super_admin', 'validator'] %}
      <button class="btn btn-sm btn-primary fw-semibold" onclick="tambahKomoditasModal()">
        <i class="bi bi-plus-circle me-1"></i> Tambah Acuan Harga
      </button>
      {% endif %}
    </div>
  </div>

  <!-- KPI Grid -->
  <div class="bench-kpi-grid">
    <div class="bench-kpi-card">
      <div class="bench-kpi-icon" style="background: linear-gradient(135deg, #0284c7, #0369a1);">
        <i class='bx bx-store-alt'></i>
      </div>
      <div>
        <div class="bench-kpi-title">Pasar Rujukan</div>
        <div class="bench-kpi-val" style="font-size:15px;" id="kpiPasar">Pasar Kota Wonogiri</div>
      </div>
    </div>
    <div class="bench-kpi-card">
      <div class="bench-kpi-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
        <i class='bx bx-check-shield'></i>
      </div>
      <div>
        <div class="bench-kpi-title">Komoditas Acuan</div>
        <div class="bench-kpi-val" id="kpiJumlahKomoditas">0 Item</div>
      </div>
    </div>
    <div class="bench-kpi-card">
      <div class="bench-kpi-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
        <i class='bx bx-cart'></i>
      </div>
      <div>
        <div class="bench-kpi-title">Realisasi Belanja</div>
        <div class="bench-kpi-val" id="kpiTotalBelanja">Rp 0</div>
      </div>
    </div>
    <div class="bench-kpi-card">
      <div class="bench-kpi-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
        <i class='bx bx-line-chart'></i>
      </div>
      <div>
        <div class="bench-kpi-title">Kesesuaian Harga</div>
        <div class="bench-kpi-val text-success" id="kpiKesesuaian">Efisien (Wajar)</div>
      </div>
    </div>
  </div>

  <!-- Filter Bar -->
  <div class="filter-panel">
    <div class="filter-group">
      <label><i class="bi bi-buildings text-primary me-1"></i>Unit Dapur:</label>
      <select id="selDapur" onchange="loadBenchmarkingData()">
        <option value="">-- Semua Dapur --</option>
        {% for d in dapur_list %}
        <option value="{{ d.id }}" {% if user_dapur_id == d.id and user_role == 'admin_dapur' %}selected{% endif %}>{{ d.nama }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="filter-group">
      <label><i class="bi bi-calendar3 text-primary me-1"></i>Dari:</label>
      <input type="date" id="tglDari" value="{{ today_iso }}" onchange="loadBenchmarkingData()">
    </div>
    <div class="filter-group">
      <label>Sampai:</label>
      <input type="date" id="tglSampai" value="{{ today_iso }}" onchange="loadBenchmarkingData()">
    </div>
    <div class="filter-group ms-auto">
      <button class="btn btn-sm btn-primary px-3 fw-semibold" onclick="loadBenchmarkingData()">
        <i class="bi bi-arrow-clockwise me-1"></i> Refresh Data
      </button>
    </div>
  </div>

  <!-- Alert Anomali / Lonjakan Harga -->
  <div id="wrapperAlertAnomali" class="mb-3"></div>

  <!-- Card Tabel Benchmarking Kategori -->
  <div class="card-table">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="fw-bold mb-0" style="color:#0f172a;">
        <i class="bi bi-bar-chart-steps me-1 text-primary"></i> Komparasi Belanja Aktual Dapur vs Standar Harga Pasar Wonogiri
      </h6>
      <span class="badge bg-light text-muted border">Analisis Kategori Pangan</span>
    </div>
    <div class="table-responsive">
      <table class="tbl-custom">
        <thead>
          <tr>
            <th>Kategori Bahan</th>
            <th class="text-end">Total Realisasi Belanja</th>
            <th class="text-center">Jumlah Transaksi</th>
            <th class="text-end">Rata-rata Nota Belanja</th>
            <th class="text-end">Estimasi Harga Acuan Pasar</th>
            <th class="text-center">Status Audit Biaya</th>
          </tr>
        </thead>
        <tbody id="tbodyKomparasi">
          <tr><td colspan="6" class="text-center py-3 text-muted">Memuat komparasi belanja...</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Card Tabel Standar Harga Komoditas Wonogiri -->
  <div class="card-table">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
      <div>
        <h6 class="fw-bold mb-0" style="color:#0f172a;">
          <i class="bi bi-tags-fill me-1 text-primary"></i> Katalog Standar Biaya Masukan & Harga Acuan Pasar (Kabupaten Wonogiri)
        </h6>
        <small class="text-muted">Batas minimum & maksimum wajar harga komoditas pangan untuk mencegah mark-up belanja</small>
      </div>
      <div class="d-flex gap-2">
        <input type="text" id="searchKomoditas" class="form-control form-control-sm" placeholder="Cari nama komoditas..." onkeyup="filterKomoditasTabel()" style="width:220px;">
        <select id="filterKatKomoditas" class="form-select form-select-sm" onchange="filterKomoditasTabel()" style="width:170px;">
          <option value="">Semua Kategori</option>
          <option value="BERAS">Beras</option>
          <option value="PROTEIN HEWANI">Protein Hewani</option>
          <option value="PROTEIN NABATI">Protein Nabati</option>
          <option value="BUMBON">Bumbon / Minyak</option>
          <option value="SAYUR">Sayuran</option>
          <option value="BUAH">Buah-buahan</option>
          <option value="LAINNYA">Energi / Lainnya</option>
        </select>
      </div>
    </div>
    <div class="table-responsive">
      <table class="tbl-custom">
        <thead>
          <tr>
            <th style="width:50px;" class="text-center">No</th>
            <th>Nama Komoditas Pangan</th>
            <th>Kategori</th>
            <th class="text-center">Satuan</th>
            <th class="text-end">Rata-rata Pasar Wonogiri</th>
            <th class="text-end">Batas Wajar (Min – Max)</th>
            <th>Pasar Rujukan / Sumber</th>
            <th>Catatan Kegunaan MBG</th>
            {% if current_user and current_user.role in ['super_admin', 'validator'] %}
            <th class="text-center" style="width:80px;">Aksi</th>
            {% endif %}
          </tr>
        </thead>
        <tbody id="tbodyStandar">
          <tr><td colspan="9" class="text-center py-3 text-muted">Memuat data komoditas pangan...</td></tr>
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- Modal Tambah / Edit Komoditas -->
<div class="modal fade" id="modalKomoditas" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header py-2" style="background:#1F4E79; color:white;">
        <h6 class="modal-title fw-bold" id="modalTitle">Tambah Acuan Harga Komoditas</h6>
        <button type="button" class="btn-close btn-close-white" 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-bold">Nama Komoditas Pangan *</label>
          <input type="text" id="edit-nama" class="form-control form-control-sm" placeholder="Cth: Telur Ayam Ras">
        </div>
        <div class="row g-2 mb-2">
          <div class="col-7">
            <label class="form-label small fw-bold">Kategori Pangan *</label>
            <select id="edit-kat" class="form-select form-select-sm">
              <option value="BERAS">Beras</option>
              <option value="PROTEIN HEWANI">Protein Hewani</option>
              <option value="PROTEIN NABATI">Protein Nabati</option>
              <option value="BUMBON">Bumbon / Minyak</option>
              <option value="SAYUR">Sayuran</option>
              <option value="BUAH">Buah-buahan</option>
              <option value="LAINNYA">Lainnya / Energi</option>
            </select>
          </div>
          <div class="col-5">
            <label class="form-label small fw-bold">Satuan Ukuran *</label>
            <input type="text" id="edit-satuan" class="form-control form-control-sm" placeholder="Kg / Liter / Ikat" value="Kg">
          </div>
        </div>
        <div class="row g-2 mb-2">
          <div class="col-12">
            <label class="form-label small fw-bold">Rata-rata Harga Pasar Wonogiri (Rp) *</label>
            <input type="number" id="edit-pasar" class="form-control form-control-sm" placeholder="0" oninput="autoSetMinMax()">
          </div>
        </div>
        <div class="row g-2 mb-2">
          <div class="col-6">
            <label class="form-label small fw-bold">Batas Bawah Wajar (Rp)</label>
            <input type="number" id="edit-min" class="form-control form-control-sm" placeholder="0">
          </div>
          <div class="col-6">
            <label class="form-label small fw-bold">Batas Atas / Max HET (Rp)</label>
            <input type="number" id="edit-max" class="form-control form-control-sm" placeholder="0">
          </div>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-bold">Pasar Rujukan / Lokasi</label>
          <input type="text" id="edit-pasar-lokasi" class="form-control form-control-sm" value="Pasar Kota Wonogiri">
        </div>
        <div class="mb-2">
          <label class="form-label small fw-bold">Catatan Kegunaan MBG</label>
          <textarea id="edit-catatan" class="form-control form-control-sm" rows="2" placeholder="Cth: Standar lauk protein hewani makan siang"></textarea>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary btn-sm" onclick="simpanKomoditas()">Simpan Data</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  let rawStandarList = [];
  const modalKomoditas = new bootstrap.Modal(document.getElementById('modalKomoditas'));

  function fmtRp(n) {
    return 'Rp ' + Number(n || 0).toLocaleString('id-ID');
  }

  function getBadgeClass(k) {
    k = (k || '').toUpperCase();
    if (k.includes('BERAS')) return 'badge-beras';
    if (k.includes('HEWANI')) return 'badge-hewani';
    if (k.includes('NABATI')) return 'badge-nabati';
    if (k.includes('BUMBON')) return 'badge-bumbon';
    if (k.includes('SAYUR')) return 'badge-sayur';
    if (k.includes('BUAH')) return 'badge-buah';
    return 'badge-lainnya';
  }

  async function loadBenchmarkingData() {
    const did = document.getElementById('selDapur').value;
    const tgl1 = document.getElementById('tglDari').value;
    const tgl2 = document.getElementById('tglSampai').value;

    const params = new URLSearchParams();
    if (did) params.append('dapur_id', did);
    if (tgl1) params.append('tgl_dari', tgl1);
    if (tgl2) params.append('tgl_sampai', tgl2);

    try {
      const resp = await fetch('/api/standar-harga/benchmarking?' + params.toString());
      const data = await resp.json();

      // KPIs
      document.getElementById('kpiJumlahKomoditas').textContent = (data.kpi.jumlah_komoditas_dipantau || 0) + ' Komoditas';
      document.getElementById('kpiTotalBelanja').textContent = fmtRp(data.kpi.total_belanja);

      // Alert anomali
      const alertWrap = document.getElementById('wrapperAlertAnomali');
      alertWrap.innerHTML = '';
      if (data.anomali_alerts && data.anomali_alerts.length > 0) {
        data.anomali_alerts.forEach(a => {
          alertWrap.innerHTML += `
            <div class="alert-box alert-box-warning">
              <i class='bx bx-error-circle fs-5'></i>
              <div>
                <b>PERINGATAN AUDIT:</b> ${a.pesan} (Vendor: <b>${a.pemasok}</b>, Tgl: ${a.tanggal}).
              </div>
            </div>`;
        });
      }

      // Tabel Komparasi
      const tbKomp = document.getElementById('tbodyKomparasi');
      tbKomp.innerHTML = '';
      (data.komparasi || []).forEach(k => {
        tbKomp.innerHTML += `
          <tr>
            <td><span class="badge-kat ${getBadgeClass(k.kategori)}">${k.kategori}</span></td>
            <td class="text-end fw-bold" style="color:#1F4E79;">${fmtRp(k.total_belanja)}</td>
            <td class="text-center">${k.jumlah_transaksi}x</td>
            <td class="text-end">${fmtRp(k.rata_per_transaksi)}</td>
            <td class="text-end text-muted">${k.standar_harga_acuan > 0 ? fmtRp(k.standar_harga_acuan) + ' (std)' : '-'}</td>
            <td class="text-center">
              <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
                ✓ Sesuai Standar
              </span>
            </td>
          </tr>`;
      });

      rawStandarList = data.standar_list || [];
      renderStandarTabel(rawStandarList);

    } catch (e) {
      console.error(e);
      Swal.fire('Error', 'Gagal memuat data benchmarking pasar Wonogiri.', 'error');
    }
  }

  function renderStandarTabel(items) {
    const tbStd = document.getElementById('tbodyStandar');
    tbStd.innerHTML = '';

    if (!items.length) {
      tbStd.innerHTML = '<tr><td colspan="9" class="text-center py-3 text-muted">Tidak ada komoditas acuan yang cocok.</td></tr>';
      return;
    }

    const canEdit = {% if current_user and current_user.role in ['super_admin', 'validator'] %} true {% else %} false {% endif %};

    items.forEach((s, idx) => {
      tbStd.innerHTML += `
        <tr>
          <td class="text-center text-muted fw-bold">${idx + 1}</td>
          <td><b>${s.nama_komoditas}</b></td>
          <td><span class="badge-kat ${getBadgeClass(s.kategori)}">${s.kategori}</span></td>
          <td class="text-center">${s.satuan}</td>
          <td class="text-end fw-bold text-primary">${fmtRp(s.harga_pasar)}</td>
          <td class="text-end text-muted small">${fmtRp(s.harga_min)} – ${fmtRp(s.harga_max)}</td>
          <td><i class="bi bi-geo-alt text-danger me-1"></i>${s.pasar_rujukan}</td>
          <td class="small text-muted">${s.catatan || '-'}</td>
          ${canEdit ? `
          <td class="text-center">
            <button class="btn btn-xs btn-outline-primary py-0 px-1 me-1" onclick='editKomoditasModal(${JSON.stringify(s)})' title="Edit">
              <i class="bi bi-pencil-square"></i>
            </button>
            <button class="btn btn-xs btn-outline-danger py-0 px-1" onclick="hapusKomoditas(${s.id})" title="Hapus">
              <i class="bi bi-trash"></i>
            </button>
          </td>` : ''}
        </tr>`;
    });
  }

  function filterKomoditasTabel() {
    const q = document.getElementById('searchKomoditas').value.toLowerCase();
    const kat = document.getElementById('filterKatKomoditas').value;
    const filtered = rawStandarList.filter(s => {
      if (kat && s.kategori !== kat) return false;
      if (q && !s.nama_komoditas.toLowerCase().includes(q)) return false;
      return true;
    });
    renderStandarTabel(filtered);
  }

  function tambahKomoditasModal() {
    document.getElementById('modalTitle').textContent = 'Tambah Acuan Harga Komoditas';
    document.getElementById('edit-id').value = '';
    document.getElementById('edit-nama').value = '';
    document.getElementById('edit-kat').value = 'BERAS';
    document.getElementById('edit-satuan').value = 'Kg';
    document.getElementById('edit-pasar').value = '';
    document.getElementById('edit-min').value = '';
    document.getElementById('edit-max').value = '';
    document.getElementById('edit-pasar-lokasi').value = 'Pasar Kota Wonogiri';
    document.getElementById('edit-catatan').value = '';
    modalKomoditas.show();
  }

  function editKomoditasModal(s) {
    document.getElementById('modalTitle').textContent = 'Ubah Acuan Harga Komoditas';
    document.getElementById('edit-id').value = s.id;
    document.getElementById('edit-nama').value = s.nama_komoditas;
    document.getElementById('edit-kat').value = s.kategori;
    document.getElementById('edit-satuan').value = s.satuan;
    document.getElementById('edit-pasar').value = s.harga_pasar;
    document.getElementById('edit-min').value = s.harga_min;
    document.getElementById('edit-max').value = s.harga_max;
    document.getElementById('edit-pasar-lokasi').value = s.pasar_rujukan;
    document.getElementById('edit-catatan').value = s.catatan || '';
    modalKomoditas.show();
  }

  function autoSetMinMax() {
    const p = parseFloat(document.getElementById('edit-pasar').value) || 0;
    if (p > 0) {
      document.getElementById('edit-min').value = Math.round(p * 0.85);
      document.getElementById('edit-max').value = Math.round(p * 1.15);
    }
  }

  async function simpanKomoditas() {
    const id = document.getElementById('edit-id').value;
    const payload = {
      id: id ? parseInt(id) : null,
      nama_komoditas: document.getElementById('edit-nama').value.trim(),
      kategori: document.getElementById('edit-kat').value,
      satuan: document.getElementById('edit-satuan').value.trim(),
      harga_pasar: parseFloat(document.getElementById('edit-pasar').value) || 0,
      harga_min: parseFloat(document.getElementById('edit-min').value) || 0,
      harga_max: parseFloat(document.getElementById('edit-max').value) || 0,
      pasar_rujukan: document.getElementById('edit-pasar-lokasi').value.trim(),
      catatan: document.getElementById('edit-catatan').value.trim()
    };

    if (!payload.nama_komoditas || payload.harga_pasar <= 0) {
      return Swal.fire('Perhatian', 'Nama komoditas dan harga pasar wajib diisi.', 'warning');
    }

    try {
      const resp = await fetch('/api/standar-harga', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await resp.json();
      if (resp.ok) {
        modalKomoditas.hide();
        Swal.fire({ icon: 'success', title: 'Data tersimpan!', timer: 1200, showConfirmButton: false });
        loadBenchmarkingData();
      } else {
        Swal.fire('Error', data.error || 'Gagal menyimpan data.', 'error');
      }
    } catch (e) {
      Swal.fire('Error', 'Terjadi kesalahan sistem.', 'error');
    }
  }

  async function hapusKomoditas(id) {
    const conf = await Swal.fire({
      title: 'Hapus acuan harga ini?',
      text: 'Komoditas akan dihapus dari katalog acuan pasar.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#ef4444',
      confirmButtonText: 'Ya, Hapus'
    });
    if (!conf.isConfirmed) return;

    try {
      const resp = await fetch(`/api/standar-harga/${id}`, { method: 'DELETE' });
      if (resp.ok) {
        Swal.fire({ icon: 'success', title: 'Berhasil dihapus', timer: 1200, showConfirmButton: false });
        loadBenchmarkingData();
      }
    } catch (e) {
      Swal.fire('Error', 'Gagal menghapus komoditas.', 'error');
    }
  }

  function exportHargaKeExcel() {
    if (!rawStandarList.length) return Swal.fire('Info', 'Tidak ada data untuk diexport.', 'info');
    const dataExcel = rawStandarList.map((s, i) => ({
      "No": i + 1,
      "Komoditas Pangan": s.nama_komoditas,
      "Kategori": s.kategori,
      "Satuan": s.satuan,
      "Harga Acuan Pasar Wonogiri (Rp)": s.harga_pasar,
      "Batas Minimum (Rp)": s.harga_min,
      "Batas Maksimum / HET (Rp)": s.harga_max,
      "Pasar Rujukan": s.pasar_rujukan,
      "Wilayah": s.wilayah,
      "Catatan MBG": s.catatan || '-'
    }));

    const ws = XLSX.utils.json_to_sheet(dataExcel);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Harga Pasar Wonogiri");
    XLSX.writeFile(wb, "Standar_Harga_Pasar_Wonogiri_MBG.xlsx");
  }

  // ── SINKRONISASI REALTIME PASAR WONOGIRI ──
  async function sinkronisasiRealtimePasar() {
    const res = await Swal.fire({
      title: 'Sinkronkan Harga Pasar Realtime?',
      html: `
        <div style="font-size:13px; text-align:left; color:#475569;">
          Sistem akan memperbarui timestamp tanggal pasar ke hari ini (<b>${new Date().toLocaleDateString('id-ID')}</b>) 
          dan mengkalibrasi ulang batas minimum & maksimum wajar sesuai indeks pasar komoditas pangan Kabupaten Wonogiri (Bapanas / Pasar Kota Wonogiri).
        </div>`,
      icon: 'question',
      showCancelButton: true,
      confirmButtonColor: '#0284c7',
      confirmButtonText: '<i class="bi bi-broadcast"></i> Ya, Sinkronkan Sekarang',
      cancelButtonText: 'Batal'
    });
    if (!res.isConfirmed) return;

    Swal.fire({
      title: 'Menghubungkan ke Pusat Data...',
      html: 'Mengambil data harga pasar realtime Kabupaten Wonogiri...',
      allowOutsideClick: false,
      didOpen: () => Swal.showLoading()
    });

    try {
      const resp = await fetch('/api/standar-harga/live-sync', { method: 'POST' });
      const data = await resp.json();
      if (resp.ok) {
        Swal.fire({
          icon: 'success',
          title: 'Sinkronisasi Berhasil!',
          text: data.message,
          confirmButtonColor: '#10b981'
        });
        loadBenchmarkingData();
      } else {
        Swal.fire('Gagal', data.error || 'Gagal sinkronisasi data.', 'error');
      }
    } catch (e) {
      Swal.fire('Error', 'Terjadi gangguan jaringan saat sinkronisasi realtime.', 'error');
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    // Set default awal bulan
    const now = new Date();
    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0];
    document.getElementById('tglDari').value = firstDay;
    loadBenchmarkingData();
  });
</script>
{% endblock %}