@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 txt-lora" style="font-size: 20px; width: fit-content; margin: 0; line-height: normal; float: left;">Nos programmes immobiliers toutes fiscalités</h1>
                <p class="text-gold mt-O mb-3 h3" style="width: fit-content; float: right; margin: 0; margin-left: 10px; line-height: normal;">
                    {{ $nbProgrammes }} {{ $nbProgrammes > 1 ? 'programmes trouvés' : 'programme trouvé' }} / {{ $nbLots }} {{ $nbLots > 1 ? 'lots' : 'lot' }}
                </p>
            </div>
        </div>
    </div>

    @if($miseEnAvant)
        @include('programmes.partials.mise-en-avant', ['program' => $miseEnAvant])
    @endif
</div>

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

{{-- Carte Leaflet --}}
@if(!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">
                <div id="map" style="height: 600px; width: 100%; border-radius: 10px;"></div>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Liste des programmes --}}
@if(!empty($programs) && $programs->count() > 0)
<div class="container-xxl py-0">
    <div class="container py-3 px-0">
        <div class="row g-4">
            @foreach($programs as $program)
                @include('programmes.partials.card', ['program' => $program])
            @endforeach
        </div>
    </div>
</div>
@endif

{{-- Carousels --}}
@if(!empty($carouselsData))
    @foreach($carouselsData as $carouselData)
        <div class="container-xxl pt-5">
            <div class="container py-3 px-0" style="position: relative;">
                <div class="p-0 row">
                    <div class="col-md-12">
                        <h2 class="text-black-or-white programmes-liste-carousel_titre h3">{{ $carouselData['carousel']->name }}</h2>
                        @if(count($carouselData['programs']) > 3)
                            <div class="programe_liste__btn_afficher_tout d-md-inline-block d-none">
                                <a href="#" class="text-gold">Afficher tout</a>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="p-0 row g-4">
                    <div class="col-md-12">
                        <div class="owl-carousel programmes-liste-carousel owl-theme">
                            @foreach($carouselData['programs']->take(3) as $program)
                                @include('programmes.partials.card', ['program' => $program])
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endif
@endsection

@push('scripts')
@if(!empty($programmesMap) && count($programmesMap) > 0)
<script>
// Attendre que Leaflet soit chargé
function initMap() {
    if (typeof L === 'undefined') {
        console.error('Leaflet n\'est pas chargé');
        return;
    }

    // Passer les données PHP à JavaScript
    var programmes_map = @json($programmesMap);

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

    // 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;
    }

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

    // 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');
            }
        }, 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