webgis-poverty-pontianak/assets/js/features/parsil.js

// --- Fitur Parsil ---

const parsilColors = {
    'SHM': '#28a745', // Hijau
    'HGB': '#17a2b8', // Biru Muda
    'HGU': '#ffc107', // Kuning
    'HP':  '#fd7e14'  // Oranye
};

function loadParsil() {
    parsilLayer.clearLayers();
    fetch('api/parsil/read.php')
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success' && data.data) {
                data.data.forEach(item => {
                    addParsilToMap(item);
                });
            }
            if (window.refreshActivePanel) window.refreshActivePanel();
        });
}

function addParsilToMap(item) {
    // geom adalah GeoJSON Polygon
    // coordinates pada Polygon formatnya: [[[lng, lat], [lng, lat], ...]]
    // Leaflet Polygon butuh array of [lat, lng]
    const latlngs = item.geom.coordinates[0].map(coord => [coord[1], coord[0]]);
    
    const polygon = L.polygon(latlngs, {
        color: parsilColors[item.status] || '#3388ff',
        fillColor: parsilColors[item.status] || '#3388ff',
        fillOpacity: 0.5,
        weight: 2
    });

    polygon.parsilData = item;

    const d = item;
    const popupContent = `
        <div style="font-family: Arial, sans-serif; min-width: 150px;">
            <h4 style="margin:0 0 5px 0;">Parsil ${d.nama || ''}</h4>
            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
            <p style="margin: 0 0 10px 0;"><b>Luas:</b> ${d.luas.toFixed(2)} m²</p>
            <div style="display:flex; gap:5px;">
                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditParsilModal(${d.id})">Edit</button>
                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteParsil(${d.id})">Hapus</button>
            </div>
        </div>
    `;
    polygon.bindPopup(popupContent);

    parsilLayer.addLayer(polygon);
}

window.openEditParsilModal = function(id) {
    let d = null;
    parsilLayer.eachLayer(function(layer) {
        if (layer.parsilData && layer.parsilData.id == id) d = layer.parsilData;
    });
    if (!d) return;

    const bodyHTML = `
        <div class="form-group">
            <label>Nama Pemilik/Area</label>
            <input type="text" id="editParsilNama" value="${d.nama || ''}">
        </div>
        <div class="form-group">
            <label>Status</label>
            <select id="editParsilStatus">
                <option value="SHM" ${d.status === 'SHM' ? 'selected' : ''}>SHM</option>
                <option value="HGB" ${d.status === 'HGB' ? 'selected' : ''}>HGB</option>
                <option value="HGU" ${d.status === 'HGU' ? 'selected' : ''}>HGU</option>
                <option value="HP" ${d.status === 'HP' ? 'selected' : ''}>HP</option>
            </select>
        </div>
        <div class="form-group">
            <label>Luas: ${d.luas.toFixed(2)} m²</label>
        </div>
    `;
    map.closePopup();
    openModal("Edit Parsil Tanah", bodyHTML, function() {
        window.saveEditParsil(d.id, 'editParsilNama', 'editParsilStatus');
    });
};

window.saveEditParsil = function(id, namaId, statusId) {
    const nama = document.getElementById(namaId).value;
    const status = document.getElementById(statusId).value;

    fetch('api/parsil/update.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, nama, status })
    })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            map.closePopup();
            loadParsil();
        } else {
            alert(data.message);
        }
    });
};

window.deleteParsil = function(id) {
    openConfirmModal("Yakin hapus parsil ini?", function() {
        fetch('api/parsil/delete.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id })
        })
        .then(res => res.json())
        .then(data => {
            if(data.status === 'success') {
                map.closePopup();
                loadParsil();
            } else {
                alert(data.message);
            }
        });
    });
};

window.saveNewParsil = function(geoJsonStr, luas, namaId, statusId) {
    const nama = document.getElementById(namaId).value;
    const status = document.getElementById(statusId).value;

    const geom = JSON.parse(geoJsonStr);

    fetch('api/parsil/create.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nama, status, luas, geom })
    })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            closeModal();
            loadParsil();
        } else {
            alert(data.message);
        }
    });
    return true;
};

// Initial Load
loadParsil();