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

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

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

@endphp

{{-- @section('bottom') --}}
    @include('partials.bottom_nav', [
        'bottomTabs' => [
            [
                'icon'   => "map_picto.svg",
                'label'  => __('Map'),
                'href'   => lr('startmap'),   // ouvre le tiroir "maps"
            ],
            [
                'icon'     => "addV_picto.svg",
                'label'    => __('Create a waypoint'),
                'href'    => lr('map'),
                'primary'  => true,
            ],
            [
                'icon'    => "myV_picto.svg",
                'label'   => __('My waypoints'),
                'href'    => lr('search'),
                'primary' => false,
            ],
        ],
    ])
{{-- @endsection --}}

{{-- Tiroir de tri --}}
<div class="nav-drawer" data-nav-drawer="sort" id="sort-drawer">
    <div class="nav-drawer-header">
        <span class="nav-drawer-title">{{ __('Sort') }}</span>
        <button type="button" class="nav-drawer-close" data-drawer-close>✕</button>
    </div>
    <div class="nav-drawer-body" style="flex-direction: column; align-items: stretch; gap: 12px; padding: 16px;">
        @php $currentSort = $currentSort ?? 'alpha'; @endphp
        <label class="sort-radio-option">
            <input type="radio" name="sort" value="newest" class="sort-option" data-sort="newest" {{ $currentSort === 'newest' ? 'checked' : '' }}>
            <span>{{ __('Most recent') }}</span>
        </label>
        <label class="sort-radio-option">
            <input type="radio" name="sort" value="oldest" class="sort-option" data-sort="oldest" {{ $currentSort === 'oldest' ? 'checked' : '' }}>
            <span>{{ __('Oldest') }}</span>
        </label>
        <label class="sort-radio-option">
            <input type="radio" name="sort" value="nearest" class="sort-option" data-sort="nearest" {{ $currentSort === 'nearest' ? 'checked' : '' }}>
            <span>{{ __('Nearest') }}</span>
        </label>
        <label class="sort-radio-option">
            <input type="radio" name="sort" value="farthest" class="sort-option" data-sort="farthest" {{ $currentSort === 'farthest' ? 'checked' : '' }}>
            <span>{{ __('Farthest') }}</span>
        </label>
        <label class="sort-radio-option">
            <input type="radio" name="sort" value="alpha" class="sort-option" data-sort="alpha" {{ $currentSort === 'alpha' ? 'checked' : '' }}>
            <span>{{ __('Alphabetical order') }}</span>
        </label>
    </div>
</div>

{{-- Tiroir de filtre --}}
<div class="nav-drawer" data-nav-drawer="filter" id="filter-drawer">
    <div class="nav-drawer-header">
        <span class="nav-drawer-title">{{ __('Filter') }}</span>
        <button type="button" class="nav-drawer-close" data-drawer-close>✕</button>
    </div>
    <div class="nav-drawer-body" style="flex-direction: column; align-items: stretch; gap: 12px; padding: 16px;">
        @php $currentFilter = $currentFilter ?? 'all'; @endphp
        <label class="filter-radio-option">
            <input type="radio" name="filter" value="all" class="filter-option" data-filter="all" {{ $currentFilter === 'all' ? 'checked' : '' }}>
            <span>{{ __('All points') }}</span>
        </label>
        <label class="filter-radio-option">
            <input type="radio" name="filter" value="mine" class="filter-option" data-filter="mine" {{ $currentFilter === 'mine' ? 'checked' : '' }}>
            <span>{{ __('My waypoints') }}</span>
        </label>
        <label class="filter-radio-option">
            <input type="radio" name="filter" value="shared" class="filter-option" data-filter="shared" {{ $currentFilter === 'shared' ? 'checked' : '' }}>
            <span>{{ __('Shared points') }}</span>
        </label>
        <label class="filter-radio-option">
            <input type="radio" name="filter" value="public" class="filter-option" data-filter="public" {{ $currentFilter === 'public' ? 'checked' : '' }}>
            <span>{{ __('Public points') }}</span>
        </label>
    </div>
