webgis-sig/spbu/assets/js/map.js

// Inisialisasi Peta
const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);

// ===== Toast Notification =====
window.showToast = function(message, type = 'success', duration = 3500) {
    const icons = { success: '✅', error: '❌', info: 'ℹ️', warning: '⚠️' };
    const container = document.getElementById('toastContainer');
    if (!container) return;

    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.innerHTML = `<span class="toast-icon">${icons[type] || 'ℹ️'}</span><span>${message}</span>`;
    container.appendChild(toast);

    setTimeout(() => {
        toast.classList.add('hiding');
        toast.addEventListener('animationend', () => toast.remove());
    }, duration);
};

// Custom Zoom Control Logic
document.getElementById('zoomInBtn').addEventListener('click', function() { map.zoomIn(); });
document.getElementById('zoomOutBtn').addEventListener('click', function() { map.zoomOut(); });

// Base Map dari OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Inisialisasi FeatureGroups untuk masing-masing layer
const spbuLayer = L.featureGroup().addTo(map);

const searchInput = document.getElementById('searchInput');
const searchClear = document.getElementById('searchClear');

if (searchInput) {
    searchInput.addEventListener('focus', function() {
        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
    });

    searchInput.addEventListener('input', function() {
        const val = this.value.toLowerCase();
        if (val.length > 0) {
            searchClear.style.visibility = 'visible';
            window.showSearchResults(val);
        } else {
            searchClear.style.visibility = 'hidden';
            document.getElementById('searchResults').style.display = 'none';
        }
    });
}

if (searchClear) {
    searchClear.addEventListener('click', function() {
        searchInput.value = '';
        searchClear.style.visibility = 'hidden';
        document.getElementById('searchResults').style.display = 'none';
        searchInput.focus();
    });
}

window.showSearchResults = function(query) {
    const resultsContainer = document.getElementById('searchResults');
    if (!resultsContainer) return;
    resultsContainer.innerHTML = '';
    let results = [];
    
    if (typeof spbuLayer !== 'undefined') {
        spbuLayer.eachLayer(layer => {
            if (layer.spbuData && layer.spbuData.nama && layer.spbuData.nama.toLowerCase().includes(query)) {
                results.push({ type: 'SPBU', nama: layer.spbuData.nama, layer: layer });
            }
        });
    }
    
    if (results.length === 0) {
        resultsContainer.innerHTML = '<div style="padding: 10px 15px; color: #666; font-size: 14px;">Tidak ada hasil</div>';
    } else {
        results.forEach(res => {
            const item = document.createElement('div');
            item.style.padding = '10px 15px';
            item.style.cursor = 'pointer';
            item.style.borderBottom = '1px solid #eee';
            item.style.fontSize = '14px';
            item.innerHTML = `<strong>${res.type}:</strong> ${res.nama}`;
            item.addEventListener('mouseenter', () => item.style.backgroundColor = '#f8f9fa');
            item.addEventListener('mouseleave', () => item.style.backgroundColor = 'white');
            item.addEventListener('click', () => {
                if (res.layer instanceof L.Marker) {
                    map.setView(res.layer.getLatLng(), 17);
                } else if (res.layer.getBounds) {
                    map.fitBounds(res.layer.getBounds());
                }
                res.layer.openPopup();
                resultsContainer.style.display = 'none';
            });
            resultsContainer.appendChild(item);
        });
    }
    resultsContainer.style.display = 'block';
};

// UI Logic: Custom Layer Control Toggle
const layerBtn   = document.getElementById('layerBtn');
const layerPanel = document.getElementById('layerPanel');

if (layerBtn && layerPanel) {
    layerBtn.addEventListener('click', function() {
        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
        layerPanel.style.display = layerPanel.style.display === 'block' ? 'none' : 'block';
    });
}

// Sembunyikan layer panel saat klik di peta
map.on('click', function() {
    if (layerPanel) layerPanel.style.display = 'none';
});

// Logic untuk Toggle Layer Visibility
const setupLayerToggle = (id, layer) => {
    const el = document.getElementById(id);
    if (el) {
        el.addEventListener('change', function(e) {
            e.target.checked ? map.addLayer(layer) : map.removeLayer(layer);
        });
    }
};

setupLayerToggle('layerSpbu', spbuLayer);

// --- Sub-layer Toggle (expand/collapse) ---
window.toggleSubLayer = function(subId, iconEl) {
    const sub = document.getElementById(subId);
    if (!sub) return;
    const isHidden = sub.style.display === 'none';
    sub.style.display = isHidden ? '' : 'none';
    iconEl.classList.toggle('collapsed', !isHidden);
};

// --- Sub-layer Filter ---
window.applySubFilter = function(type) {
    if (type === 'spbu') {
        const checked = [...document.querySelectorAll('.sub-spbu:checked')].map(el => el.value === '1');
        spbuLayer.eachLayer(layer => {
            if (layer.spbuData === undefined) return;
            if (checked.includes(layer.spbuData.is_24_jam)) {
                layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
            } else {
                layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
            }
        });
    }
};

// --- Modal Logic ---
const unifiedModal = document.getElementById('unifiedModal');
const modalTitle = document.getElementById('modalTitle');
const modalBody = document.getElementById('modalBody');

window.openModal = function(title, bodyHTML, saveCallback) {
    if (!unifiedModal) return;
    modalTitle.textContent = title;
    modalBody.innerHTML = bodyHTML;
    unifiedModal.classList.add('show');
    
    const currentSaveBtn = document.getElementById('modalSaveBtn');
    if (currentSaveBtn) {
        const newSaveBtn = currentSaveBtn.cloneNode(true);
        currentSaveBtn.parentNode.replaceChild(newSaveBtn, currentSaveBtn);
        newSaveBtn.addEventListener('click', saveCallback);
    }
};

window.closeModal = function() {
    if (unifiedModal) unifiedModal.classList.remove('show');
};

const confirmModal = document.getElementById('confirmModal');
const confirmMessage = document.getElementById('confirmMessage');

window.openConfirmModal = function(msg, confirmCallback) {
    if (!confirmModal) return;
    confirmMessage.textContent = msg;
    confirmModal.classList.add('show');
    
    const currentYesBtn = document.getElementById('confirmYesBtn');
    if (currentYesBtn) {
        const newYesBtn = currentYesBtn.cloneNode(true);
        currentYesBtn.parentNode.replaceChild(newYesBtn, currentYesBtn);
        newYesBtn.addEventListener('click', function() {
            confirmModal.classList.remove('show');
            confirmCallback();
        });
    }
};

window.closeConfirmModal = function() {
    if (confirmModal) confirmModal.classList.remove('show');
};

// --- Add Mode (untuk SPBU klik peta) ---
window.currentAddMode = null;
window.currentDrawMode = null;
window.activeDrawHandler = null;

window.activateAddMode = function(mode) {
    if (window.currentAddMode === mode) {
        window.deactivateAddMode();
        return;
    }
    window.currentAddMode = mode;
    document.getElementById('map').style.cursor = 'crosshair';
};

window.deactivateAddMode = function() {
    if (window.activeDrawHandler) {
        try { window.activeDrawHandler.disable(); } catch(e) {}
        window.activeDrawHandler = null;
    }
    window.currentAddMode = null;
    window.currentDrawMode = null;
    document.getElementById('map').style.cursor = '';
};