@extends('incharge.sidebar')

@section('content')
<main class="flex">
    <!-- Connection Status Indicator will be added by JavaScript -->
    
    <!-- Refresh All Users Button -->
    <button id="refreshActiveUsers" 
        style="position:absolute; top:15px; right:120px; z-index:9999; background:#007bff; color:white; border:none; padding:8px 12px; border-radius:5px; cursor:pointer; display:flex; align-items:center; gap:5px;">
        🔄 Refresh All Users
    </button>
    
    <!-- Toggle Button -->
    <button id="toggleSidebar" 
        style="position:absolute; top:15px; right:15px; z-index:9999; background:#343a40; color:white; border:none; padding:8px 12px; border-radius:5px; cursor:pointer;">
        ☰ Users
    </button>

    <!-- Collapsible Sidebar (Right side) -->
    <div id="userSidebar" 
         style="width:320px; height:100vh; background:#212529; color:white; position:fixed; top:0; right:-320px; transition:0.3s; overflow-y:auto; z-index:9998; display:flex; flex-direction:column;">
        
        <!-- Header -->
        <h4 style="padding:15px; margin:0; background:#111; color:#f8f9fa; display:flex; justify-content:space-between; align-items:center;">
            Active Users
            <span id="userCountBadge" style="background:#007bff; color:white; padding:2px 8px; border-radius:10px; font-size:12px;">0</span>
        </h4>
        
        <!-- Lab Selection Dropdown (Inside Sidebar) -->
        <div style="padding:12px 15px; background:#2c2f33; border-bottom:1px solid #444;">
            <label style="display:block; font-size:12px; color:#aaa; margin-bottom:5px;">Select Laboratory</label>
            <select id="labSelector" 
                style="width:100%; padding:10px 12px; border-radius:6px; border:none; background:#3a3f44; color:white; font-size:13px; cursor:pointer;">
                <option value="" style="background:#212529;">-- Select Lab --</option>
            </select>
            <div id="selectedLabInfo" style="font-size:11px; color:#4CAF50; margin-top:5px; display:none;">
                ✓ Filtering by: <span id="selectedLabName"></span>
            </div>
        </div>
        
        <!-- Search Box -->
        <div style="padding:10px 15px; background:#2c2f33;">
            <input type="text" id="userSearch" placeholder="Search user by name or EPF..." 
                   style="width:100%; padding:8px 12px; border-radius:5px; border:none; outline:none; background:#3a3f44; color:white;"/>
        </div>

        <!-- User List -->
        <ul id="activeUsers" style="list-style:none; padding:0; margin:0; flex-grow:1; overflow-y:auto;"></ul>
        
        <!-- Footer with refresh button -->
        <div style="padding:10px 15px; background:#111; border-top:1px solid #444;">
            <button id="refreshSidebarUsers" 
                    style="width:100%; padding:10px; background:#007bff; color:white; border:none; border-radius:5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;">
                🔄 Refresh List
            </button>
        </div>
    </div>

    <!-- Map Container -->
    <div style="flex-grow:1;">
        <div id="map" style="height:85vh; width:100%;"></div>
    </div>
</main>

<!-- Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_key') }}&libraries=geometry"></script>


<style>
.battery-status {
    font-weight: bold;
}

.battery-low {
    color: #FF5252 !important;
}

.battery-medium {
    color: #FFC107 !important;
}

.battery-normal {
    color: #4CAF50 !important;
}

.battery-unknown {
    color: #9E9E9E !important;
}

/* Pulsing animation for active markers */
@keyframes pulse-active {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.active-marker {
    animation: pulse-active 2s infinite;
}
</style>

<script>
let map;
let markers = {};
let infoWindows = {};
let lastUpdate = {}; 
let activeUsers = {}; 
let batteryLevels = {};
let userPaths = {}; 
let animationHandlers = {}; 
let lastBatteryUpdate = 0;
let roadSnapDebouncers = {};
let userDistances = {};
let userPathsDetailed = {};
let directionsService;

// Lab filter variables
let currentLabId = null;
let currentLabName = '';
let allowedUserIds = new Set(); // Track which user IDs are allowed for current lab
let allLabs = [];

// WebSocket connection
let ws = null;
let reconnectAttempts = 0;
const MAX_RECONNECT_ATTEMPTS = 10;
const RECONNECT_DELAY = 3000;

// Track if we're currently refreshing
let isRefreshing = false;

// Icon configurations
const ICON_CONFIG = {
    active: {
        url: "{{ asset('image/singhero.png') }}",
        scaledSize: new google.maps.Size(40, 80),
        anchor: new google.maps.Point(20, 40)
    },
    idle: {
        url: "{{ asset('image/singheronotactive.png') }}",
        scaledSize: new google.maps.Size(40, 80),
        anchor: new google.maps.Point(20, 40)
    },
    inactive: {
        url: "{{ asset('image/singheronotactive.png') }}",
        scaledSize: new google.maps.Size(40, 80),
        anchor: new google.maps.Point(20, 40)
    }
};

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 13,
        center: { lat: 6.9271, lng: 79.8612 },
        streetViewControl: false,
        mapTypeControl: true,
        fullscreenControl: true
    });
    
    // Initialize Directions Service
    directionsService = new google.maps.DirectionsService();
    
    // Load labs and initialize
    loadLabs();
    
    // Initialize WebSocket connection
    initWebSocket();
    
    // Set up periodic cleanup
    setInterval(cleanupInactiveUsers, 30000);
}

// Load all labs for the dropdown
// async function loadLabs() {
//     try {
//         const response = await fetch('/admin/labs');
//         const labs = await response.json();
        
//         allLabs = labs;
//         const labSelector = document.getElementById('labSelector');
        
//         labSelector.innerHTML = '<option value="">-- Select Lab --</option>';
        
//         labs.forEach(lab => {
//             const option = document.createElement('option');
//             option.value = lab.lid;
//             option.textContent = lab.name;
//             labSelector.appendChild(option);
//         });
        
//         // Add event listener for lab selection
//         labSelector.addEventListener('change', function() {
//             const selectedLid = this.value;
//             if (selectedLid) {
//                 const selectedLab = labs.find(lab => lab.lid == selectedLid);
//                 currentLabName = selectedLab ? selectedLab.name : '';
//                 loadROsByLab(selectedLid);
//             } else {
//                 clearAllUsers();
//                 currentLabId = null;
//                 currentLabName = '';
//                 document.getElementById('selectedLabName').textContent = '';
//             }
//         });
        
