webgis-sig/spbu.js

// --- Fitur SPBU ---

// Emoji Bubble Icon builder
function makeSpbuIcon(is24) {
    const cls = is24 ? 'spbu-24' : 'spbu-not24';
    return L.divIcon({
        className: '',
        html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>⛽</span></div></div>`,
        iconSize: [38, 38],
        iconAnchor: [19, 38],
        popupAnchor: [0, -40]
    });
}

const spbuGreenIcon = makeSpbuIcon(true);
const spbuRedIcon   = makeSpbuIcon(false);

let isDrawingMode = false; // Akan diset true saat draw mode aktif (jalan/parsil)


// Fetch SPBU
function loadSpbu() {
    spbuLayer.clearLayers();
    fetch('api/spbu/read.php')
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success' && data.data) {
                data.data.forEach(item => {
                    addSpbuMarker(item);
                });
            }
            if (window.refreshActivePanel) window.refreshActivePanel();
        });
}

function addSpbuMarker(item) {
    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
    const icon = makeSpbuIcon(item.is_24_jam);
    const marker = L.marker([item.lat, item.lng], {
        icon: icon,
        draggable: isAdmin
    });

    marker.spbuData = item; // Simpan data di objek marker

    // Hitung popupContent sekali saat marker dibuat
    const d = item;
    let actionButtons = '';
    if (isAdmin) {
        actionButtons = `
            <div style="display:flex; gap:5px;">
                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditSpbuModal(${d.id})">Edit</button>
                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteSpbu(${d.id})">Hapus</button>
            </div>
        `;
    }
    const popupContent = `
        <div style="font-family: Arial, sans-serif; min-width: 150px;">
            <h4 style="margin:0 0 5px 0;">SPBU ${d.nama}</h4>
            <p style="margin: 0 0 5px 0;"><b>No. WA:</b> ${d.no_wa}</p>
            <p style="margin: 0 0 10px 0;"><b>Buka 24 Jam:</b> ${d.is_24_jam ? 'Ya' : 'Tidak'}</p>
            ${actionButtons}
        </div>
    `;
    marker.bindPopup(popupContent);

    // Event drag untuk update koordinat
    marker.on('dragend', function(e) {
        const newPos = marker.getLatLng();
        updateSpbu(item.id, item.nama, item.no_wa, item.is_24_jam, newPos.lat, newPos.lng);
    });

    spbuLayer.addLayer(marker);
}

// Map Click -> Form Add
map.on('click', function(e) {
    if (isDrawingMode) return; // Jangan muncul form jika sedang gambar garis/polygon
    
    // Hanya proses jika mode tambah SPBU aktif
    if (window.currentAddMode === 'spbu') {
        const bodyHTML = `
            <div class="form-group">
                <label>Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}</label>
            </div>
            <div class="form-group">
                <label>Nama SPBU</label>
                <input type="text" id="modalSpbuNama" placeholder="Nama SPBU">
            </div>
            <div class="form-group">
                <label>No. WA</label>
                <input type="text" id="modalSpbuWa" placeholder="No. WA">
            </div>
            <div class="form-group">
                <label>Buka 24 Jam?</label>
                <div class="radio-group" style="margin-top:5px;">
                    <label><input type="radio" name="modalSpbu24" value="1"> Ya</label>
                    <label><input type="radio" name="modalSpbu24" value="0" checked> Tidak</label>
                </div>
            </div>
        `;

        openModal("Tambah SPBU Baru", bodyHTML, function() {
            window.saveNewSpbu(e.latlng.lat, e.latlng.lng, 'modalSpbuNama', 'modalSpbuWa', 'modalSpbu24');
        });

        // Nonaktifkan mode tambah setelah modal muncul
        window.deactivateAddMode();
    }
});

window.saveNewSpbu = function(lat, lng, namaId, waId, radioName) {
    const nama = document.getElementById(namaId).value;
    if (!nama) {
        alert("Nama SPBU harus diisi!");
        return;
    }
    const no_wa = document.getElementById(waId).value;
    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;

    fetch('api/spbu/create.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nama, no_wa, is_24_jam, lat, lng })
    })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            closeModal();
            loadSpbu();
        } else {
            alert(data.message);
        }
    });
};

window.openEditSpbuModal = function(id) {
    let d = null;
    spbuLayer.eachLayer(function(layer) {
        if (layer.spbuData && layer.spbuData.id == id) d = layer.spbuData;
    });
    if (!d) return;

    const bodyHTML = `
        <div class="form-group">
            <label>Nama SPBU</label>
            <input type="text" id="editSpbuNama" value="${d.nama}">
        </div>
        <div class="form-group">
            <label>No. WA</label>
            <input type="text" id="editSpbuWa" value="${d.no_wa}">
        </div>
        <div class="form-group">
            <label>Buka 24 Jam?</label>
            <div class="radio-group" style="margin-top:5px;">
                <label><input type="radio" name="editSpbu24" value="1" ${d.is_24_jam ? 'checked' : ''}> Ya</label>
                <label><input type="radio" name="editSpbu24" value="0" ${!d.is_24_jam ? 'checked' : ''}> Tidak</label>
            </div>
        </div>
    `;
    map.closePopup();
    openModal("Edit SPBU", bodyHTML, function() {
        window.saveEditSpbu(d.id, d.lat, d.lng, 'editSpbuNama', 'editSpbuWa', 'editSpbu24');
    });
};

window.saveEditSpbu = function(id, lat, lng, namaId, waId, radioName) {
    const nama = document.getElementById(namaId).value;
    const no_wa = document.getElementById(waId).value;
    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;

    updateSpbu(id, nama, no_wa, is_24_jam, lat, lng);
};

function updateSpbu(id, nama, no_wa, is_24_jam, lat, lng) {
    fetch('api/spbu/update.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, nama, no_wa, is_24_jam, lat, lng })
    })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            map.closePopup();
            closeModal();
            loadSpbu();
        } else {
            alert(data.message);
        }
    });
}

window.deleteSpbu = function(id) {
    openConfirmModal("Yakin hapus SPBU ini?", function() {
        fetch('api/spbu/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();
                loadSpbu();
            } else {
                alert(data.message);
            }
        });
    });
};

// Initial Load
loadSpbu();