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();
            let imageUrl = '';

            let imageUrls = [];

            if (Array.isArray(itemLabel)) {
                if (itemLabel.includes("Label haie") && itemLabel.includes("Label végétal local")) {
                    imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/logo.png');
                    imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/baseline-dark.svg');
                } else if (itemLabel.includes("Label haie")) {
                    imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/baseline-dark.svg');
                } else if (itemLabel.includes("Label végétal local")) {
                    imageUrls.push('https://sbw1.dgtn.dev/wp-content/plugins/hello-world/media/logo.png');
                }
            }

            let popupContent = `
                <div class='modal-container ${itemDomaine === "Lieux de plantation" ? "modal-border-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-border-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-border-black" : ""} ${itemDomaine === "Plateformes logistiques" ? "modal-border-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-border-red" : ""}'>
                    ${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" : ""}' style='padding-top: 10px;'>
                        <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>
                    <div class="modal-images">
                        ${imageUrls.map(url => `<img src="${url}" alt="Label Image">`).join('')}
                    </div>
                </div>    
            `;
                
            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 associeFilterActive = $('#toggle-associe').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 = associeFilterActive ? popupContent.includes('Associé-e BBE') : 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');

            if ($(this).hasClass('wait-button')) {
                $(this).toggleClass('button-active');
            }
            
            if ($(this).hasClass('filter-active') && otherFilterIds && Array.isArray(otherFilterIds)) {
                otherFilterIds.forEach(function(otherFilterId) {
                    $(otherFilterId).removeClass('filter-active button-active');
                });
            }

            filterMarkers(); 
        });
    }

    function handleToggleClick(toggleId) {
        $(toggleId).on('click', function() {
            const parentElement = document.querySelector(toggleId);
            const childElement = document.querySelector(`${toggleId} > div`);
            
            if ($(this).toggleClass('filter-active').hasClass('filter-active')) {
                parentElement.classList.remove("toggle-to-anim-parent-reverse");
                childElement.classList.remove("toggle-to-anim-enfant-reverse");
                parentElement.classList.add("toggle-to-anim-parent");
                childElement.classList.add("toggle-to-anim-enfant");
            } else {
                parentElement.classList.remove("toggle-to-anim-parent");
                childElement.classList.remove("toggle-to-anim-enfant");
                parentElement.classList.add("toggle-to-anim-parent-reverse");
                childElement.classList.add("toggle-to-anim-enfant-reverse");
            }

            filterMarkers(); 
        });
    }

    handleFilterClick('#en-cours', ['#prevu', '#projets-finis']);
    handleFilterClick('#prevu', ['#en-cours', '#projets-finis']);
    handleFilterClick('#projets-finis', ['#en-cours', '#prevu']);
    handleToggleClick('#toggle-associe');

    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);

});