// 1. Inisialisasi Peta (Koordinat Indonesia sebagai pusat)
const map = L.map('map').setView([-2.5489, 118.0149], 5);

// Tambahkan Basemap OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 2. Variabel Global untuk Menggambar Jalan Baru
let koordinatJalan = [];
let layerJalanBaru = L.polyline([], { color: 'black', weight: 4, dashArray: '5, 5' }).addTo(map);

// Fungsi Pemberian Warna Berdasarkan Status Jalan
function dapatkanStyleJalan(status) {
    switch(status) {
        case 'Nasional':  return { color: '#FF0000', weight: 5 }; // Merah
        case 'Provinsi':  return { color: '#00FF00', weight: 4 }; // Hijau
        case 'Kabupaten': return { color: '#0000FF', weight: 3 }; // Biru
        default:          return { color: '#000000', weight: 2 };
    }
}

// 3. Aksi Klik di Atas Peta untuk Menggambar Garis & Hitung Panjang Otomatis
map.on('click', function(e) {
    let titikBaru = e.latlng;
    koordinatJalan.push(titikBaru);
    layerJalanBaru.setLatLngs(koordinatJalan);
    
    // Hitung panjang otomatis dengan fungsi bawaan Leaflet: distanceTo()
    let totalPanjang = 0;
    for (let i = 0; i < koordinatJalan.length - 1; i++) {
        totalPanjang += koordinatJalan[i].distanceTo(koordinatJalan[i+1]);
    }
    
    // Tampilkan hasil perhitungan (meter) ke input form
    document.getElementById('panjang_jalan').value = totalPanjang.toFixed(2);
});

// 4. Fungsi Mengirim Data ke Backend (Create)
function simpanJalan() {
    let nama = document.getElementById('nama_jalan').value;
    let status = document.getElementById('status_jalan').value;
    let panjang = document.getElementById('panjang_jalan').value;

    if (!nama || koordinatJalan.length < 2) {
        alert("Harap isi nama jalan dan gambar minimal 2 titik di peta!");
        return;
    }

    // Ubah data polyline Leaflet menjadi format GeoJSON sesuai perintah dosen
    let geojsonData = JSON.stringify(layerJalanBaru.toGeoJSON().geometry);

    // Kirim menggunakan Fetch API (AJAX)
    fetch('simpan_jalan.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `nama=${encodeURIComponent(nama)}&status=${status}&panjang=${panjang}&geom=${encodeURIComponent(geojsonData)}`
    })
    .then(res => res.text())
    .then(data => {
        if (data.trim() === "Sukses") {
            alert("Data jalan berhasil disimpan!");
            location.reload(); // Refresh halaman untuk melihat hasilnya
        } else {
            alert("Gagal menyimpan: " + data);
        }
    });
}

// 5. Mengambil Data dari Database dan Menampilkan ke Peta (Read)
fetch('ambil_jalan.php')
    .then(res => res.json())
    .then(dataJalan => {
        dataJalan.forEach(function(jalan) {
            // Ubah string teks geom dari DB kembali menjadi objek JSON
            let geometri = JSON.parse(jalan.geom);

            // Bungkus ke dalam format Feature GeoJSON standar
            let geojsonFeature = {
                "type": "Feature",
                "geometry": geometri,
                "properties": {
                    "nama": jalan.nama_jalan,
                    "status": jalan.status_jalan,
                    "panjang": jalan.panjang_jalan
                }
            };

            // Render ke peta dengan warna dinamis sesuai status
            L.geoJSON(geojsonFeature, {
                style: function(feature) {
                    return dapatkanStyleJalan(feature.properties.status);
                }
            }).bindPopup(`
                <b>Nama Jalan:</b> ${jalan.nama_jalan}<br>
                <b>Status:</b> Jalan ${jalan.status_jalan}<br>
                <b>Panjang:</b> ${jalan.panjang_jalan} Meter
            `).addTo(map);
        });
    });