<div id="app">
  <div class="container">
    <h2>Jumlah Batang Rekap</h2>
    <form id="filterForm">

      <div>
        <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>
        <label for="p_kode_kebun">Kode Kebun</label>

        <select id="p_kode_kebun" name="p_kode_kebun">
        </select>
      </div>

      <button type="button" id="btnTampilkan">
        Tampilkan Data
      </button>

      <button type="button" id="btnDownloadPNG">
        Download PNG
      </button>

    </form>

    <div id="loading">
      Loading...
    </div>

    <div id="error"></div>

    <table id="dataTable">

      <thead>
        <tr>
          <th>No</th>
          <th>Regional</th>
          <th>Cluster</th>
          <th>Kode Kebun</th>
          <th>Kebun</th>
          <th>Kode Rayon</th>
          <th>Rayon</th>
          <th>Afdeling</th>
          <th>Batang Emas</th>
          <th>Batang Hijau</th>
          <th>Batang Kuning</th>
          <th>Batang Merah</th>
          <th>Batang Hitam</th>
        </tr>
      </thead>

      <tbody></tbody>

    </table>
  </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;
  }


  #filterForm {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
  }


  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;
  }


  button {
    padding: 9px 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }


  button:hover {
    background-color: #2980b9;
  }


  #btnDownloadPNG {
    background-color: #27ae60;
  }


  #btnDownloadPNG: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;
  }


  /* =========================================================
   AREA EXPORT PNG
========================================================= */

  #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>
  
    // Inisialisasi combo
    $('#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'
      });
    $('#btnTampilkan').click(function() {
      var params = {
        p_jenis_rekap: $('#p_jenis_rekap').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()
      };
      $.ajax({
        url: "https://prodis.ksotebu.com/interfacedata/runProcedure?id=9",
        type: 'GET',
        data: params,
        dataType: 'json',
        success: function(data) {
          renderTable(data.data);
        },
        error: function(xhr, status, error) {
          alert('Gagal memuat data: ' + error);
        }
      });
    });

    function renderTable(data) {
      var tbody = $('#dataTable tbody').empty();
      if (!data || !data.length) {
        tbody.append('<tr><td colspan="13" style="text-align:center;">Tidak ada data</td></tr>');
        return;
      }
      $.each(data, function(index, row) {
        var cells = [];
        if (Array.isArray(row)) {
          cells = row;
        } else {
          cells = [
            row['regional'],
            row['cluster'],
            row['kode_kebun'],
            row['kebun'],
            row['kode_rayon'],
            row['rayon'],
            row['afdeling'],
            row['jumlah_batang_emas'],
            row['jumlah_batang_hijau'],
            row['jumlah_batang_kuning'],
            row['jumlah_batang_merah'],
            row['jumlah_batang_hitam']
          ];
        }
        var tr = $('<tr>');
        tr.append('<td>' + (index + 1) + '</td>');
        $.each(cells, function(i, val) {
          tr.append('<td>' + (val === null || val === undefined ? '' : val) + '</td>');
        });
        tbody.append(tr);
      });
    }

</script>