manjapro_v6/pages/user_aktif.php

<?php
$stmt = $pdo->prepare("SELECT SUM(user_hs_aktif) AS user_hs_aktif FROM v_jumlah_pelanggan $SqlDataWHIdM");
$stmt->execute();
$datauser = $stmt->fetch(PDO::FETCH_ASSOC);
$hotspotAktif = ($datauser['user_hs_aktif'] > 0);
?>
<section class="content" style="zoom : 85%;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <div class="row">
              <div class="col-sm-6">
                <h4>Pelanggan Aktif</h4>
              </div>
              <div class="col-sm-6 text-right">
                <form id="exportForm" action="excel/exportPelAktif.php?data=<?= encrypt_url(json_encode([$SqlSvData])); ?>" method="POST" target="_blank">
                  <input type="hidden" name="datatable_params" id="datatableParams">
                  <button type="submit" id="export-button" class="btn btn-success"><i class="fas fa-file-excel mr-2"></i>Export</button>
                </form>
              </div>
            </div>
          </div>
          <div class="card-body">
            <table id="dataTable3" class="table table-bordered table-striped">
              <thead>
              <tr class="bg-success">
                <th>No</th>
                <th>Nama</th>
                <th>NIK</th>
                <th>Id Pelanggan</th>
                <?php if($hotspotAktif) { ?>
                  <th>Akun Hotspot</th>
                <?php } ?>
                <th>Alamat</th>
                <th>Koordinat</th>
                <th>Nomor Tlp & Email</th>
                <th>Server</th>
                <th>Detail Modem</th>
                <th>Paket</th>
                <th>Status Koneksi</th>
                <th>Mulai Berlangganan</th>
                <th>Action</th>
              </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section> 

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="exampleModalLabel">Detail ONU</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      
      <div class="modal-body">
        <table class="table table-sm table-striped">
          <tbody>
            <tr>
              <th>Serial Number</th>
              <td><span id="modalSn"></span></td>
            </tr>
            <tr>
              <th>MAC Address</th>
              <td><span id="modalMac"></span></td>
            </tr>
            <tr>
              <th>Nama</th>
              <td><span id="modalNama"></span></td>
            </tr>
            <tr>
              <th>Tipe</th>
              <td><span id="modalType"></span></td>
            </tr>
            <tr>
              <th>RX Power</th>
              <td><span id="modalRx"></span></td>
            </tr>
            <tr>
              <th>TX Power</th>
              <td><span id="modalTx"></span></td>
            </tr>
            <tr>
              <th>Status</th>
              <td><span id="modalStatus"></span></td>
            </tr>
            <tr>
              <th>Jarak (m)</th>
              <td><span id="modalDistance"></span></td>
            </tr>
            <tr>
              <th>Last Online</th>
              <td><span id="modalLastOnline"></span></td>
            </tr>
          </tbody>
        </table>
        <span id="modalStatusCek" class="text-danger"></span>
      </div>
    </div>
  </div>
</div>


<script>
$(document).ready(function(){
  var table = $("#dataTable3").DataTable({
    processing: true,
    serverSide: true,
    ajax: {
      url: "controller/get_user_aktif.php?data=<?= encrypt_url(json_encode([$SqlSvData, $SqlDataWHIdM, $hotspotAktif])); ?>",
      type: "POST"
    },
    responsive: true,
    lengthChange: true,
    autoWidth: false,
    buttons: ["excel", "pdf", "print"]
  });

  table.buttons().container().appendTo('#dataTable3_wrapper .col-md-6:eq(0)');

  // Debug: tampilkan POST parameter setiap kali request
  table.on('preXhr.dt', function(e, settings, data){
    // console.log("🔎 DataTables POST Params:", data);
  });

  // Simpan param terakhir ke hidden input (opsional untuk export)
  table.on('draw', function(){
    const params = table.ajax.params(); 
    // console.log("📦 Last Ajax Params:", params); 
    $("#datatableParams").val(JSON.stringify(params));
  });
});
</script>


<script>
$(document).ready(function(){

  // event delegation supaya pasti kepanggil
  $(document).on('click', '.openModal', function(){
    let id = $(this).data('id'); 
    // console.log("Klik modal dengan id:", id);

    // Kosongkan dulu isi modal
    $('#modalSn, #modalMac, #modalNama, #modalType, #modalRx, #modalTx, #modalStatus, #modalDistance, #modalLastOnline')
      .text('-');
    $('#modalStatusCek').text('');

    $.ajax({
      url: 'controller/get_onu_detail.php',
      type: 'POST', // lebih aman
      data: { id: id },
      dataType: 'json',
      beforeSend: function(){
        // console.log("Mengirim request ke controller/get_onu_detail.php dengan id:", id);
      },
      success: function(response){
        // console.log("Response:", response);

        if(Array.isArray(response) && response.length > 0){
          let data = response[0]; // ambil object pertama
          
          // isi ke modal
          $('#modalSn').text(data.onu_sn ?? '-');
          $('#modalMac').text(data.onu_mac ?? '-');
          $('#modalNama').text(data.onu_name ?? '-');
          $('#modalType').text(data.onu_type ?? '-');
          $('#modalRx').text(data.onu_rxpower ?? '-');
          $('#modalTx').text(data.onu_txpower ?? '-');
          $('#modalStatus').text(data.onu_status ?? '-');
          $('#modalDistance').text(data.onu_gpon_distance ?? '-');
          $('#modalLastOnline').text(data.onu_last_online ?? '-');
        } else {
          $('#modalStatusCek').text("Data tidak ditemukan");
        }
      },
      error: function(xhr, status, error){
        // console.error("AJAX Error:", error);
        $('#modalStatusCek').text("Gagal ambil data: " + error);
      }
    });

    // action button
    $('#btnAction').off('click').on('click', function(){
      alert("Kamu pilih ID: " + id);
    });
  });

});
</script>