</div>

<style>

</style>

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

@section('content')

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



<div class="wrap">

    <form id="search-form" method="GET" action="{{ lr('search') }}" class="filters" style="padding: 2%;">

        <div class="form-grid">
            <div class="form-field search-field-wrapper">
                <input id="search-input" type="text" name="q" value="{{ $q ?? '' }}" placeholder="{{ __('Search') }} VereeGo ({{ __('Name') }}, {{ __('City') }}…)" />
                <button type="button" id="search-clear" class="search-clear-btn" aria-label="{{ __('Clear search') }}">✕</button>
            </div>

            <div class="form-grid">
                @php
                    $sortLabels = [
                        'newest' => __('Most recent'),
                        'oldest' => __('Oldest'),
                        'nearest' => __('Nearest'),
                        'farthest' => __('Farthest'),
                        'alpha' => __('Alphabetical order'),
                    ];
                    $currentSortLabel = $sortLabels[$currentSort ?? 'alpha'] ?? $sortLabels['alpha'];

                    $filterLabels = [
                        'all' => __('All points'),
                        'mine' => __('My waypoints'),
                        'shared' => __('Shared points'),
                        'public' => __('Public points'),
                    ];
                    $currentFilterLabel = $filterLabels[$currentFilter ?? 'all'] ?? $filterLabels['all'];
                @endphp
                <div class="form-field" style="flex-direction: initial;">
                    <button type="button" id="btn-filter" class="btn small ghost" data-open-drawer="filter" style="height: 50px; width: 50%">{{ $currentFilterLabel }}</button>
                    <button type="button" id="btn-sort" class="btn small ghost" data-open-drawer="sort" style="height: 50px; width: 50%">{{ __('Sort') }} - {{ $currentSortLabel }}</button>
                </div>
            </div>

            {{-- Nouvelle ligne : filtres de visibilité --}}
            {{-- <div class="form-field" style="grid-column: 1 / -1; display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:4px;"> --}}
            {{-- <div class="form-field" style="align-items:center; ">
                <span style="font-size:.9em; color:#6b7280;">{{ __('Filters') }} :</span>

                <label style="display:flex; align-items:center; gap:4px; font-size:.85em;">
                    <input type="checkbox" id="filter-public" checked>
                    {{ __('Public points') }}
                </label>

                <label style="display:flex; align-items:center; gap:4px; font-size:.85em;">
                    <input type="checkbox" id="filter-shared" checked>
                    {{ __('Shared points') }}
                </label>

                <label style="display:flex; align-items:center; gap:4px; font-size:.85em;">
                    <input type="checkbox" id="filter-hidden" checked>
                    {{ __('Hidden points') }}
                </label>
            </div> --}}

            {{-- <div class="form-field" style="flex-direction: initial;">
                <a style="margin:6px 0 0; width: 100%;" class="btn small primary" href="{{ lr('map') }}">➕ {{ __('New waypoint') }}</a>
            </div> --}}

        </div>
    </form>

    {{-- <div id="map"></div> --}}


    @if(session('ok'))
        <div class="ok">{{ session('ok') }}</div>
    @endif

    <ul id="points-list" class="points" style="display:grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap:12px; list-style:none; padding:0;"
        data-has-more="{{ $points->hasMorePages() ? '1' : '0' }}"
        data-next-page="{{ $points->currentPage() + 1 }}">
        @forelse($points as $p)
            @include('points._point_item', ['p' => $p, 'user' => $user, 'countryNames' => $countryNames])
        @empty
            <li>{{ __('No waypoint found') }}</li>
        @endforelse
    </ul>

    @if($points->hasMorePages())
        <div id="load-more-container" style="margin-top:1rem; text-align:center;">
            <div id="load-more-spinner" style="display:none; padding: 20px;">
                <span style="color: #6b7280;">{{ __('Loading...') }}</span>
            </div>
            <div id="scroll-sentinel" style="height: 1px;"></div>
        </div>
    @endif
