From 0e5a30cf9bbece09e23cfb492bece45391e57e10 Mon Sep 17 00:00:00 2001
From: Ilham Wara Nugroho <ilhamwara@gmail.com>
Date: Wed, 15 Apr 2026 14:51:29 +0700
Subject: [PATCH] update

---
 .../views/modules/profile/profile.blade.php   | 155 +++++++++++++++---
 1 file changed, 133 insertions(+), 22 deletions(-)

diff --git a/resources/views/modules/profile/profile.blade.php b/resources/views/modules/profile/profile.blade.php
index b4e4081..cac6739 100644
--- a/resources/views/modules/profile/profile.blade.php
+++ b/resources/views/modules/profile/profile.blade.php
@@ -1,4 +1,10 @@
 @extends('layouts.master')
+@section('page-css')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+<style>
+    #map { height: 60vh; min-height: 400px; }
+</style>
+@endsection
 @section('breadcrumbs')
 <ol class="breadcrumb page-breadcrumb">
     @foreach($breadcrumbs as $dataBread)
@@ -111,6 +117,42 @@
                             </div>
                         </div>
                     </div>
+                    <div class="col-12 mb-3">
+                        <div class="row">
+                            <div class="col-12">
+                                    <div id="map" class="rounded-md border mb-3"></div>
+                                    <button type="button" id="btnUseLocation" class="px-3 btn-primary border-0 mb-2 py-2 bg-blue-600 text-white rounded">Gunakan Lokasi Saya</button>
+                                    <button type="button" id="btnClear" class="px-3 btn-warning py-2 border-0 mb-2 rounded">Reset</button>
+                            </div>
+                            <div class="col-12">
+                                <div class="row">
+                                    <div class="col-6 mb-3">
+                                        <div class="form-group">
+                                            <label class="col-xl-12 form-label" for="emailverify">Latitude</label>
+                                            <div class="col-12 pr-1">
+                                                <input type="text" id="latInput" value="{{@$item->profile->lat ? @$item->profile->lat :  old('lat')}}" name="lat" class="form-control @error('lat') is-invalid @enderror" placeholder="Masukan Latitude">
+                                                @error('lat')
+                                                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
+                                                @enderror
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-6 mb-3">
+                                        <div class="form-group">
+                                            <label class="col-xl-12 form-label" for="emailverify">Longitude</label>
+                                            <div class="col-12 pr-1">
+                                                <input type="text" id="lngInput" value="{{@$item->profile->long ? @$item->profile->long :  old('long')}}" name="long" class="form-control @error('long') is-invalid @enderror" placeholder="Masukan longitude">
+                                                @error('long')
+                                                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
+                                                @enderror
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
                     <div class="col-12 mb-3">
                         <div class="form-group">
                             <label class="col-xl-12 form-label" for="emailverify">Telp/WA</label>
@@ -122,28 +164,6 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-12 mb-3">
-                        <div class="form-group">
-                            <label class="col-xl-12 form-label" for="emailverify">Latitude</label>
-                            <div class="col-12 pr-1">
-                                <input type="text" value="{{@$item->profile->lat ? @$item->profile->lat :  old('lat')}}" name="lat" class="form-control @error('lat') is-invalid @enderror" placeholder="Masukan Latitude">
-                                @error('lat')
-                                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
-                                @enderror
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-12 mb-3">
-                        <div class="form-group">
-                            <label class="col-xl-12 form-label" for="emailverify">Longitude</label>
-                            <div class="col-12 pr-1">
-                                <input type="text" value="{{@$item->profile->long ? @$item->profile->long :  old('long')}}" name="long" class="form-control @error('long') is-invalid @enderror" placeholder="Masukan longitude">
-                                @error('long')
-                                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
-                                @enderror
-                            </div>
-                        </div>
-                    </div>
                     <div class="col-12 mb-3">
                         <div class="form-group">
                             <label class="col-xl-12 form-label" for="emailverify">Email</label>
@@ -191,6 +211,97 @@
 </div>
 @endsection
 @section('page-js')
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+        <script>
+            // ===== Inisialisasi peta =====
+            const defaultLat = '{{(@$item->profile->lat ? @$item->profile->lat :  "-6.200000")}}' ;
+            const defaultLng = '{{(@$item->profile->long ? @$item->profile->long :  "106.816666")}}';
+            const defaultZoom = 15;
+
+            const map = L.map('map').setView([defaultLat, defaultLng], defaultZoom);
+
+            // Tile layer (OpenStreetMap)
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; OpenStreetMap contributors'
+            }).addTo(map);
+
+            // Marker (dapat digerakkan)
+            let marker = L.marker([defaultLat, defaultLng], { draggable: true }).addTo(map);
+
+            // Element input
+            const latInput = document.getElementById('latInput');
+            const lngInput = document.getElementById('lngInput');
+            const btnUseLocation = document.getElementById('btnUseLocation');
+            const btnClear = document.getElementById('btnClear');
+
+            // Fungsi format untuk menampilkan lat/lng (6 desimal)
+            function fmt(n) {
+            return Number(n).toFixed(6);
+            }
+
+            // Set input berdasarkan koordinat
+            function setInputs(lat, lng) {
+            latInput.value = fmt(lat);
+            lngInput.value = fmt(lng);
+            }
+
+            // Ketika klik di map => pindah marker & isi input
+            map.addEventListener('click', function(e) {
+            const { lat, lng } = e.latlng;
+            marker.setLatLng([lat, lng]);
+            setInputs(lat, lng);
+            });
+
+            // Ketika marker di-drag selesai => update input
+            marker.addEventListener('moveend', function(e) {
+                const pos = e.target.getLatLng();
+                setInputs(pos.lat, pos.lng);
+            });
+
+
+            // Tombol: gunakan lokasi (geolocation)
+            btnUseLocation.addEventListener('click', function() {
+            if (!navigator.geolocation) {
+                alert('Geolocation tidak didukung oleh browser ini.');
+                return;
+            }
+
+            btnUseLocation.disabled = true;
+            btnUseLocation.textContent = 'Mencari lokasi...';
+
+            navigator.geolocation.getCurrentPosition(function(position) {
+                const lat = position.coords.latitude;
+                const lng = position.coords.longitude;
+                map.setView([lat, lng], 15);
+                marker.setLatLng([lat, lng]);
+                setInputs(lat, lng);
+                btnUseLocation.disabled = false;
+                btnUseLocation.textContent = 'Gunakan Lokasi Saya';
+            }, function(err) {
+                alert('Gagal mendapatkan lokasi: ' + err.message);
+                btnUseLocation.disabled = false;
+                btnUseLocation.textContent = 'Gunakan Lokasi Saya';
+            }, {
+                enableHighAccuracy: true,
+                timeout: 10000
+            });
+            });
+
+            // Tombol reset: pindah kembali ke default dan clear input
+            btnClear.addEventListener('click', function() {
+                map.setView([defaultLat, defaultLng], defaultZoom);
+                marker.setLatLng([defaultLat, defaultLng]);
+                latInput.value = '';
+                lngInput.value = '';
+            });
+
+            // Inisialisasi input awal (kosong)
+            latInput.value = '{{(@$item->profile->lat ? @$item->profile->lat :  "")}}';
+            lngInput.value = '{{(@$item->profile->long ? @$item->profile->long :  "")}}';
+
+            // Opsional: jika mau isi input dengan koordinat awal marker:
+            // setInputs(defaultLat, defaultLng);
+        </script>
 	<script type="text/javascript">
      $(document).ready(function() {
             $('.numberInput').on('input', function() {