update wa official API

pages/user_aktif.php

@@ -35,9 +35,9 @@ $hotspotAktif = ($datauser['user_hs_aktif'] > 0);
                 <?php } ?>
                 <th>Alamat</th>
                 <th>Koordinat</th>
-                <th>Nomor WhatsApp</th>
+                <th>Nomor Tlp & Email</th>
                 <th>Server</th>
-                <th>Mikrotik</th>
+                <th>Detail Modem</th>
                 <th>Paket</th>
                 <th>Status Koneksi</th>
                 <th>Mulai Berlangganan</th>
@@ -52,6 +52,65 @@ $hotspotAktif = ($datauser['user_hs_aktif'] > 0);
   </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({
@@ -71,16 +130,75 @@ $(document).ready(function(){
 
   // Debug: tampilkan POST parameter setiap kali request
   table.on('preXhr.dt', function(e, settings, data){
-    console.log("🔎 DataTables POST Params:", 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); 
+    // 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>
+
+
+
+