//     } catch (error) {
//         console.error('Error loading labs:', error);
//         showConnectionStatus('error', 'Failed to load labs');
//     }
// }
// Load all labs for the dropdown
async function loadLabs() {
    try {
        const response = await fetch('/incharge/labs');
        
        if (response.status === 401) {
            showConnectionStatus('error', 'Please login to continue');
            return;
        }
        
        const labs = await response.json();
        
        // Check if labs is an array (not an error object)
        if (labs.error || !Array.isArray(labs)) {
            console.error('Error loading labs:', labs);
            showConnectionStatus('error', labs.error || 'Failed to load labs');
            return;
        }
        
        allLabs = labs;
        const labSelector = document.getElementById('labSelector');
        
        if (labs.length === 0) {
            labSelector.innerHTML = '<option value="">-- No Labs Assigned --</option>';
            showConnectionStatus('error', 'No labs assigned to your account');
            return;
        }
        
        labSelector.innerHTML = '<option value="">-- Select Lab --</option>';
        
        labs.forEach(lab => {
            const option = document.createElement('option');
            option.value = lab.lid;
            option.textContent = lab.name;
            labSelector.appendChild(option);
        });
        
        // Check for saved lab in localStorage and if it's still accessible
        const savedLabId = localStorage.getItem('selectedLabId');
        if (savedLabId && labs.find(lab => lab.lid == savedLabId)) {
            labSelector.value = savedLabId;
            const selectedLab = labs.find(lab => lab.lid == savedLabId);
            currentLabName = selectedLab ? selectedLab.name : '';
            loadROsByLab(savedLabId);
        }
        
        // Add event listener for lab selection
        // labSelector.addEventListener('change', function() {
        //     const selectedLid = this.value;
        //     if (selectedLid) {
        //         const selectedLab = labs.find(lab => lab.lid == selectedLid);
        //         currentLabName = selectedLab ? selectedLab.name : '';
        //         localStorage.setItem('selectedLabId', selectedLid);
        //         loadROsByLab(selectedLid);
        //     } else {
        //         clearAllUsers();
        //         currentLabId = null;
        //         currentLabName = '';
        //         localStorage.removeItem('selectedLabId');
        //         document.getElementById('selectedLabInfo').style.display = 'none';
        //         document.getElementById('selectedLabName').textContent = '';
        //     }
        // });

        // Add event listener for lab selection
labSelector.addEventListener('change', function() {
    const selectedLid = this.value;
    if (selectedLid) {
        const selectedLab = labs.find(lab => lab.lid == selectedLid);
        currentLabName = selectedLab ? selectedLab.name : '';
        localStorage.setItem('selectedLabId', selectedLid);
        loadROsByLab(selectedLid);
    } else {
        // Clear everything when "Select Lab" is chosen
        clearAllUsers();
        currentLabId = null;
        currentLabName = '';
        localStorage.removeItem('selectedLabId');
        document.getElementById('selectedLabInfo').style.display = 'none';
        document.getElementById('selectedLabName').textContent = '';
        
        // Also clear the user list display
        const userList = document.getElementById("activeUsers");
        if (userList) {
            userList.innerHTML = '<li style="padding:20px; text-align:center; color:#888;">Please select a lab to view users</li>';
        }
    }
});
        
    } catch (error) {
        console.error('Error loading labs:', error);
        showConnectionStatus('error', 'Failed to load labs');
    }
}

// Load ROs (Route Officers) for a specific lab
async function loadROsByLab(lid) {
    try {
        showConnectionStatus('loading', `Loading ROs for selected lab...`);
        
        const response = await fetch(`/incharge/ros/by-lab/${lid}`);
        const data = await response.json();
        
        if (data.success && data.ros) {
            currentLabId = lid;
            
            // Update UI with lab name
            document.getElementById('selectedLabName').textContent = `Lab: ${currentLabName}`;
            
            // Store allowed user IDs
            allowedUserIds.clear();
            data.ros.forEach(ro => {
                allowedUserIds.add(ro.uid.toString());
            });
            
            console.log(`📋 Loaded ${allowedUserIds.size} ROs for lab: ${currentLabName}`);
            
            // Clear existing users not in this lab
            filterUsersByLab();
            
            // Refresh active users to show only those in this lab
            await fetchAllActiveUsers();
            
            showConnectionStatus('connected', `Showing ${allowedUserIds.size} ROs from ${currentLabName}`);
            
            setTimeout(() => {
                const statusIndicator = document.getElementById('connection-status');
                if (statusIndicator && statusIndicator.parentNode) {
                    statusIndicator.style.opacity = '0.5';
                    setTimeout(() => {
                        if (statusIndicator.parentNode) statusIndicator.remove();
                    }, 1000);
                }
            }, 3000);
        } else {
            console.warn('No ROs found for this lab');
            showConnectionStatus('error', 'No ROs found for this lab');
            clearAllUsers();
        }
        
    } catch (error) {
        console.error('Error loading ROs:', error);
        showConnectionStatus('error', 'Failed to load ROs');
    }
}

// Filter users to only show those from selected lab
function filterUsersByLab() {
    // Remove markers for users not in allowed list
    Object.keys(markers).forEach(uid => {
        if (uid !== 'user_location' && !allowedUserIds.has(uid)) {
            if (markers[uid]) {
                markers[uid].setMap(null);
                delete markers[uid];
            }
            delete activeUsers[uid];
            delete batteryLevels[uid];
            delete lastUpdate[uid];
            delete userPaths[uid];
        }
    });
    
    updateUserCount();
    updateActiveUserList();
}

// Clear all users from map
// function clearAllUsers() {
//     Object.keys(markers).forEach(uid => {
//         if (uid !== 'user_location' && markers[uid]) {
//             markers[uid].setMap(null);
//             delete markers[uid];
//         }
//     });
//     activeUsers = {};
//     batteryLevels = {};
//     lastUpdate = {};
//     userPaths = {};
//     allowedUserIds.clear();
//     updateUserCount();
//     updateActiveUserList();
// }

// Clear all users from map
function clearAllUsers() {
    Object.keys(markers).forEach(uid => {
        if (uid !== 'user_location' && markers[uid]) {
            markers[uid].setMap(null);
            delete markers[uid];
        }
    });
    activeUsers = {};
    batteryLevels = {};
    lastUpdate = {};
    userPaths = {};
    allowedUserIds.clear();
    updateUserCount();
    updateActiveUserList();
}

// Check if a user is allowed based on current lab filter
// function isUserAllowed(uid) {
//     if (!currentLabId) return true; // No lab selected, show all
//     return allowedUserIds.has(uid.toString());
// }

// Check if a user is allowed based on current lab filter
function isUserAllowed(uid) {
    // If no lab is selected, don't show ANY users
    if (!currentLabId) return false;
    // Only show users that are in the allowed list for the selected lab
    return allowedUserIds.has(uid.toString());
}

