manjapro_v6/dist/js/mapsFormCustom.js

var map, marker, streetLayer, satelliteLayer, labelsLayer, hybridLayer;

function initMap() {
    // console.log("🚀 initMap() dipanggil");

    var latitudeInput = document.getElementById('latitude').value;
    var longitudeInput = document.getElementById('longitude').value;

    // console.log("📍 Input awal:", latitudeInput, longitudeInput);

    // Kalau input sudah ada → pakai itu
    if (latitudeInput && longitudeInput) {
        var pos = {
            lat: parseFloat(latitudeInput),
            lng: parseFloat(longitudeInput)
        };
        // console.log("✅ Pakai input manual:", pos);
        initMapWithPos(pos);
    } else {
        // Kalau kosong → coba geolocation
        if (navigator.geolocation) {
            // console.log("📡 Mencoba geolocation...");
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                // console.log("✅ Geolocation berhasil:", pos);
                initMapWithPos(pos);
                updateFormInputs(pos.lat, pos.lng);
            }, function() {
                console.warn("⚠️ Geolocation gagal, fallback ke Jakarta");
                handleLocationError(true);
                initMapWithPos({ lat: -6.2, lng: 106.816666 });
            });
        } else {
            console.warn("⚠️ Browser tidak support geolocation, fallback ke Jakarta");
            handleLocationError(false);
            initMapWithPos({ lat: -6.2, lng: 106.816666 });
        }
    }
}

function initMapWithPos(pos) {
    // console.log("🗺️ initMapWithPos() dengan posisi:", pos);

    // Base layers
    streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        { attribution: '© OpenStreetMap contributors' });

    satelliteLayer = L.tileLayer(
        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        { attribution: 'Tiles © Esri' });

    labelsLayer = L.tileLayer(
        'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}',
        { attribution: 'Labels © Esri' });

    // Gabungkan satelit + jalan → Hybrid
    hybridLayer = L.layerGroup([satelliteLayer, labelsLayer]);

    // Init map
    map = L.map('map', {
        center: [pos.lat, pos.lng],
        zoom: 17,
        layers: [hybridLayer],
        fullscreenControl: true,
        fullscreenControlOptions: { position: 'topleft' }
    });
    // console.log("✅ Map berhasil dibuat");

    // Layer switcher
    var baseLayers = {
        "Jalan (OSM)": streetLayer,
        "Hybrid (Satelit + Jalan)": hybridLayer
    };
    L.control.layers(baseLayers).addTo(map);

    // Marker awal
    updateMarker(pos.lat, pos.lng);

    // Klik peta → pindah marker
    map.on('click', function(e) {
        var latitude = e.latlng.lat.toFixed(6);
        var longitude = e.latlng.lng.toFixed(6);
        // console.log("🖱️ Klik map:", latitude, longitude);
        updateMarker(latitude, longitude);
        updateFormInputs(latitude, longitude);
    });

    // Tombol "Lokasi Saya"
    L.control.locateMe = function(opts) {
        var control = L.control({position: 'topleft'});
        control.onAdd = function(map) {
            var btn = L.DomUtil.create('button', 'leaflet-bar leaflet-control');
            btn.setAttribute("type", "button");
            btn.innerHTML = '📍';
            btn.title = "Lokasi Saya";
            btn.style.backgroundColor = 'white';
            btn.style.width = '34px';
            btn.style.height = '34px';

            btn.onclick = function(e) {
                e.preventDefault();
                e.stopPropagation();
                // console.log("📍 Tombol Lokasi Saya diklik");
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        var lat = position.coords.latitude;
                        var lng = position.coords.longitude;
                        // console.log("✅ Lokasi saya:", lat, lng);
                        updateMarker(lat, lng);
                        updateFormInputs(lat, lng);
                        map.setView([lat, lng], 17);
                    }, function() {
                        console.error("❌ Tidak bisa ambil lokasi saya");
                        alert("Tidak bisa mengambil lokasi Anda");
                    }, { enableHighAccuracy: true });
                } else {
                    console.error("❌ Browser tidak support geolocation");
                    alert("Geolocation tidak didukung di browser ini");
                }
            };
            return btn;
        };
        return control;
    };
    L.control.locateMe().addTo(map);
}

function updateMarker(latitude, longitude) {
    // console.log("📍 updateMarker ke:", latitude, longitude);
    if (marker) {
        marker.setLatLng([latitude, longitude])
              .bindPopup("Lokasi terpilih")
              .openPopup();
    } else {
        marker = L.marker([latitude, longitude]).addTo(map)
            .bindPopup("Lokasi terpilih")
            .openPopup();
    }
    map.setView([latitude, longitude]);
}

function updateFormInputs(latitude, longitude) {
    // console.log("📝 updateFormInputs:", latitude, longitude);
    document.getElementById('latitude').value = latitude;
    document.getElementById('longitude').value = longitude;
    document.getElementById('latlong').value = `${latitude}, ${longitude}`;
}

function handleLocationError(browserHasGeolocation) {
    console.error(browserHasGeolocation ? 
        '❌ Error: Geolocation service failed.' :
        '❌ Error: Browser tidak support geolocation.');
}

// Sinkronisasi input form ⇄ peta
document.addEventListener('DOMContentLoaded', function() {
    // console.log("📦 DOMContentLoaded");
    initMap();
    const latlongInput = document.getElementById('latlong');
    const latitudeInput = document.querySelector('input[data-maps="latitude"]') || document.getElementById('latitude');
    const longitudeInput = document.querySelector('input[data-maps="longitude"]') || document.getElementById('longitude');

    // Set nilai latlong awal kalau ada
    if (latitudeInput.value && longitudeInput.value) {
        latlongInput.value = `${latitudeInput.value}, ${longitudeInput.value}`;
        // console.log("🔄 Sinkron awal dari input:", latlongInput.value);
    }

    // Input manual latlong
    latlongInput.addEventListener('input', function() {
        // console.log("⌨️ Input manual latlong:", latlongInput.value);
        const latlongValue = latlongInput.value.split(',');

        const latLongRegex = /^(-?\d+(\.\d+)?),\s*(-?\d+(\.\d+)?)$/;
        if (latLongRegex.test(latlongInput.value.trim())) {
            if (latlongValue.length === 2) {
                const lat = parseFloat(latlongValue[0].trim());
                const long = parseFloat(latlongValue[1].trim());
                // console.log("✅ Format valid → update map:", lat, long);
                latitudeInput.value = lat;
                longitudeInput.value = long;
                updateMarker(lat, long);
                map.setView([lat, long], 17);
            }
        } else {
            console.warn("⚠️ Format salah, reset input");
            setTimeout(function() {
                latlongInput.value = '';
                latlongInput.placeholder = 'Isi dengan format yang sesuai';
                latitudeInput.value = '';
                longitudeInput.value = '';
            }, 500);
        }
    });

    // Sinkronisasi ketika latitude / longitude berubah
    latitudeInput.addEventListener('input', function() {
        // console.log("🔄 Latitude diubah:", latitudeInput.value);
        latlongInput.value = `${latitudeInput.value}, ${longitudeInput.value}`;
    });
    longitudeInput.addEventListener('input', function() {
        // console.log("🔄 Longitude diubah:", longitudeInput.value);
        latlongInput.value = `${latitudeInput.value}, ${longitudeInput.value}`;
    });
});