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

@php

    use Illuminate\Support\Str;
    use Illuminate\Support\Facades\Storage;

    $pt       = $p ?? $point ?? null;
    $point    = $pt;
    $locale   = app()->getLocale();
    $readonly = (bool)($readonly ?? false);

    $canShare = auth()->check() && (int)auth()->id() === (int)$pt->user_id;

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

    // 'url'   => route('search', [$locale, $p->id]), // adapte la route
    $photos = $p->photos ?? collect();


     // Icône actuelle (nom de fichier)
     $currentPin = $point?->pin_icon ?: 'green_pin.png';

     // Contexte /wp/{token} (token public) ?
     $isTokenMode = request()->routeIs('points.public') || Str::contains(url()->current(), '/wp/');

     // URL POST de sauvegarde d’icône (⚠️ routes doivent exister)
     $pinPostUrl = $isTokenMode
         ? route('points.pin.update.token', ['locale' => $locale, 'token' => $point->serial])
         : route('points.pin.update.id',    ['locale' => $locale, 'point' => $point->id]);

     // Liste des fichiers pin (fallback si le contrôleur n’a pas fourni)
     $pins = ($pins ?? $availablePins ?? null) ?: [
         'red_pin.png','green_pin.png','blue_pin.png','yellow_pin.png','purple_pin.png','orange_pin.png'
     ];

     if (count($availablePins) < 2) $pt->pin_icon = 'green_pin.png';


@endphp

{{-- Bottom Nav --}}
{{-- 'bottomInfo' => [
    'label'  => __('More informations'),
    'target' => '#waypoint-details', // un id dans la page
], --}}

@include('partials.bottom_nav', [
    'bottomTabs' => [
        [
            'icon'   => "to_picto.svg",
            'label'  => __('Join'),
            'drawer' => 'maps',   // ouvre le tiroir "maps"
        ],
        $canShare ? [
            'icon'   => "sharing_picto.svg",
            'label'  => __('Sharing'),
            'drawer' => 'share',
          ] : [
            'icon'   => "sharing_picto.svg",
            'label'  => __('Sharing'),
            'href'   => lr('login'),
          ],
        [
            'icon'    => "myV_picto.svg",
            'label'   => __('My waypoints'),
            'href'    => lr('search'),
            'primary' => false,
        ],
    ],
])


<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>

@if(!$p->hide_address)
    <div class="page-start">
        <div class="wrap-nopad" style="margin: 60px auto;">
            <div id="map"
                data-lat="{{ $pt->latitude }}"
                data-lng="{{ $pt->longitude }}">
            </div>
        </div>
    </div>
@endif

<button
    type="button"
    id="more-informations"
    class="bottom-nav-info-btn"
    style="background: #8d1eff !important;"
    data-scroll-target="{{ $bottomInfo['target'] ?? '#top' }}"
>
    <div class="bottom-nav-info-arrow">⌃</div>
    <span class="bottom-nav-info-label">
        {{ $bottomInfo['label'] ?? __('More informations') }}
    </span>
</button>

{{-- CONTENU EN DESSOUS --}}
<section id="waypoint-details" class="pv-sheet">

<div class="pv-sheet-title " id="informations" style="margin-right:auto; font-size:2em; width: 100%; text-align:center;">
    <b>{{ $pt->name }}</b><br><span style="font-size:0.5em;">{{ $pt->serial }}</span>
</div>


