@section('interactive-map.css')
    <link
        rel="stylesheet"
        href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    />
    <link rel="stylesheet" href="{{ asset('assets/css/interactive-map.css') }}?t={{ config('app.css_version') }}" defer>
@endsection

<div class="interactive-map-container position-relative rounded">
    
    <div class="img-g-map" id="changeMapBtn">
        <img src="{{ asset('assets/images/icon/fichier-de-calque.webp') }}" alt="google maps">
    </div>
    <div id="map" data-route="{{ route('search.post') }}" style="height: 600px; width: 100%; border-radius: 10px;" data-auth="{{ Auth::check() ? Auth::user()->id : 'false' }}" class="map-loader" data-icon-safari="{{ asset('assets/images/icon/map-marker-mmi.png') }}" data-icon-default="{{ asset('assets/images/icon/map-marker-mmi.webp') }}"></div>
    <div id="map-loader" style="
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(20, 20, 40, 0.7);
        color: white;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        user-select: none;
        pointer-events: none;
    ">
        Chargement de la carte <span id="dots">...</span>
    </div>
    <div id="blindPopup" class="position-absolute" style="display: none; z-index: 1000; pointer-events: none;">
        <div id="blindPopupContent" class="mx-auto" style="width: max-content; pointer-events: auto;"></div>
    </div>
</div>

@section('interactive-map.btn-map')
    <div id="btn-map-list" style="display: none;">
        <div class="btn-map-list-item {{ session('mode') === 'list' ? 'btn-map-active-item' : '' }}" onclick="changeDisplayMap()" id="btn-map-list-item">
            <img src="{{ asset('assets/images/icon/liste-a-puces.webp') }}" alt="list" class="img-btn-map">
        </div>
        <div class="btn-map-cart-item {{ session('mode') === 'map' ? 'btn-map-active-item' : '' }}" onclick="changeDisplayMap()" id="btn-map-cart-item">
            <img src="{{ asset('assets/images/icon/carte.webp') }}" alt="cart" class="img-btn-map">
        </div>
    </div>
@endsection

@section('interactive-map.js')
<script>
    //js lié au design de la carte 
    function syncScrollProgramHeight() {
        const mapElement = document.getElementById('map');
        const scrollProgram = document.getElementById('scroll-program');

        if (!mapElement || !scrollProgram) return;

        // Mobile
        if (window.innerWidth < 992) {
            scrollProgram.style.overflow = 'visible';
            scrollProgram.style.height = 'auto';
            return;
        }

        // Desktop
        const mapHeight = mapElement.offsetHeight || 600; // fallback si height = 0
        scrollProgram.style.overflow = 'scroll';
        scrollProgram.style.height = mapHeight > 0 ? mapHeight + 'px' : '600px';
    }

    // Lancer au chargement et redimensionnement
    window.addEventListener('load', syncScrollProgramHeight);
    window.addEventListener('resize', syncScrollProgramHeight);
</script>
<script>
    function switchMode() {
        const route = document.getElementById('check-interactive-map').getAttribute('data-route-mode');
        const payload = {
            _token: "{{ csrf_token() }}"
        }
        fetch(route, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': "{{ csrf_token() }}",
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(payload)
        })
        .then(response => response.text())
        .then(newMode => {
            // Update session mode in the UI
            const btnMapList = document.getElementById('btn-map-list-item');
            const btnMapCart = document.getElementById('btn-map-cart-item');
            
            if (newMode === 'list') {
                btnMapList.classList.add('btn-map-active-item');
                btnMapCart.classList.remove('btn-map-active-item');
            } else {
                btnMapList.classList.remove('btn-map-active-item');
                btnMapCart.classList.add('btn-map-active-item');
            }
        })
        .catch(error => {
            console.error('Error switching mode:', error);
        });
    }
    // controle des boutons de la carte 
    function changeDisplayMap() {
        const btnMapList = document.getElementById('btn-map-list-item');
        const btnMapCart = document.getElementById('btn-map-cart-item');

        btnMapList.classList.toggle('btn-map-active-item'); 
        btnMapCart.classList.toggle('btn-map-active-item');

        const mapDiv = document.getElementById('scroll-map');
        mapDiv.classList.toggle('d-none');

        const list = document.getElementById('scroll-program');
        list.classList.toggle('col-lg-12');
        list.classList.toggle('scroll-program');

        let elements = document.querySelectorAll('.reload-class');
        elements.forEach(element => {
            const classes = [...element.classList];
            classes.forEach(c => element.classList.remove(c));
            void element.offsetWidth; // force reflow
            classes.forEach(c => element.classList.add(c));
            element.classList.toggle('col-lg-3');
        });

        const scrollProgramEl = document.getElementById('scroll-program');
        if (btnMapList.classList.contains('btn-map-active-item')) {
            scrollProgramEl.style.overflow = 'visible';
            scrollProgramEl.style.height = 'auto'; 
        } else {
            scrollProgramEl.style.overflow = 'scroll';
            scrollProgramEl.style.height = '600px'; 
            syncScrollProgramHeight();
        }
        
        switchMode();
    }

    // visibilité des boutons de la carte 
    function toggleBtnMapListVisibility() {
        const checkMap = document.getElementById('check-interactive-map');
        const btn = document.getElementById('btn-map-list');

        if (!checkMap || !btn) return;

        const rect = checkMap.getBoundingClientRect();
        const isVisible = (
            rect.top < window.innerHeight &&
            rect.bottom > 0
        );

        if (isVisible) {
            if (!btn.classList.contains('visible')) {
                btn.style.display = 'block';
                requestAnimationFrame(() => btn.classList.add('visible'));
            }
        } else {
            if (btn.classList.contains('visible')) {
                btn.classList.remove('visible');
                setTimeout(() => {
                    if (!btn.classList.contains('visible')) {
                        btn.style.display = 'none';
                    }
                }, 300); // correspond au délai du CSS transition
            }
        }
    }

    // Exécution au chargement, scroll et resize
    // document.addEventListener("DOMContentLoaded", toggleBtnMapListVisibility);
    window.addEventListener('scroll', toggleBtnMapListVisibility);
    window.addEventListener('resize', toggleBtnMapListVisibility);