function initWebSocket() {
    // Close existing connection if any
    if (ws && ws.readyState === WebSocket.OPEN) {
        ws.close(1000, 'Reinitializing');
    }
    
    ws = new WebSocket("ws://138.201.99.188:8082");
    
    ws.onopen = () => {
        console.log("✅ Connected to WebSocket server");
        reconnectAttempts = 0;
        requestInitialData();
        showConnectionStatus('connected', 'Live tracking connected');
    };
    
    ws.onmessage = function(event) {
        try {
            let data = JSON.parse(event.data);
            
            // Handle initial data response
            if (data.type === 'initial_data' && data.users) {
                console.log(`📦 Received initial data for ${Object.keys(data.users).length} users`);
                Object.values(data.users).forEach(userData => {
                    if (isUserAllowed(userData.uid)) {
                        processUserData(userData);
                    }
                });
                updateUserCount();
                return;
            }
            
            // Handle active users response (from refresh button)
            if (data.type === 'active_users_response' && data.users) {
                console.log(`📦 Received ${Object.keys(data.users).length} active users from refresh request`);
                
                // Clear existing markers except user's own location
                Object.keys(markers).forEach(uid => {
                    if (uid !== 'user_location') {
                        markers[uid].setMap(null);
                        delete markers[uid];
                    }
                });
                
                // Clear existing user data
                activeUsers = {};
                batteryLevels = {};
                lastUpdate = {};
                
                // Process each active user (filter by lab)
                Object.values(data.users).forEach(userData => {
                    if (isUserAllowed(userData.uid)) {
                        processUserData(userData);
                    }
                });
                
                updateUserCount();
                
                const allowedCount = Object.keys(activeUsers).length;
                showConnectionStatus('connected', `Loaded ${allowedCount} users from selected lab`);
                
                setTimeout(() => {
                    const statusIndicator = document.getElementById('connection-status');
                    if (statusIndicator && statusIndicator.parentNode) {
                        statusIndicator.style.opacity = '0.5';
                        setTimeout(() => {
                            if (statusIndicator.parentNode) statusIndicator.remove();
                        }, 1000);
                    }
                }, 3000);
                
                stopRefreshAnimation();
                return;
            }
            
            // Handle regular location updates
            if (data.uid && data.lat && data.lng) {
                if (isUserAllowed(data.uid)) {
                    processUserData(data);
                    updateUserCount();
                }
            }
            
        } catch (error) {
            console.error('Error processing WebSocket message:', error);
        }
    };
    
    ws.onclose = (event) => {
        console.log(`WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason}`);
        showConnectionStatus('disconnected');
        attemptReconnect();
    };
    
    ws.onerror = (error) => {
        console.error('WebSocket error:', error);
        showConnectionStatus('error');
    };
}

function requestInitialData() {
    if (ws && ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify({
            type: 'get_initial_data',
            request_id: 'initial_' + Date.now()
        }));
        console.log('📤 Requested initial data from server');
    }
}

function requestActiveUsers() {
    if (ws && ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify({
            type: 'get_active_users',
            request_id: 'refresh_' + Date.now()
        }));
        console.log('📤 Requested active users from server');
        return true;
    }
    return false;
}

// async function fetchAllActiveUsers() {
//     if (isRefreshing) {
//         console.log('⚠️ Already refreshing, skipping...');
//         return;
//     }
    
//     isRefreshing = true;
//     startRefreshAnimation();
    
//     console.log('🔄 Fetching all active users...');
//     showConnectionStatus('loading', 'Loading active users...');
    
//     const wsSuccess = requestActiveUsers();
    
//     if (!wsSuccess) {
//         setTimeout(() => {
//             if (isRefreshing) {
//                 console.log('❌ WebSocket request failed or timed out');
//                 showConnectionStatus('error', 'Failed to load active users. Check connection.');
//                 stopRefreshAnimation();
//                 isRefreshing = false;
//             }
//         }, 5000);
//     }
// }

async function fetchAllActiveUsers() {
    if (isRefreshing) {
        console.log('⚠️ Already refreshing, skipping...');
        return;
    }
    
    if (!currentLabId) {
        showConnectionStatus('error', 'Please select a lab first');
        // Also clear any existing users
        clearAllUsers();
        return;
    }
    
    isRefreshing = true;
    startRefreshAnimation();
    
    console.log('🔄 Fetching all active users...');
    showConnectionStatus('loading', 'Loading active users...');
    
    const wsSuccess = requestActiveUsers();
    
    if (!wsSuccess) {
        setTimeout(() => {
            if (isRefreshing) {
                console.log('❌ WebSocket request failed or timed out');
                showConnectionStatus('error', 'Failed to load active users. Check connection.');
                stopRefreshAnimation();
                isRefreshing = false;
            }
        }, 5000);
    }
}

function processUserData(data) {
    let uid = data.uid;
    let lat = parseFloat(data.lat);
    let lng = parseFloat(data.lng);
    let isTraveling = data.is_traveling || false;
    let speed = data.speed ? (data.speed * 3.6).toFixed(1) : '0.0';
    
    window.lastKnownSpeed = window.lastKnownSpeed || {};
    window.lastKnownSpeed[uid] = speed;
    
    const newPosition = { lat, lng };
    lastUpdate[uid] = Date.now();
    
    // Initialize user data if not exists
    if (!userPaths[uid]) {
        initializeUserData(uid, newPosition);
    }
    
    // Add to raw path for snap-to-road
    userPaths[uid].rawPath.push(newPosition);
    if (userPaths[uid].rawPath.length > 100) {
        userPaths[uid].rawPath.shift();
    }
    
    // Store latest position for immediate display
    userPaths[uid].lastPosition = newPosition;
    
    // Add to detailed path for distance calculation
    userPathsDetailed[uid] = userPathsDetailed[uid] || [];
    userPathsDetailed[uid].push({...newPosition, timestamp: Date.now()});
    
    // Keep only recent points (last 5 minutes)
    const fiveMinutesAgo = Date.now() - 300000;
    userPathsDetailed[uid] = userPathsDetailed[uid].filter(point => point.timestamp > fiveMinutesAgo);
    
    // Update marker immediately with raw position
    updateOrCreateMarker(uid, newPosition, isTraveling, speed);
    
    // Process snap-to-road in background
    processSnapToRoad(uid, isTraveling, speed);
}

function initializeUserData(uid, position) {
    userPaths[uid] = {
        rawPath: [position],
        lastPosition: position,
        snappedPath: new google.maps.Polyline({
            geodesic: true,
            strokeOpacity: 0.8,
            strokeWeight: 3,
            map: map,
            visible: false
        })
    };
}

function processSnapToRoad(uid, isTraveling, speed) {
    if (roadSnapDebouncers[uid]) {
        clearTimeout(roadSnapDebouncers[uid]);
    }

    roadSnapDebouncers[uid] = setTimeout(() => {
        if (userPaths[uid] && userPaths[uid].rawPath.length >= 3) {
            snapPathToRoad(uid, isTraveling, speed);
        }
    }, 2000);
}

function snapPathToRoad(uid, isTraveling, speed) {
    const pathToSnap = userPaths[uid].rawPath;
    
    if (pathToSnap.length < 2) return;

    const snapUrl = `https://roads.googleapis.com/v1/snapToRoads?path=${pathToSnap.map(p => `${p.lat},${p.lng}`).join('|')}&interpolate=true&key={{ config('services.google.maps_key') }}`;

    fetch(snapUrl)
        .then(response => response.json())
        .then(snappedData => {
            if (snappedData.snappedPoints && snappedData.snappedPoints.length > 0) {
                const newSnappedPath = snappedData.snappedPoints.map(point => ({
                    lat: point.location.latitude,
                    lng: point.location.longitude
                }));

                userPaths[uid].snappedPath.setPath(newSnappedPath);
                userPaths[uid].snappedPath.setOptions({
                    strokeColor: isTraveling ? '#FF0000' : '#9E9E9E',
                    visible: true
                });

                calculateRoadDistance(uid, newSnappedPath);
            }
        })
        .catch(error => {
            console.error('Error snapping to roads:', error);
        });
}

function calculateRoadDistance(uid, snappedPoints) {
    if (snappedPoints.length < 2) return;

    let totalDistance = 0;
    for (let i = 1; i < snappedPoints.length; i++) {
        const distance = google.maps.geometry.spherical.computeDistanceBetween(
            new google.maps.LatLng(snappedPoints[i-1].lat, snappedPoints[i-1].lng),
            new google.maps.LatLng(snappedPoints[i].lat, snappedPoints[i].lng)
        );
        totalDistance += distance;
    }

    userDistances[uid] = (userDistances[uid] || 0) + (totalDistance / 1000);
    updateInfoWindowWithDistance(uid, userDistances[uid]);
}

