{{-- resources/views/points/search.blade.php --}}
@extends('layouts.base')

@php
    $token = $p->serial ?? null;
    $favoriteIds = [];
        if (auth()->check()) {
            // Récupère les IDs de points favoris de l'utilisateur connecté
            $favoriteIds = auth()->user()
                ->favoritePoints()
                ->pluck('points.id')   // ou ->pluck('point_id') selon ta relation
                ->all();
        }

      $photoUrl = !empty($user->photo) ? Storage::disk('public')->url($user->photo) : null;


@endphp

@include('partials.bottom_nav', [
    'bottomTabs' => [
        [
            'icon'    => "map_picto.svg",
            'label'   => __('Map'),
            'href'    => lr('map'),
        ],
        [
            'icon'    => "addV_picto.svg",
            'label'   => __('Create a waypoint'),
            'href'    => lr('map'),
            'primary' => true,
        ],
        [
            'icon'    => "myV_picto.svg",
            'label'   => __('My waypoints'),
            'href'    => lr('search')
        ],
    ],
])


@section('title','Mes waypoints')

@section('content')

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.locatecontrol@0.84.2/dist/L.Control.Locate.min.css">
<link rel="stylesheet" href="/assets/css/vereego.css">


<div class="page-start">
    <div class="wrap" style="padding: 70px 0px; !important">
        <div class="profile-hero__identity">
            <div class="profile-avatar">
                @if($photoUrl)
                    <img src="{{ $photoUrl }}" alt="{{ $user->name }}">
                @else
                    <span>{{ strtoupper(substr($user->firstname, 0, 1)) }} {{ strtoupper(substr($user->lastname, 0, 1)) }}</span>
                @endif
            </div>
            <div>
                <h2>{{ __('Hello') }} {{ $user->firstname }} {{ $user->lastname }} !</h2>
                {{-- <p>{{ $user->email }}</p> --}}
                <div class="profile-status">
                    @if(!$user->email_verified_at)
                        {{-- <span class="badge success">{{ __('Email verified') }}</span>
                    @else --}}
                        {{-- <span class="badge warning">{{ __('Email not verified') }}</span> --}}
                        <form method="POST" action="{{ route('verification.send', ['locale'=>app()->getLocale()]) }}" style="display:inline;">
                                @csrf
                                <button class="btn small ghost badge warning" type="submit">{{ __('Email not verified') }}</button>
                        </form>
                    @endif
                </div>
            </div>
        </div>

        <div id="map"></div>


    </div>
</div>

<style>
    #map {
        height: calc(100svh - 255px) !important;
    }
</style>

{{-- CDN scripts only – load in this order --}}

<script>
    window.START_POINTS = @json($points);
</script>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/leaflet.locatecontrol@0.84.2/dist/L.Control.Locate.min.js"></script>

<script>



function initMap() {

    // --- Map ---
    const map = L.map('map', {
        zoomControl: true,
    }).setView([46.5, 2.5], 3, {
        animate: true,
        duration: 0.5
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors',
        maxZoom: 19
    }).addTo(map);

    // IMPORTANT : recalculer la taille APRÈS le rendu
    setTimeout(() => {
        map.invalidateSize(true);
    }, 200);

    // Locate control avec démarrage automatique
    let locateControl = null;

    if (L.control.locate) {
        locateControl = L.control.locate({
            position: 'bottomright',
            setView: 'always',
            initialZoomLevel: 17,
            flyTo: true,
            keepCurrentZoomLevel: false,
            drawCircle: true,
            showPopup: false,
            locateOptions: {
                enableHighAccuracy: false,
                timeout: 10000,
                maximumAge: 60000
            },
            strings: {
                title: "{{ __('Center on my position') }}"
            }
        }).addTo(map);

        // Démarrer automatiquement après que la carte soit prête
        setTimeout(() => {
            locateControl.start();
        }, 500);
    }

    // Centrer sur l'utilisateur quand la position est trouvée
    let locationFound = false;
    map.on('locationfound', (e) => {
        if (!locationFound) {
            locationFound = true;
            map.setView(e.latlng, 17);
        }
    });

    // Réessayer en cas d'erreur de localisation
    map.on('locationerror', (e) => {
        if (!locationFound) {
            setTimeout(() => {
                if (locateControl) locateControl.start();
            }, 2000);
        }
    });

    // --- Points depuis backend ---
    const points = window.START_POINTS || [];

    // points.forEach(p => {
    //     console.log('point raw', p);
    // });

    // --- Cluster group ---
    const markersGroup = L.markerClusterGroup({
        maxClusterRadius: 50,
        spiderfyOnMaxZoom: true,
        showCoverageOnHover: false,
        zoomToBoundsOnClick: true
    });

    map.addLayer(markersGroup);

    const bounds = L.latLngBounds();

    points.forEach(p => {

        if (!Number.isFinite(p.lat) || !Number.isFinite(p.lng)) return;


        // Delete this for later
        pin = '/assets/pins/green_pin.png';
        // pin = `/assets/pins/${p.pin_icon || 'green_pin.png'}`;

        const icon = L.icon({
            iconUrl: pin,
            //iconUrl: `/assets/pins/${p.pin_icon || 'green_pin.png'}`,
            shadowUrl: '{{ asset('assets/images/shadow_pin.png') }}',
            iconSize: [32, 32],
            iconAnchor: [16, 32],
            popupAnchor: [0, -16],
            shadowSize: [32, 32],
        });

        // const popup = `
        //     <strong>${p.name ?? ''}</strong>
        //     ${p.address ? `<br>${p.address}` : ''}
        //     ${p.is_owner ? `<br>🟢 {{ __('My waypoint') }}` : ''}
        //     ${p.is_public ? `<br>🌍 {{ __('Public') }}` : ''}
        // `;

        const popup = `
            <div class="map-popup">
                <strong>${p.name ?? ''}</strong>

                ${p.address ? `<div class="popup-address">${p.address}</div>` : ''}
                ${p.serial ? `<div class="popup-address">${p.serial}</div>` : ''}

                ${p.is_owner ? `<div class="popup-tag">🟢 {{ __('My waypoint') }}</div>` : ''}
                ${p.is_public ? `<div class="popup-tag">🌍 {{ __('Public') }}</div>` : ''}

                ${
                    p.serial
                        ? `<a
                                href="/{{ app()->getLocale() }}/w/${p.serial}"
                                class="popup-more-btn"
                            >
                                {{ __('More informations') }}
                           </a>`
                        : ''
                }
            </div>
        `;


        const marker = L.marker([p.lat, p.lng], { icon })
            .bindPopup(popup);

        markersGroup.addLayer(marker);
        bounds.extend([p.lat, p.lng]);
    });


    // if (bounds.isValid()) {
    //     setTimeout(() => {
    //         map.fitBounds(bounds, {
    //             padding: [30, 30],
    //             maxZoom: 14
    //         });
    //     }, 400);
    // }

    // setTimeout(() => {
    //     map.invalidateSize(true);

    //     if (bounds.isValid()) {
    //         map.fitBounds(bounds, {
    //             padding: [40, 40],
    //             animate: false
    //         });
    //     }
    // }, 100);

    // if (bounds.isValid()) {
    //     map.fitBounds(bounds.pad(0.8));
    // }
}

// Appeler initMap immédiatement ou après DOMContentLoaded
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initMap);
} else {
    initMap();
}
</script>

{{-- Leaflet CDN (after the HTML) --}}




@endsection