@extends('Superadmin.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:300px; height:100vh; background:#212529; color:white; position:fixed; top:0; right:-300px; 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;">Active Users</h4>
        
        <!-- User Count Badge -->
        <div id="userCountBadge" style="position:absolute; top:10px; right:10px; background:#007bff; color:white; padding:2px 8px; border-radius:10px; font-size:12px;">
            0
        </div>
        
        <!-- Search Box -->
        <div style="padding:10px; background:#2c2f33;">
            <input type="text" id="userSearch" placeholder="Search user..." 
                   style="width:100%; padding:8px; border-radius:5px; border:none; outline:none;"/>
        </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; 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;

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

// 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();
    
    // Initialize WebSocket connection
    initWebSocket();
    
    // Set up periodic cleanup
    setInterval(cleanupInactiveUsers, 30000);
    
    // Auto-refresh users when page loads (after 1 second delay)
    setTimeout(() => {
        fetchAllActiveUsers();
    }, 1000);
}

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; // Reset reconnect attempts
        
        // Request initial active users data
        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} active users`);
                Object.values(data.users).forEach(userData => {
                    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
                Object.values(data.users).forEach(userData => {
                    processUserData(userData);
                });
                
                updateUserCount();
                
                showConnectionStatus('connected', `Loaded ${Object.keys(data.users).length} active users`);
                
                // Auto-hide success message after 3 seconds
                setTimeout(() => {
                    const statusIndicator = document.getElementById('connection-status');
                    if (statusIndicator) {
                        statusIndicator.style.opacity = '0.5';
                        setTimeout(() => {
                            if (statusIndicator.parentNode) {
                                statusIndicator.remove();
                            }
                        }, 1000);
                    }
                }, 3000);
                
                // Stop refreshing animation
                stopRefreshAnimation();
                return;
            }
            
            // Handle regular location updates
            if (data.uid && data.lat && data.lng) {
                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');
    };
}

// Request initial data from WebSocket server
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');
    }
}

// Request active users data from WebSocket 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;
}

// Fetch all active users (via WebSocket)
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...');
    
    // Try WebSocket first
    const wsSuccess = requestActiveUsers();
    
    // If WebSocket not available or fails, show error
    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
                }));

                // Update the polyline with snapped path
                userPaths[uid].snappedPath.setPath(newSnappedPath);
                userPaths[uid].snappedPath.setOptions({
                    strokeColor: isTraveling ? '#FF0000' : '#9E9E9E',
                    visible: true
                });

                // Calculate distance on actual roads
                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(`/superadmin/user/${uid}`)
        .then(response => response.json())
        .then(user => {
            if (user) {
                activeUsers[uid] = user;
                fetchBatteryLevel(uid, speed);
            }
        })
        .catch(error => console.error('Error fetching user details:', error));
}

function fetchBatteryLevel(uid, speed) {
    fetch(`/superadmin/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(`/superadmin/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]) => {
        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() {
    const activeCount = Object.keys(activeUsers).length;
    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); // Exponential backoff
        
        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');
        
        // Show a user-friendly message
        showReconnectMessage();
    }
}

function showConnectionStatus(status, message = '') {
    // Remove any existing status indicator
    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 active users...';
            backgroundColor = '#2196F3';
            icon = '⏳';
            break;
    }
    
    statusIndicator.style.backgroundColor = backgroundColor;
    statusIndicator.innerHTML = `
        <span>${icon}</span>
        <span>${statusText}</span>
    `;
    
    document.body.appendChild(statusIndicator);
    
    // Auto-hide success message after 3 seconds
    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() {
    // Remove existing message
    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";
});

// Refresh button event listeners
document.getElementById("refreshActiveUsers").addEventListener("click", () => {
    fetchAllActiveUsers();
});

document.getElementById("refreshSidebarUsers").addEventListener("click", () => {
    fetchAllActiveUsers();
});

// 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) {
        // Page is hidden, pause heavy updates if needed
        console.log('Page hidden, pausing animations...');
    } else {
        // Page is visible again, refresh data
        console.log('Page visible, refreshing data...');
        if (ws && ws.readyState !== WebSocket.OPEN) {
            initWebSocket();
        } else {
            // If WebSocket is connected, refresh active users
            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