function updateOrCreateMarker(uid, position, isTraveling, speed) {
    const iconType = isTraveling ? 'active' : 'idle';
    
    if (!markers[uid]) {
        createNewMarker(uid, position, iconType, speed);
    } else {
        updateExistingMarker(uid, position, iconType, speed);
    }
    
    // Add pulsing animation for traveling users
    if (isTraveling && markers[uid]) {
        markers[uid].setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(() => {
            if (markers[uid]) {
                markers[uid].setAnimation(null);
            }
        }, 1000);
    }
    
    updateActiveUserList();
}

function createNewMarker(uid, position, iconType, speed) {
    markers[uid] = new google.maps.Marker({
        position: position,
        map: map,
        title: `User ${uid}`,
        icon: ICON_CONFIG[iconType],
        optimized: false
    });

    fetchUserDetails(uid, speed);
}

function updateExistingMarker(uid, position, iconType, speed) {
    smoothMarkerMovement(uid, position);
    markers[uid].setIcon(ICON_CONFIG[iconType]);
    
    if (activeUsers[uid] && infoWindows[uid]) {
        updateInfoWindowContent(uid, speed);
    }
    
    refreshBatteryLevel(uid, speed);
}

function smoothMarkerMovement(uid, newPosition) {
    const marker = markers[uid];
    const oldPosition = marker.getPosition();

    if (!oldPosition) {
        marker.setPosition(newPosition);
        return;
    }

    const distance = google.maps.geometry.spherical.computeDistanceBetween(oldPosition, newPosition);
    if (distance < 2) {
        marker.setPosition(newPosition);
        return;
    }

    const heading = google.maps.geometry.spherical.computeHeading(oldPosition, newPosition);
    const currentIcon = markers[uid].getIcon();
    
    marker.setIcon({
        url: currentIcon.url,
        scaledSize: currentIcon.scaledSize,
        anchor: currentIcon.anchor,
        rotation: heading
    });

    if (animationHandlers[uid]) {
        cancelAnimationFrame(animationHandlers[uid]);
    }

    const steps = 20;
    const latStep = (newPosition.lat - oldPosition.lat()) / steps;
    const lngStep = (newPosition.lng - oldPosition.lng()) / steps;
    let currentStep = 0;

    function animate() {
        if (currentStep >= steps) {
            marker.setPosition(newPosition);
            return;
        }
        
        const currentLat = oldPosition.lat() + (latStep * currentStep);
        const currentLng = oldPosition.lng() + (lngStep * currentStep);
        
        marker.setPosition({ lat: currentLat, lng: currentLng });
        currentStep++;
        
        animationHandlers[uid] = requestAnimationFrame(animate);
    }
    
    animate();
}

function fetchUserDetails(uid, speed) {
    fetch(`/incharge/user/${uid}`)
        .then(response => response.json())
        .then(user => {
            if (user && !user.error) {
                activeUsers[uid] = user;
                fetchBatteryLevel(uid, speed);
            }
        })
        .catch(error => console.error('Error fetching user details:', error));
}

function fetchBatteryLevel(uid, speed) {
    fetch(`/incharge/user/${uid}/battery`)
        .then(response => response.json())
        .then(batteryData => {
            batteryLevels[uid] = batteryData.battery_level || 'N/A';
            createInfoWindow(uid, speed);
            updateActiveUserList();
        })
        .catch(error => {
            console.error('Error fetching battery level:', error);
            batteryLevels[uid] = 'N/A';
            createInfoWindow(uid, speed);
            updateActiveUserList();
        });
}

function refreshBatteryLevel(uid, speed) {
    const now = Date.now();
    if (!lastBatteryUpdate || now - lastBatteryUpdate > 30000) {
        fetch(`/incharge/user/${uid}/battery`)
            .then(response => response.json())
            .then(batteryData => {
                batteryLevels[uid] = batteryData.battery_level || 'N/A';
                updateInfoWindowContent(uid, speed);
                updateActiveUserList();
            });
        lastBatteryUpdate = now;
    }
}

function createInfoWindow(uid, speed) {
    if (!activeUsers[uid]) return;

    const distance = userDistances[uid] ? userDistances[uid].toFixed(2) + ' km' : 'Calculating...';
    const batteryLevel = batteryLevels[uid] || 'N/A';
    
    const content = `
        <div style="min-width: 200px;">
            <strong>${activeUsers[uid].fname} ${activeUsers[uid].lname}</strong><br>
            EPF: ${activeUsers[uid].epf}<br>
            Contact: ${activeUsers[uid].contact}<br>
            Speed: ${speed} km/h<br>
            Distance: ${distance}<br>
            Battery: ${batteryLevel}%
        </div>
    `;
    
    infoWindows[uid] = new google.maps.InfoWindow({ content });
    markers[uid].addListener("click", () => {
        infoWindows[uid].open(map, markers[uid]);
    });
}

function updateInfoWindowContent(uid, speed) {
    if (!activeUsers[uid] || !infoWindows[uid]) return;

    const distance = userDistances[uid] ? userDistances[uid].toFixed(2) + ' km' : 'Calculating...';
    const batteryLevel = batteryLevels[uid] || 'N/A';
    
    const content = `
        <div style="min-width: 200px;">
            <strong>${activeUsers[uid].fname} ${activeUsers[uid].lname}</strong><br>
            EPF: ${activeUsers[uid].epf}<br>
            Contact: ${activeUsers[uid].contact}<br>
            Speed: ${speed} km/h<br>
            Distance: ${distance}<br>
            Battery: ${batteryLevel}%
        </div>
    `;
    
    infoWindows[uid].setContent(content);
}

function updateInfoWindowWithDistance(uid, distance) {
    if (!activeUsers[uid] || !infoWindows[uid]) return;

    const speed = window.lastKnownSpeed ? window.lastKnownSpeed[uid] : '0';
    const batteryLevel = batteryLevels[uid] || 'N/A';
    
    const content = `
        <div style="min-width: 200px;">
            <strong>${activeUsers[uid].fname} ${activeUsers[uid].lname}</strong><br>
            EPF: ${activeUsers[uid].epf}<br>
            Contact: ${activeUsers[uid].contact}<br>
            Speed: ${speed} km/h<br>
            Distance: ${distance.toFixed(2)} km<br>
            Battery: ${batteryLevel}%
        </div>
    `;
    
    infoWindows[uid].setContent(content);
}

