loko/streetup/stock/static/stock/warehouse_detail.js

// Vérifier que les coordonnées sont disponibles avant d'initialiser la carte
if (feature_lon !== null && feature_lat !== null) {
    const map = new maplibregl.Map({
        style: window.MAP_STYLE_LIGHT,
        center: [feature_lon, feature_lat],
        zoom: 17,
        pitch: 45,
        bearing: -17.6,
        container: 'map',
        antialias: true
    });

    map.on('load', () => {

        const pointData = {
            type: 'FeatureCollection',
            features: [
                {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [feature_lon, feature_lat]
                    },
                    properties: {
                        name: '...'
                    }
                }
            ]
        };

        // Add the circle as a GeoJSON source
        map.addSource('warehouse', {
            type: 'geojson',
            data: pointData
        });

        map.addLayer({
            'id': 'warehouse',
            'type': 'circle',
            'source': 'warehouse',
            'paint': {
                'circle-radius': {
                    'base': 1.75,
                    'stops': [
                        [12, 2],
                        [22, 300]
                    ]
                },
                'circle-color': '#0094ff',
                'circle-opacity': 0.7
            }
        });
    });
} else {
    // Afficher un message si pas de coordonnées
    const mapContainer = document.getElementById('map');
    if (mapContainer) {
        mapContainer.innerHTML = '<div class="alert alert-info m-3"><i class="bi bi-info-circle"></i> Aucune localisation disponible pour cet entrepôt.</div>';
    }
}



// Ajouter les boutons d'action pour chaque ligne du tableau
function actionsFormatter(value, row, index) {
    resp = `<button class="btn btn-sm btn-light detail-btn" data-id="${row.id}" data-bs-toggle="tooltip" title="Detail">
                <i class="bi bi-info-circle"></i>
            </button>`;

    if (row.lon) {   
        resp = resp + 
            `<button class="btn btn-sm btn-light zoom-btn" data-lon="${row.lon}" data-lat="${row.lat}" data-bs-toggle="tooltip" title="Zoom">
                <i class="bi bi-geo-alt"></i>
            </button>
            `;
    }

    return resp;
}

// Initialisation après le chargement de la page
$( document ).ready(function() {
    $('#warehouse-locations-table').bootstrapTable();
});

// Filtrage des produits
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('product-search');
    const alertsOnlyCheckbox = document.getElementById('show-alerts-only');
    const stockOnlyCheckbox = document.getElementById('show-stock-only');
    const noResultsDiv = document.getElementById('no-results');
    
    if (!searchInput || !alertsOnlyCheckbox || !stockOnlyCheckbox) return;
    
    function filterProducts() {
        const searchTerm = searchInput.value.toLowerCase().trim();
        const showAlertsOnly = alertsOnlyCheckbox.checked;
        const showStockOnly = stockOnlyCheckbox.checked;
        
        const allRows = document.querySelectorAll('.product-row');
        const categorySections = document.querySelectorAll('.category-section');
        
        let visibleCount = 0;
        
        // Filtrer chaque ligne de produit
        allRows.forEach(row => {
            const productName = row.getAttribute('data-product-name') || '';
            const productCode = row.getAttribute('data-product-code') || '';
            const isAlert = row.getAttribute('data-is-alert') === 'true';
            const stock = parseInt(row.getAttribute('data-stock') || '0', 10);
            
            const matchesSearch = !searchTerm || 
                                  productName.includes(searchTerm) || 
                                  productCode.includes(searchTerm);
            const matchesAlert = !showAlertsOnly || isAlert;
            const matchesStock = !showStockOnly || stock > 0;
            
            if (matchesSearch && matchesAlert && matchesStock) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });
        
        // Masquer les catégories vides
        categorySections.forEach(section => {
            const visibleRows = section.querySelectorAll('.product-row:not([style*="display: none"])');
            if (visibleRows.length === 0) {
                section.style.display = 'none';
            } else {
                section.style.display = '';
                // Mettre à jour le badge de comptage
                const badge = section.querySelector('.category-header .badge');
                if (badge) {
                    badge.textContent = visibleRows.length;
                }
            }
        });
        
        // Afficher le message "aucun résultat"
        if (visibleCount === 0) {
            noResultsDiv.classList.remove('d-none');
        } else {
            noResultsDiv.classList.add('d-none');
        }
    }
    
    // Écouter les événements de filtre
    searchInput.addEventListener('input', filterProducts);
    alertsOnlyCheckbox.addEventListener('change', filterProducts);
    stockOnlyCheckbox.addEventListener('change', filterProducts);
    
    // Filtrage initial (au cas où les paramètres sont déjà définis)
    filterProducts();
});