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

@push('styles')
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  <style>#map{height:360px;width:100%;border-radius:8px}.leaflet-container{font:inherit}</style>
@endpush


@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();
        }

    $isVisible = $p->is_visible ?? false;

@endphp

@section('title', isset($p?->name) ? ($p->name . (isset($p->serial) ? ' — '.$p->serial : '')) : __('Waypoint'))


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

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

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

    $photos = $p->photos ?? collect();

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

    // 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'
    ];

    // Normalise les points pour la carte (et construit pin_url)
    $mapPoints = collect($mapPoints ?? [])->map(function($mp){
        $mp = is_array($mp) ? (object)$mp : $mp;
        $file = $mp->pin_icon ?? 'green_pin.png';
        $mp->pin_url  = $mp->pin_url ?? asset('assets/pins/'.$file).'?v='.now()->timestamp;
        $mp->latitude  = (float)($mp->latitude  ?? 0);
        $mp->longitude = (float)($mp->longitude ?? 0);
        return $mp;
    })->values()->all();

    $fullAddress = '';
    if ($pt) {
        $parts = [
            $pt->address1 ?? null,
            $pt->address2 ?? null,
            $pt->postcode  ?? null,
            $pt->city      ?? null,
            $pt->country_isocode ?? null,
        ];
        $fullAddress = trim(implode(' ', array_filter($parts, fn($v) => is_string($v) && $v !== '')));
    }
@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,
        ],
    ],
])


@section('head')
    {{-- Meta CSRF correcte --}}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {{-- Leaflet CSS (une seule fois) --}}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
@endsection