function updateActiveUserList() {
    const userList = document.getElementById("activeUsers");
    const searchValue = document.getElementById("userSearch").value.toLowerCase();
    userList.innerHTML = "";

    Object.entries(activeUsers).forEach(([uid, user]) => {
        // Only show users from selected lab
        if (!isUserAllowed(uid)) return;
        
        const fullName = `${user.fname} ${user.lname}`.toLowerCase();
        const batteryLevel = batteryLevels[uid] || 'N/A';
        const lastSeenTime = lastUpdate[uid] ? new Date(lastUpdate[uid]).toLocaleTimeString() : 'Never';
        
        const isActive = lastUpdate[uid] && (Date.now() - lastUpdate[uid] < 30000);
        const status = isActive ? 'active' : 'inactive';
        
        const batteryClass = getBatteryClass(batteryLevel);

        if (fullName.includes(searchValue) || user.epf.toLowerCase().includes(searchValue)) {
            const li = document.createElement("li");
            li.innerHTML = `
                <button style="width:100%; text-align:left; padding:12px; border:none; background:#343a40; color:white; border-bottom:1px solid #444; cursor:pointer;">
                    <strong>${user.fname} ${user.lname}</strong><br>
                    <small style="color:#bbb;">EPF: ${user.epf}</small><br>
                    <small>Status: <span style="color:${isActive ? '#4CAF50' : '#FF5252'}">${status}</span></small><br>
                    <small>Last seen: ${lastSeenTime}</small><br>
                    <small class="battery-status ${batteryClass}">Battery: ${batteryLevel}%</small>
                </button>
            `;
            
            li.querySelector("button").addEventListener("click", () => {
                if (markers[uid]) {
                    map.panTo(markers[uid].getPosition());
                    map.setZoom(16);
                    if (infoWindows[uid]) {
                        infoWindows[uid].open(map, markers[uid]);
                    }
                }
            });
            
            userList.appendChild(li);
        }
    });
    
    updateUserCount();
}

function updateUserCount() {
    let activeCount = 0;
    Object.keys(activeUsers).forEach(uid => {
        if (isUserAllowed(uid)) activeCount++;
    });
    
    const badge = document.getElementById('userCountBadge');
    if (badge) {
        badge.textContent = activeCount;
        badge.style.backgroundColor = activeCount > 0 ? '#007bff' : '#6c757d';
    }
}

function getBatteryClass(level) {
    if (level === 'N/A') return 'battery-unknown';
    if (level < 20) return 'battery-low';
    if (level < 50) return 'battery-medium';
    return 'battery-normal';
}

function cleanupInactiveUsers() {
    const now = Date.now();
    Object.entries(lastUpdate).forEach(([uid, timestamp]) => {
        if (now - timestamp > 60000) {
            if (markers[uid]) {
                markers[uid].setIcon(ICON_CONFIG.inactive);
            }
            if (activeUsers[uid]) {
                activeUsers[uid].status = 'inactive';
            }
        }
    });
    updateActiveUserList();
}

// WebSocket Reconnection Logic
function attemptReconnect() {
    if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
        reconnectAttempts++;
        const delay = RECONNECT_DELAY * Math.min(reconnectAttempts, 5);
        
        console.log(`Attempting reconnect ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS} in ${delay/1000}s...`);
        showConnectionStatus('reconnecting');
        
        setTimeout(() => {
            console.log("Reconnecting...");
            initWebSocket();
        }, delay);
    } else {
        console.error("Max reconnection attempts reached. Please refresh the page.");
        showConnectionStatus('failed');
        showReconnectMessage();
    }
}

function showConnectionStatus(status, message = '') {
    const existingIndicator = document.getElementById('connection-status');
    if (existingIndicator) {
        existingIndicator.remove();
    }
    
    const statusIndicator = document.createElement('div');
    statusIndicator.id = 'connection-status';
    statusIndicator.style.cssText = `
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        border-radius: 5px;
        z-index: 10000;
        font-weight: bold;
        color: white;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    `;
    
    let statusText, backgroundColor, icon;
    
    switch(status) {
        case 'connected':
            statusText = message || 'Live Tracking: Connected';
            backgroundColor = '#4CAF50';
            icon = '✓';
            break;
        case 'disconnected':
            statusText = message || 'Live Tracking: Disconnected';
            backgroundColor = '#FF9800';
            icon = '↻';
            break;
        case 'reconnecting':
            statusText = message || `Live Tracking: Reconnecting (${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`;
            backgroundColor = '#FF9800';
            icon = '↻';
            break;
        case 'error':
            statusText = message || 'Live Tracking: Error';
            backgroundColor = '#F44336';
            icon = '!';
            break;
        case 'failed':
            statusText = message || 'Live Tracking: Failed - Refresh page';
            backgroundColor = '#F44336';
            icon = '✗';
            break;
        case 'loading':
            statusText = message || 'Loading...';
            backgroundColor = '#2196F3';
            icon = '⏳';
            break;
    }
    
    statusIndicator.style.backgroundColor = backgroundColor;
    statusIndicator.innerHTML = `
        <span>${icon}</span>
        <span>${statusText}</span>
    `;
    
    document.body.appendChild(statusIndicator);
    
    if (status === 'connected') {
        setTimeout(() => {
            statusIndicator.style.opacity = '0.5';
            setTimeout(() => {
                if (statusIndicator.parentNode) {
                    statusIndicator.remove();
                }
            }, 1000);
        }, 3000);
    }
}

function startRefreshAnimation() {
    const refreshBtn = document.getElementById('refreshActiveUsers');
    const sidebarBtn = document.getElementById('refreshSidebarUsers');
    
    if (refreshBtn) {
        refreshBtn.innerHTML = '🔄 Loading...';
        refreshBtn.disabled = true;
    }
    
    if (sidebarBtn) {
        sidebarBtn.innerHTML = '🔄 Loading...';
        sidebarBtn.disabled = true;
    }
}

function stopRefreshAnimation() {
    const refreshBtn = document.getElementById('refreshActiveUsers');
    const sidebarBtn = document.getElementById('refreshSidebarUsers');
    
    if (refreshBtn) {
        refreshBtn.innerHTML = '🔄 Refresh All Users';
        refreshBtn.disabled = false;
    }
    
    if (sidebarBtn) {
        sidebarBtn.innerHTML = '🔄 Refresh List';
        sidebarBtn.disabled = false;
    }
    
    isRefreshing = false;
}

function showReconnectMessage() {
    const existingMessage = document.getElementById('reconnect-message');
    if (existingMessage) {
        existingMessage.remove();
    }
    
    const message = document.createElement('div');
    message.id = 'reconnect-message';
    message.style.cssText = `
        position: fixed;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        background: #F44336;
        color: white;
        padding: 15px 20px;
        border-radius: 5px;
        z-index: 10001;
        text-align: center;
        box-shadow: 0 3px 15px rgba(0,0,0,0.3);
    `;
    
    message.innerHTML = `
        <strong>Connection Lost</strong><br>
        <small>Live tracking is unavailable. Please refresh the page.</small>
        <br>
        <button onclick="window.location.reload()" style="margin-top: 8px; padding: 5px 15px; background: white; color: #F44336; border: none; border-radius: 3px; cursor: pointer;">
            Refresh Now
        </button>
    `;
    
    document.body.appendChild(message);
}

// Event Listeners
document.getElementById("userSearch").addEventListener("input", updateActiveUserList);

document.getElementById("toggleSidebar").addEventListener("click", () => {
    const sidebar = document.getElementById("userSidebar");
    sidebar.style.right = (sidebar.style.right === "0px") ? "-300px" : "0px";
});

document.getElementById("refreshActiveUsers").addEventListener("click", () => {
    if (currentLabId) {
        fetchAllActiveUsers();
    } else {
        showConnectionStatus('error', 'Please select a lab first');
    }
});

document.getElementById("refreshSidebarUsers").addEventListener("click", () => {
    if (currentLabId) {
        fetchAllActiveUsers();
    } else {
        showConnectionStatus('error', 'Please select a lab first');
    }
});

