

// /* ================= INIT ================= */

// function myTracksSections(){
//     var deviceMap;
// var markers = {};
// var infoWindows = {};
// var geocoder = new google.maps.Geocoder();

// /* DATA STORES */
// var devicesMaster = [];     // from /devices/all
// var telemetryMap = {};      // deviceSn -> telemetry
// var focusedDeviceSn = null;
// var moveIntervals = {};
//     buildLayout();
// loadDevicesList();          // 👈 devices only
// loadTelemetryInitial();     // 👈 telemetry only
// setInterval(loadTelemetryRealtime, 5000);
// }

// /* ================= BUILD UI ================= */
// function buildLayout() {

//     let html = `
//         <div class="container-fluid">
//             <div class="row g-3">

//                 <!-- LEFT: DEVICES -->
//                 <div class="col-lg-2">
//                     <div class="card shadow-sm border-0 h-100">
//                         <div class="card-header text-white fw-semibold">
//                             Devices
//                         </div>
//                         <div class="card-body p-2 bg-light">
//                             <div id="device_summary" class="mb-2 small fw-bold"></div>
//                             <div id="device_list" style="max-height:750px; overflow-y:auto;"></div>
//                         </div>
//                     </div>
//                 </div>

//                 <!-- CENTER: MAP -->
//                 <div class="col-lg-8">
//                     <div class="card shadow-sm border-0 h-100">
//                         <div class="card-header text-white fw-semibold">
//                             Live Map
//                         </div>
//                         <div id="all_devices_map" style="height:800px;"></div>
//                     </div>
//                 </div>

//                 <!-- RIGHT: TABS -->
//                 <div class="col-lg-2">
//                     <div class="card shadow-sm border-0 h-100">
//                         <div class="card-header text-white fw-semibold">
//                             Info Panel
//                         </div>

//                         <div class="card-body p-0">
//                             <ul class="nav nav-tabs flex-column" role="tablist">
//                                 <li class="nav-item">
//                                     <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-details">
//                                         📍 Details
//                                     </button>
//                                 </li>
//                                 <li class="nav-item">
//                                     <button class="nav-link" onclick="openGeofences()" data-bs-toggle="tab" data-bs-target="#tab-geofences">
//                                         🟢 Geofences
//                                     </button>
//                                 </li>
//                             </ul>

//                             <div class="tab-content p-2">

//                                 <div class="tab-pane fade show active" id="tab-details">
//                                     <div id="tab_device_details">
//                                         Select a device to see details
//                                     </div>
//                                 </div>

//                                 <div class="tab-pane fade" id="tab-geofences">
//                                     <div id="tab_geofences" >
//                                         Geofence list here
//                                     </div>
//                                 </div>

//                             </div>
//                         </div>
//                     </div>
//                 </div>

//             </div>
//         </div>
//     `;

//     $(".crud_section").html(html);

//     $(document).on("keydown", e => {
//         if (e.key === "Escape") {
//             closeAllInfoWindows();
//             focusedDeviceSn = null;
//             showAllMarkers();
//         }
//     });
// }

// function openGeofences() {
//     window.location.href = "#app/devicetracking"; // or modal
// }


// /* ================= LOAD DEVICES ================= */
// function loadDevicesList() {

//     controller.getAuthRequest(
//         "https://demo2.bsl.co.ke/api/v1/devices/all",
//         true,
//         function (data) {

//             devicesMaster = data || [];
//             $("#device_list").empty();

//             devicesMaster.forEach(createDeviceCard);
//             updateDeviceSummary();
//         }
//     );
// }

// /* ================= LOAD TELEMETRY ================= */
// function loadTelemetryInitial() {

//     controller.getAuthRequest(serverURL + "telemetry/latest", true, function (data) {

//         if (!data || !data.length) return;

//         data.forEach(d => telemetryMap[d.deviceSn] = d);

//         const first = data.find(d => d.latitude && d.longitude);
//         if (!first) return;

//         deviceMap = new google.maps.Map(
//             document.getElementById("all_devices_map"),
//             {
//                 zoom: 16,
//                 center: { lat: first.latitude, lng: first.longitude },
//                 gestureHandling: "greedy",
//                 zoomControl: true,
//                 mapTypeControl: true
//             }
//         );

//         google.maps.event.addListener(deviceMap, "click", () => {
//             closeAllInfoWindows();
//             focusedDeviceSn = null;
//             showAllMarkers();
//         });

