{{-- Carte et bouton « Itinéraire » d'une adresse Gestan, pour la fiche
     intervention et la fiche client. Attend $lieu (gestan_inter_adresse).

     Google géocode mal le texte de Gestan (« route de Beyrie » : la carte du
     monde). La carte attend donc le point de la Base Adresse Nationale, que
     calcule le forfait de déplacement (TarifDeplacement, trajet en cache 30
     jours), et ne retombe sur le texte que si ce calcul échoue ou ne peut pas
     se faire (ni ville ni code postal). Intégration Google Maps sans clé
     d'api (?output=embed), chargée à la demande (lazy). --}}
@php
    $carteAdresse = [
        'adresse'     => $lieu['adresse'],
        'code_postal' => $lieu['code_postal'],
        'ville'       => $lieu['ville'],
    ];
@endphp

@if ($lieu['complete'] !== '')
    <div class="ratio ratio-4x3 rounded overflow-hidden border my-2">
        <iframe title="{{ __('Carte') }} — {{ $lieu['complete'] }}" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade" style="border: 0;"
            data-carte-lieu data-texte="{{ $lieu['complete'] }}"
            @if ($carteAdresse['ville'] !== '' || $carteAdresse['code_postal'] !== '')
                data-url="{{ route('interventions.tarifs.calculer') }}"
                data-adresse='@json($carteAdresse)'
            @endif></iframe>
    </div>
    {{-- Sur téléphone, le lien ouvre l'app de GPS. --}}
    <a href="https://www.google.com/maps/dir/?api=1&destination={{ urlencode($lieu['complete']) }}"
        target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary align-self-start"
        data-carte-itineraire>
        <i class="bi bi-sign-turn-right"></i> {{ __('Itinéraire') }}
    </a>

    @pushOnce('scripts')
        <script>
            document.querySelectorAll('[data-carte-lieu]').forEach(function (carte) {
                var itineraire = carte.closest('.card')?.querySelector('[data-carte-itineraire]');
                var poser = function (point) {
                    var q = point ? point.lat + ',' + point.lon : carte.dataset.texte;
                    carte.src = 'https://maps.google.com/maps?q=' + encodeURIComponent(q) + '&z=16&output=embed';
                    if (point && itineraire) {
                        itineraire.href = 'https://www.google.com/maps/dir/?api=1&destination=' + encodeURIComponent(q);
                    }
                };

                if (!carte.dataset.url) {
                    poser(null);
                    return;
                }

                var corps = new FormData();
                corps.append('_token', @json(csrf_token()));
                var adresse = JSON.parse(carte.dataset.adresse);
                Object.keys(adresse).forEach(function (k) { corps.append(k, adresse[k]); });

                fetch(carte.dataset.url, { method: 'POST', headers: { 'Accept': 'application/json' }, body: corps })
                    .then(function (r) { return r.ok ? r.json() : null; })
                    .then(function (data) { poser(data && data.arrivee ? data.arrivee : null); })
                    .catch(function () { poser(null); });
            });
        </script>
    @endPushOnce
@endif