<div id="area-aplikasi" class="container">
    <h2>Diameter Rekap</h2>
  <form id="filterForm">
    <div class="form-group">
      <label for="p_jenis_filter">Jenis Filter</label>
      <select id="p_jenis_filter" name="p_jenis_filter">
        <option value="REGIONAL">Regional</option>
        <option value="CLUSTER">Cluster</option>
        <option value="KEBUN">Kebun</option>
      </select>
    </div>
    <div class="form-group">
      <label for="p_cluster">Cluster</label>
      <select id="p_cluster" name="p_cluster"></select>
    </div>
    <div class="form-group">
      <label for="p_kode_kebun">Kode Kebun</label>
      <select id="p_kode_kebun" name="p_kode_kebun"></select>
    </div>
    <div class="form-group">
      <label for="p_kode_rayon">Kode Rayon</label>
      <select id="p_kode_rayon" name="p_kode_rayon"></select>
    </div>
    <div class="form-group">
      <label for="p_tanggal_sd">Tanggal s/d</label>
      <input type="date" id="p_tanggal_sd" name="p_tanggal_sd">
    </div>
    <div class="form-group">
      <label for="p_umur">Umur</label>
      <input type="number" id="p_umur" name="p_umur">
    </div>
    <button type="button" id="btnTampilkan">Tampilkan Data</button>
    <button type="button" id="btnDownloadPNG">Download PNG</button>
  </form>
  <div id="tabel-wrap"></div>
</div>

<style>
  .container {
    max-width: none;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  h2 {
    margin-top: 0;
    color: #2c3e50;
    /* text-align: center; */
  }

  #filterForm {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
  }

  #filterForm .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
  }

  #filterForm .form-group {
    display: flex;
    flex-direction: column;
  }

  label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
  }

  select,
  input {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 180px;
    font-size: 14px;
    background: #fff;
  }

  button {
    padding: 9px 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }

  button:hover,
  .btn:hover {
    background-color: #2980b9;
  }

  #btnDownloadPNG,
  .btn-secondary {
    background-color: #27ae60;
  }

  #btnDownloadPNG:hover,
  .btn-secondary:hover {
    background-color: #1e8449;
  }

  #btnDownloadPNG:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
  }

  #loading {
    display: none;
    padding: 10px;
    background-color: #eaf4fb;
    color: #1f618d;
    border-radius: 4px;
    margin-bottom: 10px;
    text-align: center;
  }

  #error {
    display: none;
    padding: 10px;
    background-color: #fce4e4;
    color: #c0392b;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #fff;
  }

  th,
  td {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    text-align: left;
    font-size: 14px;
    white-space: nowrap;
  }

  th {
    background-color: #2c3e50;
    color: #fff;
    text-transform: capitalize;
    font-weight: 600;
  }

  tbody tr:nth-child(even) {
    background-color: #f8f9fa;
  }

  tbody tr:hover {
    background-color: #e9ecef;
  }

  .grand-total {
    font-weight: bold;
    background-color: #e9eef3 !important;
  }

  #pngExportArea {
    position: fixed;
    left: -99999px;
    top: 0;
    background: #ffffff;
    padding: 25px;
    width: max-content;
    min-width: 1200px;
    box-sizing: border-box;
  }

  #pngExportArea .export-title {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 7px;
  }

  #pngExportArea .export-info {
    font-size: 14px;
    color: #555;
    font-weight: bold;
    margin-bottom: 18px;
  }

  #pngExportArea table {
    width: auto;
    min-width: 100%;
    margin-top: 0;
  }

  #pngExportArea th,
  #pngExportArea td {
    font-size: 13px;
    padding: 8px 10px;
    white-space: nowrap;
  }

  #pngExportArea tbody tr:hover {
    background-color: inherit;
  }
</style>

<script>
  $(document).ready(function() {
    // Inisialisasi jCombo untuk select yang diberikan
    // Perhatikan: URL sesuai dengan instruksi, namun dengan domain prodis.ksotebu.com
    // Jika domain tidak tersedia, script akan error, tapi kode tetap ditampilkan
    $('#p_cluster').jCombo(
      "https://prodis.ksotebu.com/dataprodisconsole/comboselect?filter=master_cluster:nama_cluster:nama_cluster", {
        initial_text: 'Semua Cluster'
      }
    );
    $('#p_kode_kebun').jCombo(
      "https://prodis.ksotebu.com/dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun", {
        initial_text: 'Semua Kebun'
      }
    );
    $('#p_kode_rayon').jCombo(
      "https://prodis.ksotebu.com/dataprodisconsole/comboselect?filter=master_rayon:kode_rayon:nama_rayon", {
        initial_text: 'Semua Rayon'
      }
    );

    // Definisi kolom tabel yang akan ditampilkan (sesuai response)
    var headerKeys = [
      'regional',
      'cluster',
      'kode_kebun',
      'kebun',
      'kode_rayon',
      'rayon',
      'afdeling',
      'diameter_emas',
      'diameter_hijau',
      'diameter_kuning',
      'diameter_merah',
      'diameter_hitam'
    ];

    // Fungsi render table
    function renderTable(rows) {
      if (!rows || rows.length === 0) {
        $('#tabel-wrap').html('<p class="text-muted">Tidak ada data</p>');
        return;
      }
      var table = '<table class="table table-bordered">';
      table += '<thead><tr>';
      headerKeys.forEach(function(key) {
        table += '<th>' + key + '</th>';
      });
      table += '</tr></thead>';
      table += '<tbody>';
      rows.forEach(function(row) {
        table += '<tr>';
        headerKeys.forEach(function(key) {
          table += '<td>' + (row[key] !== undefined ? row[key] : '') + '</td>';
        });
        table += '</tr>';
      });
      table += '</tbody></table>';
      $('#tabel-wrap').html(table);
    }

    // Proses ajax untuk memuat data
    function loadData(params) {
      // Saring parameter kosong agar tidak dikirim
      params = params || {};
      var cleanParams = {};
      Object.keys(params).forEach(function(key) {
        var val = params[key];
        if (val !== '' && val !== null && val !== undefined) {
          cleanParams[key] = val;
        }
      });

      $.ajax({
        url: 'https://prodis.ksotebu.com/interfacedata/runProcedure?id=11',
        type: 'GET',
        data: cleanParams,
        dataType: 'json',
        success: function(res) {
          // Perkiraan format: response.data berisi array of objects
          if (res && res.data) {
            renderTable(res.data);
          } else {
            renderTable([]);
          }
          console.log('Data berhasil dimuat:', res.data);
        },
        error: function(xhr, status, error) {
          console.error('Ajax error:', error);
          renderTable([]);
        }
      });
    }

    // Event submit form
    $('#btnTampilkan').on('click', function(e) {
      var params = {
        p_jenis_filter: $('#p_jenis_filter').val(),
        p_cluster: $('#p_cluster').val(),
        p_kode_kebun: $('#p_kode_kebun').val(),
        p_kode_rayon: $('#p_kode_rayon').val(),
        p_tanggal_sd: $('#p_tanggal_sd').val(),
        p_umur: $('#p_umur').val()
      };
      loadData(params);
    });

    // Muat data awal (tanpa filter)
    loadData({});
  });
</script>
```