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

@section('title', __('Itinerary map'))

@section('content')
@php
    // Sécurité d'affichage
    $it = $itinerary;

    if (!isset($selectedUserId)) {
        // Par défaut: managers => "all", sinon l'utilisateur connecté
        $selectedUserId = (!empty($isManager) && $isManager)
            ? 'all'
            : (auth()->check() ? (int)auth()->id() : 'all');
    }

 
@endphp



<style>
    .toast {
        position: fixed; right: 16px; bottom: 16px;
        padding: 10px 12px; border-radius: 10px;
        background: rgba(0,0,0,.85); color:#fff; z-index: 9999;
        box-shadow: 0 10px 25px rgba(0,0,0,.2);
        opacity: 0; transform: translateY(10px); transition: .25s ease;
    }
    .toast.show { opacity:1; transform: translateY(0); }
    .btn[disabled] { opacity:.6; cursor:not-allowed; }
    tr.is-done { opacity:.6; }
</style>

<div class="wrap">



    <h2 style="margin:0 0 4px;">
        <a class="back" href="{{ url()->previous() }}">{{ __('Back') }}</a> {{ __('Itinerary') }}
        <span class="muted"><b>{{ $it->name }} </b>#{{ $it->id }} 🍑</span>
    </h2>


    {{-- Carte --}}
    <div id="map" style="width:100%; height:420px; border:1px solid #1f2430; border-radius:10px; margin-bottom:14px;"></div>

    {{-- Buttons to export route --}}
    <div class="actions" style="display:flex; gap:.5rem; margin:10px 0;">
        <button id="btn-apple" class="btn small ghost"> Apple Maps</button>
        <button id="btn-google" class="btn small ghost">🌐 Google Maps</button>

        {{-- <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>



    {{-- Flash fallback (si POST classique) --}}
    @if(session('ok'))
        <div class="alert success">{{ session('ok') }}</div>
    @endif
    @if(session('error'))
        <div class="alert danger">{{ session('error') }}</div>
    @endif

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

    @php
        $currentLocale = $locale ?? app()->getLocale();
    @endphp

    {{-- Filtre société (uniquement super admin). Tu peux déplacer ça ailleurs si besoin --}}
    @if($isSuper && isset($societyOptions) && count($societyOptions))
        <form method="GET" action="">
            <label>{{ __('Company filter') }}</label>
            <select name="society_id" onchange="this.form.submit()">
                <option value="">{{ __('All companies') }}</option>
                @foreach($societyOptions as $soc)
                    <option value="{{ $soc->id }}" @if(($selectedSocietyId ?? null) == $soc->id) selected @endif>
                        {{ $soc->name }}
                    </option>
                @endforeach
            </select>
        </form>
    @endif

    {{-- Sélecteur d’utilisateur (uniquement pour admin/super/admin pro) --}}
    @if($isManager)
        <form id="filterUserForm" method="GET" action="{{ url()->current() }}" style="margin-bottom:12px;">
            <label for="target_user">{{ __('View / edit for') }}</label>
            <select id="target_user" name="target_user" onchange="document.getElementById('filterUserForm').submit()">
            <option value="all" {{ $selectedUserId==='all' ? 'selected' : '' }}>{{ __('All users') }}</option>
                @foreach($assignedUsers as $u)
                    @php
                        $uid = (int)$u->id;
                        $label = trim(($u->firstname ?? '').' '.($u->lastname ?? '')) ?: "#$uid";
                    @endphp
                    <option value="{{ $uid }}" {{ (is_int($selectedUserId) && $selectedUserId===$uid) ? 'selected' : '' }}>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
        </form>
    @else
        <input type="hidden" form="saveProgressForm" name="target_user" value="{{ $selectedUserId }}">
    @endif

    <form id="progress-form" method="POST" action="{{ $saveProgressUrl }}">
        @csrf

            {{-- le contrôleur saveProgress a BESOIN de savoir quel user mettre à jour --}}
        <input type="hidden" name="target_user"
            value="{{ $selectedUserId === 'all' ? 'all' : $selectedUserId }}">
       
        <table class="table">
            <thead>
                <tr>
                    {{-- <th>{{ __('Done') }}</th> --}}
                    <th>{{ __('Waypoint') }}</th>
                    <th>{{ __('planned_at') }}</th>
                    {{-- <th>{{ __('validated_at') }}</th> --}}
                    <th>{{ __('rescheduled_at') }}</th>
                    <th>{{ __('arrival_at') }}</th>
                    <th>{{ __('Comment') }}</th>
                </tr>
            </thead>
            <tbody>
            @forelse($rows as $r)
                @php
                    $rowDone = !empty($r['done']);
                @endphp
                <tr style="{{ $rowDone ? 'opacity:.6;' : '' }}">
                    <td>
                        <div>

                            <a class="btn small"
                                href="{{ route('points.public.readonly', ['locale'=>app()->getLocale(), 'token'=>$r['token']]) }}">
                                <img src="{{ $r['pin_url'] }}" alt="pin" width="28" height="28">
                            </a>
 
                            <strong>{{ $r['name'] ?? ('#'.$r['point_id']) }}</strong><br>
                            <small>{{ $r['address'] ?? '' }}</small>
                        </div>
                    </td>

                    <td>
                        <input type="datetime-local"
                            name="items[{{ $r['itinerary_point_id'] }}][planned_at]"
                            value="{{ $r['planned_at'] }}"
                            @if(!$isManager) readonly @endif
                            {{-- @if(!$isManager) readonly @endif --}}
                        >
                    </td>

                    <td>
                        <input type="datetime-local"
                            name="items[{{ $r['itinerary_point_id'] }}][rescheduled_at]"
                            value="{{ $r['rescheduled_at'] ?? '' }}"
                            @if($r['readonly_usercols'] || $rowDone) readonly @endif
                            
                        >
                    </td>

                    <td>
                        <input type="datetime-local"
                            name="items[{{ $r['itinerary_point_id'] }}][arrival_at]"
                            value="{{ $r['arrival_at'] ?? '' }}"
                            @if($r['readonly_usercols'] || $rowDone) readonly @endif
                            @if($isManager) disabled @endif
                        >
                    </td>

                    <td>
                       
                        <input type="text"
                            name="items[{{ $r['itinerary_point_id'] }}][comment]"
                            value="{{ $r['comment'] ?? '' }}"
                            @if($rowDone) readonly @endif
                        >
                    </td>
                </tr>
            @empty
                <tr><td colspan="5">{{ __('No waypoint in this itinerary') }}</td></tr>
            @endforelse
            </tbody>
        </table>

        <div style="margin-top:1rem;">
            <button id="btn-save" class="btn primary" type="submit">{{ __('Save progress') }}</button>
        </div>
    </form>
</div>

  
        {{-- Bouton valider l’itinéraire --}}
        @php
            $isPro = request()->routeIs('pro.*');
            $validateUrl = $isPro
                ? route('pro.itins.validate', ['locale'=>app()->getLocale(), 'itinerary'=>$itinerary->id])
                : route('admin.itins.validate', ['locale'=>app()->getLocale(), 'itinerary'=>$itinerary->id]);
        @endphp


        {{-- <form method="POST"
                action="{{ $validateUrl }}')">
            @csrf
            <button class="btn success" type="submit">
                {{ __('Validate itinerary') }}
            </button>
        </form> --}}

       </div>

    {{-- Leaflet + Routing Machine --}}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css"/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" defer></script>
    <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.min.js" defer></script>

    <script>
        (() => {
            const form  = document.getElementById('progress-form');
            const btn   = document.getElementById('btn-save');
            const toast = document.getElementById('toast');
            const csrf  = document.querySelector('meta[name="csrf-token"]')?.content || '';
            const points = @json($mapPoints ?? []);

            // Show a toast message (auto-hide)
            function showToast(msg) {
                if (!toast) return;
                toast.textContent = msg || 'OK';
                toast.classList.add('show');
                setTimeout(() => toast.classList.remove('show'), 2500);
            }

            // Mark a row visually done/undone
            function toggleRowDone(itpId, done) {
                const tr = document.querySelector(`tr[data-itp-id="${itpId}"]`);
                if (tr) tr.classList.toggle('is-done', !!done);
            }

            // Attach confirm-on-arrival to arrival inputs (users + managers)
            function hookArrivalConfirm() {
                // Use event delegation to survive dynamic rows
                form?.addEventListener('change', (e) => {
                const t = e.target;
                if (!(t instanceof HTMLInputElement)) return;
                // match items[<id>][arrival_at]
                const m = t.name?.match(/^items\[(\d+)\]\[arrival_at\]$/);
                if (!m) return;

                const itpId = m[1];
                const val = (t.value || '').trim();
                if (!val) return; // cleared

                // Ask confirmation
                const yes = window.confirm("Valider ce waypoint ? (Done = TRUE)");
                if (yes) {
                    // Add/ensure hidden done=1 input
                    let hiddenDone = form.querySelector(`input[name="items[${itpId}][done]"]`);
                    if (!hiddenDone) {
                        hiddenDone = document.createElement('input');
                        hiddenDone.type = 'hidden';
                        hiddenDone.name = `items[${itpId}][done]`;
                        form.appendChild(hiddenDone);
                    }
                    hiddenDone.value = '1';
                    toggleRowDone(itpId, true);

                    // Optionally lock row inputs except planned_at if manager wanted otherwise
                    const row = document.querySelector(`tr[data-itp-id="${itpId}"]`);
                    if (row) {
                        row.querySelectorAll('input,textarea,select').forEach(el => {
                            // Keep it simple: lock everything except hidden inputs
                            if (el instanceof HTMLInputElement && el.type === 'hidden') return;
                            el.readOnly = true;
                        });
                    }
                } else {
                    t.value = '';
                    const hiddenDone = form.querySelector(`input[name="items[${itpId}][done]"]`);
                    if (hiddenDone) hiddenDone.remove();
                    toggleRowDone(itpId, false);
                }
                });
            }

            // Detect JSON vs HTML response
            function isJsonResponse(resp) {
                const ct = resp.headers.get('content-type') || '';
                return ct.includes('application/json');
            }

            // Safely post the form with FormData
            async function postProgress(fd) {
                // NOTE: do not set Content-Type with FormData (browser sets proper boundary)
                const resp = await safeFetch(form.action, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    ...(csrf ? { 'X-CSRF-TOKEN': csrf } : {})
                },
                body: fd,
                credentials: 'same-origin',
                redirect: 'follow'
                });

                // If the server redirected to login or returned HTML, treat it as session issue
                if (!isJsonResponse(resp)) {
                    // Try to detect a login page by URL change or by HTML content
                    if (resp.redirected) {
                        showToast('Session expirée — veuillez vous reconnecter');
                        // Optional hard redirect:
                        window.location.href = resp.url;
                        return { ok: false };
                    }
                    const text = await resp.text().catch(()=>'');
                    if (text.includes('<html')) {
                        showToast('Session expirée — veuillez vous reconnecter');
                        return { ok: false };
                    }
                    // Fallback generic
                    return { ok: false, error: 'Réponse invalide' };
                }

                // JSON response path
                const data = await resp.json();
                if (!resp.ok) {
                    // Ex: { error: '...' }
                    return { ok: false, error: (data && (data.error || data.message)) || `HTTP ${resp.status}` };
                }
                return data;
            }

            if (form) {
                hookArrivalConfirm();

                form.addEventListener('submit', async (ev) => {
                    ev.preventDefault();
                    const fd = new FormData(form);

                    // Optional: include current target_user select value explicitly
                    const sel = form.querySelector('select[name="target_user"]');
                    if (sel && !fd.has('target_user')) {
                        fd.append('target_user', sel.value || 'all');
                    }

                    if (btn) btn.disabled = true;
                    try {
                        const res = await postProgress(fd);
                        if (res && res.ok) {
                            showToast(res.message || 'Progression enregistrée');
                        } else {
                            showToast((res && res.error) || 'Erreur de sauvegarde');
                        }
                    } catch (e) {
                        console.error(e); // Dev aid
                        showToast('Réseau indisponible');
                    } finally {
                        if (btn) btn.disabled = false;
                    }
                });
            }
        })();
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {

            const points   = @json($points ?? []);
            const SHADOW   = @json(asset('assets/images/shadow_pin.png'));
            const PIN_BASE = @json(asset('assets/pins'));

            console.log(points);

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


            const items = {!! $itinerary->items
                ->map(function($it){
                    return [
                        'name'      => $it->point->name,
                        'latitude'  => (float) $it->point->latitude,
                        'longitude' => (float) $it->point->longitude,
                        'city'      => $it->point->city,
                        'order'     => (int) $it->sort_order,
                    ];
                })
                ->values()
                ->toJson(JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) !!};

            if (!items.length) return;

            // --- Leaflet base map ---
            const map = L.map('map').setView([items[0].latitude, items[0].longitude], 12);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19, attribution: '&copy; OpenStreetMap'
            }).addTo(map);

            // Place markers with popup order
            const wpts = items.map(p => L.latLng(p.latitude, p.longitude));
            {{-- items.forEach(p => L.marker([p.latitude, p.longitude]).addTo(map)
                .bindPopup(`<b>${p.order}. ${p.name}</b>${p.city ? '<br>'+p.city : ''}`)); --}}

            const bounds = L.latLngBounds([]);

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

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

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




            // --- Routing control (OSRM public) ---
            // Some hosts need explicit serviceUrl. If OSRM fails, we fallback to a straight polyline.
            let routingOk = false;
            const ctrl = L.Routing.control({
                waypoints: wpts,
                router: L.Routing.osrmv1({
                    // You can replace by your own OSRM or Mapbox router if needed
                    serviceUrl: 'https://router.project-osrm.org/route/v1',
                    timeout: 10 * 1000,
                    profile: 'driving'
                }),
                show: false,
                addWaypoints: false,
                routeWhileDragging: false,
                draggableWaypoints: false,
                fitSelectedRoutes: true,

                createMarker: () => null
            })
            .on('routesfound', () => { routingOk = true; })
            .on('routingerror', () => {
                // fallback: straight polyline between points (not road-matched)
                drawFallbackPolyline();
            })
            .addTo(map);

            // Fallback polyline if routing service is unavailable
            function drawFallbackPolyline() {
                if (!wpts || wpts.length < 2) return;
                const latlngs = wpts.map(ll => [ll.latitude, ll.longitude]);
                L.polyline(latlngs, { weight: 4, opacity: 0.9 }).addTo(map);
                map.fitBounds(L.latLngBounds(latlngs).pad(0.2));
            }

            // --- Export buttons: Apple Maps & Google Maps ---
            const btnApple = document.getElementById('btn-apple');
            const btnGoogle = document.getElementById('btn-google');

            // Build Apple Maps URL:
            // origin -> daddr chain with "to:" steps, ex:
            // http://maps.apple.com/?saddr=lat0,lng0&daddr=lat1,lng1 to:lat2,lng2 to:latN,lngN
            function buildAppleMapsUrl(points) {
                const origin = points[0];
                const dests  = points.slice(1).map(p => `${p.latitude},${p.longitude}`);
                const daddr  = dests.length ? dests.join(' to:') : `${origin.latitude},${origin.longitude}`;
                const url = new URL('http://maps.apple.com/');
                url.searchParams.set('saddr', `${origin.latitude},${origin.longitude}`);
                url.searchParams.set('daddr', daddr);
                // Optional flags: dirflg=d (driving), w (walking), r (public transit) – not always honored on desktop
                url.searchParams.set('dirflg', 'd');
                return url.toString();
            }

            // Build Google Maps URL:
            // https://www.google.com/maps/dir/?api=1&origin=lat0,lng0&destination=latN,lngN&waypoints=lat1,lng1|lat2,lng2
            function buildGoogleMapsUrl(points) {
                const origin = points[0];
                const dest   = points[points.length - 1];
                const waypoints = points.slice(1, -1).map(p => `${p.latitude},${p.longitude}`).join('|');
                const url = new URL('https://www.google.com/maps/dir/');
                url.searchParams.set('api', '1');
                url.searchParams.set('travelmode', 'driving');
                url.searchParams.set('origin', `${origin.latitude},${origin.longitude}`);
                url.searchParams.set('destination', `${dest.latitude},${dest.longitude}`);
                if (waypoints) url.searchParams.set('waypoints', waypoints);
                return url.toString();
            }

            btnApple?.addEventListener('click', () => {
                if (wpts.length < 1) return;
                // use original items for exact lat/lng
                const url = buildAppleMapsUrl(items);
                window.open(url, '_blank', 'noopener');
            });

            btnGoogle?.addEventListener('click', () => {
                if (wpts.length < 1) return;
                const url = buildGoogleMapsUrl(items);
                window.open(url, '_blank', 'noopener');
            });

            // If OSRM times out (no routesfound), fallback after 12s anyway
            setTimeout(() => { if (!routingOk) drawFallbackPolyline(); }, 12000);
        });


        document.addEventListener('change', (e) => {
            // règle métier : quand l'utilisateur remplit arrival_at,
            // on peut lui demander confirmation et cocher done.
            if (e.target.matches('input[type="datetime-local"][name^="items"][name$="[arrival_at]"]')) {
                const arrivalInput = e.target;
                const rowPrefix = arrivalInput.name.replace(/\[arrival_at\]$/, '');
                const doneSelector = rowPrefix + '[done]';

                if (arrivalInput.value) {
                    const ok = confirm("Valider ce waypoint ?");
                    if (ok) {
                        // coche done
                        const doneBox = document.querySelector(`input[type="checkbox"][name="${doneSelector}"]`);
                        if (doneBox) doneBox.checked = true;
                    } else {
                        // efface la date si pas validé
                        arrivalInput.value = '';
                    }
                }
            }
        });


    </script>

@endsection