{{-- 2. Fiche info complète --}}
<section class="pv-sheet"  rmations">

        {{-- GALLERY / PHOTOS --}}

    @if(!$p->hide_photo)
        @if($photos->isNotEmpty())
            <section class="photo-carousel">
                {{-- <button type="button" class="photo-nav photo-lightbox-prev" aria-label="Photo précédente">
                    ‹
                </button> --}}

                <div class="photo-gallery">

                    <div class="photo-track">
                        @foreach($p->photos as $photo)
                            @php $url = Storage::url($photo->path); @endphp
                            <div class="photo-slide" data-full="{{ $url }}">
                                <img src="{{ $url }}" alt="Photo {{ $loop->iteration }}">
                            </div>
                        @endforeach
                    </div>

                    </div>

                {{-- Lightbox plein écran --}}
                <div id="photo-lightbox" class="photo-lightbox" aria-hidden="true">
                    <div class="photo-lightbox-backdrop">
                        <button type="button" class="photo-lightbox-close">✕</button>
                        <img id="photo-lightbox-img" class="photo-lightbox-img" src="" alt="">
                    </div>
                </div>

                {{-- <button type="button" class="photo-nav photo-lightbox-next" aria-label="Photo suivante">
                    ›
                </button> --}}
            </section>
        @endif
    @endif

    {{-- Commentaire / description --}}
    @if((!$p->hide_comment) && !empty($p->comment))
        <p class="pv-comment">
            {{ $p->comment }}
        </p>
    @endif


    {{-- GRID 2 colonnes : gauche = adresse / codes, droite = avatar / téléphone / QR --}}
    @if(($p->hide_address) && ($p->hide_interphone) && ($p->hide_codes))
        <div class="pv-main-grid" style="grid-template-columns: minmax(0, 1fr);">
    @else
        <div class="pv-main-grid" style="grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);">
    @endif

    {{-- COLONNE GAUCHE --}}
    <div class="pv-main-left">
        {{-- Adresse postale --}}
        @if(!$p->hide_address)
            <section class="pv-block">
                <div class="pv-pill">{{ __('Address') }}</div>
                <div class="pv-info-value">
                    @if($p->address1) {{ $p->address1 }}<br>@endif
                    @if($p->address2) {{ $p->address2 }}<br>@endif
                    @if($p->postcode || $p->city)
                        {{ $p->postcode }} {{ $p->city }}<br>
                    @endif
                    @if($p->country_isocode) {{ $p->country_isocode }} @endif
                </div>
            </section>
        @endif

        {{-- Infos diverses (étage, interphone, codes…) --}}
        <section class="pv-block pv-info-grid">
            @if(!empty($p->floor))
                <div class="pv-info-row">
                    <span class="pv-pill">{{ __('floor') }}</span>
                    <span class="pv-info-value">{{ $p->floor }}</span>
                </div>
            @endif

            @if(!$p->hide_interphone && !empty($p->interphone))
                <div class="pv-info-row">
                    <span class="pv-pill">{{ __('interphone') }}</span>
                    <span class="pv-info-value">{{ $p->interphone }}</span>
                </div>
            @endif

            @if(!$p->hide_codes)
                @if(!empty($p->door_code))
                    <div class="pv-info-row">
                        <span class="pv-pill">{{ __('door_code') }}</span>
                        <span class="pv-info-value">{{ $p->door_code }}</span>
                    </div>
                @endif
                @if(!empty($p->garage_portail_code))
                    <div class="pv-info-row">
                        <span class="pv-pill">{{ __('garage_portail_code') }}</span>
                        <span class="pv-info-value">{{ $p->garage_portail_code }}</span>
                    </div>
                @endif
                @if(!empty($p->key_box_code))
                    <div class="pv-info-row">
                        <span class="pv-pill">{{ __('key_box_code') }}</span>
                        <span class="pv-info-value">{{ $p->key_box_code }}</span>
                    </div>
                @endif
            @endif
        </section>
    </div>

    {{-- COLONNE DROITE --}}
    <div class="pv-main-right">


        @php
            $name_owner = $p->name_owner ?? null;
        @endphp

        {{-- Propriétaire + actions --}}

        <section class="pv-owner-block">
            @if(!$p->hide_private)
                @if(empty($name_owner))
                    <div class="pv-owner-avatar-wrap">
                        @php
                            $owner = $p->owner ?? null;
                            $avatar = $owner?->photo
                                ? Storage::url($owner->photo)
                                : asset('assets/images/logo_128.png');
                        @endphp
                        <img class="pv-owner-avatar" src="{{ $avatar }}" alt="{{ $owner?->firstname ?? 'Owner' }}">
                    </div>

                    @if($owner && ($owner->firstname || $owner->lastname))
                       <div class="pv-owner-name">
                           {{ trim(($owner->firstname ?? '').' '.($owner->lastname ?? '')) }}
                       </div>
                   @endif

                   @if(!empty($owner?->phone))
                       <a href="tel:{{ $owner->phone }}" class="pv-owner-phone">
                           <span class="pv-owner-phone-icon">📱</span>
                           <span class="pv-owner-phone-number btn green">
                               {{ $owner->phone }}
                           </span>
                       </a>
                   @endif

                @else
                    @if(!$p->hide_name_owner)
                        <div class="pv-owner-name">
                            {{ trim(($p->name_owner ?? '')) }}
                        </div>
                    @endif

                    @if(!empty($p->name_on_interphone) && !$p->hide_name_on_interphone)
                        <div class="pv-owner-name">
                            {{ __('name_on_interphone') }} : {{ trim(($p->name_on_interphone ?? '')) }}
                        </div>
                    @endif

                    @if(!$p->hide_tel_owner)
                        <a href="tel:{{ $p->tel_owner }}" class="pv-owner-phone">
                            <span class="pv-owner-phone-icon">📱</span>
                            <span class="pv-owner-phone-number btn green">
                                {{ $p->tel_owner }}
                            </span>
                        </a>
                    @endif
                @endif



                {{-- <div class="pv-owner-actions"> --}}
                    {{-- @if(!empty($p->phone))
                        <a href="tel:{{ $p->phone }}" class="pv-btn pv-btn-primary">
                            {{ __('Téléphoner') }}
                        </a>
                    @endif --}}

                    {{-- @if($p->qrcode)
                        <a href="{{ Storage::url($p->qrcode) }}" class="pv-btn pv-btn-secondary" target="_blank" rel="noopener">
                            {{ __('QRcode Vereego') }}
                        </a>
                    @endif --}}
                {{-- </div> --}}
            @endif

            {{-- QR code --}}
            @if($p->qrcode)
                <section class="pv-qr-block">
                    <img class="pv-qr-img" src="{{ Storage::url($p->qrcode) }}" alt="QR code VereeGo">
                    @if(!empty($p->serial))
                        <div class="pv-serial-under">{{ $p->serial }}</div>
                    @endif
                </section>
            @endif


            {{-- Bouton "Signaler" : ouvre la modale --}}
            <button type="button"
                    id="open-report-modal"
                    class="pv-pill btn danger"
                    style="width: 40%; margin-bottom: 100px; padding: 0 37px;">
                {{ __('Report this waypoint') }}
            </button>

            {{-- Overlay + modale de signalement --}}
            <dialog id="report-modal" class="pv-report-modal">
                <div class="report-modal-panel">
                    <form method="POST" action="{{ route('reporting.store', ['locale' => app()->getLocale()]) }}" class="pv-report-form">
                        @csrf

                        <input type="hidden" name="point_id" value="{{ $p->id }}">

                        <h2 class="pv-report-title">
                            {{ __('Report this waypoint') }}
                        </h2>

                        {{-- <p class="pv-report-text">
                            {{ __('You can report a problem or an abuse related to this waypoint.') }}
                        </p> --}}

                        <div class="pv-report-field">
                            <label for="report_message">{{ __('Message') }}</label>
                            <textarea id="report_message" name="message" rows="4" required>{{ __('You can report a problem or an abuse related to this waypoint.') }}</textarea>
                        </div>

                        <div class="pv-report-field">
                            <label for="report_email">{{ __('Your email (optional)') }}</label>
                            <input type="email" id="report_email" name="email" placeholder="you@example.com">
                        </div>

                        <div class="pv-report-actions">
                            <button type="submit" class="btn primary">
                                {{ __('send') }}
                            </button>
                            <button type="button" id="close-report-modal" class="btn ghost">
                                {{ __('Cancel') }}
                            </button>
                        </div>
                    </form>
                </div>
            </dialog>

        </section>




