@extends('layouts.base')

@php

    $locale = app()->getLocale();
    //$locale = 'fr'; // Forcer le français pour l'instant
    $iconBase = "assets/icons/{$locale}";


@endphp
@include('partials.bottom_nav', [
    'bottomTabs' => [
        [
            'icon'    => "map_picto.svg",
            'label'   => __('Map'),
            'href'    => lr('startmap'),
        ],
        [
            'icon'    => "myV_picto.svg",
            'label'   => __('My waypoints'),
            'href'    => lr('search'),
            'primary' => false,
        ],
    ],
])


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

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

@section('content')

    {{-- Leaflet CSS (CDN) --}}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet.locatecontrol@0.84.2/dist/L.Control.Locate.min.css">


    <div class="map-page">
        {{-- <div class="map-hero">
            <h1>
              <a style="" class="back" href="{{ lr('search') }}">{{ __('Back') }}</a> {{ __('Create a waypoint') }}
              </h1>
            <p>{{ __('Click on the map to pre-fill the form, then complete the waypoint details and save.') }}</p>
        </div>

        @if(session('ok'))
            <div class="alert success" style="margin-bottom: 18px">{{ session('ok') }}</div>
        @endif --}}

        <div class="map-wrapper">
            <div id="map"></div>

            {{-- Bouton "Create a waypoint" attaché à la carte --}}
            {{-- <button
                type="button"
                id="create-waypoint-btn"
                class="bottom-nav-info-btn bottom-nav-info-btn--map-attached"
                style="background:#8d1eff"
            >
                <div class="bottom-nav-info-arrow">⌃</div>
                <span class="bottom-nav-info-label">
                    {{ __('Create a waypoint') }}
                </span>
            </button> --}}

            <button
                type="button"
                id="create-waypoint-btn"
                class="bottom-nav-info-btn bottom-nav-info-btn--floating"
                style="background:#8d1eff; padding: 7px 16px 10px 12px;"
            >
                <div class="bottom-nav-info-arrow">⌃</div>
                <span class="bottom-nav-info-label">
                    {{ __('Create a waypoint') }}
                </span>
            </button>


        </div>
        <div id="locationStatus" class="location-status" role="status" aria-live="polite"></div>


        {{-- Error messages --}}
        @if ($errors->any())
            <div class="alert danger"
                style="margin-bottom: 1rem;
                    background-color: red;
                    font-weight: 700;
                    color: white;
                    text-align: center;
                    font-size: 1.5em;
                    padding: 10px;">
                <strong>{{ __('An error has occurred') }} :</strong>
                <ul style="margin:0.5rem 0 0 1rem;">
                    @foreach ($errors->all() as $error)
                        <li>{{ __($error) }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Form --}}
        <div class="wrap" style="padding: 0 10%;">
            <form id="point-form" method="POST" action="{{ route('points.store', app()->getLocale()) }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="_method" id="methodSpoof" value="POST">
                <input type="hidden" id="currentId" value="">
                <input type="hidden" name="favoris" value="0">
                <input type="hidden" name="is_mobile" value="0"">

                <input id="favoris" type="hidden" name="favoris" value="{{ old('favoris') }}" >

                <div id="pin-radios" data-current-pin="green_pin.png">
                    @if(count($availablePins) > 1)
                        @foreach($availablePins as $fn)
                            <label style="display:inline-flex;align-items:center;gap:.5rem;margin-right:.5rem;">
                                <input type="radio" name="pin_icon" value="{{ $fn }}" @checked(($currentPin ?? 'green_pin.png') === $fn)>
                                <img src="{{ asset('assets/pins/'.$fn) }}" alt="" width="24" height="24">
                            </label>
                        @endforeach
                    @else
                        <input type="hidden" name="pin_icon" value="green_pin.png">
                    @endif
                </div>

                @php
                    $user = auth()->user();
                @endphp

                <div class="" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                    <div class="form-field">
                        <label style="display:inline-flex;align-items:center;gap:.4rem;">
                            <input type="checkbox"
                                name="is_visible"
                                value="0"
                                @checked(old('is_visible' ?? true))>
                            {{ __('Visible') }}
                        </label>
                    </div>
                    <div class="form-field">
                        <label style="display:inline-flex;align-items:center;gap:.4rem;">
                            <input type="checkbox" name="hide_private" value="0" >
                            {{ __('Private hidden') }}
                        </label>
                    </div>

                    {{-- <div class="form-field">
                        <label style="display:inline-flex;align-items:center;gap:.4rem;">
                            <input type="checkbox" name="is_mobile" value="0" >
                            {{ __('is_mobile') }}
                        </label>
                    </div> --}}


                </div>


                <div class="form-grid">
                    <div class="form-field">
                        <label for="name">{{ __('Name') }}</label>
                        <input id="name" type="text" name="name" value="{{ old('name') }}" required>
                    </div>
                </div>

                <div class="form-grid">
                    <div class="form-field lock-toggle">
                        <label class="lock-label">
                            <input
                                type="checkbox"
                                name="hide_name_owner"
                                value="1" >
                            <span class="lock-icon" aria-hidden="true"></span>
                            <span class="lock-text">{{ __('name_owner') }}</span>
                        </label>
                        <input id="name_owner" type="text" name="name_owner" style="display: block !important" value="{{ old('name_owner') }}" >
                    </div>

                    <div class="form-field lock-toggle">
                        <label class="lock-label">
                            <input
                                type="checkbox"
                                name="hide_tel_owner"
                                value="1" >
                            <span class="lock-icon" aria-hidden="true"></span>
                            <span class="lock-text">{{ __('tel_owner') }}</span>
                        </label>
                        <input id="tel_owner" type="text" name="tel_owner" style="display: block !important" value="{{ old('tel_owner') }}" >
                        </div>

                    <div class="form-field lock-toggle">
                        <label class="lock-label">
                            <input
                                type="checkbox"
                                name="hide_name_on_interphone"
                                value="1" >
                            <span class="lock-icon" aria-hidden="true"></span>
                            <span class="lock-text">{{ __('name_on_interphone') }}</span>
                        </label>

                        <input id="name_on_interphone" type="text" name="name_on_interphone" style="display: block !important" value="{{ old('name_on_interphone') }}">
                    </div>


                </div>


                <div class="form-field lock-toggle">
                    <label class="lock-label">
                        <input
                            type="checkbox"
                            name="hide_address"
                            value="1" >
                        <span class="lock-icon" aria-hidden="true"></span>
                        <span class="lock-text">{{ __('Address') }}</span>
                    </label>
                </div>

                <div class="form-grid">
                    <div class="form-field">
                        <label for="lat">{{ __('Latitude') }}</label>
                        <input id="lat" type="number" step="0.0000001" name="latitude" value="{{ old('latitude') }}" required>
                    </div>
                    <div class="form-field">
                        <label for="lng">{{ __('Longitude') }}</label>
                        <input id="lng" type="number" step="0.0000001" name="longitude" value="{{ old('longitude') }}" required>
                    </div>
                    <div class="form-field">
                        <label for="alt">{{ __('Altitude') }} (m)</label>
                        <input id="alt" type="number" step="0.1" name="altitude" value="{{ old('altitude') }}">
                    </div>
                    <div class="form-field">
                        <label for="floor">{{ __('Floor') }}</label>
                        <input id="floor" type="number" step="0.1" name="floor" value="{{ old('floor') }}">
                    </div>
                </div>

                <div class="form-grid">
                    <div class="form-field">
                        <label for="address1">{{ __('Address1') }}</label>
                        <input id="address1" type="text" name="address1" value="{{ old('address1') }}">
                    </div>
                    <div class="form-field">
                        <label for="address2">{{ __('Address2') }}</label>
                        <input id="address2" type="text" name="address2" value="{{ old('address2',) }}">
                    </div>
                </div>

                <div class="form-grid">
                    <div class="form-field">
                        <label for="postcode">{{ __('Postcode') }}</label>
                        <input id="postcode" type="text" name="postcode" value="{{ old('postcode') }}">
                    </div>
                    <div class="form-field">
                        <label for="city">{{ __('City') }}</label>
                        <input id="city" type="text" name="city" value="{{ old('city') }}">
                    </div>
                    <div class="form-field">
                        <label for="country_isocode">{{ __('Country') }}</label>
                        <select id="country_isocode" name="country_isocode" required>
                            @foreach($countries as $c)
                                <option value="{{ $c->iso_code }}" @selected(old('country_isocode', $point->country_isocode ?? '') === $c->iso_code)>
                                    {{ $c->name }}
                                </option>
                            @endforeach
                        </select>

                        {{-- <label for="country_isocode">{{ __('Country ISO code') }}</label>
                        <input id="country_isocode" type="text" name="country_isocode" value="{{ old('country_isocode', $pt->country_isocode) }}"> --}}
                    </div>
                </div>



                <div class="form-grid">
                    {{-- <div class="form-field"> --}}

                        <div class="form-field lock-toggle">
                            <label class="lock-label">
                                <input
                                    type="checkbox"
                                    name="hide_interphone"
                                    value="1" >
                                <span class="lock-icon" aria-hidden="true"></span>
                                <span class="lock-text">{{ __('Interphone') }}</span>
                            </label>
                            <input id="interphone" type="text" name="interphone" style="display: block !important" value="{{ old('interphone') }}">
                        </div>

                        <div class="form-field lock-toggle">
                            <label class="lock-label">
                                <input
                                    type="checkbox"
                                    name="hide_door_code"
                                    value="1" >
                                <span class="lock-icon" aria-hidden="true"></span>
                                <span class="lock-text">{{ __('door_code') }}</span>
                            </label>
                            <input id="door_code" type="text" name="door_code" style="display: block !important" value="{{ old('door_code') }}">
                        </div>


                        <div class="form-field lock-toggle">
                            <label class="lock-label">
                                <input
                                    type="checkbox"
                                    name="hide_garage_door_code"
                                    value="1" >
                                <span class="lock-icon" aria-hidden="true"></span>
                                <span class="lock-text">{{ __('garage_portail_code') }}</span>
                            </label>
                            <input id="garage_portail_code" type="text" name="garage_portail_code" style="display: block !important" value="{{ old('garage_portail_code') }}">
                        </div>


                        <div class="form-field lock-toggle">
                            <label class="lock-label">
                                <input
                                    type="checkbox"
                                    name="hide_codes"
                                    value="1" >
                                <span class="lock-icon" aria-hidden="true"></span>
                                <span class="lock-text">{{ __('key_box_code') }}</span>
                            </label>
                            <input id="key_box_code" type="text" name="key_box_code" style="display: block !important" value="{{ old('key_box_code') }}">
                        </div>

                    </div>


                    <div class="form-field lock-toggle">
                        <label class="lock-label">
                            <input
                                type="checkbox"
                                name="hide_comment"
                                value="1" >
                            <span class="lock-icon" aria-hidden="true"></span>
                            <span class="lock-text">{{ __('Comment') }}</span>
                        </label>
                        <textarea id="comment" name="comment">{{ old('comment') }}</textarea>
                    </div>

                    <div class="form-field lock-toggle">
                        <label class="lock-label">
                            <input
                                type="checkbox"
                                name="hide_photo"
                                value="1" >
                            <span class="lock-icon" aria-hidden="true"></span>
                            <span class="lock-text">{{ __('Photo') }}</span>
                        </label>
                        <input id="photo" type="file" name="photo" accept="image/*" style="display: block !important; margin-top: 0.5rem;">
                    </div>


                <div class="actions" style="margin-top: 10px;">
                    <a href="{{ url()->previous() }}" class="btn">{{ __('Cancel') }}</a>
                    <button class="btn primary" type="submit">{{ __('Save') }}</button>
                </div>
            </form>

        </div>

        <form id="delete-form" method="POST" style="display:none">
            @csrf @method('DELETE')
        </form>
    </div>

    {{-- @if($errors->has('global'))
        <div id="form-error-dialog" class="alert danger" style="display:none;">
            {{ $errors->first('global') }}
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const msg = @json($errors->first('global'));
                // Dialog natif si dispo, sinon alert()
                if ('HTMLDialogElement' in window) {
                    const d = document.createElement('dialog');
                    d.style.padding = '1rem';
                    d.innerHTML = `<p style="max-width:340px">${msg}</p>
                                  <form method="dialog" style="text-align:right;margin-top:.5rem">
                                      <button class="btn primary">OK</button>
                                  </form>`;
                    document.body.appendChild(d);
                    d.showModal();
                } else {
                    alert(msg);
                }
            });
        </script>
    @endif --}}


  {{-- Leaflet JS (CDN) – load before your script --}}
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet.locatecontrol@0.84.2/dist/L.Control.Locate.min.js"></script>

  {{-- Leaflet Geocoder (CDN) --}}
  <link rel="stylesheet"
        href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css">
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

  <script>
      (() => {
        // ---------- Données envoyées par le contrôleur ----------
        const _rawPoints = @json($points ?? []);
        const points = Array.isArray(_rawPoints?.data) ? _rawPoints.data
                    : (Array.isArray(_rawPoints) ? _rawPoints : []);

        // ---------- Helpers icônes ----------
        const PIN_BASE = @json(asset('assets/pins'));
        const SHADOW   = @json(asset('assets/images/shadow_pin.png'));

        function pinUrlFromName(name) {
          // const fname = (name && name.trim()) ? name.trim() : 'green_pin.png';
          const fname = (typeof name === "string" && name.trim().length)
                  ? name.trim()
                  : "green_pin.png";
          return `${PIN_BASE}/${fname}?cb=${Date.now()}`;
        }

        function buildIconFromUrl(url) {
            const u = (typeof url === "string" && url.length)
                    ? url
                    : `${PIN_BASE}/green_pin.png`;
            // on ne rebuste pas ici, on suppose pin_url déjà cache-busté côté PHP
            return L.icon({
                iconUrl:   u,
                shadowUrl: SHADOW,
                iconSize:    [32,32],
                iconAnchor:  [16,32],
                popupAnchor: [0,-22],
                shadowSize:  [32,32],
            });
        }

        // Lit l’icône sélectionnée (select #pin-select ou radios #pin-radios)
        function getSelectedPinName() {
          const sel = document.getElementById('pin-select');
          if (sel) return sel.value;

          const radios = document.querySelectorAll('#pin-radios input[name="pin_icon"]');
          for (const r of radios) if (r.checked) return r.value;

          const cont = document.getElementById('pin-radios');
          return (cont?.dataset?.currentPin) || 'green_pin.png';
        }

        // ---------- Carte Leaflet ----------
        const mapEl = document.getElementById('map');
        if (!mapEl || typeof window.L === 'undefined' || !L.map) return;

        let map;
        map = L.map('map', { scrollWheelZoom: true, zoomControl: false, }).setView([46.7, 2.5], 6);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 19, attribution: '&copy; OpenStreetMap'
        }).addTo(map);

        const 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 la localisation
        setTimeout(() => {
            locateControl.start();
        }, 500);

        // Variable pour savoir si la position a été trouvée
        let locationFound = false;

        // Réessayer en cas d'erreur de localisation (max 3 tentatives)
        let locationRetries = 0;
        const maxRetries = 3;
        map.on('locationerror', (e) => {
            if (!locationFound && locationRetries < maxRetries) {
                locationRetries++;
                setTimeout(() => {
                    locateControl.start();
                }, 2000);
            }
        });

        const bounds = L.latLngBounds([]);


        // -- Geolocation Control --


        // Références champs du formulaire (adapte les IDs si nécessaire)
        const f = {
          lat:      document.getElementById('lat'),
          lng:      document.getElementById('lng'),
          alt:      document.getElementById('alt'),
          address1: document.getElementById('address1'),
          address2: document.getElementById('address2'),
          postcode: document.getElementById('postcode'),
          city:     document.getElementById('city'),
          country:  document.getElementById('country_isocode'),
        };

        let draftMarker = null;

        // Ajoute la loupe de recherche
        function addAddressSearchControl(map, defaultIso /* ex: 'FR' */){
          if (!L.Control || !L.Control.Geocoder) {
            console.warn('Leaflet Control Geocoder non chargé');
            return;
          }

          const geocoder = L.Control.geocoder({
            position: 'bottomright',
            placeholder: 'Rechercher une adresse…',
            defaultMarkGeocode: false,
            geocoder: L.Control.Geocoder.nominatim({
              // Filtre pays (optionnel) et contact (bonnes pratiques Nominatim)
              geocodingQueryParams: {
                countrycodes: (defaultIso||'').toLowerCase(), // 'fr', 'kr', etc.
                email: 'contact@exemple.com'                  // mets un mail de contact
              }
            })
          })
          .on('markgeocode', (e) => {
            const g   = e.geocode;
            const lat = g.center.lat;
            const lng = g.center.lng;

            // Récup éléments d’adresse si disponibles
            // (Nominatim → g.properties.address)
            const addr = g.properties && g.properties.address ? g.properties.address : {};
            const line1 = [addr.house_number, addr.road].filter(Boolean).join(' ').trim();
            const city  = addr.city || addr.town || addr.village || addr.hamlet || '';
            const zip   = addr.postcode || '';
            const cc    = (addr.country_code || '').toUpperCase();

            // Remplir le formulaire (sans casser tes validations)
            if (f.lat)      f.lat.value      = lat.toFixed(7);
            if (f.lng)      f.lng.value      = lng.toFixed(7);
            if (f.address1) f.address1.value = line1;
            if (f.postcode) f.postcode.value = zip;
            if (f.city)     f.city.value     = city;
            if (f.country)  f.country.value  = cc;

            // Poser / mettre à jour le marqueur provisoire, avec l’icône courante
            const iconName = getSelectedPinName();
            const iconUrl  = pinUrlFromName(getSelectedPinName());
            const icon     = buildIconFromUrl(iconUrl);

            if (!draftMarker) {
              draftMarker = L.marker(g.center, { draggable: true, icon }).addTo(map);
              // Optionnel: maj lat/lng quand on déplace le marqueur
              draftMarker.on('moveend', ev => {
                const p = ev.target.getLatLng();
                if (f.lat) f.lat.value = p.lat.toFixed(7);
                if (f.lng) f.lng.value = p.lng.toFixed(7);
              });
            } else {
              draftMarker.setLatLng(g.center).setIcon(icon);
            }

            // Adapter vue
            if (g.bbox) map.fitBounds(g.bbox, { padding: [24,24] });
            else        map.setView(g.center, 16);
          })
          .addTo(map);

          // Si l’utilisateur change d’icône de pin, refléter sur le marqueur draft
          const onIconChange = () => {
            if (!draftMarker) return;
            const iconName = getSelectedPinName();
            draftMarker.setIcon(buildIconFromUrl(pinUrlFromName(iconName)));
          };
          document.getElementById('pin-select')?.addEventListener('change', onIconChange);
          document.getElementById('pin-radios')?.addEventListener('change', (e) => {
            if (e.target.name === 'pin_icon') onIconChange();
          });
        }

        // Appelle ceci après avoir créé `map`
        addAddressSearchControl(map, /* defaultIso: */ (window.DEFAULT_ISO || 'FR'));





        // -- Ajout des marqueurs existants (UTILISE p.pin_url) --
        {{-- points.forEach(p => {
          const lat = Number(p.latitude), lng = Number(p.longitude);
          if (!Number.isFinite(lat) || !Number.isFinite(lng)) return;

          const iconUrl = (typeof p.pin_url === 'string' && p.pin_url.length)
            ? p.pin_url
            : pinUrlFromName(p.pin_icon || 'green_pin.png');

          const m = L.marker([lat, lng], { icon: buildIconFromUrl(iconUrl) }).addTo(map);
          const title = p.name ?? ('#' + (p.id ?? '?'));
          const addr  = [p.address ?? p.address1 ?? '', p.city ?? ''].filter(Boolean).join(' ');
          m.bindPopup(`<strong>${title}</strong>${addr ? `<br>${addr}` : ''}`);
          bounds.extend([lat, lng]);
        }); --}}

        if (bounds.isValid()) map.fitBounds(bounds.pad(0.2));

        // ---------- Marqueur temporaire au clic + formulaire ----------


        const locationStatus = document.getElementById('locationStatus');
        function showLocationMessage(message) {
          if (!locationStatus) return;
          if (!message) {
            locationStatus.textContent = '';
            locationStatus.classList.remove('is-visible');
          } else {
            locationStatus.textContent = message;
            locationStatus.classList.add('is-visible');
          }
        }

        let currentPinName = getSelectedPinName();
        let currentPinUrl  = pinUrlFromName(currentPinName);

        // Quand on change l’icône sélectionnée → MAJ du marqueur temporaire
        document.getElementById('pin-select')?.addEventListener('change', (ev) => {
          currentPinName = ev.target.value;
          currentPinUrl  = pinUrlFromName(currentPinName);
          if (draftMarker) draftMarker.setIcon(buildIconFromUrl(currentPinUrl));
        });
        document.getElementById('pin-radios')?.addEventListener('change', (ev) => {
          if (ev.target.name !== 'pin_icon') return;
          currentPinName = ev.target.value;
          currentPinUrl  = pinUrlFromName(currentPinName);
          if (draftMarker) draftMarker.setIcon(buildIconFromUrl(currentPinUrl));
        });

        // --------- Fonction pour récupérer l'altitude via API proxy ----------
        async function getElevationMeters(lat, lng) {
          try {
            const r = await fetch(`/api/elevation?lat=${lat}&lng=${lng}`);
            if (!r.ok) return null;
            const j = await r.json();
            return j.elevation ?? null;
          } catch(_) {
            return null;
          }
        }

        // Centrer sur l'utilisateur et remplir le formulaire quand la position est trouvée
        map.on('locationfound', async (e) => {
            if (!locationFound) {
                locationFound = true;
                map.setView(e.latlng, 17);

                const lat = e.latlng.lat;
                const lng = e.latlng.lng;

                // Remplir lat/lng
                document.getElementById('lat').value = lat.toFixed(7);
                document.getElementById('lng').value = lng.toFixed(7);

                // Placer un marqueur
                const iconUrl = pinUrlFromName(getSelectedPinName());
                const icon = buildIconFromUrl(iconUrl);
                if (!draftMarker) {
                    draftMarker = L.marker(e.latlng, { draggable: true, icon }).addTo(map);
                    draftMarker.on('moveend', ev => {
                        const p = ev.target.getLatLng();
                        document.getElementById('lat').value = p.lat.toFixed(7);
                        document.getElementById('lng').value = p.lng.toFixed(7);
                    });
                } else {
                    draftMarker.setLatLng(e.latlng).setIcon(icon);
                }

                // Récupérer l'adresse via reverse geocoding
                try {
                    const res = await fetch(`/api/reverse-geocode?lat=${lat}&lng=${lng}`, {
                        headers: { 'Accept': 'application/json' }
                    });
                    if (res.ok) {
                        const data = await res.json();
                        const addr = data.address || {};

                        const address1 = [addr.house_number ?? '', addr.road ?? ''].filter(Boolean).join(' ');
                        const address2 = addr.suburb ?? addr.neighbourhood ?? addr.quarter ?? '';
                        const city = addr.city ?? addr.town ?? addr.village ?? addr.municipality ?? '';
                        const postcode = addr.postcode ?? '';
                        const country = (addr.country_code ?? '').toUpperCase();

                        document.getElementById('address1').value = address1;
                        document.getElementById('address2').value = address2;
                        document.getElementById('postcode').value = postcode;
                        document.getElementById('city').value = city;
                        document.getElementById('country_isocode').value = country;
                        document.getElementById('name').value = city;
                    }
                } catch (err) {}

                // Récupérer l'altitude en arrière-plan
                getElevationMeters(lat, lng).then(elevation => {
                    if (elevation !== null) {
                        document.getElementById('alt').value = Number(elevation).toFixed(2);
                    }
                }).catch(() => {});
            }
        });

        async function reverseGeocodeFullOld(lat, lng) {
            const url =
                `https://nominatim.openstreetmap.org/reverse` +
                `?format=jsonv2&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`;

                const r = await fetch(url, {
                headers: {
                    'Accept': 'application/json',
                    // IMPORTANT : Nominatim exige un User-Agent
                    'User-Agent': 'Vereego/1.0 (contact@vereego.app)'
                }
            }).catch(() => null);
            if (!r || !r.ok) return null;
            const j = await r.json();
            const a = j.address || {};
            const address1 = `${a.house_number ? a.house_number+' ' : ''}${a.road || ''}`.trim();
            const address2 = a.suburb || a.neighbourhood || '';
            const city     = a.city || a.town || a.village || a.hamlet || '';
            const postcode = a.postcode || '';
            const cc       = (a.country_code || '').toUpperCase();
            return { address1, address2, postcode, city, country_isocode: cc };
        }

        async function reverseGeocodeFull(lat, lng) {
          const r = await fetch(
            `/api/reverse-geocode?lat=${lat}&lng=${lng}`,
            { headers: { 'Accept': 'application/json' } }
          ).catch(() => null);

          if (!r || !r.ok) return null;
          return await r.json();

          const j = await r.json();
          const a = j.address || {};

          return {
            address1: `${a.house_number ? a.house_number + ' ' : ''}${a.road || ''}`.trim(),
            address2: a.suburb || a.neighbourhood || '',
            postcode: a.postcode || '',
            city: a.city || a.town || a.village || a.hamlet || '',
            country_isocode: (a.country_code || '').toUpperCase()
          };
        }

        // --------- Clic carte : pose un marqueur + remplit les champs ----------
        map.on('click', async (e) => {
            const lat = e.latlng.lat;
            const lng = e.latlng.lng;

            // 1️⃣ Marker
            const iconUrl = pinUrlFromName(getSelectedPinName());
            const icon = buildIconFromUrl(iconUrl);

            if (!draftMarker) {
                draftMarker = L.marker(e.latlng, {
                    draggable: true,
                    icon
                }).addTo(map);

                draftMarker.on('moveend', ev => {
                    const p = ev.target.getLatLng();
                    document.getElementById('lat').value = p.lat.toFixed(7);
                    document.getElementById('lng').value = p.lng.toFixed(7);
                });
            } else {
                draftMarker.setLatLng(e.latlng).setIcon(icon);
            }

            // Remplit lat / lng immédiatement
            document.getElementById('lat').value = lat.toFixed(7);
            document.getElementById('lng').value = lng.toFixed(7);

            try {
                const res = await fetch(`/api/reverse-geocode?lat=${lat}&lng=${lng}`, {
                    headers: {
                        'Accept': 'application/json'
                    }
                });

                if (!res.ok) {
                    console.error('[reverse] HTTP error', res.status);
                    return;
                }

                const data = await res.json();

                //console.log('[reverse] response:', data);
                //console.log('[reverse] postcode:', data.address.postcode);


                const addr = data.address || {};

                const houseNumber = addr.house_number ?? '';
                const road        = addr.road ?? '';

                const address1 = [houseNumber, road].filter(Boolean).join(' ');

                const address2 =
                    addr.suburb ??
                    addr.neighbourhood ??
                    addr.quarter ??
                    '';

                const city =
                    addr.city ??
                    addr.town ??
                    addr.village ??
                    addr.municipality ??
                    '';

                const postcode = addr.postcode ?? '';
                const country  = (addr.country_code ?? '').toUpperCase();

                // Remplir le formulaire immédiatement
                document.getElementById('address1').value = address1;
                document.getElementById('address2').value = address2;
                document.getElementById('postcode').value = postcode;
                document.getElementById('city').value     = city;
                document.getElementById('country_isocode').value = country;
                document.getElementById('name').value = city;

                // Récupérer l'altitude en arrière-plan via API proxy
                getElevationMeters(lat, lng).then(elevation => {
                    if (elevation !== null) {
                        document.getElementById('alt').value = Number(elevation).toFixed(2);
                    }
                }).catch(() => {});

            } catch (err) {
                console.error('[reverse] JS error', err);
            }
        });
    })();

      // -- Validation du formulaire avant soumission -- /

    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('point-form'); // adapte l’id
        if (!form) return;

        form.addEventListener('submit', (e) => {
          const lat = (form.querySelector('#lat')?.value || '').trim();
          const lng = (form.querySelector('#lng')?.value || '').trim();
          const a1  = (form.querySelector('#address1')?.value || '').trim();
          const pc  = (form.querySelector('#postcode')?.value || '').trim();
          const city= (form.querySelector('#city')?.value || '').trim();
          const cc  = (form.querySelector('#country_isocode')?.value || '').trim();

          const hasCoords  = lat.length && lng.length;
          const hasAddress = a1.length && pc.length && city.length && cc.length;

          if (!hasCoords && !hasAddress) {
            e.preventDefault();
               alert(`{{ __("Renseignez des coordonnées ou une adresse complète.") }}`);
          }
        });
      });

      // Gestion du bouton "Create a waypoint" - comportement identique à public_view
      document.addEventListener('DOMContentLoaded', () => {
          const btn = document.getElementById('create-waypoint-btn');
          if (!btn) return;

          btn.addEventListener('click', (e) => {
              e.preventDefault();

              // Scroll de la moitié de la hauteur de la fenêtre
              const offset = Math.round(window.innerHeight / 2);

              window.scrollBy({
                  top: offset,
                  behavior: 'smooth'
              });
          });
      });
  </script>


@endsection