From cd8c51abf7aeabd12bf596de267f41e0eec0c4ec Mon Sep 17 00:00:00 2001
From: NASYA KHAIRA ADINIA <d1041231084@student.untan.ac.id>
Date: Thu, 11 Jun 2026 03:14:17 +0700
Subject: [PATCH] ux: add cursor crosshair and toast guidance for add mode

---
 spbu/index.php | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/spbu/index.php b/spbu/index.php
index f288dd6..3e81710 100644
--- a/spbu/index.php
+++ b/spbu/index.php
@@ -495,9 +495,29 @@ function setMode(m) {
     document.getElementById('mode-label').textContent = m ? `Mode: Tambah ${m === 'point' ? 'Point' : m === 'jalan' ? 'Jalan' : 'Parsil'}` : 'Mode: Idle';
     ['btn-point','btn-jalan','btn-parsil','btn-cancel'].forEach(id => {
         const btn = document.getElementById(id);
-        btn.classList.toggle('bg-primary-container', id === `btn-${m}` && m !== null);
-        btn.classList.toggle('text-white', id === `btn-${m}` && m !== null);
+        if (btn) {
+            btn.classList.toggle('bg-primary-container', id === `btn-${m}` && m !== null);
+            btn.classList.toggle('text-white', id === `btn-${m}` && m !== null);
+        }
     });
+    
+    // Berikan feedback visual kursor dan toast panduan agar user tahu cara menambah data
+    const mapElement = document.getElementById('map');
+    if (mapElement) {
+        if (m) {
+            mapElement.style.cursor = 'crosshair';
+            if (m === 'point') {
+                showToast('📍 Mode Tambah SPBU aktif. Silakan KLIK di peta untuk menempatkan titik SPBU baru.', 'info');
+            } else if (m === 'jalan') {
+                showToast('🛣️ Mode Tambah Jalan aktif. Silakan KLIK di peta untuk mulai menggambar garis jalan.', 'info');
+            } else if (m === 'parsil') {
+                showToast('🗺️ Mode Tambah Parsil aktif. Silakan KLIK di peta untuk mulai menggambar batas area parsil.', 'info');
+            }
+        } else {
+            mapElement.style.cursor = '';
+        }
+    }
+
     if (!m) cancelPendingShape(false);
     updateDrawControl();
 }