jQuery(document).ready(function($) {
    var map = L.map('map').setView([48.9000, 0.1000], 9);
    L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'ArcGIS'
    }).addTo(map);

    let markersCluster = L.markerClusterGroup();
    let allMarkers = []; 
    let initialMarkerData = [];
    function addMarkers(data) {
        markersCluster.clearLayers();
        allMarkers = [];
        const values = Object.values(data);
        for (const item of values) {
            console.log(item);
            let itemNom = item.name;
            let itemDomaine = item.categoriesseries ?? null;
            let itemCodePostal = item.codepstl ?? null;
            let itemAvancement = item.avancementduprojet ?? null;
            let itemAnnee = item.annees ?? null;
            let itemLongitude = item.longitude ?? null;
            let itemVille = item.ville ?? null;
            let itemLatitude = item.latitude ?? null;
            let itemAssocie = item.associe ?? null; 
            let itemLabel = item.categorielabel;
            console.log(itemLatitude + " " + itemLongitude); 
            console.log(itemLabel);     
            if (itemLongitude === null || itemLatitude === null) {
                continue;
            }
            var markerIcon;
            const iconBaseUrl = 'https://sbw1.dgtn.dev/wp-content/uploads/2024/11/';
            const iconSize = [40, 40];
            const iconAnchor = [16, 32];
            const popupAnchor = [0, -32];
            const domaineIcons = {
                "Lieux de plantation": "lieux_de_plantation.svg",
                "Producteur de bois": "producteur_de_bois.svg",
                "Acheteur de bois": "chaufferie_bois_clients.svg",
                "Acheteur de chaleur": "chaufferie_vente_chaleur.svg",
                "Plateformes logistiques": "plateformes_logistiques.svg"
            };
            const iconUrl = domaineIcons[itemDomaine] ? `${iconBaseUrl}${domaineIcons[itemDomaine]}` : null;
            markerIcon = iconUrl 
                ? new L.Icon({
                    iconUrl,
                    iconSize,
                    iconAnchor,
                    popupAnchor
                }) 
                : new L.Icon.Default();
            var popupContent = `
                ${item.photo ? `<img src="${item.photo}" alt="${itemNom}" style="max-width:100%; height:auto;">` : ''}
                <div class="modal-container-header">
                    <img src="https://images.pexels.com/photos/27880483/pexels-photo-27880483/free-photo-of-clairiere-terrain-fleurs-voiture.jpeg?auto=compress&cs=tinysrgb&w=400&lazy=load" style="height: 200px; width: 100%; object-fit: cover;">
                    <p class='modal-domaine color-white ${itemDomaine === "Lieux de plantation" ? "modal-domaine-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-domaine-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-domaine-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-domaine-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-domaine-red" : ""}'>${itemDomaine}</p>
                </div>
                <div class='modal-container ${itemDomaine === "Lieux de plantation" ? "modal-container-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-container-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-container-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-container-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-container-red" : ""}'>
                    <h2 class='modal-name'>${itemNom}</h2>
                    <h3 class='modal-adress'>${itemCodePostal} ${itemVille}</h3>
                </div>
                <p class="modal-associe"><span class="bold">${itemAssocie === "Oui" ? "Associé-e BBE" : ""}</span></p>
                <p class="modal-annee">Année : <span class="bold">${itemAnnee}</span></p>
                <p class="modal-etat">État d'avancement : <span class="bold">${itemAvancement}</span></p>
                <p class="none">${itemLabel}</p>
                <img src="" class="modal-label-1">
                <img src="" class="modal-label-2">
            `;
            var marker = L.marker([itemLatitude, itemLongitude], { icon: markerIcon })
                .bindPopup(popupContent);
            allMarkers.push(marker);
        }

        function addControlPlaceholders(map) {
            var corners = map._controlCorners,
                l = 'leaflet-',
                container = map._controlContainer;
        
            function createCorner(vSide, hSide) {
                var className = l + vSide + ' ' + l + hSide;
                corners[vSide + hSide] = L.DomUtil.create('div', className, container);
            }
            createCorner('verticalcenter', 'left');
        }
        addControlPlaceholders(map);
        map.zoomControl.setPosition('verticalcenterleft');
        L.control.scale({position: 'verticalcenterleft'}).addTo(map);
        markersCluster.addLayers(allMarkers);
        map.addLayer(markersCluster);
    }

    $.ajax({
        url: '/wp-json/custom/v1/markers', 
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            initialMarkerData = data;
            addMarkers(data);
        },
        error: function(xhr, status, error) {
            console.error('Erreur lors de la récupération des données :', error);
        }
    });

    function filterMarkers() {
        var statusFilters = {
            'En cours': $('#en-cours').hasClass('filter-active'),
            'Terminé': $('#projets-finis').hasClass('filter-active'),
            'Prévu': $('#prevu').hasClass('filter-active'),
        };
        
        var associeFilters = {
            'Oui': $('#associe-oui').hasClass('filter-active'),
            'Non': $('#associe-non').hasClass('filter-active'),
        };
    
        var labelFilters = {
            'aucun': $('#label-aucun').hasClass('filter-active'),
            'haie': $('#label-haie').hasClass('filter-active'),
            'vegetal': $('#label-vegetal').hasClass('filter-active'),
        };
    
        var domaineFilters = {
            'Lieux de plantation': $('#lieux-de-plantation').hasClass('filter-active'),
            'Acheteur de bois': $('#chaufferies-bois-clients').hasClass('filter-active'),
            'Producteur de bois': $('#exploitations-productrices-de-bois-pour-BBE').hasClass('filter-active'),
            'Acheteur de chaleur': $('#chaufferies-vente-de-chaleur').hasClass('filter-active'),
            'Plateformes logistiques': $('#plateformes-logistiques').hasClass('filter-active'),
        };
    
        var filteredMarkers = allMarkers.filter(function(marker) {
            let popupContent = marker.getPopup().getContent();
    
            let matchesStatusFilter = Object.keys(statusFilters).some(function(key) {
                return statusFilters[key] ? popupContent.includes(key) : false;
            }) || !Object.values(statusFilters).includes(true); 
     
            let matchesAssocieFilter = Object.keys(associeFilters).some(function(key) {
                return associeFilters[key] ? popupContent.includes(` ${key}`) : false;
            }) || !Object.values(associeFilters).includes(true);

            let matchesLabelFilter = labelFilters['haie'] && labelFilters['vegetal'] 
                ? (popupContent.includes('Label haie') || popupContent.includes('végétal local')) 
                : (labelFilters['haie'] ? popupContent.includes('Label haie') 
                : (labelFilters['vegetal'] ? popupContent.includes('végétal local') 
                : labelFilters['aucun'] ? popupContent.includes('Aucun') : true));
    
            let matchesDomaineFilter = Object.keys(domaineFilters).some(function(key) {
                return domaineFilters[key] ? popupContent.includes(key) : false;
            }) || !Object.values(domaineFilters).includes(true); 
           
            return matchesStatusFilter && matchesAssocieFilter && matchesLabelFilter && matchesDomaineFilter;
        });
    
        markersCluster.clearLayers(); 
        markersCluster.addLayers(filteredMarkers);
    }

    function handleFilterClick(filterId, otherFilterIds) {
        $(filterId).on('click', function() {
            $(this).toggleClass('filter-active');
            
            // Ajouter ou retirer button-active seulement si l'élément a la classe wait-button
            if ($(this).hasClass('wait-button')) {
                $(this).toggleClass('button-active');
            }
            
            if ($(this).hasClass('filter-active')) {
                if (otherFilterIds && Array.isArray(otherFilterIds)) {
                    otherFilterIds.forEach(function(otherFilterId) {
                        $(otherFilterId).removeClass('filter-active').removeClass('button-active'); // Retire button-active des autres filtres
                    });
                }
            } 
            
            filterMarkers(); // Met à jour les marqueurs après le changement de filtre
        });
    }
    
    handleFilterClick('#en-cours', ['#prevu', '#projets-finis']);
    handleFilterClick('#prevu', ['#en-cours', '#projets-finis']);
    handleFilterClick('#projets-finis', ['#en-cours', '#prevu']);
    handleFilterClick('#associe-oui', ['#associe-non']);
    handleFilterClick('#associe-non', ['#associe-oui']);
    handleFilterClick('#label-haie', ['#label-aucun']);
    handleFilterClick('#label-vegetal', ['#label-aucun']);

    handleFilterClick('#lieux-de-plantation', false);
    handleFilterClick('#chaufferies-bois-clients', false);
    handleFilterClick('#exploitations-productrices-de-bois-pour-BBE', false);
    handleFilterClick('#chaufferies-vente-de-chaleur', false);
    handleFilterClick('#plateformes-logistiques', false);

    // $('#reset-button').on('click', function() {
    //     let allHtmlElement = document.querySelectorAll("*");
    //     allHtmlElement.forEach(htmlElement => {
    //         htmlElement.classList.remove("filter-active");
    //     });
    //     map.setView([48.9000, 0.1000], 9);
    //     addMarkers(initialMarkerData);
    // });
});