{% extends 'base.html' %}
{% block title %}SCM Analytics – Intelijen Pemasok | {{ nama_dapur }}{% 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 {
    --scm-primary: #2563eb; --scm-primary-hover: #1d4ed8; --scm-success: #10b981;
    --scm-warning: #f59e0b; --scm-danger: #ef4444; --scm-purple: #8b5cf6;
    --scm-orange: #f97316; --scm-teal: #14b8a6; --scm-dark: #0f172a; --scm-bg: #f8fafc;
  }

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

  /* KPI Cards */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 24px; }
  .kpi-card {
    background: white; border-radius: 14px; padding: 20px 22px; border: 1px solid #e2e8f0;
    display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.07); }
  .kpi-icon {
    width: 52px; height: 52px; border-radius: 12px; display: flex;
    align-items: center; justify-content: center; font-size: 26px; color: white; flex-shrink: 0;
  }
  .kpi-info h5 { font-size: 12.5px; color: #64748b; font-weight: 500; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.3px; }
  .kpi-info h2 { font-size: 20px; color: var(--scm-dark); font-weight: 700; line-height: 1.2; }

  /* Filter Bar */
  .filter-card {
    background: white; border-radius: 14px; padding: 14px 20px; border: 1px solid #e2e8f0;
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 22px;
    box-shadow: 0 2px 6px 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 input, .filter-group select {
    padding: 9px 12px; border-radius: 8px; border: 1px solid #cbd5e1; outline: none;
    font-size: 13px; color: #334155; font-weight: 600; background: white; transition: border-color 0.2s;
  }
  .filter-group input:focus, .filter-group select:focus { border-color: var(--scm-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
  .filter-group select { cursor: pointer; min-width: 175px; }
  .btn-reset {
    padding: 9px 15px; border-radius: 8px; background: #f1f5f9; color: #475569;
    border: none; cursor: pointer; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; transition: 0.2s;
  }
  .btn-reset:hover { background: #e2e8f0; }
  .btn-filter-apply {
    padding: 9px 18px; border-radius: 8px; background: var(--scm-primary); color: white;
    border: none; cursor: pointer; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; transition: 0.2s;
  }
  .btn-filter-apply:hover { background: var(--scm-primary-hover); }

  /* Charts Grid */
  .chart-analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(46%, 1fr)); gap: 22px; margin-bottom: 22px; }
  .chart-card {
    background: white; border-radius: 16px; padding: 22px 24px; border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  }
  .chart-card-title {
    font-size: 13px; font-weight: 700; color: var(--scm-dark); margin-bottom: 18px;
    display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px; text-transform: uppercase; letter-spacing: 0.3px;
  }

  /* Bar Chart Rows */
  .chart-row { margin-bottom: 14px; }
  .chart-row-info { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #334155; }
  .chart-row-info .label { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chart-bar-bg { width: 100%; height: 10px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
  .chart-bar-fill { height: 100%; border-radius: 5px; width: 0%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

  /* Risk Alerts */
  .risk-section {
    background: white; border-radius: 16px; padding: 22px 24px; margin-bottom: 22px;
    border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  }
  .risk-section-title { font-size: 14px; font-weight: 700; color: var(--scm-dark); margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
  .risk-alert-box {
    padding: 13px 16px; border-radius: 10px; margin-bottom: 10px; font-size: 13px;
    display: flex; align-items: flex-start; gap: 12px; font-weight: 500; line-height: 1.6;
  }
  .risk-alert-box i { font-size: 22px; margin-top: 1px; flex-shrink: 0; }
  .risk-high { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
  .risk-medium { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
  .risk-normal { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

  /* Main Table Card */
  .table-card { background: white; border-radius: 16px; padding: 24px; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
  .table-header-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid #f1f5f9; padding-bottom: 16px; margin-bottom: 4px; }
  .table-controls-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; }

  .scm-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #e2e8f0; margin-top: 12px; }
  .scm-table { width: 100%; border-collapse: collapse; min-width: 900px; }
  .scm-table 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;
    white-space: nowrap; cursor: pointer; user-select: none;
  }
  .scm-table th:hover { background: #f1f5f9; color: var(--scm-primary); }
  .scm-table th.sort-asc::after { content: ' ↑'; color: var(--scm-primary); }
  .scm-table th.sort-desc::after { content: ' ↓'; color: var(--scm-primary); }
  .scm-table td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; color: #334155; vertical-align: middle; }
  .scm-table tbody tr:hover td { background: #fafafe; }
  .td-num { text-align: right; font-weight: 600; }

  .link-audit { color: var(--scm-primary); font-weight: 700; cursor: pointer; text-decoration: underline dotted; transition: 0.2s; }
  .link-audit:hover { color: var(--scm-primary-hover); background: #eff6ff; padding: 3px 6px; border-radius: 4px; }

  .badge-tier {
    padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
    color: white; display: inline-block; text-align: center;
  }
  .badge-kat {
    background: #f1f5f9; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; color: #475569;
  }

  .btn-excel {
    background: var(--scm-success); color: white; padding: 10px 18px; border-radius: 8px;
    font-size: 13px; font-weight: 600; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 6px; transition: 0.2s;
    box-shadow: 0 2px 6px rgba(16,185,129,0.2);
  }
  .btn-excel:hover { background: #059669; }

  .search-box {
    width: 260px; padding: 9px 12px; border-radius: 8px; border: 1px solid #cbd5e1;
    font-size: 13px; outline: none; transition: border-color 0.2s;
  }
  .search-box:focus { border-color: var(--scm-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

  /* Loading state */
  .loading-overlay { text-align: center; padding: 48px 0; color: #94a3b8; }
  .loading-overlay .spinner-border { width: 2.5rem; height: 2.5rem; border-width: 3px; }

  /* Empty state */
  .empty-state { text-align: center; padding: 40px 20px; color: #94a3b8; font-size: 14px; }
  .empty-state i { font-size: 48px; display: block; margin-bottom: 10px; }

  /* Print */
  @media print {
    .sidebar, .topbar, .filter-card, .table-controls-inline, .btn-excel, .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .page-body { padding: 0 !important; }
    .kpi-card, .chart-card, .table-card, .risk-section { break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; }
    .chart-analytics-grid { display: block; }
    .chart-card { margin-bottom: 15px; }
    @page { margin: 1cm; size: A4 landscape; }
  }

  @media (max-width: 900px) {
    .chart-analytics-grid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .filter-card { flex-direction: column; align-items: flex-start; }
  }
</style>
{% endblock %}

{% block content %}
<div class="scm-wrapper">

  <!-- HEADER -->
  <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-4">
    <div>
      <h4 class="fw-bold mb-1 text-dark">
        <i class='bx bx-network-chart me-2' style="color: var(--scm-primary);"></i>SCM Analytics — Intelijen & Klasifikasi Pareto Pemasok
      </h4>
      <small class="text-muted">Analisis rantai pasokan, deteksi monopoli anggaran, klasifikasi ABC Pareto, dan audit transaksi belanja bahan MBG secara mendalam</small>
    </div>
    <div class="d-flex gap-2 no-print">
      <button class="btn btn-outline-primary btn-sm" onclick="window.print()">
        <i class="bi bi-printer me-1"></i> Cetak PDF
      </button>
      <a href="{{ url_for('analitik') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-graph-up-arrow me-1"></i> Dashboard BI
      </a>
    </div>
  </div>

  <!-- FILTER BAR -->
  <div class="filter-card no-print">
    <div class="filter-group">
      <label><i class='bx bx-store-alt'></i> Filter Dapur:</label>
      <select id="filterDapur" {% if user_role == 'admin_dapur' and user_dapur_id %}disabled{% endif %}>
        <option value="">-- Semua Dapur MBG --</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>
    <div class="filter-group">
      <label><i class='bx bx-calendar'></i> Dari:</label>
      <input type="date" id="filterStart" value="{{ start_month_iso }}">
    </div>
    <div class="filter-group">
      <label><i class='bx bx-calendar'></i> Sampai:</label>
      <input type="date" id="filterEnd" value="{{ today_iso }}">
    </div>
    <div class="filter-group">
      <label><i class='bx bx-check-shield'></i> Status:</label>
      <select id="filterStatus">
        <option value="all">Semua Transaksi</option>
        <option value="validated_only">Tervalidasi Saja</option>
      </select>
    </div>
    <button type="button" class="btn-filter-apply" onclick="loadAnalisaData()">
      <i class='bx bx-search'></i> Analisa
    </button>
    <button type="button" id="btnReset" class="btn-reset">
      <i class='bx bx-refresh'></i> Reset
    </button>
  </div>

  <!-- LOADING -->
  <div id="loadingSection" class="loading-overlay d-none">
    <div class="spinner-border text-primary mb-2" role="status"></div>
    <div class="text-muted small mt-2">Menghitung intelijen rantai pasokan...</div>
  </div>

  <div id="mainContent">

    <!-- KPI CARDS -->
    <div class="kpi-grid">
      <div class="kpi-card">
        <div class="kpi-icon" style="background: var(--scm-primary);"><i class='bx bx-wallet'></i></div>
        <div class="kpi-info">
          <h5>Total Volume Belanja</h5>
          <h2 id="kpiTotalBelanja">Rp 0</h2>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon" style="background: var(--scm-purple);"><i class='bx bx-receipt'></i></div>
        <div class="kpi-info">
          <h5>Total Transaksi Nota</h5>
          <h2 id="kpiTotalNota">0 Nota</h2>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon" style="background: var(--scm-teal);"><i class='bx bx-calculator'></i></div>
        <div class="kpi-info">
          <h5>Rata-rata Nilai per Nota</h5>
          <h2 id="kpiRataNota">Rp 0</h2>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon" style="background: var(--scm-success);"><i class='bx bx-group'></i></div>
        <div class="kpi-info">
          <h5>Pemasok Komoditas Aktif</h5>
          <h2 id="kpiSuplayerAktif">0 Vendor</h2>
        </div>
      </div>
    </div>

    <!-- RISK ANALYSIS -->
    <div class="risk-section">
      <div class="risk-section-title">
        <i class='bx bx-shield-quarter' style="color: var(--scm-danger); font-size: 20px;"></i>
        Analisis Risiko Rantai Pasokan & Deteksi Monopoli Anggaran
      </div>
      <div id="wrapperRiskAlerts">
        <div class="risk-alert-box risk-normal">
          <i class='bx bx-info-circle'></i>
          <div><b>Pilih filter dan klik Analisa</b> untuk menjalankan pemindaian risiko rantai pasokan secara otomatis.</div>
        </div>
      </div>
    </div>

    <!-- CHART GRID: 2x3 -->
    <div class="chart-analytics-grid">
      <!-- Top 5 Omset -->
      <div class="chart-card">
        <div class="chart-card-title" style="color: var(--scm-primary);">
          <i class='bx bx-bar-chart-square'></i> Top 5 Pemasok Omset Terbesar
        </div>
        <div id="wrapperChartOmset"><div class="empty-state"><i class='bx bx-bar-chart-alt-2'></i>Belum ada data.</div></div>
      </div>

      <!-- Top 5 Frekuensi -->
      <div class="chart-card">
        <div class="chart-card-title" style="color: var(--scm-purple);">
          <i class='bx bx-trending-up'></i> Top 5 Frekuensi Pengiriman Terbanyak
        </div>
        <div id="wrapperChartFreq"><div class="empty-state"><i class='bx bx-bar-chart-alt-2'></i>Belum ada data.</div></div>
      </div>

      <!-- Top 5 Rata-rata Nilai Besar -->
      <div class="chart-card">
        <div class="chart-card-title" style="color: var(--scm-teal);">
          <i class='bx bx-money-withdraw'></i> Top 5 Nilai Pengiriman Rata-rata Tertinggi
        </div>
        <div id="wrapperChartRataBesar"><div class="empty-state"><i class='bx bx-bar-chart-alt-2'></i>Belum ada data.</div></div>
      </div>

      <!-- Kategori Belanja -->
      <div class="chart-card">
        <div class="chart-card-title" style="color: var(--scm-orange);">
          <i class='bx bx-pie-chart-alt'></i> Penyerapan Anggaran Per Kategori Bahan
        </div>
        <div id="wrapperChartKategori"><div class="empty-state"><i class='bx bx-bar-chart-alt-2'></i>Belum ada data.</div></div>
      </div>

      <!-- Skala Transaksi -->
      <div class="chart-card">
        <div class="chart-card-title" style="color: var(--scm-danger);">
          <i class='bx bx-cart-alt'></i> Klasifikasi Skala Nilai Transaksi Belanja
        </div>
        <div id="wrapperChartSkalaTrx"><div class="empty-state"><i class='bx bx-bar-chart-alt-2'></i>Belum ada data.</div></div>
      </div>

      <!-- Unit Dapur Share -->
      <div class="chart-card">
        <div class="chart-card-title" style="color: var(--scm-dark);">
          <i class='bx bx-buildings'></i> Penyerapan Anggaran Berdasarkan Unit Dapur
        </div>
        <div id="wrapperChartDapurShare"><div class="empty-state"><i class='bx bx-bar-chart-alt-2'></i>Belum ada data.</div></div>
      </div>
    </div>

    <!-- MATRIKS INTELIJEN PEMASOK -->
    <div class="table-card">
      <div class="table-header-flex">
        <div>
          <div style="font-size: 16px; font-weight: 700; color: var(--scm-dark);">
            <i class='bx bx-list-ul'></i> Matriks Intelijen & Klasifikasi Pareto Pemasok (ABC)
          </div>
          <p style="font-size: 12px; color: #94a3b8; margin-top: 3px;">
            * Klik nama pemasok untuk melihat audit rincian transaksi secara terperinci.
          </p>
        </div>
        <button class="btn-excel no-print" onclick="exportDataAnalisaKeExcel()">
          <i class='bx bx-download'></i> Download Excel Report
        </button>
      </div>

      <div class="table-controls-inline no-print">
        <input type="text" id="tableSearch" class="search-box" placeholder="🔍 Cari nama pemasok...">
        <select id="tableFilterKategori" style="padding:9px 12px; border-radius:8px; border:1px solid #cbd5e1; font-size:13px; font-weight:600; color:#475569; background:white; cursor:pointer; outline:none;">
          <option value="">-- Semua Kategori Bahan --</option>
        </select>
        <select id="tableFilterTier" style="padding:9px 12px; border-radius:8px; border:1px solid #cbd5e1; font-size:13px; font-weight:600; color:#475569; background:white; cursor:pointer; outline:none;">
          <option value="">-- Semua Kelas ABC --</option>
          <option value="A">Kelas A (VIP)</option>
          <option value="B">Kelas B (Mid)</option>
          <option value="C">Kelas C (Low)</option>
        </select>
      </div>

      <div class="scm-table-wrap">
        <table class="scm-table">
          <thead>
            <tr>
              <th style="width:50px; text-align:center; cursor:default;">Rank</th>
              <th onclick="sortTable('nama')">Nama Pemasok</th>
              <th style="text-align:center;" onclick="sortTable('tier')">Kelas (Pareto)</th>
              <th style="text-align:center;" onclick="sortTable('kategori')">Kategori Bahan</th>
              <th style="text-align:right;" onclick="sortTable('frekuensi')">Total Nota</th>
              <th style="text-align:right;" onclick="sortTable('rata_rata')">Rata-rata Transaksi</th>
              <th style="text-align:right;" onclick="sortTable('market_share')">Share Pasar</th>
              <th style="text-align:right; color:var(--scm-primary);" onclick="sortTable('omset')">Total Akumulasi Omset</th>
            </tr>
          </thead>
          <tbody id="tbodyAnalisa">
            <tr><td colspan="8" class="empty-state">Klik <b>Analisa</b> untuk memuat data.</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
  // ─── STATE ───
  let computedPemasokList = [];
  let globalDetailTransaksi = {};
  window.dataGlobalAnalisaExcel = [];
  let sortState = { field: 'omset', dir: 'desc' };

  // ─── FORMATTERS ───
  function formatRupiah(angka) {
    if (angka === null || angka === undefined) return 'Rp 0';
    return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(angka);
  }
  function formatRupiahShort(angka) {
    if (!angka) return 'Rp 0';
    if (angka >= 1_000_000_000) return `Rp ${(angka/1_000_000_000).toFixed(1)}M`;
    if (angka >= 1_000_000) return `Rp ${(angka/1_000_000).toFixed(1)} Jt`;
    if (angka >= 1_000) return `Rp ${(angka/1_000).toFixed(0)}K`;
    return formatRupiah(angka);
  }
  function formatTanggal(tgl) {
    if (!tgl) return '-';
    return new Date(tgl).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' });
  }

  // ─── LOAD DATA FROM FLASK API ───
  async function loadAnalisaData() {
    document.getElementById('loadingSection').classList.remove('d-none');
    document.getElementById('mainContent').style.opacity = '0.4';

    const dapur = document.getElementById('filterDapur').value;
    const start = document.getElementById('filterStart').value;
    const end = document.getElementById('filterEnd').value;
    const status = document.getElementById('filterStatus').value;

    const params = new URLSearchParams();
    if (dapur) params.append('dapur_id', dapur);
    if (start) params.append('tgl_dari', start);
    if (end) params.append('tgl_sampai', end);
    params.append('status', status);

    try {
      const resp = await fetch('/api/analisa-scm?' + params.toString());
      if (!resp.ok) throw new Error(`HTTP error ${resp.status}`);
      const data = await resp.json();
      processAndRender(data);
    } catch (e) {
      console.error(e);
      Swal.fire('Error', 'Gagal memuat data analitik dari server. ' + e.message, 'error');
    } finally {
      document.getElementById('loadingSection').classList.add('d-none');
      document.getElementById('mainContent').style.opacity = '1';
    }
  }

  function processAndRender(data) {
    const kpi = data.kpi || {};
    computedPemasokList = data.pemasok_list || [];
    globalDetailTransaksi = {};

    // ── KPI ──
    document.getElementById('kpiTotalBelanja').textContent = formatRupiah(kpi.total_belanja || 0);
    document.getElementById('kpiTotalNota').textContent = `${(kpi.total_nota || 0).toLocaleString('id-ID')} Nota`;
    document.getElementById('kpiRataNota').textContent = formatRupiah(kpi.rata_nota || 0);
    document.getElementById('kpiSuplayerAktif').textContent = `${kpi.jumlah_pemasok || 0} Vendor`;

    // ── RISK ALERTS ──
    const risks = data.risk_alerts || [];
    let riskHtml = '';
    if (risks.length === 0) {
      riskHtml = `<div class="risk-alert-box risk-normal"><i class='bx bx-check-shield'></i><div><b>RANTAI PASOKAN SEHAT:</b> Distribusi anggaran merata. Tidak terdeteksi monopoli anggaran ekstrim maupun ketergantungan sumber tunggal pada kategori kritikal.</div></div>`;
    } else {
      risks.forEach(r => {
        if (r.type === 'monopoli') {
          riskHtml += `<div class="risk-alert-box risk-high"><i class='bx bx-error-circle'></i><div><b>MONOPOLI ANGGARAN:</b> Vendor <b>${r.pemasok}</b> menguasai <b>${r.share}%</b> pengadaan (${formatRupiah(r.nominal)}). Cari vendor alternatif untuk <b>${r.kategori}</b> guna mencegah permainan harga.</div></div>`;
        } else {
          riskHtml += `<div class="risk-alert-box risk-medium"><i class='bx bx-link-broken'></i><div><b>SUMBER TUNGGAL (SINGLE SOURCE):</b> Kebutuhan <b>${r.kategori}</b> 100% bergantung pada <b>${r.pemasok}</b> (${formatRupiah(r.nominal)}). Risiko fatal jika pasokan vendor ini terganggu.</div></div>`;
        }
      });
    }
    document.getElementById('wrapperRiskAlerts').innerHTML = riskHtml;

    // ── CHARTS ──
    const totalB = kpi.total_belanja || 1;

    // Top 5 Omset
    const top5Omset = data.top5_omset || [];
    const maxOmset = top5Omset.length > 0 ? top5Omset[0].omset : 1;
    document.getElementById('wrapperChartOmset').innerHTML = top5Omset.length === 0
      ? '<div class="empty-state"><i class=\'bx bx-bar-chart-alt-2\'></i>Tidak ada data.</div>'
      : top5Omset.map(s => `
          <div class="chart-row">
            <div class="chart-row-info">
              <span class="label" title="${s.nama}">${s.nama} (${s.market_share}%)</span>
              <span>${formatRupiahShort(s.omset)}</span>
            </div>
            <div class="chart-bar-bg"><div class="chart-bar-fill" data-width="${Math.round(s.omset/maxOmset*100)}%" style="background: var(--scm-primary);"></div></div>
          </div>`).join('');

    // Top 5 Frekuensi
    const top5Freq = data.top5_freq || [];
    const maxFreq = top5Freq.length > 0 ? top5Freq[0].frekuensi : 1;
    document.getElementById('wrapperChartFreq').innerHTML = top5Freq.length === 0
      ? '<div class="empty-state"><i class=\'bx bx-bar-chart-alt-2\'></i>Tidak ada data.</div>'
      : top5Freq.map(s => `
          <div class="chart-row">
            <div class="chart-row-info">
              <span class="label" title="${s.nama}">${s.nama}</span>
              <span>${s.frekuensi} Kali</span>
            </div>
            <div class="chart-bar-bg"><div class="chart-bar-fill" data-width="${Math.round(s.frekuensi/maxFreq*100)}%" style="background: var(--scm-purple);"></div></div>
          </div>`).join('');

    // Top 5 Rata-rata
    const top5Rata = data.top5_rata || [];
    const maxRata = top5Rata.length > 0 ? top5Rata[0].rata_rata : 1;
    document.getElementById('wrapperChartRataBesar').innerHTML = top5Rata.length === 0
      ? '<div class="empty-state"><i class=\'bx bx-bar-chart-alt-2\'></i>Tidak ada data.</div>'
      : top5Rata.map(s => `
          <div class="chart-row">
            <div class="chart-row-info">
              <span class="label" title="${s.nama}">${s.nama}</span>
              <span>${formatRupiahShort(s.rata_rata)} / nota</span>
            </div>
            <div class="chart-bar-bg"><div class="chart-bar-fill" data-width="${Math.round(s.rata_rata/maxRata*100)}%" style="background: var(--scm-teal);"></div></div>
          </div>`).join('');

    // Kategori
    const katList = data.kategori_chart || [];
    document.getElementById('wrapperChartKategori').innerHTML = katList.length === 0
      ? '<div class="empty-state"><i class=\'bx bx-bar-chart-alt-2\'></i>Tidak ada data.</div>'
      : katList.map(k => {
          const pct = totalB > 0 ? Math.round(k.total / totalB * 100) : 0;
          return `<div class="chart-row">
            <div class="chart-row-info">
              <span class="label">${k.nama} (${pct}%)</span>
              <span>${formatRupiahShort(k.total)}</span>
            </div>
            <div class="chart-bar-bg"><div class="chart-bar-fill" data-width="${pct}%" style="background: var(--scm-orange);"></div></div>
          </div>`;
        }).join('');

    // Skala Transaksi
    const skala = data.skala_trx || { eceran: 0, menengah: 0, grosir: 0 };
    const maxSkala = Math.max(skala.eceran, skala.menengah, skala.grosir, 1);
    document.getElementById('wrapperChartSkalaTrx').innerHTML = `
      <div class="chart-row">
        <div class="chart-row-info"><span class="label">Eceran Kecil (&lt; Rp 500rb)</span><span>${skala.eceran} Transaksi</span></div>
        <div class="chart-bar-bg"><div class="chart-bar-fill" data-width="${Math.round(skala.eceran/maxSkala*100)}%" style="background:#94a3b8;"></div></div>
      </div>
      <div class="chart-row">
        <div class="chart-row-info"><span class="label">Menengah (Rp 500rb – 2 Jt)</span><span>${skala.menengah} Transaksi</span></div>
        <div class="chart-bar-bg"><div class="chart-bar-fill" data-width="${Math.round(skala.menengah/maxSkala*100)}%" style="background:#3b82f6;"></div></div>
      </div>
      <div class="chart-row">
        <div class="chart-row-info"><span class="label">Grosir Skala Besar (&gt; Rp 2 Jt)</span><span>${skala.grosir} Transaksi</span></div>
        <div class="chart-bar-bg"><div class="chart-bar-fill" data-width="${Math.round(skala.grosir/maxSkala*100)}%" style="background:#ef4444;"></div></div>
      </div>`;

    // Dapur Share
    const dapurList = data.dapur_chart || [];
    const maxDapur = dapurList.length > 0 ? dapurList[0].total : 1;
    document.getElementById('wrapperChartDapurShare').innerHTML = dapurList.length === 0
      ? '<div class="empty-state"><i class=\'bx bx-bar-chart-alt-2\'></i>Tidak ada data.</div>'
      : dapurList.map(d => {
          const pct = totalB > 0 ? Math.round(d.total / totalB * 100) : 0;
          const barW = Math.round(d.total / maxDapur * 100);
          return `<div class="chart-row">
            <div class="chart-row-info">
              <span class="label"><b>${d.nama}</b> (${pct}% dana)</span>
              <span>${formatRupiahShort(d.total)}</span>
            </div>
            <div class="chart-bar-bg"><div class="chart-bar-fill" data-width="${barW}%" style="background: var(--scm-dark);"></div></div>
          </div>`;
        }).join('');

    // Animasi lebar bar chart setelah render
    setTimeout(() => {
      document.querySelectorAll('.chart-bar-fill[data-width]').forEach(el => {
        el.style.width = el.getAttribute('data-width');
      });
    }, 60);

    // ── UPDATE KATEGORI FILTER DROPDOWN ──
    const katFilterSel = document.getElementById('tableFilterKategori');
    const prevKat = katFilterSel.value;
    katFilterSel.innerHTML = '<option value="">-- Semua Kategori Bahan --</option>';
    const kats = [...new Set(computedPemasokList.map(p => p.kategori))].sort();
    kats.forEach(k => { katFilterSel.innerHTML += `<option value="${k}">${k}</option>`; });
    if (prevKat && kats.includes(prevKat)) katFilterSel.value = prevKat;

    filterAndRenderTabel();
  }

  // ─── TABEL MATRIKS ───
  function filterAndRenderTabel() {
    const tbody = document.getElementById('tbodyAnalisa');
    const search = document.getElementById('tableSearch').value.toLowerCase();
    const katFilter = document.getElementById('tableFilterKategori').value;
    const tierFilter = document.getElementById('tableFilterTier').value;

    tbody.innerHTML = '';
    window.dataGlobalAnalisaExcel = [];
    let rank = 1;

    let filtered = computedPemasokList.filter(s => {
      if (katFilter && s.kategori !== katFilter) return false;
      if (tierFilter && s.tier !== tierFilter) return false;
      if (search && !s.nama.toLowerCase().includes(search)) return false;
      return true;
    });

    // Sort
    filtered.sort((a, b) => {
      let va = a[sortState.field] || 0;
      let vb = b[sortState.field] || 0;
      if (typeof va === 'string') va = va.toLowerCase();
      if (typeof vb === 'string') vb = vb.toLowerCase();
      if (va < vb) return sortState.dir === 'asc' ? -1 : 1;
      if (va > vb) return sortState.dir === 'asc' ? 1 : -1;
      return 0;
    });

    if (filtered.length === 0) {
      tbody.innerHTML = `<tr><td colspan="8" class="empty-state" style="padding:32px;"><i class='bx bx-search-alt' style="font-size:32px;display:block;margin-bottom:8px;"></i>Tidak ada pemasok yang cocok dengan kriteria pencarian.</td></tr>`;
      return;
    }

    filtered.forEach(s => {
      window.dataGlobalAnalisaExcel.push({
        "Ranking": rank,
        "Nama Pemasok": s.nama,
        "Bank": s.bank,
        "No. Rekening": s.no_rekening,
        "Klasifikasi ABC": s.tier_name,
        "Kategori Bahan": s.kategori,
        "Total Nota": s.frekuensi,
        "Rata-Rata Transaksi (Rp)": s.rata_rata,
        "Market Share (%)": s.market_share + "%",
        "Total Omset (Rp)": s.omset
      });

      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td style="text-align:center; font-weight:700; color:#94a3b8;">${rank}</td>
        <td>
          <span class="link-audit" onclick="auditPemasok('${s.nama.replace(/'/g, "\\'")}', '${s.kategori}', '${s.bank}', '${s.no_rekening}')" title="Klik untuk Audit Transaksi">
            <i class='bx bx-search-alt-2'></i> ${s.nama}
          </span>
          <div style="font-size:11px; color:#94a3b8; margin-top:2px;">${s.bank} / ${s.no_rekening}</div>
        </td>
        <td style="text-align:center;">
          <span class="badge-tier" style="background-color:${s.tier_color};">${s.tier_name}</span>
        </td>
        <td style="text-align:center;"><span class="badge-kat">${s.kategori}</span></td>
        <td class="td-num">${(s.frekuensi).toLocaleString('id-ID')}x</td>
        <td class="td-num" style="color:#64748b;">${formatRupiah(s.rata_rata)}</td>
        <td class="td-num" style="color:var(--scm-orange); font-weight:700;">${s.market_share}%</td>
        <td class="td-num" style="color:var(--scm-primary); font-size:14px;">${formatRupiah(s.omset)}</td>
      `;
      tbody.appendChild(tr);
      rank++;
    });
  }

  // ─── SORT TABLE ───
  function sortTable(field) {
    if (sortState.field === field) {
      sortState.dir = sortState.dir === 'asc' ? 'desc' : 'asc';
    } else {
      sortState.field = field;
      sortState.dir = 'desc';
    }
    // Update header visual
    document.querySelectorAll('.scm-table th').forEach(th => {
      th.classList.remove('sort-asc', 'sort-desc');
    });
    filterAndRenderTabel();
  }

  // ─── AUDIT POPUP ───
  window.auditPemasok = async function(nama, kategori, bank, noRek) {
    const dapur = document.getElementById('filterDapur').value;
    const start = document.getElementById('filterStart').value;
    const end = document.getElementById('filterEnd').value;
    const status = document.getElementById('filterStatus').value;

    const params = new URLSearchParams();
    params.append('nama_pemasok', nama);
    if (dapur) params.append('dapur_id', dapur);
    if (start) params.append('tgl_dari', start);
    if (end) params.append('tgl_sampai', end);
    params.append('status', status);

    Swal.fire({ title: 'Memuat...', didOpen: () => Swal.showLoading() });

    try {
      const resp = await fetch('/api/analisa-scm/audit?' + params.toString());
      const data = await resp.json();
      const transaksi = data.transaksi || [];

      let totalNominal = 0;
      let rowsHtml = '';
      transaksi.forEach((item, i) => {
        totalNominal += item.nominal || 0;
        rowsHtml += `
          <tr style="font-size:13px; border-bottom:1px solid #e2e8f0;">
            <td style="text-align:center; padding:8px; color:#94a3b8;">${i + 1}</td>
            <td style="text-align:center; padding:8px; font-weight:500;">${formatTanggal(item.tanggal)}</td>
            <td style="padding:8px; font-weight:600; color:var(--scm-primary);">${item.dapur || '-'}</td>
            <td style="padding:8px;">${item.kategori || '-'}</td>
            <td style="padding:8px; font-size:12px; color:#64748b; max-width:180px; word-break:break-word;">${item.keterangan || '-'}</td>
            <td style="text-align:right; padding:8px; font-weight:700;">${formatRupiah(item.nominal)}</td>
            <td style="text-align:center; padding:8px;">${item.divalidasi ? '<span style="color:#10b981; font-weight:700;">✓ Valid</span>' : '<span style="color:#94a3b8;">Pending</span>'}</td>
          </tr>`;
      });

      if (rowsHtml === '') {
        rowsHtml = `<tr><td colspan="7" style="text-align:center; padding:20px; color:#94a3b8; font-style:italic;">Tidak ada transaksi ditemukan dalam periode ini.</td></tr>`;
      }

      Swal.fire({
        title: `<span style='font-size:16px; font-weight:700;'>Audit Transaksi: ${nama}</span>`,
        html: `
          <div style="font-size:12px; color:#64748b; margin-bottom:10px; text-align:left;">
            <b>${kategori}</b> | ${bank} / ${noRek}
          </div>
          <div style="overflow-x:auto; max-height:380px; border:1px solid #e2e8f0; border-radius:8px; background:white;">
            <table style="width:100%; border-collapse:collapse; text-align:left; min-width:650px;">
              <thead>
                <tr style="background:#f8fafc; border-bottom:2px solid #e2e8f0; font-size:11px; color:#64748b;">
                  <th style="padding:8px; text-align:center;">No</th>
                  <th style="padding:8px; text-align:center;">Tanggal</th>
                  <th style="padding:8px;">Unit Dapur</th>
                  <th style="padding:8px;">Kategori</th>
                  <th style="padding:8px;">Keterangan</th>
                  <th style="padding:8px; text-align:right;">Nominal Belanja</th>
                  <th style="padding:8px; text-align:center;">Status</th>
                </tr>
              </thead>
              <tbody>${rowsHtml}</tbody>
              <tfoot>
                <tr style="background:#f0fdf4; font-weight:700; border-top:2px solid #bbf7d0; font-size:13px; color:#15803d;">
                  <td colspan="5" style="text-align:right; padding:10px;">TOTAL AUDIT PERIODE INI:</td>
                  <td style="text-align:right; padding:10px; font-size:14px;">${formatRupiah(totalNominal)}</td>
                  <td></td>
                </tr>
              </tfoot>
            </table>
          </div>`,
        width: '900px',
        confirmButtonText: '<i class="bx bx-check-circle"></i> Selesai Audit',
        confirmButtonColor: '#2563eb',
        showClass: { popup: 'animate__animated animate__fadeIn' }
      });
    } catch (e) {
      Swal.fire('Error', 'Gagal memuat audit transaksi pemasok.', 'error');
    }
  };

  // ─── EXPORT EXCEL ───
  window.exportDataAnalisaKeExcel = function() {
    if (window.dataGlobalAnalisaExcel.length === 0) {
      return Swal.fire('Info', 'Tidak ada data matriks untuk diexport. Jalankan analisa terlebih dahulu.', 'info');
    }
    const dapurOpt = document.getElementById('filterDapur');
    const dapurLabel = dapurOpt.options[dapurOpt.selectedIndex].text;
    let fname = 'Matriks_SCM_Intelijen_Pemasok_MBG.xlsx';
    if (dapurOpt.value) fname = `Intelijen_Pemasok_${dapurLabel.replace(/\s+/g,'_')}.xlsx`;

    const ws = XLSX.utils.json_to_sheet(window.dataGlobalAnalisaExcel);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Intelijen Pemasok');
    XLSX.writeFile(wb, fname);
  };

  // ─── EVENT LISTENERS ───
  document.getElementById('filterDapur').addEventListener('change', loadAnalisaData);
  document.getElementById('filterStart').addEventListener('change', loadAnalisaData);
  document.getElementById('filterEnd').addEventListener('change', loadAnalisaData);
  document.getElementById('filterStatus').addEventListener('change', loadAnalisaData);
  document.getElementById('tableSearch').addEventListener('keyup', filterAndRenderTabel);
  document.getElementById('tableFilterKategori').addEventListener('change', filterAndRenderTabel);
  document.getElementById('tableFilterTier').addEventListener('change', filterAndRenderTabel);

  document.getElementById('btnReset').addEventListener('click', () => {
    document.getElementById('filterDapur').value = '{{ user_dapur_id if user_dapur_id and user_role == "admin_dapur" else "" }}';
    document.getElementById('filterStart').value = '{{ start_month_iso }}';
    document.getElementById('filterEnd').value = '{{ today_iso }}';
    document.getElementById('filterStatus').value = 'all';
    document.getElementById('tableSearch').value = '';
    document.getElementById('tableFilterKategori').value = '';
    document.getElementById('tableFilterTier').value = '';
    loadAnalisaData();
  });

  // ─── AUTO LOAD ON PAGE READY ───
  document.addEventListener('DOMContentLoaded', () => {
    loadAnalisaData();
  });
</script>
{% endblock %}