@push('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <script>
        (function() {
            // Vérifier si la carte existe déjà
            const mapElement = document.getElementById('map');
            if (!mapElement) return;

            // Supprimer toute instance existante
            if (mapElement._leaflet_id) {
                mapElement._leaflet_id = null;
            }

            let map = null;

            document.addEventListener('DOMContentLoaded', () => {
                // S'assurer que la carte n'est pas déjà initialisée
                if (map) return;

                // Initialiser la carte
                map = L.map('map', {
                    zoomControl: false,
                    attributionControl: true
                }).setView(
                    [{{ $pt->latitude }}, {{ $pt->longitude }}],
                    16
                );

                // L.control.zoom({
                //     position: 'topright'
                // }).addTo(map);

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

                // Créer un bouton personnalisé pour centrer sur la position de l'utilisateur
                const LocateControl = L.Control.extend({
                    options: {
                        position: 'topright'
                    },
                    onAdd: function(map) {
                        const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
                        const button = L.DomUtil.create('a', 'leaflet-control-locate', container);
                        button.href = '#';
                        button.title = '{{ __("Center on my position") }}';
                        button.innerHTML = '📍';
                        button.style.fontSize = '20px';
                        button.style.lineHeight = '30px';
                        button.style.width = '30px';
                        button.style.height = '30px';
                        button.style.display = 'flex';
                        button.style.alignItems = 'center';
                        button.style.justifyContent = 'center';
                        button.style.backgroundColor = 'white';
                        button.style.textDecoration = 'none';

                        L.DomEvent.on(button, 'click', function(e) {
                            L.DomEvent.preventDefault(e);
                            L.DomEvent.stopPropagation(e);

                            button.style.opacity = '0.5';

                            map.locate({
                                setView: true,
                                maxZoom: 16,
                                enableHighAccuracy: true
                            });
                        });

                        return container;
                    }
                });

                map.addControl(new LocateControl());

                // Gestion des événements de localisation
                map.on('locationfound', function(e) {
                    const radius = e.accuracy / 2;
                    L.circle(e.latlng, {
                        radius: radius,
                        color: '#4285F4',
                        fillColor: '#4285F4',
                        fillOpacity: 0.2,
                        weight: 2
                    }).addTo(map);

                    L.circleMarker(e.latlng, {
                        color: '#4285F4',
                        fillColor: '#fff',
                        fillOpacity: 1,
                        weight: 2,
                        radius: 8
                    }).addTo(map);

                    const button = document.querySelector('.leaflet-control-locate');
                    if (button) button.style.opacity = '1';
                });

                map.on('locationerror', function(e) {
                    alert('{{ __("Unable to determine your position") }}: ' + e.message);
                    const button = document.querySelector('.leaflet-control-locate');
                    if (button) button.style.opacity = '1';
                });

                const pinIcon = L.icon({
                    iconUrl: '{{ asset("assets/pins/" . ($pt->pin_icon ?: "green_pin.png")) }}',
                    shadowUrl: '{{ asset("assets/images/shadow_pin.png") }}',
                    iconSize:    [64, 64],
                    iconAnchor:  [32, 64],
                    popupAnchor: [0, -32],
                    shadowSize:  [64, 64],
                });

               //L.control.locate({
                //    position: 'topright',   // 👈 ici
                    //flyTo: true,
                    // keepCurrentZoomLevel: false,
                    // initialZoomLevel: 17,
                    //drawCircle: true,
                    // showPopup: false,
                    //enableHighAccuracy: true,
                    // strings: {
                    //     title: '{{ __("Center on my position") }}'
                    // }
                    //}).addTo(map);

                L.marker(
                    [{{ $pt->latitude }}, {{ $pt->longitude }}],
                    { icon: pinIcon }
                ).addTo(map).bindPopup('<b>{{ $pt->name }}</b>');

                // Forcer le recalcul de la taille de la carte
                setTimeout(() => {
                    if (map) map.invalidateSize(true);
                }, 100);
            });
        })();



        document.addEventListener('DOMContentLoaded', () => {
            const slides = Array.from(document.querySelectorAll('.photo-slide'));
            if (!slides.length) return;

            const lightbox = document.getElementById('photo-lightbox');
            const img      = document.getElementById('photo-lightbox-img');
            const btnClose = lightbox.querySelector('.photo-lightbox-close');
            const btnPrev  = lightbox.querySelector('.photo-lightbox-prev');
            const btnNext  = lightbox.querySelector('.photo-lightbox-next');
            const backdrop = lightbox.querySelector('.photo-lightbox-backdrop');

            let index = 0;

            function openAt(i) {
                index = i;
                img.src = slides[index].dataset.full;
                lightbox.classList.add('is-open');
                lightbox.setAttribute('aria-hidden', 'false');
                document.body.style.overflow = 'hidden';
            }

            function close() {
                lightbox.classList.remove('is-open');
                lightbox.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = '';
            }

            function next(step) {
                index = (index + step + slides.length) % slides.length;
                img.src = slides[index].dataset.full;
            }

            slides.forEach((slide, i) => {
                slide.addEventListener('click', () => openAt(i));
            });

            btnClose.addEventListener('click', close);
            backdrop.addEventListener('click', e => {
                if (e.target === backdrop) close();
            });

            btnNext.addEventListener('click', () => next(+1));
            btnPrev.addEventListener('click', () => next(-1));

            document.addEventListener('keydown', e => {
                if (!lightbox.classList.contains('is-open')) return;
                if (e.key === 'Escape') close();
                if (e.key === 'ArrowRight') next(+1);
                if (e.key === 'ArrowLeft')  next(-1);
            });

            /* --- flèches du carrousel (hors lightbox) --- */
            const track = document.querySelector('.photo-track');
            const prev  = document.querySelector('.photo-nav-prev');
            const nextB = document.querySelector('.photo-nav-next');

            const step = () => track.clientWidth * 0.8;

            prev?.addEventListener('click', () => {
                track.scrollBy({ left: -step(), behavior: 'smooth' });
            });

            nextB?.addEventListener('click', () => {
                track.scrollBy({ left: step(), behavior: 'smooth' });
            });
        });


        document.addEventListener('click', e => {
            const btn = e.target.closest('.nav-drawer-app');
            if (!btn) return;

            const target = btn.dataset.mapTarget;
            if (!target) return;

            const mapEl = document.getElementById('map');
            if (!mapEl) return;

            const lat = mapEl.dataset.lat;
            const lng = mapEl.dataset.lng;

            if (!lat || !lng) return;

            let url = '';

            switch (target) {
                case 'apple':
                    url = `https://maps.apple.com/?daddr=${lat},${lng}`;
                    break;

                case 'google':
                    url = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
                    break;

                case 'uber':
                    url = `https://m.uber.com/ul/?action=setPickup&pickup=my_location&dropoff[latitude]=${lat}&dropoff[longitude]=${lng}`;
                    break;
            }

            if (url) {
                window.open(url, '_blank', 'noopener');
            }
        });

        document.addEventListener('DOMContentLoaded', () => {
        const openBtn  = document.getElementById('open-report-modal');
        const closeBtn = document.getElementById('close-report-modal');
        const dialog   = document.getElementById('report-modal');

        if (!openBtn || !closeBtn || !dialog) return;

        function openDialog() {
            // Native <dialog> support
            if (typeof dialog.showModal === 'function') {
            dialog.showModal();
            dialog.classList.add('is-visible');
            document.body.style.overflow = 'hidden';
            return;
            }

            // Fallback (older browsers): emulate modal
            dialog.setAttribute('open', 'open');
            dialog.classList.add('is-visible');
            document.body.style.overflow = 'hidden';
        }

        function closeDialog() {
            if (typeof dialog.close === 'function') dialog.close();
            dialog.removeAttribute('open');
            dialog.classList.remove('is-visible');
            document.body.style.overflow = '';
        }

        openBtn.addEventListener('click', (e) => {
            e.preventDefault();
            openDialog();
        });

        closeBtn.addEventListener('click', (e) => {
            e.preventDefault();
            closeDialog();
        });

        // Click outside the panel closes (native dialog provides backdrop)
        dialog.addEventListener('click', (e) => {
            // If the click is on the dialog backdrop (not inside the panel), close.
            const panel = dialog.querySelector('.report-modal-panel');
            if (panel && !panel.contains(e.target)) closeDialog();
        });

        // ESC closes
        dialog.addEventListener('cancel', (e) => {
            e.preventDefault(); // avoid leaving weird states
            closeDialog();
        });
        });


        document.addEventListener('DOMContentLoaded', () => {
            const drawer   = document.getElementById('share-drawer');
            const backdrop = document.querySelector('[data-nav-backdrop]');
            const form     = document.getElementById('share-form');
            const feedback = document.getElementById('share-feedback');
            const emailInp = document.getElementById('share-email');

            if (!drawer || !form) return;

            /* ---------------- OPEN / CLOSE ---------------- */

            function openDrawer() {
                drawer.classList.add('is-open');
                backdrop?.classList.add('is-open');
                document.body.style.overflow = 'hidden';
                setTimeout(() => emailInp?.focus(), 150);
            }

            function closeDrawer() {
                drawer.classList.remove('is-open');
                backdrop?.classList.remove('is-open');
                document.body.style.overflow = '';
                form.reset();
                feedback.hidden = true;
            }

            // Open via bottom-nav (data-open-drawer="share")
            document.addEventListener('click', (e) => {
                const btn = e.target.closest('[data-open-drawer="share"]');
                if (!btn) return;
                e.preventDefault();
                openDrawer();
            });

            // Close via ✕ or backdrop
            document.addEventListener('click', (e) => {
                if (
                    e.target.closest('[data-drawer-close]') ||
                    e.target === backdrop
                ) {
                    e.preventDefault();
                    closeDrawer();
                }
            });

            // ESC
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && drawer.classList.contains('is-open')) {
                    closeDrawer();
                }
            });

            /* ---------------- SUBMIT ---------------- */

            form.addEventListener('submit', async (e) => {
                e.preventDefault();

                const email = emailInp.value.trim();
                if (!email) return;

                feedback.hidden = false;
                feedback.textContent = '{{ __('Sending…') }}';
                feedback.style.color = '';

                try {
                    console.log('[share] email:', email);

                    const res = await fetch(
                        "{{ route('points.share', ['locale' => app()->getLocale(), 'token' => $pt->serial]) }}",
                        {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json',
                                'Content-Type': 'application/json',
                            },
                            credentials: 'same-origin',
                            body: JSON.stringify({ email }),
                        }
                    );

                    // 👉 On NE PARSE PAS de JSON si ce n’est pas du JSON
                    let data = {};
                    const contentType = res.headers.get('content-type') || '';

                    if (contentType.includes('application/json')) {
                        data = await res.json();
                    }

                    if (!res.ok) {
                        throw new Error(data.message || 'HTTP ' + res.status);
                    }

                    // ✅ SUCCÈS
                    console.log('[share] success');
                    feedback.textContent = '{{ __('Invitation sent successfully') }}';
                    feedback.style.color = '#15803d';

                    form.reset();
                    setTimeout(closeDrawer, 1200);

                } catch (err) {
                    console.error('[share] Error:', err);
                    feedback.textContent = '{{ __('Unable to share this waypoint') }}';
                    feedback.style.color = '#b91c1c';
                }
            });
        });

        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('share-form');
            if (!form) return;

            form.addEventListener('submit', (e) => {
                e.preventDefault();
            });
        });

    </script>
@endpush