@extends('layouts.app')

@section('content')
<div class="container-xxl py-0">
    <div class="container">
        <div class="row p-0 mb-3">
            <div class="col-md-12">
                <h1 class="text-black-or-white mb-3 h1-nos-programmes-toutes-fiscalite" style="font-size: 20px; width: fit-content; margin: 0; line-height: normal; float: left;">Résultats de recherche</h1>
                <p class="text-primary mt-O mb-3 h3" style="width: fit-content; float: right; margin: 0; margin-left: 10px; line-height: normal;">
                    {{ $nbProgrammes ?? $programs->count() }} {{ ($nbProgrammes ?? $programs->count()) > 1 ? 'programmes trouvés' : 'programme trouvé' }} / {{ $totalLots }} {{ $totalLots > 1 ? 'lots' : 'lot' }}
                </p>
            </div>
        </div>
    </div>
</div>

{{-- Barre de recherche --}}
@include('programmes.searchbar', ['fiscalites' => $fiscalites ?? \App\Enums\Fiscalite::selectableCases()])

{{-- Carte Leaflet --}}
@if(isset($currentApplication) && $currentApplication->hasFeature(\App\Enums\FeatureSlug::PROGRAMS_MAP->value) && !empty($programmesMap))
<div class="container-xxl py-1">
    <div class="container py-1 px-0" style="position: relative;">
        <div class="row">
            <div class="col-md-12" style="position: relative;">
                <div id="map" style="height: 600px; width: 100%; border-radius: 10px;"></div>
                <div id="map-loader" style="
                    height: 600px;
                    position: absolute;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background: rgba(30, 30, 30, 0.7);
                    color: white;
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    font-size: 1.2rem;
                    display: flex;
                    text-align: center;
                    align-items: center;
                    justify-content: center;
                    z-index: 9999;
                    user-select: none;
                    pointer-events: none;
                ">Chargement de la carte...</div>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Résultats --}}
@if($programs->count() > 0)
    <div class="container-xxl pt-5">
        <div class="container py-3 px-0">
            <div class="p-0 row g-4">
                @foreach($programs as $program)
                    @include('programmes.partials.card', ['program' => $program])
                @endforeach
            </div>
        </div>
    </div>
@else
    <div class="container-xxl pt-5">
        <div class="container py-3 px-0">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="text-black-or-white">Aucun programme trouvé pour votre recherche.</p>
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

@push('scripts')
@if(!empty($programmesMap) && count($programmesMap) > 0)
<script>
// Passer les données PHP à JavaScript
var programmes_map = @json($programmesMap);

// Fonction pour initialiser la carte
function initMap() {
    if (typeof L === 'undefined') {
        console.error('Leaflet n\'est pas chargé');
        return;
    }

    if (!programmes_map || programmes_map.length === 0) {
        console.log('Aucun programme à afficher sur la carte');
        return;
    }

    // Vérifier que l'élément map existe
    var mapElement = document.getElementById('map');
    if (!mapElement) {
        console.error('L\'élément #map n\'existe pas');
        return;
    }

    // Masquer le loader
    var mapLoader = document.getElementById('map-loader');
    if (mapLoader) {
        mapLoader.style.display = 'none';
    }

    // Valeurs par défaut pour la carte
    let map_latitude = 47;
    let map_longitude = 2;
    let map_zoom = 6;

    // Calculer le centre de la carte basé sur les programmes
    let latitudes = programmes_map.map(p => p.latitude).filter(lat => lat && lat !== 0);
    let longitudes = programmes_map.map(p => p.longitude).filter(lng => lng && lng !== 0);

    if (latitudes.length > 0 && longitudes.length > 0) {
        map_latitude = latitudes.reduce((a, b) => a + b, 0) / latitudes.length;
        map_longitude = longitudes.reduce((a, b) => a + b, 0) / longitudes.length;
        map_zoom = programmes_map.length === 1 ? 13 : 6;
    }

    // Initialiser la carte Leaflet (variable globale pour pouvoir fermer la popup)
    window.map = L.map('map').setView([map_latitude, map_longitude], map_zoom);

    // Ajout du fond de carte
    const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 17,
        minZoom: 2,
        ext: 'png'
    }).addTo(map);

    // Ajouter les marqueurs pour chaque programme
    var baseUrl = $('#base_url').val() || window.location.origin + '/';
    var MPP_pin = L.icon({
        iconUrl: baseUrl + 'assets/img/map-pin.png',
        iconSize: [32, 32],
        iconAnchor: [16, 32],
        popupAnchor: [0, 60]
    });

    programmes_map.forEach(function(element) {
        if (element.latitude && element.longitude && element.latitude !== 0 && element.longitude !== 0) {
            // Utiliser le HTML généré côté serveur (comme dans mpp)
            var popupContent = element.popup_html || '';

            L.marker([element.latitude, element.longitude], {
                alt: element.nom,
                icon: MPP_pin
            })
            .addTo(map)
            .bindPopup(popupContent, {
                autoPan: false, // empêche le recentrage de la carte
                autoPanPadding: [50, 50]
            });
        }
    });
}

// Attendre que le DOM et Leaflet soient chargés
$(document).ready(function() {
    // Vérifier si Leaflet est déjà chargé
    if (typeof L !== 'undefined') {
        initMap();
    } else {
        // Si Leaflet n'est pas encore chargé, attendre qu'il soit disponible
        var checkLeaflet = setInterval(function() {
            if (typeof L !== 'undefined') {
                clearInterval(checkLeaflet);
                initMap();
            }
        }, 100);

        // Timeout après 5 secondes
        setTimeout(function() {
            clearInterval(checkLeaflet);
            if (typeof L === 'undefined') {
                console.error('Leaflet n\'a pas pu être chargé après 5 secondes');
                var mapLoader = document.getElementById('map-loader');
                if (mapLoader) {
                    mapLoader.style.display = 'none';
                }
            }
        }, 5000);
    }

    // Ferme la popup lorsque l'on clique sur un programme (comme dans mpp)
    $(document).on('click', '.programme_miniature_lien', function() {
        if (typeof window.map !== 'undefined') {
            window.map.closePopup();
        }
    });
});
</script>
@endif
@endpush