//         data.forEach(addOrUpdateMarker);
//     });
// }

// /* ================= REALTIME TELEMETRY ================= */
// function loadTelemetryRealtime() {

//     controller.getAuthRequest(serverURL + "telemetry/latest", true, function (data) {

//         if (!data || !data.length) return;

//         data.forEach(d => {
//             telemetryMap[d.deviceSn] = d;
//             addOrUpdateMarker(d);
//         });

//         if (focusedDeviceSn) showOnlyMarker(focusedDeviceSn);
//     });
// }

// /* ================= DEVICE CARD ================= */
// function createDeviceCard(d) {

//     $("#device_list").append(`
//         <div class="device-card"
//              onclick="focusDevice('${d.serialNo}')">

//             <!-- LEFT -->
//             <div class="device-left">
//                 <div class="device-pin">
//                     <i class="fa-solid fa-location-dot"></i>
//                 </div>

//                 <div class="device-text">
//                     <div class="device-title">${d.serialNo}</div>
//                     <div class="device-id">ID: ${d.serialNo}</div>
//                 </div>
//             </div>

//             <!-- RIGHT -->
//             <div class="device-badge ${d.isOnline ? 'online' : 'offline'}">
//                 ${d.isOnline ? 'ONLINE' : 'OFFLINE'}
//             </div>

//         </div>
//     `);
// }


// /* ================= MARKERS ================= */
// function addOrUpdateMarker(t) {

//     if (!t.latitude || !t.longitude || !deviceMap) return;

//     if (!markers[t.deviceSn]) {

//         markers[t.deviceSn] = new google.maps.Marker({
//             position: { lat: t.latitude, lng: t.longitude },
//             map: deviceMap,
//             icon: {
//                 url: "assets/pin3.png",
//                 scaledSize: new google.maps.Size(40, 40)
//             }
//         });

//         infoWindows[t.deviceSn] = new google.maps.InfoWindow({
//             content: buildInfoContent(t)
//         });

//         markers[t.deviceSn].addListener("click", () => {
//             closeAllInfoWindows();
//             focusedDeviceSn = t.deviceSn;
//             infoWindows[t.deviceSn].open(deviceMap, markers[t.deviceSn]);
//         });

//     } else {
//         smoothMoveMarker(t);
//         infoWindows[t.deviceSn].setContent(buildInfoContent(t));
//     }
// }

// /* ================= INFO WINDOW ================= */
// function buildInfoContent(d) {

//     const safe = (v, suffix = "") =>
//         (v !== null && v !== undefined && v !== "")
//             ? `${v}${suffix}`
//             : "N/A";

//     /* ✅ REAL ONLINE LOGIC */
//     const online = d.speedKmh > 0 || (d.satellites && d.satellites > 0);

//     return `
//     <div class="tracker-card">

//         <!-- HEADER -->
//         <div class="tracker-header">
//             <div>
//                 <strong>${safe(d.deviceName)}</strong><br>
//                 <small>SN: ${safe(d.deviceSn)}</small>
//             </div>
//             <span class="dot ${online ? 'online' : 'offline'}"></span>
//         </div>

//         <!-- STATUS -->
//         <div class="tracker-row">
//             <strong>Timestamp:</strong>
//             <span>${safe(d.timestamp)}</span>
//         </div>

//         <!-- MOVEMENT -->
//         <div class="tracker-row">
//             🚗 <strong>Speed:</strong>
//             <span>${safe(d.speedKmh, ' km/h')}</span>
//         </div>

//         <div class="tracker-row">
//             🧭 <strong>Direction:</strong>
//             <span>${safe(d.direction, '°')}</span>
//         </div>

//         <!-- LOCATION -->
//         <div class="tracker-row">
//             🌍 <strong>Latitude:</strong>
//             <span>${safe(d.latitude)}</span>
//         </div>

//         <div class="tracker-row">
//             🌍 <strong>Longitude:</strong>
//             <span>${safe(d.longitude)}</span>
//         </div>

//         <div class="tracker-row">
//             📍 <strong>Address:</strong>
//             <span>${safe(d.address)}</span>
//         </div>

//         <!-- VEHICLE / DEVICE -->
//         <div class="tracker-row">
//             🛣 <strong>Mileage:</strong>
//             <span>${safe(d.mileageKm, ' km')}</span>
//         </div>