// Handle WebSocket cleanup on page unload
window.addEventListener('beforeunload', function() {
    if (ws && ws.readyState === WebSocket.OPEN) {
        ws.close(1000, 'Page navigation');
    }
});

// Handle page visibility change (tab switch)
document.addEventListener('visibilitychange', function() {
    if (!document.hidden) {
        console.log('Page visible, refreshing data...');
        if (ws && ws.readyState !== WebSocket.OPEN) {
            initWebSocket();
        } else if (currentLabId) {
            fetchAllActiveUsers();
        }
        updateActiveUserList();
    }
});

// Initialize the map
initMap();

// Initial user list update
setInterval(updateActiveUserList, 5000);
</script>

<style>
.battery-low { color: #ff5252; font-weight: bold; }
.battery-medium { color: #ffb142; }
.battery-normal { color: #2ed573; }
.battery-unknown { color: #a0a0a0; }
</style>

<style>

/* Add smooth transition for markers */
.gmnoprint img[src*="cycling.png"] {
    transition: transform 0.3s ease;
}

/* Battery status styles */
.battery-low {
    color: #ff4757;
}

.battery-medium {
    color: #ffa502;
}

.battery-normal {
    color: #2ed573;
}

#labList li {
    padding: 5px;
    background-color: #628ECB;
    color: #fff;
}

#labList li:hover {
    background-color: #628ECB;
    color: #202528;
    /* font-weight:bold; */
}
#editlabList li {
    padding: 5px;
    background-color: #628ECB;
    color: #fff;
}

#editlabList li:hover {
    background-color: #628ECB;
    color: #202528;
    /* font-weight:bold; */
}

.lab-not-assigned {
    color: #FF0060;
    font-weight:bold;
}
.route-not-assigned {
    color: #FF0060;
    font-weight:bold;
}
/* Style the textarea */
textarea#editDescription,
#description {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    border: 1px solid #ccc;
    /* Light gray */
    border-radius: 20px;
    background-color: var(--color-white);
    /* Light background */
    resize: vertical;
    /* Allow vertical resizing only */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    transition: border-color 0.3s, box-shadow 0.3s;
    /* Smooth interaction effects */
    color: var(--color-dark);
}

/* Focus state for the textarea */
textarea#editDescription:focus {
    /* border-color: #4caf50; Green border */
    /* box-shadow: 0 0 8px rgba(76, 175, 80, 0.5); Green glow */
    border-color: #628ECB;
    outline: none;
}

/* Focus state for the textarea */
textarea#description:focus {
    /* border-color: #4caf50; Green border */
    /* box-shadow: 0 0 8px rgba(76, 175, 80, 0.5); Green glow */
    border-color: #628ECB;
    outline: none;
}

#editUserDropdown,
#userDropdown {
    background-color: var(--color-white);
    color: var(--color-dark);
}

.center-align-container {
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    /* Vertically center */
    text-align: center;
    /* Align the text in the center */
    flex-direction: column;
    /* Stack the image and text vertically */
    padding-top: 6%;
}


.content {
    margin-left: 90px;
}

.alert {
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    opacity: 0.95;
    transition: opacity 0.3s ease-in-out;
}

.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert ul {
    margin: 0;
    padding-left: 20px;
}

.alert ul li {
    list-style-type: disc;
}

/* Optional close button styles */
.alert::after {
    content: "×";
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
    color: inherit;
}

.alert:hover {
    opacity: 1;
}

.alert-success:hover {
    border-color: #98c68a;
    background-color: #c3e6cb;
}

.alert-danger:hover {
    border-color: #f1a2a5;
    background-color: #f5c6cb;
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
}


h1 {
    font-weight: 800;
    font-size: 1.8rem;
}

p {
    color: var(--color-dark-variant);
}

b {
    color: var(--color-dark);
}

.text-muted {
    color: var(--color-info-dark);
}

.container {
    display: grid;
    width: 96%;
    margin: 0 auto;
    gap: 1.8rem;
    grid-template-columns: 16rem auto 6rem;
}

main {
    margin-top: 1.4rem;
}

main .analyse {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

main .analyse>div {
    background-color: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

main .analyse>div:hover {
    box-shadow: none;
}

main .analyse>div .status {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

main .analyse h3 {
    margin-left: 0.6rem;
    font-size: 1rem;
}

main .analyse .progresss {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 50%;
}

#searchInput {
    width: 350px;
    height: 50px;
    /* margin-left: 340px; */
}

.search-container {
    margin-left: 59%;
    flex: 1;
}

/* Container for the cards */
.row {
    display: flex;
    flex-wrap: nowrap;
    /* flex-wrap: wrap; */
    /* justify-content: space-between; */
    gap: 30px;
}

.raw {
    display: flex;
    /* flex-wrap: nowrap;   */
    flex-wrap: wrap;
    /* justify-content: space-between; */
    gap: 25px;
}

/* Flex to ensure 5 cards in a row on large screens */
.col-md-4 {
    flex: 0 0 18%;
    /* Adjust to fit 5 cards */
    max-width: 18%;
    margin-bottom: 20px;
}

/* Card styles to match the fluid, gradient look */
.custom-card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--card-white);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    height: 330px;
}

.custom-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Card body content styling */
.card-body {
    text-align: center;
    padding: 30px;
    color: #464646;
    /* White text for contrast */
}

/* Title and text styles */
.card-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-dark);
}

.card-text {
    font-size: 1em;
    margin-bottom: 10px;
    color: var(--color-dark);
}



.custom-card .btn-container {
    position: relative;
    bottom: -15px;
    /* right: -2px; */
    display: flex;
}

.custom-card .btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.custom-card .btn i {
    font-size: 20px;
    color: #628ECB;

}


.custom-card .btn-container .btn.delete-btn i {
    color: #628ECB;
}


.custom-card .btn-container .btn.delete-btn:hover i,
.custom-card .btn-container .btn.edit-btn:hover i {

    transform: scale(1.05);


}

/* Wrapper around buttons for inline display */
.card-body .btn-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* pop upButton Styling */
button {
    padding: 12px 25px;
    border: none;
    border-radius: 50px;
    background-color: #628ECB;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #365485;
}

button:active {
    background-color:rgb(32, 137, 207);
}

h1 {
    margin: 0;
    font-size: 24px;
}