</div>

@php
    // If $points is a paginator, keep only the items.
    if ($points instanceof \Illuminate\Pagination\AbstractPaginator) {
        $pointsArray = $points->items(); // plain PHP array
    } else {
        // Collection or array -> force a zero-indexed array
        $pointsArray = is_iterable($points) ? collect($points)->values()->all() : [];
    }

@endphp

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

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

<script>

    (function () {
        function norm(s) {
            return (s ?? "")
            .toString()
            .toLowerCase()
            .normalize("NFD")
            .replace(/[\u0300-\u036f]/g, "") // enlève les accents
            .trim();
        }

        function bootSearch() {
            const input = document.getElementById("search-input");
            const list  = document.getElementById("points-list");
            if (!input || !list) return;
            const clearBtn = document.getElementById("search-clear");

            function updateClearButton() {
                if (clearBtn) {
                    clearBtn.classList.toggle('visible', input.value.length > 0);
                }
            }

            // Clear button click
            clearBtn?.addEventListener("click", () => {
                input.value = "";
                input.focus();
                applyFilter();
            });

            function applyFilter() {
                const q = norm(input.value);
                // Récupérer tous les éléments à chaque fois (pour le scroll infini)
                const currentItems = Array.from(list.querySelectorAll("li[data-id]"));

                for (const li of currentItems) {
                    const name          = norm(li.dataset.name);
                    const city          = norm(li.dataset.city);
                    const country       = norm(li.dataset.country);
                    const searchData    = norm(li.dataset.search);

                    const haystack = `${name} ${city} ${country} ${searchData}`;
                    const ok = q === "" || haystack.includes(q);

                    li.style.display = ok ? "" : "none";
                }
                updateClearButton();
            }

            // live search
            input.addEventListener("input", applyFilter);

            // premier rendu (si q est déjà dans l’URL)
            applyFilter();
        }

        // si le script est chargé avant le DOM
        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", bootSearch);
        } else {
            bootSearch();
        }
    })();

    /* =====================================================
       TRI DES POINTS (côté serveur)
    ===================================================== */
    (function() {
        // Recharger la page avec le paramètre de tri
        function reloadWithSort(sortType, lat = null, lng = null) {
            const url = new URL(window.location.href);
            url.searchParams.set('sort', sortType);
            url.searchParams.delete('page'); // Revenir à la première page après tri

            if (lat !== null && lng !== null) {
                url.searchParams.set('lat', lat);
                url.searchParams.set('lng', lng);
            } else {
                url.searchParams.delete('lat');
                url.searchParams.delete('lng');
            }

            window.location.href = url.toString();
        }

        // Demander la géolocalisation et trier ensuite
        function requestGeolocationAndSort(sortType, radioInput) {
            if (!navigator.geolocation) {
                alert('{{ __("Geolocation is not supported by your browser") }}');
                // Remettre la sélection précédente
                const currentSort = '{{ $currentSort ?? "alpha" }}';
                document.querySelector(`.sort-option[data-sort="${currentSort}"]`).checked = true;
                return;
            }

            // Afficher un indicateur de chargement
            const label = radioInput?.closest('.sort-radio-option')?.querySelector('span');
            const originalText = label?.textContent;
            if (label) label.textContent = '{{ __("Locating...") }}';

            navigator.geolocation.getCurrentPosition(
                (pos) => {
                    reloadWithSort(sortType, pos.coords.latitude, pos.coords.longitude);
                },
                (err) => {
                    console.warn('[sort] Geolocation error:', err.message);
                    if (label) label.textContent = originalText;

                    // Remettre la sélection précédente
                    const currentSort = '{{ $currentSort ?? "alpha" }}';
                    document.querySelector(`.sort-option[data-sort="${currentSort}"]`).checked = true;

                    let message = '{{ __("Unable to determine your position") }}';
                    if (err.code === err.PERMISSION_DENIED) {
                        message = '{{ __("Please allow geolocation access to sort by distance") }}';
                    }
                    alert(message);
                },
                {
                    enableHighAccuracy: false,
                    timeout: 10000,
                    maximumAge: 300000 // Cache 5 minutes
                }
            );
        }

        // Gestion du changement sur les boutons radio de tri
        document.addEventListener('change', (e) => {
            const radio = e.target.closest('.sort-option[data-sort]');
            if (!radio) return;

            const sortType = radio.dataset.sort;

            // Pour le tri par distance, demander la géolocalisation
            if (sortType === 'nearest' || sortType === 'farthest') {
                requestGeolocationAndSort(sortType, radio);
            } else {
                // Tri sans géolocalisation
                reloadWithSort(sortType);
            }
        });
    })();

    /* =====================================================
       FILTRE DES POINTS (côté serveur)
    ===================================================== */
    (function() {
        // Recharger la page avec le paramètre de filtre
        function reloadWithFilter(filterType) {
            const url = new URL(window.location.href);
            url.searchParams.set('filter', filterType);
            url.searchParams.delete('page'); // Revenir à la première page après filtre
            window.location.href = url.toString();
        }

        // Gestion du changement sur les boutons radio de filtre
        document.addEventListener('change', (e) => {
            const radio = e.target.closest('.filter-option[data-filter]');
            if (!radio) return;

            const filterType = radio.dataset.filter;
            reloadWithFilter(filterType);
        });
    })();

    /* =====================================================
       SCROLL INFINI
    ===================================================== */
    (function() {
        const list = document.getElementById('points-list');
        const sentinel = document.getElementById('scroll-sentinel');
        const spinner = document.getElementById('load-more-spinner');
        const container = document.getElementById('load-more-container');

        if (!list || !sentinel) return;

        let isLoading = false;
        let hasMore = list.dataset.hasMore === '1';
        let nextPage = parseInt(list.dataset.nextPage, 10);

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && hasMore && !isLoading) {
                    loadMorePoints();
                }
            });
        }, {
            rootMargin: '200px'
        });

        observer.observe(sentinel);

        async function loadMorePoints() {
            isLoading = true;
            if (spinner) spinner.style.display = 'block';

            const url = new URL(window.location.href);
            url.searchParams.set('page', nextPage);
            url.searchParams.set('ajax', '1');

            try {
                const response = await fetch(url.toString(), {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) throw new Error('Network response was not ok');

                const data = await response.json();

                // Ajouter les nouveaux points
                list.insertAdjacentHTML('beforeend', data.html);

                // Mettre à jour l'état
                hasMore = data.hasMore;
                nextPage = data.nextPage;
                list.dataset.hasMore = hasMore ? '1' : '0';
                list.dataset.nextPage = nextPage;

                // Masquer le container si plus de pages
                if (!hasMore && container) {
                    container.style.display = 'none';
                }

                // Réappliquer le filtre de recherche aux nouveaux éléments
                const searchInput = document.getElementById('search-input');
                if (searchInput && searchInput.value.trim()) {
                    searchInput.dispatchEvent(new Event('input'));
                }

            } catch (error) {
                console.error('[infinite-scroll] Error loading more points:', error);
            } finally {
                isLoading = false;
                if (spinner) spinner.style.display = 'none';
            }
        }
    })();

    document.addEventListener('click', (e) => {
        const btn = e.target.closest('[data-map-action]');
        if (!btn) return;

        const p = window.ACTIVE_POINT;
        if (!p || !Number.isFinite(p.lat) || !Number.isFinite(p.lng)) {
            alert('Coordonnées manquantes pour ce point.');
            return;
        }

        const lat = p.lat;
        const lng = p.lng;
        const name = encodeURIComponent(p.name || '');
        let url = null;

        switch (btn.dataset.mapAction) {
            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}&dropoff[nickname]=${name}`;
                break;
        }

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

    /* =====================================================
       ACTIVE POINT (Join + Sharing)
    ===================================================== */
    document.addEventListener('click', (e) => {
        const el = e.target.closest('[data-point]');
        if (!el) return;

        window.ACTIVE_POINT = {
            token: el.dataset.token || null,
            name: el.dataset.name || '',
            lat:  el.dataset.lat ? parseFloat(el.dataset.lat) : null,
            lng:  el.dataset.lng ? parseFloat(el.dataset.lng) : null,
        };

        console.log('[search] ACTIVE_POINT', window.ACTIVE_POINT);
    });

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

    //     const p = window.ACTIVE_POINT;
    //     if (!p || !p.token) return;

    //     const form = document.getElementById('share-form');
    //     const tokenInp = document.getElementById('share-point-token');
    //     const nameEl = document.getElementById('share-point-name');

    //     if (tokenInp) tokenInp.value = p.token;
    //     if (nameEl) nameEl.textContent = '— ' + p.name;

    //     if (form?.dataset.actionTemplate) {
    //         form.dataset.action =
    //             form.dataset.actionTemplate.replace('__TOKEN__', p.token);
    //     }

    //     console.log('[share] ready for token', p.token);
    // });



</script>

@push('scripts')
    <script>
        // Intercepter le clic AVANT bottom_nav (capture phase = true)
        document.addEventListener('click', async (e) => {
            const btn = e.target.closest('.js-share-btn');
            if (!btn) return;

            const isMobile =
                navigator.share &&
                window.matchMedia('(pointer: coarse)').matches;

            // 📱 MOBILE → partage natif (bloquer la propagation vers bottom_nav)
            if (isMobile) {
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();

                const shareData = {
                    title: btn.dataset.shareTitle,
                    text: btn.dataset.shareText,
                    url: btn.dataset.shareUrl,
                };

                try {
                    await navigator.share(shareData);
                    console.log('[share] native mobile share');
                    showShareToast('{{ __("Shared successfully") }}', 'success');
                } catch (err) {
                    if (err.name !== 'AbortError') {
                        console.warn('[share] error', err);
                        showShareToast('{{ __("Unable to share") }}', 'error');
                    }
                }
                return;
            }

            // 🖥 DESKTOP → drawer email (ancien comportement)
            e.preventDefault();
            e.stopPropagation();

            const drawer = document.querySelector('[data-nav-drawer="share"]');
            const backdrop = document.querySelector('[data-nav-backdrop]');
            const tokenInp = document.getElementById('share-point-token');
            const nameEl   = document.getElementById('share-point-name');

            if (tokenInp) tokenInp.value = btn.dataset.token;
            if (nameEl) nameEl.textContent = '— ' + (btn.dataset.name || '');

            drawer?.classList.add('is-open');
            backdrop?.classList.add('is-open');
            document.body.style.overflow = 'hidden';
        }, true); // ← true = capture phase (s'exécute AVANT les autres listeners)

        // Toast notification pour le partage
        function showShareToast(message, type = 'success') {
            // Supprimer un toast existant
            const existingToast = document.getElementById('share-toast');
            if (existingToast) existingToast.remove();

            const toast = document.createElement('div');
            toast.id = 'share-toast';
            toast.textContent = message;
            toast.style.cssText = `
                position: fixed;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                padding: 12px 24px;
                border-radius: 8px;
                color: white;
                font-weight: 500;
                z-index: 10000;
                animation: fadeInUp 0.3s ease;
                background: ${type === 'success' ? '#15803d' : '#b91c1c'};
            `;

            document.body.appendChild(toast);

            // Disparition après 2.5 secondes
            setTimeout(() => {
                toast.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => toast.remove(), 300);
            }, 2500);
        }

        // Ajouter les keyframes si pas déjà présents
        if (!document.getElementById('share-toast-styles')) {
            const style = document.createElement('style');
            style.id = 'share-toast-styles';
            style.textContent = `
                @keyframes fadeInUp {
                    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
                    to { opacity: 1; transform: translateX(-50%) translateY(0); }
                }
                @keyframes fadeOut {
                    from { opacity: 1; }
                    to { opacity: 0; }
                }
            `;
            document.head.appendChild(style);
        }
    </script>
@endpush


@endsection