@push('script')
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/js/axios.min.js') }}"></script>
    <script src="{{ asset('assets/js/toastr.min.js') }}"></script>
    <script src="{{ asset('assets/js/switchery.min.js') }}"></script>
    <script src="{{ asset('assets/js/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $(".preloader").fadeOut(500);
        });

        @if(session()->has('success'))
            toastr.success('{{ session('success') }}', 'BERHASIL');
        @elseif(session()->has('error'))
            toastr.error('{{ session('error') }}', 'GAGAL');
        @endif
    </script>

    {{-- ✅ STEP 1: Bridge initMap → __initMapFn (mini-map) --}}
    <script>
        window.initMap = function () {
            if (window.__initMapFn) {
                window.__initMapFn();
            } else {
                const interval = setInterval(() => {
                    if (window.__initMapFn) {
                        clearInterval(interval);
                        window.__initMapFn();
                    }
                }, 50);
            }
        };
    </script>

    {{-- ✅ STEP 2: Firebase + Mini-map + Modal-map logic --}}
    <script type="module">
        import { initializeApp }             from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js';
        import { getDatabase, ref, onValue } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-database.js';

        /* ── Firebase ──────────────────────────────────────────────────────── */
        const firebaseConfig = {
            apiKey:            "{{ config('firebase.api_key') }}",
            authDomain:        "{{ config('firebase.auth_domain') }}",
            databaseURL:       "{{ config('firebase.database_url') }}",
            projectId:         "{{ config('firebase.project_id') }}",
            storageBucket:     "{{ config('firebase.storage_bucket') }}",
            messagingSenderId: "{{ config('firebase.messaging_sender_id') }}",
            appId:             "{{ config('firebase.app_id') }}"
        };

        const db          = getDatabase(initializeApp(firebaseConfig));
        const officersRef = ref(db, 'officers_location');

        /* ── Shared constants ──────────────────────────────────────────────── */
        const COLORS = ['#1d4ed8','#16a34a','#dc2626','#9333ea','#ea580c','#0891b2','#be185d'];
        function colorFor(i) { return COLORS[i % COLORS.length]; }

        /* ── Shared helpers ────────────────────────────────────────────────── */
        function createMarkerIcon(name, color, isOnline) {
            const canvas  = document.createElement('canvas');
            canvas.width  = 44;
            canvas.height = 54;
            const ctx     = canvas.getContext('2d');
            ctx.shadowColor   = 'rgba(0,0,0,.25)';
            ctx.shadowBlur    = 6;
            ctx.shadowOffsetY = 2;
            ctx.beginPath();
            ctx.arc(22, 22, 20, 0, 2 * Math.PI);
            ctx.fillStyle = isOnline ? color : '#94a3b8';
            ctx.fill();
            ctx.shadowBlur  = 0;
            ctx.strokeStyle = '#fff';
            ctx.lineWidth   = 3;
            ctx.stroke();
            ctx.fillStyle    = '#fff';
            ctx.font         = 'bold 17px Inter, Arial, sans-serif';
            ctx.textAlign    = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText((name || '?')[0].toUpperCase(), 22, 22);
            if (isOnline) {
                ctx.beginPath();
                ctx.arc(36, 10, 6, 0, 2 * Math.PI);
                ctx.fillStyle   = '#22c55e';
                ctx.fill();
                ctx.strokeStyle = '#fff';
                ctx.lineWidth   = 2;
                ctx.stroke();
            }
            ctx.beginPath();
            ctx.moveTo(14, 38);
            ctx.lineTo(30, 38);
            ctx.lineTo(22, 54);
            ctx.closePath();
            ctx.fillStyle = isOnline ? color : '#94a3b8';
            ctx.fill();
            return {
                url:        canvas.toDataURL(),
                scaledSize: new google.maps.Size(44, 54),
                anchor:     new google.maps.Point(22, 54),
            };
        }

        /* ── Online check: Firebase flag AND freshness --------------------
         * Firebase onDisconnect() only fires when the device gracefully
         * disconnects. A hard device shutdown / battery pull / airplane
         * mode never triggers it — so the `online: true` flag can stay
         * stuck forever. We cross-check against `lastUpdate` to detect
         * stale "online" entries.
         *
         *  STALE_MS = 90 s
         *    Officer GPS pings every ~5 s while service is alive.
         *    90 s ≈ 18 missed pings = service almost certainly dead.
         * ----------------------------------------------------------------*/
        const STALE_MS = 90 * 1000;

        function isOfficerOnline(o) {
            const flagOnline = !!(o.online || o.isOnline);
            if (!flagOnline) return false;
            if (!o.lastUpdate) return true;          // freshly written, no ts yet
            const ageMs = Date.now() - o.lastUpdate;
            return ageMs <= STALE_MS;
        }

        function buildInfoContent(o) {
            const isOnline = isOfficerOnline(o);
            const speed    = ((o.speed || 0) * 3.6).toFixed(1);
            const acc      = (o.accuracy || 0).toFixed(0);
            const time     = o.lastUpdate
                ? new Date(o.lastUpdate).toLocaleTimeString('id-ID')
                : '-';
            return `
                <div style="font-family:Inter,sans-serif;padding:4px 2px;min-width:180px">
                    <div style="font-weight:700;font-size:.9rem;margin-bottom:6px">${o.name || '-'}</div>
                    <div style="font-size:.78rem;color:#64748b;margin-bottom:4px">
                        <span style="color:${isOnline ? '#16a34a' : '#94a3b8'}">●</span>
                        ${isOnline ? 'Online' : 'Offline'}
                    </div>
                    <table style="font-size:.78rem;color:#374151;width:100%;border-collapse:collapse">
                        <tr>
                            <td style="color:#94a3b8;padding:2px 8px 2px 0">Koordinat</td>
                            <td style="font-family:monospace">${o.latitude?.toFixed(5)}, ${o.longitude?.toFixed(5)}</td>
                        </tr>
                        <tr>
                            <td style="color:#94a3b8;padding:2px 8px 2px 0">Kecepatan</td>
                            <td>${speed} km/h</td>
                        </tr>
                        <tr>
                            <td style="color:#94a3b8;padding:2px 8px 2px 0">Akurasi</td>
                            <td>±${acc} m</td>
                        </tr>
                        <tr>
                            <td style="color:#94a3b8;padding:2px 8px 2px 0">Update</td>
                            <td>${time}</td>
                        </tr>
                    </table>
                </div>`;
        }

        function timeAgo(ts) {
            if (!ts) return '';
            const diff = Math.floor((Date.now() - ts) / 1000);
            if (diff < 60)    return diff + ' dtk lalu';
            if (diff < 3600)  return Math.floor(diff / 60) + ' mnt lalu';
            if (diff < 86400) return Math.floor(diff / 3600) + ' jam lalu';
            return Math.floor(diff / 86400) + ' hari lalu';
        }

        /* ════════════════════════════════════════════════════════════════════
           MINI-MAP (index page)
        ════════════════════════════════════════════════════════════════════ */
        let miniMap, miniInfoWindows = {}, miniMarkers = {};

        window.__initMapFn = function () {
            miniMap = new google.maps.Map(document.getElementById('mini-map'), {
                center:             { lat: -2.5489, lng: 118.0149 },
                zoom:               5,
                mapTypeControl:     false,
                streetViewControl:  false,
                fullscreenControl:  false,
                zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
            });
        };

        function syncMiniMarkers(officers) {
            if (!miniMap) return;
            const activeIds = new Set();

            officers.forEach((o, i) => {
                if (!o.latitude || !o.longitude) return;
                const pos      = { lat: o.latitude, lng: o.longitude };
                const isOnline = isOfficerOnline(o);
                const color    = isOnline ? colorFor(i) : '#94a3b8';
                activeIds.add(o.userId);

                if (miniMarkers[o.userId]) {
                    miniMarkers[o.userId].setPosition(pos);
                    miniMarkers[o.userId].setIcon(createMarkerIcon(o.name, color, isOnline));
                    miniMarkers[o.userId].setTitle(o.name);
                    miniInfoWindows[o.userId]?.setContent(buildInfoContent(o));
                } else {
                    const marker = new google.maps.Marker({
                        position:  pos,
                        map:       miniMap,
                        title:     o.name,
                        icon:      createMarkerIcon(o.name, color, isOnline),
                        animation: google.maps.Animation.DROP,
                    });
                    const iw = new google.maps.InfoWindow({ content: buildInfoContent(o) });
                    marker.addListener('click', () => {
                        Object.values(miniInfoWindows).forEach(w => w.close());
                        iw.open(miniMap, marker);
                    });
                    miniMarkers[o.userId]     = marker;
                    miniInfoWindows[o.userId] = iw;
                }
            });

            Object.keys(miniMarkers).forEach(id => {
                if (!activeIds.has(parseInt(id))) {
                    miniMarkers[id].setMap(null);
                    delete miniMarkers[id];
                    delete miniInfoWindows[id];
                }
            });

            const markerList = Object.values(miniMarkers);
            if (markerList.length > 0) {
                const bounds = new google.maps.LatLngBounds();
                markerList.forEach(m => bounds.extend(m.getPosition()));
                miniMap.fitBounds(bounds, 60);
                if (markerList.length === 1) miniMap.setZoom(14);
            }
        }

        /* ════════════════════════════════════════════════════════════════════
           MODAL MAP (full-screen tracking modal)
        ════════════════════════════════════════════════════════════════════ */
        let modalMap, modalMarkers = {}, modalInfoWindows = {};
        let modalMapReady = false;

        window.__initModalMap = function () {
            const el = document.getElementById('modal-tracking-map');
            if (!el) { console.error('Map element not found'); return; }

            modalMap = new google.maps.Map(el, {
                center:             { lat: -2.5489, lng: 118.0149 },
                zoom:               5,
                mapTypeControl:     true,
                mapTypeControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT },
                streetViewControl:  false,
                zoomControl:        true,
                zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
                fullscreenControl:  false,
            });

            /* Force tile repaint — critical inside a Bootstrap modal */
            setTimeout(() => {
                google.maps.event.trigger(modalMap, 'resize');
                modalMap.setCenter({ lat: -2.5489, lng: 118.0149 });
            }, 250);

            modalMapReady = true;
            if (allOfficers.length > 0) syncModalMarkers(allOfficers);
        };

        window.modalFitAll = function () {
            if (!modalMap || !Object.keys(modalMarkers).length) return;
            const bounds = new google.maps.LatLngBounds();
            Object.values(modalMarkers).forEach(m => bounds.extend(m.getPosition()));
            modalMap.fitBounds(bounds, 80);
            if (Object.keys(modalMarkers).length === 1) modalMap.setZoom(15);
        };

        window.modalFocusOfficer = function (userId) {
            const o = allOfficers.find(x => x.userId == userId);
            if (!o?.latitude) return;
            modalMap.panTo({ lat: o.latitude, lng: o.longitude });
            modalMap.setZoom(16);
            Object.values(modalInfoWindows).forEach(iw => iw.close());
            modalInfoWindows[userId]?.open(modalMap, modalMarkers[userId]);
            document.querySelectorAll('.modal-officer-item').forEach(el => el.classList.remove('active'));
            document.getElementById(`modal-item-${userId}`)?.classList.add('active');
        };

        window.openModalAndFocus = function (userId) {
            const modalEl = document.getElementById('trackingModal');
            const modal   = bootstrap.Modal.getOrCreateInstance(modalEl);

            if (!modalMapLoaded || !modalMapReady) {
                // Map not ready yet — listen for 'shown', then wait for map idle
                modalEl.addEventListener('shown.bs.modal', function handler() {
                    modalEl.removeEventListener('shown.bs.modal', handler);
                    // modalMap is initializing — poll until ready
                    const poll = setInterval(() => {
                        if (modalMapReady) {
                            clearInterval(poll);
                            modalFocusOfficer(userId);
                        }
                    }, 100);
                });
                modal.show();
            } else if (!document.getElementById('trackingModal').classList.contains('show')) {
                // Map is ready but modal is closed — open it, then focus
                modalEl.addEventListener('shown.bs.modal', function handler() {
                    modalEl.removeEventListener('shown.bs.modal', handler);
                    setTimeout(() => {
                        google.maps.event.trigger(modalMap, 'resize');
                        modalFocusOfficer(userId);
                    }, 200);
                });
                modal.show();
            } else {
                // Modal already open and map ready — focus directly
                modalFocusOfficer(userId);
            }
        };

        function renderModalList(officers) {
            const query    = (document.getElementById('modal-search-input')?.value || '').toLowerCase();
            const filtered = officers.filter(o => (o.name || '').toLowerCase().includes(query));
            const list     = document.getElementById('modal-officer-list');
            if (!list) return;

            if (!officers.length) {
                list.innerHTML = `<div class="text-center text-muted py-5" style="font-size:.85rem">
                    <i class="bi bi-people d-block fs-2 mb-2 opacity-30"></i>Belum ada petugas terdaftar</div>`;
                return;
            }
            if (!filtered.length) {
                list.innerHTML = `<div class="text-center text-muted py-5" style="font-size:.85rem">
                    <i class="bi bi-search d-block fs-2 mb-2 opacity-30"></i>Petugas tidak ditemukan</div>`;
                return;
            }

            filtered.sort((a, b) => (isOfficerOnline(b) ? 1 : 0) - (isOfficerOnline(a) ? 1 : 0));

            list.innerHTML = filtered.map((o, i) => {
                const isOnline = isOfficerOnline(o);
                const color    = colorFor(i);
                const speed    = ((o.speed || 0) * 3.6).toFixed(1);
                return `<div class="modal-officer-item" id="modal-item-${o.userId}"
                             onclick="modalFocusOfficer(${o.userId})">
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <div class="mo-ava" style="background:${color}20;color:${color}">${(o.name || '?')[0].toUpperCase()}</div>
                        <div class="flex-grow-1 overflow-hidden">
                            <div class="mo-name">${o.name || '-'}</div>
                            <div class="mo-speed">
                                <span class="mo-status ${isOnline ? 'mo-online' : 'mo-offline'}"></span>
                                ${isOnline ? `Online · ${speed} km/h` : 'Offline'}
                            </div>
                        </div>
                    </div>
                    ${o.latitude ? `<div class="mo-coords">${o.latitude.toFixed(5)}, ${o.longitude.toFixed(5)}</div>` : ''}
                </div>`;
            }).join('');
        }

        function syncModalMarkers(officers) {
            if (!modalMapReady || !modalMap) return;
            const activeIds = new Set();

            officers.forEach((o, i) => {
                if (!o.latitude || !o.longitude) return;
                const pos      = { lat: o.latitude, lng: o.longitude };
                const isOnline = isOfficerOnline(o);
                const color    = colorFor(i);
                activeIds.add(o.userId);

                if (modalMarkers[o.userId]) {
                    modalMarkers[o.userId].setPosition(pos);
                    modalMarkers[o.userId].setIcon(createMarkerIcon(o.name, color, isOnline));
                    modalInfoWindows[o.userId]?.setContent(buildInfoContent(o));
                } else {
                    const marker = new google.maps.Marker({
                        position:  pos,
                        map:       modalMap,
                        title:     o.name,
                        icon:      createMarkerIcon(o.name, color, isOnline),
                        animation: google.maps.Animation.DROP,
                    });
                    const iw = new google.maps.InfoWindow({ content: buildInfoContent(o) });
                    marker.addListener('click', () => {
                        Object.values(modalInfoWindows).forEach(w => w.close());
                        iw.open(modalMap, marker);
                        document.querySelectorAll('.modal-officer-item').forEach(el => el.classList.remove('active'));
                        document.getElementById(`modal-item-${o.userId}`)?.classList.add('active');
                    });
                    modalMarkers[o.userId]     = marker;
                    modalInfoWindows[o.userId] = iw;
                }
            });

            Object.keys(modalMarkers).forEach(id => {
                if (!activeIds.has(parseInt(id))) {
                    modalMarkers[id].setMap(null);
                    delete modalMarkers[id];
                    delete modalInfoWindows[id];
                }
            });
        }

        /* ── Modal open: init map on first open, repaint on re-open ─────── */
        let modalMapLoaded = false;
        document.getElementById('trackingModal')
            ?.addEventListener('shown.bs.modal', () => {
                if (firebaseReady) renderModalList(allOfficers);

                if (!modalMapLoaded) {
                    modalMapLoaded = true;
                    const script   = document.createElement('script');
                    script.src     = `https://maps.googleapis.com/maps/api/js?key={{ config('firebase.maps_key') }}&callback=__initModalMap&loading=async`;
                    script.async   = true;
                    script.onerror = () => console.error('Google Maps failed to load — check your API key & billing');
                    document.head.appendChild(script);
                } else if (modalMapReady) {
                    setTimeout(() => {
                        google.maps.event.trigger(modalMap, 'resize');
                        if (Object.keys(modalMarkers).length) modalFitAll();
                        else modalMap.setCenter({ lat: -2.5489, lng: 118.0149 });
                    }, 150);
                }
            });

        /* ── Search ──────────────────────────────────────────────────────── */
        document.getElementById('modal-search-input')
            ?.addEventListener('input', () => renderModalList(allOfficers));

        /* ════════════════════════════════════════════════════════════════════
           FIREBASE LISTENER — single source of truth for both maps
        ════════════════════════════════════════════════════════════════════ */
        let allOfficers   = [];
        let firebaseReady = false;

        onValue(officersRef, snapshot => {
            allOfficers = [];
            snapshot.forEach(child => { const o = child.val(); if (o) allOfficers.push(o); });
            firebaseReady = true;

            const online  = allOfficers.filter(isOfficerOnline);
            const offline = allOfficers.filter(o => !isOfficerOnline(o));
            const now     = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' });

            /* ── Stat cards (index page) ─── */
            const $el = id => document.getElementById(id);
            $el('total-officers')    && ($el('total-officers').textContent    = allOfficers.length);
            $el('online-officers')   && ($el('online-officers').textContent   = online.length);
            $el('offline-officers')  && ($el('offline-officers').textContent  = offline.length);
            $el('online-badge')      && ($el('online-badge').textContent      = online.length);
            $el('last-update-time')  && ($el('last-update-time').textContent  = allOfficers.length ? now : '-');

            /* ── Modal header ─── */
            $el('modal-online-badge')  && ($el('modal-online-badge').textContent  = online.length + ' Online');
            $el('modal-overlay-count') && ($el('modal-overlay-count').textContent = `${online.length}/${allOfficers.length} petugas online`);
            $el('modal-overlay-time')  && ($el('modal-overlay-time').textContent  = 'Update: ' + new Date().toLocaleTimeString('id-ID'));

            /* ── Officer list (index sidebar) ─── */
            const listEl = document.getElementById('officer-list');
            if (listEl) {
                if (!allOfficers.length) {
                    listEl.innerHTML = `
                        <div class="text-center text-muted py-5" style="font-size:.875rem">
                            <i class="bi bi-people fs-2 d-block mb-2 opacity-25"></i>
                            Belum ada data petugas
                        </div>`;
                } else {
                    const sorted = [...allOfficers].sort((a, b) =>
                        (isOfficerOnline(b) ? 1 : 0) - (isOfficerOnline(a) ? 1 : 0)
                    );
                    listEl.innerHTML = sorted.map((o, i) => {
                        const isOnline = isOfficerOnline(o);
                        const color    = colorFor(i);
                        return `
                        <a class="officer-row" onclick="openModalAndFocus(${o.userId})" style="cursor:pointer">
                            <div class="officer-avatar" style="background:${color}20;color:${color}">
                                ${(o.name || '?')[0].toUpperCase()}
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <div style="font-size:.875rem;font-weight:600;
                                            white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                    ${o.name || '-'}
                                </div>
                                <div class="last-update">
                                    ${isOnline
                                        ? `<span class="pulse-dot"></span><span class="text-success">Online</span>`
                                        : `<span style="color:#94a3b8">● Offline</span>`}
                                    ${o.lastUpdate ? ' &middot; ' + timeAgo(o.lastUpdate) : ''}
                                </div>
                            </div>
                            <span class="badge rounded-pill ${isOnline ? 'badge-online' : 'badge-offline'}"
                                  style="font-size:.68rem;white-space:nowrap">
                                ${isOnline ? 'Online' : 'Offline'}
                            </span>
                        </a>`;
                    }).join('');
                }
            }

            /* ── Sync both maps ─── */
            syncMiniMarkers(allOfficers);
            renderModalList(allOfficers);
            syncModalMarkers(allOfficers);
        });

        /* ── Periodic stale re-check ─────────────────────────────────────
         * Firebase onValue() only fires when remote data CHANGES. A device
         * that has died keeps `online: true` forever because no
         * disconnect event was sent. Re-render the lists every 30 s
         * so that isOfficerOnline() — which now checks `lastUpdate` age
         * — reclassifies a dead device as Offline automatically
         * (markers flip to grey, badges flip to offline, counts update).
         * ----------------------------------------------------------------*/
        setInterval(() => {
            if (!firebaseReady || !allOfficers.length) return;

            /* re-paint markers on both maps (green → grey when stale) */
            syncMiniMarkers(allOfficers);
            syncModalMarkers(allOfficers);

            /* re-render the modal officer list */
            renderModalList(allOfficers);

            /* re-render the sidebar officer list */
            const listEl = document.getElementById('officer-list');
            if (listEl) {
                const sorted = [...allOfficers].sort((a, b) =>
                    (isOfficerOnline(b) ? 1 : 0) - (isOfficerOnline(a) ? 1 : 0)
                );
                listEl.innerHTML = sorted.map((o, i) => {
                    const isOnline = isOfficerOnline(o);
                    const color    = colorFor(i);
                    return `
                    <a class="officer-row" onclick="openModalAndFocus(${o.userId})" style="cursor:pointer">
                        <div class="officer-avatar" style="background:${color}20;color:${color}">
                            ${(o.name || '?')[0].toUpperCase()}
                        </div>
                        <div class="flex-grow-1 overflow-hidden">
                            <div style="font-size:.875rem;font-weight:600;
                                        white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                ${o.name || '-'}
                            </div>
                            <div class="last-update">
                                ${isOnline
                                    ? `<span class="pulse-dot"></span><span class="text-success">Online</span>`
                                    : `<span style="color:#94a3b8">● Offline</span>`}
                                ${o.lastUpdate ? ' &middot; ' + timeAgo(o.lastUpdate) : ''}
                            </div>
                        </div>
                        <span class="badge rounded-pill ${isOnline ? 'badge-online' : 'badge-offline'}"
                              style="font-size:.68rem;white-space:nowrap">
                            ${isOnline ? 'Online' : 'Offline'}
                        </span>
                    </a>`;
                }).join('');
            }

            /* re-render stat cards (online count, last update time) */
            const online  = allOfficers.filter(isOfficerOnline);
            const offline = allOfficers.filter(o => !isOfficerOnline(o));
            const now     = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
            const $el = id => document.getElementById(id);
            $el('online-officers')    && ($el('online-officers').textContent    = online.length);
            $el('offline-officers')   && ($el('offline-officers').textContent   = offline.length);
            $el('online-badge')       && ($el('online-badge').textContent       = online.length);
            $el('last-update-time')   && ($el('last-update-time').textContent   = allOfficers.length ? now : '-');
            $el('modal-online-badge') && ($el('modal-online-badge').textContent = online.length + ' Online');
            $el('modal-overlay-count')&& ($el('modal-overlay-count').textContent= `${online.length}/${allOfficers.length} petugas online`);
        }, 30 * 1000);
    </script>

    {{-- ✅ STEP 3: Google Maps — loads mini-map; modal map loads lazily on first open --}}
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ config('firebase.maps_key') }}&callback=initMap"
        async defer>
    </script>

    <script>
    /* ==========================================================
       TRACKING SUMMARY
    ========================================================== */

    let routeMap          = null;
    let routePolyline     = null;
    let startMarker       = null;
    let finishMarker      = null;
    let startInfoWindow   = null;
    let finishInfoWindow  = null;
    let summaryTable      = null;

    $(document).ready(function () {

        if (!$('#trackingSummaryTable').length) {
            console.error('trackingSummaryTable not found');
            return;
        }

        if ($.fn.DataTable.isDataTable('#trackingSummaryTable')) {
            $('#trackingSummaryTable').DataTable().destroy();
        }

        summaryTable = $('#trackingSummaryTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            autoWidth: false,

            ajax: {
                url: "{{ route('officeractivity-gps-summary') }}",
                type: "GET",
                data: function (d) {
                    var officer = $('#filterOfficer').val();
                    var date    = $('#filterDate').val();
                    d.user_id   = officer || '';
                    d.track_date = date || '';
                }
            },

            columns: [
                {
                    data: 'track_date',
                    name: 'track_date',
                    defaultContent: '-'
                },
                {
                    data: 'officer_name',
                    name: 'officer_name',
                    defaultContent: '-'
                },
                {
                    data: 'distance_meters',
                    name: 'distance_meters',
                    defaultContent: 0,
                    render: function (data) {
                        return ((parseFloat(data) || 0) / 1000).toFixed(2) + ' km';
                    }
                },
                {
                    data: 'duration',
                    name: 'duration',
                    defaultContent: '-'
                },
                {
                    data: 'avg_speed',
                    name: 'avg_speed',
                    defaultContent: 0,
                    render: function (data) {
                        return ((parseFloat(data) || 0) * 3.6).toFixed(1) + ' km/h';
                    }
                },
                {
                    data: 'max_speed',
                    name: 'max_speed',
                    defaultContent: 0,
                    render: function (data) {
                        return ((parseFloat(data) || 0) * 3.6).toFixed(1) + ' km/h';
                    }
                },
                {
                    data: 'total_points',
                    name: 'total_points',
                    defaultContent: 0,
                    render: function (data) {
                        return `<span title="Jumlah sample GPS terekam">${(data || 0)}</span>`;
                    }
                },
                {
                    data: 'id',
                    orderable: false,
                    searchable: false,
                    defaultContent: '',
                    render: function (data) {
                        return `
                            <button
                                type="button"
                                class="btn btn-sm btn-primary btn-view-route"
                                data-id="${data}">
                                <i class="bi bi-geo-alt-fill me-1"></i>View Route
                            </button>
                        `;
                    }
                }
            ],

            error: function (xhr) {
                console.error(xhr.responseText);
            }
        });

        // Init tooltips for static header info icons
        $('[data-bs-toggle="tooltip"]').tooltip();

        /* ── Tracking Summary filters ──────────────────────────────── */
        $('#filterOfficer').on('change', function () {
            summaryTable.ajax.reload();
        });

        $('#filterDate').on('change', function () {
            summaryTable.ajax.reload();
        });

        $('#btnResetFilter').on('click', function () {
            $('#filterOfficer').val('');
            $('#filterDate').val('');
            summaryTable.ajax.reload();
        });
    });

    /* ==========================================================
       ROUTE DETAIL — colored pins + info panel + clean line
    ========================================================== */

    function buildPinIcon(color, label) {
        const canvas = document.createElement('canvas');
        canvas.width  = 38;
        canvas.height = 52;
        const ctx = canvas.getContext('2d');

        // Shadow
        ctx.shadowColor   = 'rgba(0,0,0,.3)';
        ctx.shadowBlur    = 6;
        ctx.shadowOffsetY = 2;

        // Pin body
        ctx.beginPath();
        ctx.arc(19, 19, 15, 0, 2 * Math.PI);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.shadowBlur = 0;

        // White border
        ctx.strokeStyle = '#fff';
        ctx.lineWidth   = 3;
        ctx.stroke();

        // Label
        ctx.fillStyle    = '#fff';
        ctx.font         = 'bold 14px Inter, Arial, sans-serif';
        ctx.textAlign    = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(label, 19, 20);

        // Pointer
        ctx.beginPath();
        ctx.moveTo(8, 30);
        ctx.lineTo(30, 30);
        ctx.lineTo(19, 52);
        ctx.closePath();
        ctx.fillStyle = color;
        ctx.fill();

        return {
            url:        canvas.toDataURL(),
            scaledSize: new google.maps.Size(38, 52),
            anchor:     new google.maps.Point(19, 52),
        };
    }