@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">


    @if(!$pt)
        <div class="wrap-nopad">
            <div class="alert danger">
                {{ __('This waypoint does not exist or is no longer available.') }}
                {{ __('Token:') }} <code>{{ $serialToken ?? '—' }}</code>
            </div>
            @if($readonlyUrl)
                <p><a class="btn ghost" href="{{ $readonlyUrl }}">{{ __('Open read-only view') }}</a></p>
            @endif
        </div>
        @return
    @endif

    {{-- <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>
     --}}
    <div class="map-wrapper">
        <div id="map"
             data-lat="{{ $pt->latitude }}"
             data-lng="{{ $pt->longitude }}">
        </div>

        {{-- Bouton More informations ATTACHÉ à la carte --}}
         <button
            type="button"
            id="more-info-btn"
            class="bottom-nav-info-btn bottom-nav-info-btn--floating"
            data-scroll-target="#waypoint-details"
            style="background:#8d1eff"
        >
            <div class="bottom-nav-info-arrow">⌃</div>
            <span class="bottom-nav-info-label">
                {{ __('More informations') }}
            </span>
        </button>
    </div>
    {{-- <div class="" style="margin-top: 80px;" id="waypoint-details"></div> --}}
    <div class="wrap-nopad" >
        {{-- Carte --}}

        {{-- CONTENU EN DESSOUS --}}


        <section class="pv-sheet" style="">
        <div class="card-header" style="display: flex;
            align-items: center;
            gap: .75rem;
            flex-wrap: nowrap;
            justify-content: flex-end;
            flex-direction: row;
            align-content: center;
            padding: 0 !important;
        }">

            {{-- <dialog id="pin-modal" style="padding:0;border:none;border-radius:10px;max-width:520px;width:90%;">
                <form id="pin-form" method="dialog" data-action="{{ $pinPostUrl }}" style="padding:1rem;">
                    @csrf
                    {{-- <h3 style="margin-top:0">{{ __('Choose a pin icon') }}</h3> --}}
            {{--      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;">
                        @foreach($pins as $fn)
                        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
                            <input type="radio" name="pin_icon" value="{{ $fn }}" @checked($fn === $currentPin)>
                            <img src="{{ asset('assets/pins/'.$fn) }}?v={{ now()->timestamp }}" alt="{{ $fn }}" width="32" height="32">
                            {{-- <span style="font-size:.9rem;">{{ $fn }}</span> --}}
            {{--           </label>
                        @endforeach
                    </div>
                    <div style="display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem;">
                        <button type="button" id="pin-cancel" class="btn ghost">{{ __('Cancel') }}</button>
                        <button type="button" id="btn-save-pin" class="btn primary">{{ __('Save') }}</button>
                    </div>
                </form>
            </dialog> --}}

            {{-- <div class="title" style="margin-right:auto; font-size:2em;"><b>{{ $pt->name }}</b> : <span style="font-size:0.5em;">{{ $pt->serial }} </span></div> --}}

            {{-- Favori (seulement si token présent) --}}
            @auth
                @if($serialToken)

                    @php
                        $token = $pt->serial ?? null;
                        $isFav = auth()->check() && in_array($pt->id, $favoriteIds, true);
                    @endphp

                    <button type="button"
                        class="star-btn fav-btn"
                        data-url="{{ lr('points.favorite', ['token' => $serialToken]) }}"
                        style="line-height:0; background:transparent; border:0; cursor:pointer"
                        aria-label="{{ __('Toggle favorite') }}"
                        title="{{ __('Favorite') }}">

                        {{-- @if((int)($pt->favoris ?? 0) > 0) --}}
                        @if($isFav)
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>
                        @else
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21 12 17.77 5.82 21 7 14.14 2 9.27 8.91 8.26 12 2"/>
                            </svg>
                        @endif
                    </button>
                @endif
            @endauth
        </div>

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


         </div>
        <div class="pv-sheet-title " id="informations" style="
            margin-right: auto;
            font-size: 2em;
            width: 100%;
            text-align: center;
        }
            ">
                <span style="font-size:0.5em;">{{ $pt->serial }}</span>
        </div>
                {{-- @if($pt && $pt->latitude && $pt->longitude)
                    <div class="map-actions" id="waypoint-details" style="margin-top:1rem; text-align:center; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;">
                        <a class="btn small ghost"
                        href="http://maps.apple.com/?daddr={{ $pt->latitude }},{{ $pt->longitude }}"
                        target="_blank" rel="noopener"> {{ __('Apple Maps') }}</a>

                        <a class="btn small ghost"
                        href="https://www.google.com/maps/dir/?api=1&destination={{ $pt->latitude }},{{ $pt->longitude }}"
                        target="_blank" rel="noopener">🌐 {{ __('Google Maps') }}</a>

                        <a class="btn small ghost"
                                id="btn-uber"
                                href="#"
                                title="Uber: {{ $pt->name }} ({{ $pt->latitude }}, {{ $pt->longitude }})"
                                data-lat="{{ $pt->latitude }}"
                                data-lng="{{ $pt->longitude }}"
                                data-name="{{ $pt->name }}"
                                data-address="{{ $fullAddress }}"
                                rel="noopener">🚗 Uber</a>
                    </div>
                @endif --}}
            {{-- @endif --}}
             {{-- =========================================================
                =                        PHOTOS                         =
                ========================================================= --}}
                <div class="" style="padding: 0px 20px;">
                <div class="media-grid" >
                    <div class="panel">
                        {{-- <h4>{{ __('Media') }}</h4> --}}
                        @php
                            $photos         = $pt->photos ?? collect();
                            $mainPhotoPath  = $photos->first()->path ?? null;
                            $mainPhotoUrl   = $mainPhotoPath ? Storage::disk('public')->url($mainPhotoPath) : null;
                        @endphp
                        {{-- <div class="panel"> --}}


                        {{-- GALLERY / PHOTOS --}}
                        @auth
                            @if($photos->isNotEmpty())
                                <section class="photo-carousel photo-carousel-edit">
                                    {{-- Flèche gauche --}}
                                    <button type="button"
                                            class="photo-nav photo-nav-prev"
                                            aria-label="{{ __('Previous photo') }}">
                                        ‹
                                    </button>

                                    <div class="photo-gallery">
                                        <div class="photo-track"
                                            id="point-thumbs"
                                            data-reorder-url="{{ route('points.photos.reorder', ['locale' => $locale, 'point' => $pt->id]) }}">
                                            @foreach($photos as $photo)
                                                @php $thumbUrl = Storage::disk('public')->url($photo->path); @endphp

                                                <div class="photo-card"
                                                    draggable="true"
                                                    data-photo-id="{{ $photo->id }}">
                                                    <button type="button"
                                                            class="thumb-delete"
                                                            data-delete-id="{{ $photo->id }}"
                                                            aria-label="{{ __('Delete this photo') }}">
                                                        ×
                                                    </button>

                                                    <div class="photo-inner" data-full="{{ $thumbUrl }}">
                                                        <img src="{{ $thumbUrl }}"
                                                            alt="Photo {{ $loop->iteration }}">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    {{-- Flèche droite --}}
                                    <button type="button"
                                            class="photo-nav photo-nav-next"
                                            aria-label="{{ __('Next photo') }}">
                                        ›
                                    </button>
                                </section>
                            @endif

                            {{-- Lightbox plein écran --}}
                            <div id="photo-lightbox" class="photo-lightbox" aria-hidden="true">
                                <div class="photo-lightbox-backdrop"></div>
                                <div class="photo-lightbox-content" role="dialog" aria-modal="true">
                                    <button type="button"
                                            class="photo-lightbox-close"
                                            aria-label="{{ __('Close') }}">
                                        ✕
                                    </button>

                                    <button type="button"
                                            class="photo-lightbox-arrow photo-lightbox-prev"
                                            aria-label="{{ __('Previous photo') }}">
                                        ‹
                                    </button>

                                    <img id="photo-lightbox-img" src="" alt="">

                                    <button type="button"
                                            class="photo-lightbox-arrow photo-lightbox-next"
                                            aria-label="{{ __('Next photo') }}">
                                        ›
                                    </button>
                                </div>
                            </div>

                            <div id="add-photo-wrapper" @if($photos->count() >= 4) style="display:none" @endif>
                                <form method="POST"
                                    action="{{ route('points.update.photo', ['locale' => $locale]) }}"
                                    enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <input id="photo-input" name="photo" type="file" accept="image/*" hidden onchange="this.form.submit()">
                                    <input type="hidden" name="serial" value="{{ $pt->serial }}">
                                    <button type="button"
                                            class="btn primary"
                                            style="padding: 2px 18px !important;"
                                            onclick="document.getElementById('photo-input').click()">
                                        {{ $mainPhotoUrl ? __('Add a photo') : __('Photo Import') }}
                                    </button>
                                </form>
                            </div>
                        @endauth
                        {{-- </div> --}}
                    </div>


                    {{-- <div class="panel">
                        {{-- <h4>{{ __('QR Code') }}</h4> --}}
                     {{--    <div class="imgbox">
                            @if($qrUrl)
                                <a href="{{ $qrUrl }}" target="_blank" rel="noopener">
                                    <img src="{{ $qrUrl }}" alt="QR Code" width="256" height="256" loading="lazy" decoding="async"
                                        style="display:block;max-width:100%;height:auto">
                                </a>
                            @else
                                <div class="alert">{{ __('QR code unavailable') }}</div>
                            @endif
                        </div>
                    </div>--}}
                </div>


                {{-- ---------------------------------- Messages flash ---------------------------------- --}}
                @if (session('status'))
                    <div class="alert" style="margin-top:16px">{{ session('status') }}</div>
                @endif
                @if ($errors->any())
                    <div class="alert" style="margin-top:16px">
                        <strong>{{ __('Errors') }} :</strong>
                        <ul style="margin:6px 0 0 16px;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif




                {{-- ---------------------------------- Edit form ---------------------------------- --}}
                <div class="wrap" style="padding: 0">
                    @if($pt && !empty($pt->serial) && $serialToken)
                        <form method="POST" action="{{ route('points.update.serial', ['locale'=>app()->getLocale(), 'serial'=>$serialToken]) }}">
                            @csrf
                            @method('PUT')

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

                            <div id="pin-radios" data-current-pin="{{ $currentPin }}">
                                @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="{{ $pt->pin_icon }}">
                                @endif

                            </div>

                            @php
                                $user = auth()->user();
                                $canEditPrivacy = $user && (
                                    (int)$user->role_id === 1 ||      // Super Admin
                                    (int)$user->role_id === 2 ||      // Admin Pro
                                    (int)$user->id === (int)$p->user_id // Owner
                                );
                            @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="1"
                                            @checked(old('is_visible', $pt->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_public" value="0" >
                                        {{ __('Public point') }}
                                    </label>
                                </div>

                                <input type="hidden" name="is_mobile" value="0"">
                                {{-- <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', $pt->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"
                                            {{ $p->hide_name_owner ? 'checked' : '' }}
                                        >
                                        <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', $pt->name_owner) }}" >
                                </div>

                                <div class="form-field lock-toggle">
                                    <label class="lock-label">
                                        <input
                                            type="checkbox"
                                            name="hide_tel_owner"
                                            value="1"
                                            {{ $p->hide_tel_owner ? 'checked' : '' }}
                                        >
                                        <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', $pt->tel_owner) }}" >
                                 </div>

                                <div class="form-field lock-toggle">
                                    <label class="lock-label">
                                        <input
                                            type="checkbox"
                                            name="hide_name_on_interphone"
                                            value="1"
                                            {{ $p->hide_name_on_interphone ? 'checked' : '' }}
                                        >
                                        <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', $pt->name_on_interphone) }}">
                                </div>


                            </div>


                            <div class="form-field lock-toggle">
                                <label class="lock-label">
                                    <input
                                        type="checkbox"
                                        name="hide_address"
                                        value="1"
                                        {{ $p->hide_address ? 'checked' : '' }}
                                    >
                                    <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="latitude">{{ __('Latitude') }}</label>
                                    <input id="latitude" type="number" step="0.000001" name="latitude" value="{{ old('latitude', $pt->latitude) }}" required>
                                </div>
                                <div class="form-field">
                                    <label for="longitude">{{ __('Longitude') }}</label>
                                    <input id="longitude" type="number" step="0.000001" name="longitude" value="{{ old('longitude', $pt->longitude) }}" required>
                                </div>
                                <div class="form-field">
                                    <label for="altitude">{{ __('Altitude') }} (m)</label>
                                    <input id="altitude" type="number" step="0.1" name="altitude" value="{{ old('altitude', $pt->altitude) }}">
                                </div>
                                <div class="form-field">
                                    <label for="floor">{{ __('Floor') }}</label>
                                    <input id="floor" type="number" step="0.1" name="floor" value="{{ old('floor', $pt->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', $pt->address1) }}">
                                </div>
                                <div class="form-field">
                                    <label for="address2">{{ __('Address2') }}</label>
                                    <input id="address2" type="text" name="address2" value="{{ old('address2', $pt->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', $pt->postcode) }}">
                                </div>
                                <div class="form-field">
                                    <label for="city">{{ __('City') }}</label>
                                    <input id="city" type="text" name="city" value="{{ old('city', $pt->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"
                                                {{ $p->hide_interphone ? 'checked' : '' }}
                                            >
                                            <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', $pt->interphone) }}">
                                    </div>

                                    <div class="form-field lock-toggle">
                                        <label class="lock-label">
                                            <input
                                                type="checkbox"
                                                name="hide_door_code"
                                                value="1"
                                                {{ $p->hide_door_code ? 'checked' : '' }}
                                            >
                                            <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', $pt->door_code) }}">
                                    </div>


                                    <div class="form-field lock-toggle">
                                        <label class="lock-label">
                                            <input
                                                type="checkbox"
                                                name="hide_garage_door_code"
                                                value="1"
                                                {{ $p->hide_garage_door_code ? 'checked' : '' }}
                                            >
                                            <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', $pt->garage_portail_code) }}">
                                    </div>


                                    <div class="form-field lock-toggle">
                                        <label class="lock-label">
                                            <input
                                                type="checkbox"
                                                name="hide_codes"
                                                value="1"
                                                {{ $p->hide_codes ? 'checked' : '' }}
                                            >
                                            <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', $pt->key_box_code) }}">
                                    </div>

                                    <div class="form-field lock-toggle">
                                        <span class="lock-text">{{ __('Password') }}</span>
                                         <input
                                            type="password"
                                            name="password"
                                            style="display: block !important"

                                            placeholder="{{ __('Password') }}"
                                        >
                                    </div>
                                        {{-- value="{{ old('password', $pt->password) }}" --}}
                                </div>


                                <div class="form-field lock-toggle">
                                    <label class="lock-label">
                                        <input
                                            type="checkbox"
                                            name="hide_comment"
                                            value="1"
                                            {{ $p->hide_comment ? 'checked' : '' }}
                                        >
                                        <span class="lock-icon" aria-hidden="true"></span>
                                        <span class="lock-text">{{ __('comment') }}</span>
                                    </label>
                                    <textarea id="comment" name="comment">{{ old('comment', $pt->comment) }}</textarea>
                                </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>

                        @auth
                            <div style="margin-top:1rem;">
                                <form method="POST"
                                    action="{{ route('points.destroy', ['locale' => app()->getLocale(), 'point' => $p->id]) }}"
                                    style="display:inline;"
                                    onsubmit="return confirm('{{ __('Delete this waypoint') }} ?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn danger">
                                        {{ __('Delete') }}
                                    </button>
                                </form>
                            </div>
                        @endauth
                    @endif
                </div>
            </div>

        </div>


        {{-- Liste des partages --}}
    <div class="wrap-nopad" style="padding: 0px 40px;">

        @if(isset($p) && $p->sharings && $p->sharings->isNotEmpty())
            <div class="kv" style="margin-top:16px;">
                <div class="key">{{ __('Owner') }}</div>
                <div class="val">
                    {{ $pt->owner->lastname ?? '' }} {{ $pt->owner->firstname ?? '' }} ({{ $pt->owner->email ?? '' }})
                </div>
            <div class="key">{{ __('Shared with') }}</div>
                <div class="val">
                    <ul style="margin:0;padding-left:0;list-style:none;">
                        @foreach($p->sharings as $share)
                            @php
                                $target = $share->target;
                                $label  = null;

                                if ($target) {
                                    $label = trim(($target->firstname ?? '').' '.($target->lastname ?? ''));
                                    if ($label === '') {
                                        $label = $target->email;
                                    } elseif (!empty($target->email)) {
                                        $label .= ' ('.$target->email.')';
                                    }
                                } elseif (!empty($share->recipient_email)) {
                                    $label = $share->recipient_email;
                                } else {
                                    $label = __('Unknown recipient');
                                }
                            @endphp

                            <li style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;">
                                <span>{{ $label }}</span>

                                <form method="POST"
                                    action="{{ route('points.sharing.destroy', ['locale' => app()->getLocale(), 'point' => $p->id, 'sharing' => $share->id]) }}"
                                    onsubmit="return confirm('{{ __('Do you really want to remove this sharing?') }}');"
                                    style="margin:0;">
                                    @csrf
                                    <button type="submit"
                                            class="btn small danger"
                                            style="padding:0 8px;line-height:1.4;">
                                        {{ __('Remove') }}
                                    </button>
                                </form>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
    </div>


    {{-- LIGHTBOX FULLSCREEN --}}
    <div id="photo-lightbox" class="photo-lightbox" aria-hidden="true">
        <div class="photo-lightbox-backdrop"></div>

        <div class="photo-lightbox-content" role="dialog" aria-modal="true">
            <button type="button" class="photo-lightbox-close" aria-label="{{ __('Close') }}">
                ✕
            </button>

            <button type="button" class="photo-lightbox-arrow photo-lightbox-prev" aria-label="{{ __('Previous photo') }}">
                ‹
            </button>

            <img id="photo-lightbox-img" src="" alt="">

            <button type="button" class="photo-lightbox-arrow photo-lightbox-next" aria-label="{{ __('Next photo') }}">
                ›
            </button>
        </div>
    </div>

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


    <script>
        window.START_POINTS = @json($point);
    </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>


    @push('scripts')
    <script>
    (() => {
        window.CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '';

        /* =====================================================
           MAP (Leaflet) — init unique et sûre
        ===================================================== */
        document.addEventListener('DOMContentLoaded', () => {
            const mapEl = document.getElementById('map');
            // if (!mapEl || typeof L === 'undefined') return;

            const lat = parseFloat(mapEl.dataset.lat);
            const lng = parseFloat(mapEl.dataset.lng);

            if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
                console.error('[map] Invalid coordinates', lat, lng);
                return;
            }

            try {
                const points = @json($mapPoints || []);
                const valid = Array.isArray(points)
                    ? points.filter(p => Number.isFinite(p.latitude) && Number.isFinite(p.longitude))
                    : [];

                const center = valid.length
                    ? [valid[0].latitude, valid[0].longitude]
                    : [46.7, 2.5];

                const map = L.map('map', { scrollWheelZoom: true, zoomControl: false,})
                    .setView(center, valid.length ? 14 : 6);

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

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


                const icon = 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],
                });

                // 5️⃣ Marker
                const marker = L.marker([lat, lng], { icon }).addTo(map);

                // 6️⃣ Zoom EXACT sur le point
                map.setView([lat, lng], 17, {
                    animate: true,
                });

                marker.bindPopup(`<strong>{{ e($pt->name) }}</strong>`).openPopup();
            } catch (e) {
                console.error('[map] init failed', e);
            }
        });

        /* =====================================================
           FAVORITE TOGGLE — corrigé
        ===================================================== */
        document.addEventListener('click', async (e) => {
            const btn = e.target.closest('.fav-btn');
            if (!btn) return;

            const url = btn.dataset.url;
            if (!url) return;

            try {
                const res = await safeFetch(url, {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': window.CSRF,
                    },
                });

                if (!res.ok) throw new Error('HTTP ' + res.status);

                const json = await res.json();
                const filled = `<svg width="22" height="22" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2z"/></svg>`;
                const empty  = `<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8"/></svg>`;

                btn.innerHTML = json.favoris ? filled : empty;
            } catch (err) {
                console.error('[favorite]', err);
                alert('Impossible de mettre à jour le favori.');
            }
        });

    })();
    </script>
    @endpush

    @push('scripts')
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const btn = document.getElementById('more-info-btn');
        if (!btn) return;

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

            const offset = Math.round(window.innerHeight / 2);

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

@endsection