.popup {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 1000;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

.popup-content {
    background-color: #fff;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
    position: relative;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.glow-on-hover {
    background-color: #628ECB;
    color: white;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-radius: 30px;

}

.glow-on-hover:hover {
    background-color: #365485;

}


/* Popup styles */
.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.dark-mode-active {
    background-color: #181a1e;
    /* Dark background */
    color: #edeffd;
    /* Light text color */
}

.dark-mode-active .popup-content {
    background-color: #202528;
    /* Darker background for popup */
    color: #edeffd;
    /* Light text color for popup */
}

.dark-mode-active .form-control {
    background-color: #3c4146;
    /* Darker input background */
    color: #edeffd;
    /* Light input text */
    border: 1px solid #677483;
    /* Optional: border for inputs */
}

.dark-mode-active .form-control::placeholder {
    color: #a3bdcc;
    /* Light placeholder text color */
}

.dark-mode-active .form-check-input {
    background-color: #3c4146;
    /* Dark checkbox background */
    border: 1px solid #677483;
    /* Optional: border for checkboxes */
}



/* Popup Styling */
.popup {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: var(--color-white);
    color: var(--color-dark);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 800px;
    width: 100%;
    position: relative;
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: #333;
    cursor: pointer;
}

form {
    display: flex;
    flex-direction: column;
}

/* Input Field Styling */
input[type="text"],
input[type="password"],
input[type="email"] {
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 1rem;
    margin-bottom: 15px;
    width: 100%;
    transition: border 0.3s ease;
    background-color: var(--color-white);
    color: var(--color-dark);
}

#routeDropdown,
#editrouteDropdown {
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 1rem;
    margin-bottom: 15px;
    width: 100%;
    transition: border 0.3s ease;
    background-color: var(--color-white);
    color: var(--color-dark);
}

input:focus {
    border-color: #628ECB;
    outline: none;
}

/* Radio Button and Label */
.form-check-input {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.form-check-label {
    font-size: 0.9rem;
    color: #555;
}

    /* card view Hide scrollbar for Webkit browsers (Chrome, Safari) */
    .raw {
    max-height: 650px; 
    overflow-y: auto; 
    scrollbar-width: thin; 
    scrollbar-color: transparent transparent; 
    padding-left:7px;

}
.raw::-webkit-scrollbar {
    width: 6px;
}

.raw::-webkit-scrollbar-thumb {
    background: transparent;
}

.raw:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); 
}

/* Responsive Styling */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }

    .popup-content {
        padding: 20px;
        max-width: 90%;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"] {
        font-size: 0.9rem;
        padding: 10px 15px;
        background-color: var(--color-white);
    }

    button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

}

@media screen and (max-width: 1200px) {
    .container1 {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 var(--padding-1);
    }

    aside {
        position: fixed;
        background-color: var(--color-white);
        width: 15rem;
        z-index: 3;
        box-shadow: 1rem 3rem 4rem var(--color-light);
        height: 100vh;
        left: -100%;
        display: none;
        animation: showMenu 0.4s ease forwards;
    }

    @keyframes showMenu {
        to {
            left: 0;
        }
    }

    aside .logo {
        margin-left: 1rem;
    }

    aside .logo h2 {
        display: inline;
    }

    aside .sidebar h3 {
        display: inline;
    }

    aside .sidebar a {
        width: 100%;
        height: 3.4rem;
    }

    aside .sidebar a:last-child {
        position: absolute;
        bottom: 5rem;
    }

    aside .toggle .close {
        display: inline-block;
        cursor: pointer;
    }

    main {
        margin-top: 8rem;
        padding: 0 1rem;
    }

    main .new-users .user-list .user {
        flex-basis: 35%;
    }

    main .recent-orders {
        position: relative;
        margin: 3rem 0 0 0;
        width: 100%;
    }

    main .recent-orders table {
        width: 100%;
        margin: 0;
    }

    .right-section1 {
        width: 94%;
        margin: 0 auto 4rem;
    }

    .right-section .nav {
        position: fixed;
        top: 0;
        left: 0;
        align-items: center;
        background-color: var(--color-white);
        padding: 0 var(--padding-1);
        height: 4.6rem;
        width: 100%;
        z-index: 2;
        box-shadow: 0 1rem 1rem var(--color-light);
        margin: 0;
    }

    .right-section .nav .dark-mode {
        width: 4.4rem;
        position: absolute;
        left: 66%;
    }

    .right-section .profile .info {
        display: none;
    }

    .right-section .nav button {
        display: inline-block;
        background-color: transparent;
        cursor: pointer;
        color: var(--color-dark);
        position: absolute;
        left: 1rem;
    }

    .right-section .nav button span {
        font-size: 2rem;
    }


}

@media screen and (max-width: 768px) {
    .container1 {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 var(--padding-1);
    }


    .row {
        display: flex;
        flex-wrap: nowrap;
        /* flex-wrap: wrap; */
        /* justify-content: space-between; */
        gap: 10px;
    }

    #searchInput {
        width: 230px;
    }

    aside {
        position: fixed;
        background-color: var(--color-white);
        width: 15rem;
        z-index: 3;
        box-shadow: 1rem 3rem 4rem var(--color-light);
        height: 100vh;
        left: -100%;
        display: none;
        animation: showMenu 0.4s ease forwards;
    }

    @keyframes showMenu {
        to {
            left: 0;
        }
    }

    main {
        margin-top: 8rem;
        padding: 0 1rem;
    }

    main .new-users .user-list .user {
        flex-basis: 35%;
    }

    main .recent-orders {
        position: relative;
        margin: 3rem 0 0 0;
        width: 100%;
    }

    main .recent-orders table {
        width: 100%;
        margin: 0;
    }

    .right-section1 {
        width: 94%;
        margin: 0 auto 4rem;
    }

    .right-section .nav {
        position: fixed;
        top: 0;
        left: 0;
        align-items: center;
        background-color: var(--color-white);
        padding: 0 var(--padding-1);
        height: 4.6rem;
        width: 100%;
        z-index: 2;
        box-shadow: 0 1rem 1rem var(--color-light);
        margin: 0;
    }

    .right-section .nav .dark-mode {
        width: 4.4rem;
        position: absolute;
        left: 66%;
    }

    .right-section .profile .info {
        display: none;
    }

    .right-section .nav button {
        display: inline-block;
        background-color: transparent;
        cursor: pointer;
        color: var(--color-dark);
        position: absolute;
        left: 1rem;
    }

    .right-section .nav button span {
        font-size: 2rem;
    }

    .raw {
        display: flex;
        /* flex-wrap: nowrap;   */
        flex-wrap: wrap;
        /* justify-content: space-between; */
        gap: 30px;
    }

}

@media screen and (max-width: 480px) {
    .container1 {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 var(--padding-1);
    }

    aside {
        position: fixed;
        background-color: var(--color-white);
        width: 15rem;
        z-index: 3;
        box-shadow: 1rem 3rem 4rem var(--color-light);
        height: 100vh;
        left: -100%;
        display: none;
        animation: showMenu 0.4s ease forwards;
    }

    @keyframes showMenu {
        to {
            left: 0;
        }
    }

    main {
        margin-top: 8rem;
        padding: 0 1rem;
    }

    main .new-users .user-list .user {
        flex-basis: 35%;
    }

    main .recent-orders {
        position: relative;
        margin: 3rem 0 0 0;
        width: 100%;
    }

    main .recent-orders table {
        width: 100%;
        margin: 0;
    }

    .right-section1 {
        width: 94%;
        margin: 0 auto 4rem;
    }

    .right-section .nav {
        position: fixed;
        top: 0;
        left: 0;
        align-items: center;
        background-color: var(--color-white);
        padding: 0 var(--padding-1);
        height: 4.6rem;
        width: 100%;
        z-index: 2;
        box-shadow: 0 1rem 1rem var(--color-light);
        margin: 0;
    }

    .right-section .nav .dark-mode {
        width: 4.4rem;
        position: absolute;
        left: 66%;
    }

    .right-section .profile .info {
        display: none;
    }

    .right-section .nav button {
        display: inline-block;
        background-color: transparent;
        cursor: pointer;
        color: var(--color-dark);
        position: absolute;
        left: 5rem;
    }

    .right-section .nav button span {
        font-size: 2rem;
    }

    .search-container {
        margin-left: 59%;
        flex: 1;
    }
}

