<?php require_once 'functions.php'; ?>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dashboard RTRW</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div class="container">
    <h1>Dashboard RTRW</h1>
    <p><a href="index.php">List</a> | <a href="dashboard.php">Dashboard</a></p>

    <div class="filters">
      <label>Wilayah:
        <select id="filter_wadmkk">
          <option value="">-- Semua --</option>
          <?php $units = get_adm_units($mysqli); foreach($units as $u): ?>
            <option value="<?php echo $u['id'] ?>"><?php echo htmlspecialchars($u['wadmkk']) ?></option>
          <?php endforeach; ?>
        </select>
      </label>

      <label>Kategori:
        <select id="filter_category">
          <option value="kkop_1">kkop_1</option>
          <option value="kp2b_2">kp2b_2</option>
          <option value="krb_03">krb_03</option>
          <option value="cagbud">cagbud</option>
          <option value="resair">resair</option>
        </select>
      </label>

      <button id="btn_reload">Reload</button>
    </div>

    <h2>Jumlah Objek per Wilayah</h2>
    <canvas id="chart_wadmkk" height="120"></canvas>

    <h2>Top Nama Objek (per Wilayah)</h2>
    <canvas id="chart_namobj" height="120"></canvas>

    <h2>Komposisi Kategori</h2>
    <canvas id="chart_category" height="120"></canvas>
  </div>

<script>
async function fetchJSON(url) {
  const res = await fetch(url);
  return await res.json();
}

let chartWadmkk, chartNamobj, chartCategory;

async function loadWadmkk() {
  const data = await fetchJSON('api_summary.php?action=wadmkk');
  const labels = data.map(r => r.wadmkk);
  const values = data.map(r => parseInt(r.total_objects));
  const areas = data.map(r => parseFloat(r.total_area) || 0);
  const ctx = document.getElementById('chart_wadmkk').getContext('2d');
  if (chartWadmkk) chartWadmkk.destroy();
  chartWadmkk = new Chart(ctx, {
    type: 'bar',
    data: { labels: labels, datasets: [{ label: 'Jumlah Objek', data: values }] },
    options: { responsive:true, maintainAspectRatio:false }
  });
}

async function loadNamobj(wadmkk_id) {
  const data = await fetchJSON('api_summary.php?action=namobj&wadmkk_id=' + (wadmkk_id || '0'));
  const labels = data.map(r => r.namobj);
  const values = data.map(r => parseInt(r.total_objects));
  const ctx = document.getElementById('chart_namobj').getContext('2d');
  if (chartNamobj) chartNamobj.destroy();
  chartNamobj = new Chart(ctx, {
    type: 'bar',
    data: { labels: labels, datasets: [{ label: 'Jumlah per Namobj', data: values }] },
    options: { responsive:true, maintainAspectRatio:false }
  });
}

async function loadCategory(cat, wadmkk_id) {
  const data = await fetchJSON('api_summary.php?action=category&category=' + encodeURIComponent(cat) + (wadmkk_id ? '&wadmkk_id=' + wadmkk_id : ''));
  const labels = data.map(r => r.category_value || 'NULL');
  const values = data.map(r => parseInt(r.total_objects));
  const ctx = document.getElementById('chart_category').getContext('2d');
  if (chartCategory) chartCategory.destroy();
  chartCategory = new Chart(ctx, {
    type: 'pie',
    data: { labels: labels, datasets: [{ label: 'Kategori', data: values }] },
    options: { responsive:true, maintainAspectRatio:false }
  });
}

document.getElementById('btn_reload').addEventListener('click', function() {
  const wadm = document.getElementById('filter_wadmkk').value;
  const cat = document.getElementById('filter_category').value;
  loadWadmkk();
  loadNamobj(wadm);
  loadCategory(cat, wadm);
});

// initial load
loadWadmkk();
loadNamobj(0);
loadCategory('kkop_1', 0);
</script>
</body>
</html>