</script>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" defer></script>
<script defer>

    document.addEventListener("DOMContentLoaded", function () {
        initalizeMap();
    });

    function initalizeMap() {
        const allMarkers = []; // tableau pour stocker tous les marqueurs
        let map; // déclaration globale
        let mode = document.getElementById('check-interactive-map').getAttribute('data-mode');
        if(mode == 'list') return;
        const USER_ID = parseInt(document.getElementById('map').getAttribute('data-auth'));
        const Csrf_token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        // Init carte AVANT AJAX
        map = L.map('map', {
            zoomControl: false,
            scrollWheelZoom: true
        });

        // === Limite à la France uniquement ===
        const franceBounds = L.latLngBounds(
            L.latLng(41.0, -5.0),    // Sud-Ouest (latitude, longitude)
            L.latLng(51.5, 10.0)     // Nord-Est
        );

        map.setMaxBounds(franceBounds); // Interdit de sortir
        map.on('drag', function () {
            map.panInsideBounds(franceBounds, { animate: false });
        });

        // Centrage par défaut
        const defaultCity = { lat: 48.8566, lng: 2.3522, zoom: 5 };
        map.setView([defaultCity.lat, defaultCity.lng], defaultCity.zoom);
        // const carte = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        const carte = "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png";
        // const carte_2 = "https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.png";
        const carte_2 = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
        const tileLayers = {
            satellite: L.tileLayer(carte_2, {
                maxZoom: 18,
                attribution: '© OpenStreetMap contributors'
            }),
            street: L.tileLayer(carte, {
                maxZoom: 19,
                attribution: '© OpenStreetMap contributors'
            })
        };

        let currentLayer = tileLayers.street.addTo(map);

        const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
        const mapElement = document.getElementById('map');

        const iconUrl = isSafari
            ? mapElement.dataset.iconSafari
            : mapElement.dataset.iconDefault;

        const markerIcon = L.icon({
            iconUrl: iconUrl,
            iconSize: [32, 32],
            iconAnchor: [16, 32],
            popupAnchor: [0, -32]
        });

        const blindPopup = document.getElementById('blindPopup');
        const container = document.querySelector('.interactive-map-container');
        container.appendChild(blindPopup);
        const content = document.getElementById('blindPopupContent');

        function countVisibleMarkers() {
            const bounds = map.getBounds();
            let visibleCount = 0;

            allMarkers.forEach(marker => {
                if (bounds.contains(marker.getLatLng())) {
                    visibleCount++;
                }
            });

            // Affiche où tu veux, par exemple :
            document.querySelector('.visible-count').textContent = visibleCount;
        }
        map.whenReady(() => {
            // Lancement de l'AJAX
            $.ajax({
                url: "{{ route('search.interactive.map') }}",
                type: "POST",
                data: {
                    ...{!! json_encode($oldRequest) !!},
                    map: true,
                    oldRequest: {!! json_encode($oldRequest) !!},
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    const loader = document.getElementById('map-loader');
                    const USER_ID = parseInt(document.getElementById('map').getAttribute('data-auth'));
                    window.mapReady = true;
                    loader.style.display = 'none';
                    toggleBtnMapListVisibility();

                    const Programs_for_map = response.programs;
                    const City_for_map = response.city;
                    const latitude_moyenne = response.latitude_moyenne;
                    const longitude_moyenne = response.longitude_moyenne;
                    const zoom = response.zoom;

                    if (latitude_moyenne && longitude_moyenne) {
                        map.setView([latitude_moyenne, longitude_moyenne], zoom); 
                    } else if (City_for_map?.gps_lat && City_for_map?.gps_lng) {
                        map.setView([City_for_map.gps_lat, City_for_map.gps_lng], 10);
                    }

                    const programsMap = Programs_for_map
                        .filter(p => p.address?.citys?.gps_lat && p.address?.citys?.gps_lng)
                        .map(program => ({
                            id: program.id,
                            lat: program.address.citys.gps_lat,
                            lng: program.address.citys.gps_lng,
                            name: program.name.length > 18 ? program.name.substring(0, 15) + '…' : program.name,
                            min_price: program.lots_min_price?.formatted ?? null,
                            delivery_date: program.delivery_date_formatted ?? null,
                            has_cashback: program.commercialOperations?.has_cashback ?? false,
                            has_opecom: program.commercialOperations?.has_opecom ?? false,
                            is_new: program.is_new ?? false,
                            city: program.address.citys,
                            favorite: program.favorite,
                            href: program.url,
                            url: program.firstInteriorMediaUrl,
                            taxations: program.taxations_map ?? []
                        }));

                    const blindPopup = document.getElementById('blindPopup');
                    const container = document.querySelector('.interactive-map-container');
                    const content = document.getElementById('blindPopupContent');

                    container.appendChild(blindPopup);

                    const addMarker = (program) => {
                        const marker = L.marker([program.lat, program.lng], { icon: markerIcon }).addTo(map);
                        allMarkers.push(marker);

                        const popupWidth = '300px';
                        const popupHeight = '200px';

                        const renderFavorite = (program) => {
                            const isAuthenticated = USER_ID > 0;
                            const heartClass = isAuthenticated && program.favorite ? 'fas' : 'fal';
                            const onclick = isAuthenticated
                                ? `event.preventDefault(); event.stopPropagation(); add_favorite($(this));${program.favorite ? `hide_favorite(${program.favorite.id});` : ''}`
                                : `event.preventDefault(); event.stopPropagation();`;

                            const extraAttr = isAuthenticated
                                ? `data-id="${program.id}" data-type="program" onclick="${onclick}"`
                                : `data-bs-toggle="modal" data-bs-target="#modal-login" onclick="event.stopPropagation();"`;

                            return `<a class="heart heart-map position-absolute" style="top: 3px; left: 3px;" ${extraAttr}>
                                <i class="${heartClass} fa-heart text-red heart-favorite-${program.id}"></i>
                            </a>`;
                        };

                        const renderTaxations = (program) => {
                            return program.taxations.map(tax => `
                                <span class="text-bebas d-inline-block text-start" style="font-size: 0.6rem;background-color: #141f36;padding: 2px 10px;border-radius: 4px;">
                                    ${tax}
                                </span>`).join(' ');
                        };

                        const htmlPopup = `
                            <div class="popup-content p-2 pt-0 rounded shadow-sm bg-blue text-center cursor-pointer position-relative overflow-hidden" style="width: ${popupWidth}; height: ${popupHeight};" onclick="window.open('${program.href}', '_blank')">
                                <div class="text-start row p-1 pt-0">
                                    <div class="col-12 position-relative" style="height: 120px;background-color: rgba(255, 255, 255, 0.7);background-image: url(${program.url});background-size: cover;background-position: center;">
                                        ${renderFavorite(program)}
                                        <div class="position-absolute bottom-0 start-0" style="padding-left: 3px;padding-bottom: 3px;">
                                            ${renderTaxations(program)}
                                        </div>
                                        <div class="icons-map position-absolute">
                                            ${!program.has_opecom ? `<img src="{{ asset('assets/images/icon/cadeau.webp') }}" alt="cadeau" class="img-opecom-map">` : ''}
                                            ${!program.has_cashback ? `<img src="{{ asset('assets/images/icon/cashback.webp') }}" alt="cashback" class="img-opecom-map">` : ''}
                                        </div>

                                    </div>
                                </div>
                                <div class="position-relative">
                                    <div class="w-100 position-relative pt-1">
                                        <span class="text-bebas d-block text-white text-start h5">${program.name}</span>
                                    </div>
                                    <div class="w-100">
                                        <span class="text-bebas text-light text-start d-block mb-1">
                                            ${program.city.name} <span class="text-muted">|</span> <span class="text-muted">${program.city.zip_code}</span>
                                        </span>
                                    </div>
                                    <small class="text-bebas text-primary text-start" style="font-size: 0.7rem; position: absolute; top: 10px; right: 0;">
                                        À partir de <br><span style="font-size: 1rem;">${program.min_price}</span>
                                    </small>
                                </div>
                            </div>`;

                        marker.on('click', () => {
                            content.innerHTML = `
                                <div class="btn-popup-close-interactive-map">
                                    <span onclick="event.preventDefault(); event.stopPropagation();document.getElementById('blindPopup').style.display='none'">X</span>
                                </div>
                                ${htmlPopup}
                            `;
                            blindPopup.style.display = 'inline-block';
                            blindPopup.style.width = popupWidth;
                            blindPopup.style.height = 'auto';
                            //version fixe
                            // blindPopup.style.bottom = '0.2rem';
                            // blindPopup.style.left = (container.offsetWidth / 2 - blindPopup.offsetWidth / 2) + 'px';
                             // version proximiter du marker
                             const markerLatLng = marker.getLatLng();
                             const markerPoint = map.latLngToContainerPoint(markerLatLng); // coordonnées x/y relatives au container
                             console.log(markerPoint.x, markerPoint.y, container.offsetWidth, container.offsetHeight);
                             if(markerPoint.x > 0 && markerPoint.x < blindPopup.offsetWidth/2){
                                blindPopup.style.left = `${0}px`;
                             } else if(markerPoint.x > container.offsetWidth - blindPopup.offsetWidth/2) {
                                blindPopup.style.left = `${container.offsetWidth - blindPopup.offsetWidth}px`;
                             } else {
                                blindPopup.style.left = `${markerPoint.x - blindPopup.offsetWidth / 2}px`;
                             }
                             if(markerPoint.y > container.offsetHeight - blindPopup.offsetHeight) {
                                blindPopup.style.top = `${container.offsetHeight - blindPopup.offsetHeight}px`;
                             } else {
                                blindPopup.style.top = `${markerPoint.y - blindPopup.offsetHeight + blindPopup.offsetHeight + 5}px`;
                             }
                             blindPopup.style.bottom = ''; // annule le bottom précédemment défini s’il existe
                        });
                    };

                    // Lancement optimisé des marqueurs
                    const delayMarkerLoad = () => {
                        programsMap.forEach((program, i) => {
                            // requestIdleCallback(() => addMarker(program));
                            setTimeout(() => addMarker(program), i * 10); // espacement progressif & compatible safari
                        });
                    };

                    setTimeout(delayMarkerLoad, 300); // petit délai après chargement

                    // Fermer la popup si on clique sur la carte
                    map.on('click', function () {
                        const popup = document.getElementById('blindPopup');
                        if (popup.style.display === 'inline-block') {
                            popup.style.display = 'none';
                        }
                    });

                    map.on('moveend zoomend', function () {
                        countVisibleMarkers();
                        const bounds = map.getBounds();
                        const payload = {
                            bounds: {
                                minLat: bounds.getSouthWest().lat,
                                maxLat: bounds.getNorthEast().lat,
                                minLng: bounds.getSouthWest().lng,
                                maxLng: bounds.getNorthEast().lng
                            }
                        };

                        fetch(document.getElementById('map').getAttribute('data-route'), {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify(payload)
                        })
                            .then(response => response.text())
                            .then(html => {
                                document.getElementById('programs-list').innerHTML = html;
                            });
                    });

                    // Switch carte
                    document.getElementById('changeMapBtn').addEventListener('click', function () {
                        if (map.hasLayer(tileLayers.street)) {
                            map.removeLayer(tileLayers.street);
                            tileLayers.satellite.addTo(map);
                        } else {
                            map.removeLayer(tileLayers.satellite);
                            tileLayers.street.addTo(map);
                        }
                    });
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        });
    }
    
</script>

<script>
    //pagination
    document.addEventListener('click', function (e) {
        const link = e.target.closest('.page-link');
        if (!link) return;
    
        e.preventDefault();
    
        if (window.mapReady && typeof map?.getBounds === 'function') {
            const bounds = map.getBounds();
    
            console.log("bounds récupérés :", bounds);
    
            const payload = {
                bounds: {
                    minLat: bounds.getSouthWest().lat,
                    maxLat: bounds.getNorthEast().lat,
                    minLng: bounds.getSouthWest().lng,
                    maxLng: bounds.getNorthEast().lng
                }
            };
    
            fetch(link.href, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify(payload)
            })
            .then(r => r.text())
            .then(html => {
                document.getElementById('programs-list').innerHTML = html;
                window.scrollTo({ top: 0, behavior: 'smooth' }); // optionnel
            })
            .catch(error => console.error("Erreur AJAX pagination :", error));
        } else {
            console.warn("La carte n'est pas encore prête ou map est invalide");
        }
    });

    </script>

@endsection