//         <div class="tracker-row">
//             🔋 <strong>Battery:</strong>
//             <span>${safe(d.battery, '%')}</span>
//         </div>

//         <div class="tracker-row">
//             🛰 <strong>Satellites:</strong>
//             <span>${safe(d.satellites)}</span>
//         </div>

//         <div class="tracker-row">
//             📡 <strong>GPS Status:</strong>
//             <span>${safe(d.gpsStatus)}</span>
//         </div>

//         <div class="tracker-row">
//             📶 <strong>GSM Signal:</strong>
//             <span>${safe(d.gsmSignal)}</span>
//         </div>

//         <div class="tracker-row">
//             🌡 <strong>Temperature:</strong>
//             <span>${safe(d.temperatureC, ' °C')}</span>
//         </div>

//         <!-- SYSTEM -->
//         <div class="tracker-row">
//             ⚙️ <strong>Active:</strong>
//             <span>${d.active ? 'Yes' : 'No'}</span>
//         </div>

//         <div class="tracker-row">
//             🚨 <strong>Alarm:</strong>
//             <span>${safe(d.alarmState)}</span>
//         </div>

//         <!-- ACTIONS -->
//         <div class="tracker-actions">
//             <button onclick="focusDevice('${d.deviceSn}')">
//                 Focus
//             </button>
//         </div>

//     </div>`;
// }

// function setActiveDevice(deviceId) {
//     // Remove previous active
//     document
//         .querySelectorAll('.device-marker--active')
//         .forEach(el => el.classList.remove('device-marker--active'));

//     const marker = state.deviceMarkers.get(deviceId);
//     if (!marker) return;

//     const el = marker.getElement();
//     if (!el) return;

//     el.classList.add('device-marker--active');

//     // Optional: focus map
//     map.panTo(marker.getLatLng(), { animate: true });
// }

// const deviceMarker = L.marker([lat, lng], {
//     icon: L.divIcon({
//         className: 'device-marker',
//         html: '<div class="device-dot"></div>',
//         iconSize: [16, 16]
//     })
// }).addTo(map);

// function clearActiveDevice() {
//     document
//         .querySelectorAll('.device-marker--active')
//         .forEach(el => el.classList.remove('device-marker--active'));
// }

// function dimOtherDevices(activeId) {
//     state.deviceMarkers.forEach((marker, id) => {
//         const el = marker.getElement();
//         if (!el) return;
//         el.classList.toggle('device-marker--dim', id !== activeId);
//     });
// }


// /* ================= FOCUS ================= */
// function focusDevice(deviceSn) {

//     const marker = markers[deviceSn];
//     if (!marker) return;

//     focusedDeviceSn = deviceSn;
//     showOnlyMarker(deviceSn);

//     deviceMap.panTo(marker.getPosition());
//     deviceMap.setZoom(18);

//     closeAllInfoWindows();
//     infoWindows[deviceSn]?.open(deviceMap, marker);
// }

// /* ================= VISIBILITY ================= */
// function showOnlyMarker(sn) {
//     Object.keys(markers).forEach(k => {
//         markers[k].setMap(k === sn ? deviceMap : null);
//     });
// }

// function showAllMarkers() {
//     Object.values(markers).forEach(m => m.setMap(deviceMap));
// }

// /* ================= SMOOTH MOVE ================= */
// function smoothMoveMarker(d) {

//     const marker = markers[d.deviceSn];
//     if (!marker) return;

//     const start = marker.getPosition();
//     const end = new google.maps.LatLng(d.latitude, d.longitude);
//     let step = 0;
//     const steps = 20;

//     clearInterval(moveIntervals[d.deviceSn]);

//     moveIntervals[d.deviceSn] = setInterval(() => {

//         step++;
//         marker.setPosition({
//             lat: start.lat() + (end.lat() - start.lat()) * step / steps,
//             lng: start.lng() + (end.lng() - start.lng()) * step / steps
//         });

//         if (step >= steps) clearInterval(moveIntervals[d.deviceSn]);

//     }, 100);
// }

// /* ================= HELPERS ================= */
// function closeAllInfoWindows() {
//     Object.values(infoWindows).forEach(iw => iw.close());
// }

// function updateDeviceSummary() {
//     const total = devicesMaster.length;
//     const online = devicesMaster.filter(d => d.isOnline).length;
//     $("#device_summary").html(`Total: ${total} | Online: ${online} | Offline: ${total - online}`);
// }