function fmtTime(tsMs) {
            if (!tsMs) return '-';
            let ts = Number(tsMs);
            if (ts < 1e12) ts *= 1000;
            const d = new Date(ts);
            if (isNaN(d.getTime())) return '-';
            return d.toLocaleString('id-ID', {
                year:'numeric', month:'short', day:'2-digit',
                hour:'2-digit', minute:'2-digit', second:'2-digit',
                timeZone: 'UTC'
            });
        }

    function fmtCoord(lat, lng) {
        if (lat == null || lng == null) return '-';
        return `${parseFloat(lat).toFixed(5)}, ${parseFloat(lng).toFixed(5)}`;
    }

    function clearRouteMap() {
        if (routePolyline)    { routePolyline.setMap(null);    routePolyline    = null; }
        if (startMarker)      { startMarker.setMap(null);      startMarker      = null; }
        if (finishMarker)     { finishMarker.setMap(null);     finishMarker     = null; }
        if (startInfoWindow)  { startInfoWindow.close();       startInfoWindow  = null; }
        if (finishInfoWindow) { finishInfoWindow.close();      finishInfoWindow = null; }
    }

    function resetSummaryPanel() {
        $('#route-modal-subtitle').text('Memuat data rute...');
        ['#rs-start','#rs-end','#rs-distance','#rs-duration','#rs-avg','#rs-max','#rs-points']
            .forEach(s => $(s).text('-'));
    }

    function haversineM(lat1, lng1, lat2, lng2) {
        const R = 6371000;
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLng = (lng2 - lng1) * Math.PI / 180;
        const a = Math.sin(dLat/2)**2
                + Math.cos(lat1*Math.PI/180) * Math.cos(lat2*Math.PI/180) * Math.sin(dLng/2)**2;
        return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    }

    /**
     * GPS deduplication — bounding-box stationary detection + anchor dedup.
     *
     * Step 1 — Bounding box diagonal
     *   Compute the diagonal of the bounding box of ALL points.
     *   If diagonal ≤ stationaryDiagM (500 m) → device never meaningfully moved.
     *   Stationary result: return [first, last] only — Start/Finish pins render,
     *   no polyline is drawn (path.length ≤ 2 guard in renderRoute).
     *
     * Step 2 — Moving: anchor-based dedup
     *   Walk points in time order. Keep a point only when it is far enough
     *   from the last kept anchor:
     *     threshold = max(minDistM, accuracy × 2)
     *   This collapses parked/idle clusters into a single waypoint while
     *   preserving every genuine location change.
     *
     * First and last raw points are always preserved for Start / Finish pins.
     */
    function deduplicatePath(rawPoints, minDistM = 150, stationaryDiagM = 500) {
        if (!rawPoints.length) return [];
        if (rawPoints.length === 1) return rawPoints;

        /* Step 1 — bounding box diagonal */
        const lats  = rawPoints.map(p => p.lat);
        const lngs  = rawPoints.map(p => p.lng);
        const diagM = haversineM(
            Math.min(...lats), Math.min(...lngs),
            Math.max(...lats), Math.max(...lngs)
        );

        if (diagM <= stationaryDiagM) {
            /* Stationary: pick the median point as the single representative */
            const sortedLat = [...rawPoints].sort((a, b) => a.lat - b.lat);
            const sortedLng = [...rawPoints].sort((a, b) => a.lng - b.lng);
            const m = Math.floor(rawPoints.length / 2);
            return [{ lat: sortedLat[m].lat, lng: sortedLng[m].lng, accuracy: 0, stationary: true }];
        }

        /* Step 2 — anchor-based dedup */
        const kept  = [rawPoints[0]];
        let anchor  = rawPoints[0];

        for (let i = 1; i < rawPoints.length - 1; i++) {
            const p         = rawPoints[i];
            const acc       = p.accuracy > 0 ? p.accuracy : 9999;
            const threshold = Math.max(minDistM, acc * 2);
            const dist      = haversineM(anchor.lat, anchor.lng, p.lat, p.lng);
            if (dist >= threshold) {
                kept.push(p);
                anchor = p;
            }
        }

        kept.push(rawPoints[rawPoints.length - 1]);
        return kept;
    }

    function renderRoute(payload) {
        const points = payload.points || [];

        if (!points.length) {
            toastr.warning('Tidak ada data rute untuk ditampilkan');
            return;
        }

        const rawPath = points.map(p => ({
            lat:      parseFloat(p.latitude),
            lng:      parseFloat(p.longitude),
            accuracy: parseFloat(p.accuracy) || 0,
        }));

        const path = deduplicatePath(rawPath);

        // Init map (lazy) ------------------------------------------------
        if (!routeMap) {
            routeMap = new google.maps.Map(
                document.getElementById('route-map'),
                {
                    zoom: 14,
                    center: path[0],
                    mapTypeId: 'roadmap',
                    mapTypeControl: true,
                    mapTypeControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT },
                    streetViewControl: false,
                    fullscreenControl: false,
                }
            );
        }

        clearRouteMap();

        const isStationary = path.length === 1 && path[0].stationary;

        if (isStationary) {
            // ── STATIONARY: single blue location pin ─────────────────────
            startMarker = new google.maps.Marker({
                position: path[0],
                map:      routeMap,
                icon:     buildPinIcon('#2563eb', 'P'),
                zIndex:   999,
            });
            startInfoWindow = new google.maps.InfoWindow({
                content: `
                    <div style="font-family:Inter,sans-serif;padding:6px 4px;min-width:200px">
                        <div style="font-weight:700;color:#2563eb;margin-bottom:6px">
                            <i class="bi bi-geo-alt-fill"></i> Lokasi
                        </div>
                        <table style="font-size:.78rem;color:#374151;width:100%;border-collapse:collapse">
                            <tr><td style="color:#94a3b8;padding:2px 8px 2px 0">Koordinat</td>
                                <td style="font-family:monospace">${fmtCoord(path[0].lat, path[0].lng)}</td></tr>
                            <tr><td style="color:#94a3b8;padding:2px 8px 2px 0">Status</td>
                                <td style="color:#2563eb;font-weight:600">Tidak bergerak</td></tr>
                        </table>
                    </div>`
            });
            startMarker.addListener('click', () => startInfoWindow.open(routeMap, startMarker));
            routeMap.setCenter(path[0]);
            routeMap.setZoom(17);

        } else {
            // ── MOVING: polyline + Start/Finish pins ──────────────────────
            routePolyline = new google.maps.Polyline({
                path: path,
                geodesic: true,
                strokeColor: '#1d4ed8',
                strokeOpacity: 0.9,
                strokeWeight: 5,
                icons: [{
                    icon: { path: 'M 0,-1 0,1', scale: 3, strokeOpacity: 1, strokeColor: '#fff' },
                    offset: '0',
                    repeat: '12px'
                }],
            });
            routePolyline.setMap(routeMap);

            startMarker = new google.maps.Marker({
                position: path[0],
                map:      routeMap,
                icon:     buildPinIcon('#16a34a', 'S'),
                zIndex:   999,
            });
            startInfoWindow = new google.maps.InfoWindow({
                content: `
                    <div style="font-family:Inter,sans-serif;padding:6px 4px;min-width:200px">
                        <div style="font-weight:700;color:#16a34a;margin-bottom:6px">
                            <i class="bi bi-play-circle-fill"></i> Start
                        </div>
                        <table style="font-size:.78rem;color:#374151;width:100%;border-collapse:collapse">
                            <tr><td style="color:#94a3b8;padding:2px 8px 2px 0">Waktu</td>
                                <td>${fmtTime(payload.start?.device_timestamp)}</td></tr>
                            <tr><td style="color:#94a3b8;padding:2px 8px 2px 0">Koordinat</td>
                                <td style="font-family:monospace">${fmtCoord(payload.start?.latitude, payload.start?.longitude)}</td></tr>
                            <tr><td style="color:#94a3b8;padding:2px 8px 2px 0">Kecepatan</td>
                                <td>${((payload.start?.speed || 0) * 3.6).toFixed(1)} km/h</td></tr>
                        </table>
                    </div>`
            });
            startMarker.addListener('click', () => {
                finishInfoWindow?.close();
                startInfoWindow.open(routeMap, startMarker);
            });

            finishMarker = new google.maps.Marker({
                position: path[path.length - 1],
                map:      routeMap,
                icon:     buildPinIcon('#dc2626', 'F'),
                zIndex:   999,
            });
            finishInfoWindow = new google.maps.InfoWindow({
                content: `
                    <div style="font-family:Inter,sans-serif;padding:6px 4px;min-width:200px">
                        <div style="font-weight:700;color:#dc2626;margin-bottom:6px">
                            <i class="bi bi-flag-fill"></i> Finish
                        </div>
                        <table style="font-size:.78rem;color:#374151;width:100%;border-collapse:collapse">
                            <tr><td style="color:#94a3b8;padding:2px 8px 2px 0">Waktu</td>
                                <td>${fmtTime(payload.end?.device_timestamp)}</td></tr>
                            <tr><td style="color:#94a3b8;padding:2px 8px 2px 0">Koordinat</td>
                                <td style="font-family:monospace">${fmtCoord(payload.end?.latitude, payload.end?.longitude)}</td></tr>
                            <tr><td style="color:#94a3b8;padding:2px 8px 2px 0">Kecepatan</td>
                                <td>${((payload.end?.speed || 0) * 3.6).toFixed(1)} km/h</td></tr>
                        </table>
                    </div>`
            });
            finishMarker.addListener('click', () => {
                startInfoWindow?.close();
                finishInfoWindow.open(routeMap, finishMarker);
            });

            const bounds = new google.maps.LatLngBounds();
            path.forEach(p => bounds.extend(p));
            routeMap.fitBounds(bounds, 60);
        }

        // Toggle legend rows based on stationary state ------------------
        $('#rl-start-row, #rl-finish-row, #rl-path-row').toggle(!isStationary);
        $('#rl-stationary-row').toggle(isStationary);

        // Fill summary panel --------------------------------------------
        const s = payload.summary || {};
        $('#route-modal-subtitle').html(
            `<i class="bi bi-person-circle me-1"></i>${payload.officer ?? '-'}`
            + ` &middot; <i class="bi bi-calendar3 me-1"></i>${payload.date ?? '-'}`
        );
        $('#rs-start').text(isStationary ? '-' : fmtTime(s.start_at));
        $('#rs-end').text(isStationary ? '-' : fmtTime(s.end_at));
        $('#rs-distance').text(isStationary ? '0 km' : `${(s.distance_km ?? 0).toFixed ? s.distance_km.toFixed(2) : s.distance_km} km`);
        $('#rs-duration').text(isStationary ? '-' : (s.duration_label || '-'));
        $('#rs-avg').text(isStationary ? '0 km/h' : `${s.avg_speed_kmh ?? 0} km/h`);
        $('#rs-max').text(isStationary ? '0 km/h' : `${s.max_speed_kmh ?? 0} km/h`);
        $('#rs-points').text(isStationary ? 1 : path.length);
    }

    $(document).on('click', '.btn-view-route', function () {

        const id = $(this).data('id');
        resetSummaryPanel();
        $('#routeModal').modal('show');

        axios.get(`{{ route('officeractivity-gps-route', ['id' => ':id']) }}`.replace(':id', id))
            .then(response => renderRoute(response.data))
            .catch(error => {
                console.error(error);
                toastr.error('Gagal memuat rute');
            });
    });

    /* ── Fix map after modal shown ───────────────────────────────── */
    $('#routeModal').on('shown.bs.modal', function () {
        if (routeMap) {
            google.maps.event.trigger(routeMap, 'resize');
        }
    });

    /* ── Clean up when modal closed ──────────────────────────────── */
    $('#routeModal').on('hidden.bs.modal', function () {
        clearRouteMap();
        routeMap = null;
    });
    </script>

    {{-- Modal map container sizing & route summary tiles --}}
    <style>
        .modal-tracking-wrapper { display:flex; width:100%; height:100%; overflow:hidden; }
        .modal-map-wrapper      { position:relative; flex:1; min-height:0; }
        #modal-tracking-map     { width:100% !important; height:100% !important; min-height:500px; }

        /* ── Route summary tiles ── */
        .rs-tile {
            background:#fff;
            border:1px solid #e2e8f0;
            border-radius:10px;
            padding:8px 6px;
            height:100%;
        }
        .rs-label {
            font-size:.68rem;
            color:#64748b;
            text-transform:uppercase;
            letter-spacing:.4px;
            font-weight:600;
        }
        .rs-value {
            font-size:.95rem;
            font-weight:700;
            color:#1e293b;
            margin-top:2px;
            line-height:1.15;
        }

        /* ── Route legend ── */
        .route-legend {
            position:absolute;
            top:14px; left:14px;
            background:#fff;
            border-radius:10px;
            padding:8px 12px;
            box-shadow:0 4px 16px rgba(0,0,0,.12);
            font-size:.78rem;
            z-index:10;
            display:flex; flex-direction:column; gap:6px;
            min-width:120px;
        }
        .rl-item { display:flex; align-items:center; gap:8px; color:#374151; }
        .rl-pin  {
            width:12px; height:12px; border-radius:50%;
            border:2px solid #fff;
            box-shadow:0 0 0 1px rgba(0,0,0,.15);
        }
        .rl-pin-start       { background:#16a34a; }
        .rl-pin-finish      { background:#dc2626; }
        .rl-pin-stationary  { background:#2563eb; }
        .rl-line {
            display:inline-block;
            width:18px; height:3px;
            background:#1d4ed8;
            border-radius:2px;
        }
    </style>
@endpush