From 0391a0a58a24e9a4159a537f66b020ad1a17417d Mon Sep 17 00:00:00 2001
From: ilham_gmail <milham652@gmail.com>
Date: Thu, 11 Jun 2026 19:13:14 +0700
Subject: [PATCH] Dynamically hide Buka 24 Jam checkbox when type Rumah is
 selected

---
 tugas-spbu/index.html | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/tugas-spbu/index.html b/tugas-spbu/index.html
index f0db3a6..19628e3 100644
--- a/tugas-spbu/index.html
+++ b/tugas-spbu/index.html
@@ -90,6 +90,20 @@ function promptApiKey() {
     }
 }
 
+function updateBukaVisibility() {
+    const selectEl = document.querySelector('#modal-fields select[name="jenis"]');
+    const container = document.getElementById('buka-24-jam-container');
+    if (selectEl && container) {
+        if (selectEl.value === 'rumah') {
+            container.style.display = 'none';
+            const checkbox = container.querySelector('input[name="buka_24_jam"]');
+            if (checkbox) checkbox.checked = false;
+        } else {
+            container.style.display = 'block';
+        }
+    }
+}
+
 function handleApiResponse(res, callback) {
     if (res.status === 401) {
         alert('Akses Ditolak: API Key tidak valid atau kosong.');
@@ -150,10 +164,18 @@ map.on(L.Draw.Event.CREATED, function (e) {
             <label>Nama <input name="nama" type="text" required></label>
             <label>Jenis <select name="jenis"><option value="rumah">Rumah</option><option value="masjid">Masjid</option><option value="spbu">SPBU</option></select></label>
             <label>No Telp <input name="no_telp" type="text"></label>
-            <label><input name="buka_24_jam" type="checkbox"> Buka 24 Jam</label>
+            <label id="buka-24-jam-container"><input name="buka_24_jam" type="checkbox"> Buka 24 Jam</label>
             <label>Koordinat <input name="coords" type="text" readonly value="${ll.lat.toFixed(6)}, ${ll.lng.toFixed(6)}"></label>
             <label>Alamat <input name="alamat" type="text"></label>
         `, handleModalSubmit);
+
+        // Setup dynamic visibility for 24 hours checkbox
+        const selectEl = document.querySelector('#modal-fields select[name="jenis"]');
+        if (selectEl) {
+            selectEl.addEventListener('change', updateBukaVisibility);
+            updateBukaVisibility();
+        }
+
         // try to reverse-geocode and prefill the alamat field
         reverseGeocode(ll.lat, ll.lng).then(addr=>{
             try{ const f = document.querySelector('#modal-fields input[name="alamat"]'); if(f && addr) f.value = addr; }catch(e){}
@@ -548,7 +570,7 @@ function edit(id,nama,telp,buka,alamat,jenis){
         <label>Nama <input name="nama" type="text" required value="${(nama||'').replace(/"/g,'&quot;')}"></label>
         <label>Jenis <select name="jenis"><option value="rumah">Rumah</option><option value="masjid">Masjid</option><option value="spbu">SPBU</option></select></label>
         <label>No Telp <input name="no_telp" type="text" value="${(telp||'').replace(/"/g,'&quot;')}"></label>
-        <label><input name="buka_24_jam" type="checkbox" ${buka? 'checked' : ''}> Buka 24 Jam</label>
+        <label id="buka-24-jam-container"><input name="buka_24_jam" type="checkbox" ${buka? 'checked' : ''}> Buka 24 Jam</label>
         <label>Alamat <input name="alamat" type="text" value="${(alamat||'').replace(/"/g,'&quot;')}"></label>
     `, function(values){
         fetch('src/api/update_lokasi.php',{
@@ -556,8 +578,15 @@ function edit(id,nama,telp,buka,alamat,jenis){
             body:JSON.stringify({id:id,nama:values.nama, jenis: values.jenis || 'rumah', no_telp:values.no_telp||'',buka_24_jam:values.buka_24_jam?1:0, alamat: values.alamat || ''})
         }).then(res => handleApiResponse(res, loadData));
     });
-    // set current jenis selection after modal fields inserted
-    setTimeout(()=>{ const sel=document.querySelector('#modal-fields select[name="jenis"]'); if(sel) sel.value = (jenis||'rumah'); },0);
+    // set current jenis selection after modal fields inserted and setup listener
+    setTimeout(()=>{
+        const sel=document.querySelector('#modal-fields select[name="jenis"]');
+        if(sel) {
+            sel.value = (jenis||'rumah');
+            sel.addEventListener('change', updateBukaVisibility);
+            updateBukaVisibility();
+        }
+    },0);
 }
 
 function editJalan(id,nama,status,panjang){