@media screen and (max-width: 1200px) {
    .container {
        width: 95%;
        grid-template-columns: 7rem auto 23rem;
    }

    main .analyse {
        grid-template-columns: 1fr;
        gap: 0;
    }

    main .new-users .user-list .user {
        flex-basis: 40%;
    }

    main .recent-orders {
        width: 94%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 2rem 0 0 0.8rem;
    }

    main .recent-orders table {
        width: 83vw;
    }

    main table thead tr th:last-child,
    main table thead tr th:first-child {
        display: none;
    }

    main table tbody tr td:last-child,
    main table tbody tr td:first-child {
        display: none;
    }

    .search-container {
        margin-left: 59%;
        flex: 1;
    }

    .row {
        display: flex;
        flex-wrap: nowrap;
        /* flex-wrap: wrap; */
        /* justify-content: space-between; */
        gap: 20px;
    }

}

@media screen and (max-width: 768px) {
    .container {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 var(--padding-1);
    }

    main {
        margin-top: 8rem;
        padding: 0 1rem;
    }

    .search-container {
        margin-left: 5%;
        flex: 1;
    }

    .row {
        display: flex;
        flex-wrap: nowrap;
        /* flex-wrap: wrap; */
        /* justify-content: space-between; */
        gap: 10px;
    }

    /* Centering Button for Mobile View */
    .text-center {
        text-align: center;
        margin-bottom: 20px;
    }

}

/* Base styles (already defined) */
@media screen and (max-width: 1200px) {
    .container {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 0 var(--padding-1);
    }

    main {
        margin-top: 8rem;
        padding: 0 1rem;
    }

    .search-container {
        margin-left: 5%;
        flex: 1;
    }

    .row {
        display: flex;
        flex-wrap: nowrap;
        /* flex-wrap: wrap; */
        /* justify-content: space-between; */
        gap: 10px;
    }

    /* Centering Button for Mobile View */
    .text-center {
        text-align: center;
        margin-bottom: 20px;
    }

}

/* Media Queries for Responsive Design */

/* For Extra Large Screens (1200px and above) */
@media (min-width: 1200px) {
    .col-md-4 {
        flex: 0 0 18%;
        /* Fits 5 cards in a row */
        max-width: 18%;
    }

    .card-title {
        font-size: 1.3em;
        /* Slightly larger titles */
    }
}

/* For Large Screens (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .col-md-4 {
        flex: 0 0 23%;
        /* Fits 4 cards in a row */
        max-width: 23%;
    }

    .search-container {
        margin-left: 50%;
        /* Adjust search bar alignment */
    }

    .card-title {
        font-size: 1.3em;
        /* Slightly larger titles */
    }
}

/* For Medium Screens (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .col-md-4 {
        flex: 0 0 30%;
        /* Fits 3 cards in a row */
        max-width: 30%;
    }

    .row {
        gap: 20px;
        /* Reduce gap between cards */
    }

    .search-container {
        margin-left: 40%;
        /* Adjust search bar alignment */
    }

    #searchInput {
        width: 300px;
        /* Smaller search input */
    }

    .custom-card {
        height: 360px;
    }

    .card-title {
        font-size: 1.3em;
        /* Slightly larger titles */
    }
}

/* For Small Screens (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .col-md-4 {
        flex: 0 0 45%;
        /* Fits 2 cards in a row */
        max-width: 45%;
    }

    .row {
        gap: 15px;
        /* Reduce gap further */
    }

    .search-container {
        margin-left: 20%;
        /* Center search bar */
    }

    #searchInput {
        width: 250px;
        /* Smaller search input */
        height: 45px;
    }

    .card-title {
        font-size: 1.3em;
        /* Slightly larger titles */
    }

}

/* For Extra Small Screens (up to 575px) */
@media (max-width: 575px) {
    .col-md-4 {
        flex: 0 0 90%;
        /* Full-width cards */
        max-width: 90%;
    }

    .row {
        gap: 10px;
        /* Minimal gap */
        flex-direction: column;
        /* Stack cards vertically */
    }

    .search-container {
        margin-left: 0;
        text-align: center;
        /* Center the search bar */
    }

    #searchInput {
        width: 90%;
        /* Full-width search input */
        height: 40px;
    }

    .card-body {
        padding: 20px;
        /* Reduce padding for smaller screens */
    }

    .card-title {
        font-size: 1.3em;
        /* Smaller font size */
    }

    .card-text {
        font-size: 1em;
        /* Smaller font size */
    }

    .custom-card {
        /* border: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background-color: var(--card-white);
            border-radius: var(--card-border-radius);
            box-shadow: var(--box-shadow); */
        height: 250px;
    }
}

@media (min-width: 849px) and (max-width: 1301px) {

    /* Card Layout Adjustments */
    .col-md-4 {
        flex: 0 0 27%;
        /* Adjust to fit 4-5 cards per row depending on screen size */
        max-width: 27%;
    }

    .row {
        gap: 20px;
        /* Adjust the spacing between cards */
    }

    /* Search Bar Adjustments */
    .search-container {
        margin-left: 25%;
        /* Adjust alignment for this screen size */
    }

    #searchInput {
        width: 300px;
        /* Slightly smaller search input */
        height: 45px;
    }

    /* Card Content Adjustments */
    .card-body {
        padding: 25px;
        /* Adjust padding for better spacing */
    }

    .card-title {
        font-size: 1.3em;
        /* Slightly smaller font size for titles */
    }

    .card-text {
        font-size: 1em;
        /* Slightly smaller font size for text */
    }

    /* Button Adjustments */
    .custom-card .btn i {
        font-size: 18px;
        /* Adjust icon size */
    }

    .custom-card {
        height: 370px;
    }
}

@media (min-width: 1300px) and (max-width: 1588px) {

    /* Adjust card layout for the specific screen size */
    .col-md-4 {
        flex: 0 0 21%;
        /* Fits 5 cards per row */
        max-width: 21%;
    }

    .row {
        gap: 30px;
        /* Maintain consistent spacing between cards */
    }

    /* Search Bar Adjustments */
    .search-container {
        margin-left: 50%;
        /* Center the search bar for this width */
    }

    #searchInput {
        width: 350px;
        /* Standard size for search input */
        height: 50px;
    }

    /* Card Styling */
    .card-body {
        padding: 30px;
        /* Ample padding for better readability */
    }

    .card-title {
        font-size: 1.3em;
        /* Slightly larger titles */
    }

    .card-text {
        font-size: 1em;
        /* Slightly larger text for better readability */
    }

    /* Buttons and Icons */
    .custom-card .btn i {
        font-size: 20px;
        /* Larger icons to match screen size */
    }

    /* Reduce the gap between buttons inside cards */
    .card-body .btn-container {
        gap: 15px;
    }

    .custom-card {
        height: 390px;
    }
}
@media screen and (max-height: 800px) {
aside .sidebar a {   
    height: 3rem;  
}
}

/* @media screen and (max-height: 800px) {
aside .sidebar a {   
    height: 2.7rem;  
}
} */
@media screen and (max-height: 600px) {
aside .sidebar a {   
    height: 2.3rem;  
}
}
</style>
@endsection