From ef8b6388571c5b102f7b91af37d49f658d6f63fe Mon Sep 17 00:00:00 2001
From: arieeefajar <ariefajar739@gmail.com>
Date: Sat, 15 Feb 2025 14:14:27 +0700
Subject: [PATCH] fix(master-land): create evenListerner for map to get lat and
 lng

---
 .../pages/customJs/master-data/lahan/index.js | 48 ++++++++++++++++++-
 .../views/master-data/lahan/index.blade.php   |  8 ++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/public/assets/js/pages/customJs/master-data/lahan/index.js b/public/assets/js/pages/customJs/master-data/lahan/index.js
index 0ca49f1..ea9a133 100644
--- a/public/assets/js/pages/customJs/master-data/lahan/index.js
+++ b/public/assets/js/pages/customJs/master-data/lahan/index.js
@@ -18,6 +18,8 @@ var districtVal = new Choices(districtField, {
 });
 
 var mapContainer = form.querySelector("#map-container");
+var latField = form.querySelector("#lat");
+var lngField = form.querySelector("#lng");
 
 var loading = form.querySelector("#loading");
 
@@ -37,6 +39,8 @@ document.addEventListener("DOMContentLoaded", function () {
     $("#showModal").on("shown.bs.modal", function () {
         map.invalidateSize();
     });
+
+    map.on("click", onMapClick);
 });
 
 function validatePhoneNumber(input) {
@@ -136,7 +140,13 @@ function showmap(districtId) {
                 draggable: true,
             }).addTo(map);
 
-            currentMarker.bindPopup("Kamu berada di sini.").openPopup();
+            currentMarker.on("dragend", onMapDragend);
+
+            currentMarker
+                .bindPopup(
+                    `<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
+                )
+                .openPopup();
         },
         function (error) {
             alert("Error: " + error.message);
@@ -144,6 +154,42 @@ function showmap(districtId) {
     );
 }
 
+function onMapClick(e) {
+    var lat = e.latlng.lat;
+    var lng = e.latlng.lng;
+
+    if (!currentMarker) {
+        currentMarker = L.marker(e.latlng).addTo(map);
+    } else {
+        currentMarker.setLatLng(e.latlng);
+    }
+
+    currentMarker.on("dragend", onMapDragend);
+
+    currentMarker
+        .bindPopup(
+            `<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
+        )
+        .openPopup();
+
+    latField.value = lat;
+    lngField.value = lng;
+}
+
+function onMapDragend() {
+    if (!currentMarker) return;
+    var coordinates = currentMarker.getLatLng();
+    currentMarker
+        .setLatLng(coordinates)
+        .bindPopup(
+            `<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
+        )
+        .openPopup();
+
+    latField.value = coordinates.lat;
+    lngField.value = coordinates.lng;
+}
+
 function getDistricts(regencyId) {
     districtContainer.style.display = "none";
     loading.style.display = "block";
diff --git a/resources/views/master-data/lahan/index.blade.php b/resources/views/master-data/lahan/index.blade.php
index d45f0e7..17febc1 100644
--- a/resources/views/master-data/lahan/index.blade.php
+++ b/resources/views/master-data/lahan/index.blade.php
@@ -259,7 +259,15 @@ class="fw-medium link-primary">#VZ2101</a></td>
                                 </div>
 
                                 <div id="map-container" style="display: none">
+                                    <label for="map" class="form-label">Lokasi</label>
                                     <div id="map"></div>
+
+                                    <div class="mt-3">
+                                        <input type="hidden" name="lat" id="lat" class="form-control"
+                                            readonly disabled>
+                                        <input type="hidden" name="lng" id="lng" class="form-control"
+                                            readonly disabled>
+                                    </div>
                                 </div>
                             </div>
                             <div class="modal-footer">