<?php
session_start();
require 'config.php';  // ملف الاتصال بقاعة البيانات
// تم نقل ضبط الترميز إلى config.php ليكون شاملاً

// التأكد من أن نوع المحتوى هو HTML مع ترميز UTF-8
header('Content-Type: text/html; charset=UTF-8');

//------------------------------------------------------
// [0] صفحة المشاركة العامة - متاحة بدون تسجيل دخول
//------------------------------------------------------
if (isset($_GET['share']) && isset($_GET['device_id']) && isset($_GET['expires']) && isset($_GET['device_name'])) {
    $device_id   = trim($_GET['device_id']);
    $device_name = $_GET['device_name'];
    $expires     = $_GET['expires'];
    ?>
    <!DOCTYPE html>
    <html lang="ar">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>عرض الموقع المشترك</title>
      <style>
        body {
          font-family: Arial, sans-serif;
          margin: 0; 
          padding: 0;
          background-color: #121212; 
          color: #e0e0e0;
          text-align: center;
        }
        .header {
          background: #007BFF;
          padding: 15px;
          font-size: 20px;
          font-weight: bold;
          color: #fff;
        }
        #sharedMap {
          height: 600px;
          width: 100%;
          margin-top: 20px;
        }
      </style>
      <script>
        let sharedMap;
        let sharedMarker = null;

        function initSharedMap() {
          const shareExpires = <?php echo json_encode($expires); ?>;
          const deviceId     = <?php echo json_encode($device_id); ?>;
          const deviceName   = <?php echo json_encode($device_name); ?>;
          let sharedMapUserInteracted = false; // لتتبع تفاعل المستخدم مع خريطة المشاركة

          sharedMap = new google.maps.Map(document.getElementById('sharedMap'), {
            center: { lat: 33.3152, lng: 44.3661 }, // بغداد كقيمة ابتدائية
            zoom: 6,
            mapTypeControl: false,
            streetViewControl: false
          });

          // تتبع تفاعل المستخدم مع خريطة المشاركة لمنع إعادة التمركز التلقائي
          sharedMap.addListener('dragend', () => {
            sharedMapUserInteracted = true;
          });
          
          sharedMap.addListener('zoom_changed', () => {
            sharedMapUserInteracted = true;
          });

          function fetchSharedLocation() {
            if (Date.now() > shareExpires) {
              alert("انتهت صلاحية مشاركة الموقع.");
              return;
            }

            fetch("get_latest_location.php?device_id=" + encodeURIComponent(deviceId) + "&t=" + Date.now())
              .then(res => res.json())
              .then(data => {
                if (data.status === "success") {
                  const lat      = parseFloat(data.data.latitude);
                  const lng      = parseFloat(data.data.longitude);
                  const battery  = data.data.battery;
                  const rawTime  = data.data.timestamp || data.data.time || "";
                  const timeText = rawTime ? rawTime : "غير معروف";

                  if (!isNaN(lat) && !isNaN(lng)) {
                    const position = { lat: lat, lng: lng };

                    if (!sharedMarker) {
                      sharedMarker = new google.maps.Marker({
                        position,
                        map: sharedMap
                      });
                    } else {
                      sharedMarker.setPosition(position);
                    }

                    const content =
                      "<div style='min-width:190px;text-align:right;direction:rtl;font-size:13px;line-height:1.6;'>" +
                        "<div style='display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-bottom:4px;'>" +
                          "<span style='font-size:16px;'>📍</span>" +
                          "<span style='font-weight:600;'>موقع الجهاز</span>" +
                        "</div>" +
                        "<div style='font-weight:600;color:#111;'>" + deviceName + "</div>" +
                        "<div style='color:#444;'>الوقت: " + timeText + "</div>" +
                        "<div style='color:#444;'>البطارية: " + (battery ? battery + "%" : "غير معروفة") + "</div>" +
                        "<hr style='margin:6px 0;border:none;border-top:1px solid #ddd;'/>" +
                        "<div style='display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;'>" +
                          "<a href='https://www.google.com/maps/dir/?api=1&destination=" + lat + "," + lng + "' " +
                             "target='_blank' " +
                             "style='padding:4px 8px;border-radius:4px;background:#4285F4;color:#fff;text-decoration:none;font-size:12px;'>خرائط جوجل</a>" +
                          "<a href='https://waze.com/ul?ll=" + lat + "," + lng + "&navigate=yes' " +
                             "target='_blank' " +
                             "style='padding:4px 8px;border-radius:4px;background:#05C8F7;color:#fff;text-decoration:none;font-size:12px;'>Waze</a>" +
                          "<a href='https://www.google.com/maps/search/?api=1&query=" + lat + "," + lng + "' " +
                             "target='_blank' " +
                             "style='padding:4px 8px;border-radius:4px;background:#34A853;color:#fff;text-decoration:none;font-size:12px;'>عرض على الخريطة</a>" +
                        "</div>" +
                      "</div>";

                    const infoWindow = new google.maps.InfoWindow({ content });
                    infoWindow.open(sharedMap, sharedMarker);
                    
                    // فقط تمركز الخريطة إذا لم يقم المستخدم بتحريكها يدوياً
                    // هذا يمنع إعادة التمركز التلقائي عندما يحاول المستخدم استكشاف الخريطة
                    if (!sharedMapUserInteracted) {
                      sharedMap.setCenter(position);
                      sharedMap.setZoom(15);
                    }
                  }
                }
              })
              .catch(err => console.error("⚠️ خطأ في جلب الموقع:", err));
          }

          fetchSharedLocation();
          setInterval(fetchSharedLocation, 10000);
        }
      </script>
      <script>
        // معالج خطأ تحميل خرائط Google للصفحة المشتركة
        window.gm_authFailure = function() {
          const mapContainer = document.getElementById('sharedMap');
          if (mapContainer) {
            mapContainer.innerHTML = `
              <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #f5f5f5; padding: 20px; text-align: center; direction: rtl;">
                <div style="font-size: 48px; margin-bottom: 20px;">⚠️</div>
                <h2 style="color: #d32f2f; margin-bottom: 15px;">تعذّر تحميل خرائط Google</h2>
                <p style="color: #666; margin-bottom: 10px;">يرجى التحقق من مفتاح API وإعدادات Google Cloud Console</p>
                <a href="https://console.cloud.google.com/google/maps-apis" target="_blank" 
                   style="padding: 10px 20px; background: #4285F4; color: white; text-decoration: none; border-radius: 4px; margin-top: 10px;">
                  فتح Google Cloud Console
                </a>
              </div>
            `;
          }
          alert('⚠️ خطأ في تحميل خرائط Google. تحقق من مفتاح API وقيود النطاق.');
        };
      </script>
      <script src="https://maps.googleapis.com/maps/api/js?key=<?php echo urlencode($google_maps_api_key); ?>&callback=initSharedMap&language=ar" async defer></script>
    </head>
    <body>
      <div class="header">
        عرض الموقع المشترك للجهاز: <?php echo htmlspecialchars($device_name, ENT_QUOTES, 'UTF-8'); ?>
      </div>
      <div id="sharedMap"></div>
    </body>
    </html>
    <?php
    exit;
}

//------------------------------------------------------
// معالجة طلبات تحديث الموقع من التطبيق
//------------------------------------------------------
if (isset($_GET['action']) && $_GET['action'] === 'update_location') {
    // إعادة توجيه الطلب إلى add_location.php
    include 'add_location.php';
    exit;
}

//------------------------------------------------------
// معالجة طلبات AJAX لمزامنة الأجهزة الجديدة (في الخلفية)
//------------------------------------------------------
// Handle Live Location requests
if (isset($_GET['action']) && $_GET['action'] === 'request_live_location' && isset($_GET['device_id'])) {
    header('Content-Type: application/json; charset=UTF-8');
    
    // Check session (but don't block if session check fails - allow for testing)
    if (!isset($_SESSION['user_id'])) {
        // Try to start session if not started
        if (session_status() === PHP_SESSION_NONE) {
            session_start();
        }
    }
    
    require_once 'firebase_service.php';
    
    $device_id = trim($_GET['device_id']);
    $duration = isset($_GET['duration']) ? (int)$_GET['duration'] : 60; // Default 60 seconds
    
    if (empty($device_id)) {
        echo json_encode(['status' => 'error', 'message' => '❌ معرف الجهاز غير صالح']);
        exit;
    }
    
    // Check if Firebase is enabled
    if (!defined('USE_FIREBASE') || !USE_FIREBASE) {
        echo json_encode(['status' => 'error', 'message' => '❌ Firebase غير مفعّل']);
        exit;
    }
    
    // Initialize Firebase if not already initialized
    if (!FirebaseService::testConnection()) {
        // Get Firebase settings from config.php variables
        global $firebase_project_id, $firebase_api_key, $firebase_database_url;
        if (isset($firebase_project_id) && isset($firebase_api_key)) {
            FirebaseService::initialize($firebase_project_id, $firebase_api_key, $firebase_database_url ?? null);
        } else {
            echo json_encode(['status' => 'error', 'message' => '❌ إعدادات Firebase غير موجودة']);
            exit;
        }
    }
    
    // Create live location request
    $success = FirebaseService::requestLiveLocation($device_id, $duration);
    
    if ($success) {
        echo json_encode(['status' => 'success', 'message' => '✅ تم إنشاء طلب لايف لوكيشن بنجاح']);
    } else {
        echo json_encode(['status' => 'error', 'message' => '❌ فشل إنشاء طلب لايف لوكيشن']);
    }
    exit;
}

if (isset($_GET['action']) && $_GET['action'] === 'stop_live_location' && isset($_GET['device_id'])) {
    header('Content-Type: application/json; charset=UTF-8');
    
    // Check session (but don't block if session check fails - allow for testing)
    if (!isset($_SESSION['user_id'])) {
        // Try to start session if not started
        if (session_status() === PHP_SESSION_NONE) {
            session_start();
        }
    }
    
    require_once 'firebase_service.php';
    
    $device_id = trim($_GET['device_id']);
    
    if (empty($device_id)) {
        echo json_encode(['status' => 'error', 'message' => '❌ معرف الجهاز غير صالح']);
        exit;
    }
    
    // Check if Firebase is enabled
    if (!defined('USE_FIREBASE') || !USE_FIREBASE) {
        echo json_encode(['status' => 'error', 'message' => '❌ Firebase غير مفعّل']);
        exit;
    }
    
    // Initialize Firebase if not already initialized
    if (!FirebaseService::testConnection()) {
        // Get Firebase settings from config.php variables
        global $firebase_project_id, $firebase_api_key, $firebase_database_url;
        if (isset($firebase_project_id) && isset($firebase_api_key)) {
            FirebaseService::initialize($firebase_project_id, $firebase_api_key, $firebase_database_url ?? null);
        } else {
            echo json_encode(['status' => 'error', 'message' => '❌ إعدادات Firebase غير موجودة']);
            exit;
        }
    }
    
    // Stop live location request
    $success = FirebaseService::stopLiveLocation($device_id);
    
    if ($success) {
        echo json_encode(['status' => 'success', 'message' => '✅ تم إيقاف لايف لوكيشن بنجاح']);
    } else {
        echo json_encode(['status' => 'error', 'message' => '❌ فشل إيقاف لايف لوكيشن']);
    }
    exit;
}

if (isset($_GET['action']) && $_GET['action'] === 'sync_new_devices' && isset($_SESSION['user_id'])) {
    header('Content-Type: application/json; charset=UTF-8');
    
    try {
        if (defined('USE_FIREBASE') && USE_FIREBASE) {
            // ✅ جلب من Firebase
            require_once __DIR__ . '/firebase_service.php';
            $firebaseDevices = FirebaseService::getAllDevices(false);
            $sourceDeviceIds = array_column($firebaseDevices, 'device_id');
            
            if (empty($sourceDeviceIds)) {
                echo json_encode(['status' => 'success', 'message' => 'لا توجد أجهزة في Firebase', 'added' => 0]);
                exit;
            }
            
            $getDeviceName = function($deviceId) {
                return FirebaseService::getDeviceName($deviceId);
            };
        } else {
            // ✅ جلب من قاعدة البيانات (جدول locations)
            $stmtLocations = $conn->query("
                SELECT l.device_id, 
                    (SELECT COALESCE(NULLIF(TRIM(device_name), ''), device_id) FROM locations l2 
                     WHERE l2.device_id = l.device_id 
                     ORDER BY timestamp DESC LIMIT 1) as device_name
                FROM locations l
                WHERE l.device_id IS NOT NULL AND l.device_id <> ''
                GROUP BY l.device_id
            ");
            $locationsDevices = [];
            while ($row = $stmtLocations->fetch(PDO::FETCH_ASSOC)) {
                $locationsDevices[$row['device_id']] = ($row['device_name'] && $row['device_name'] !== 'Unknown Device') ? $row['device_name'] : $row['device_id'];
            }
            $sourceDeviceIds = array_keys($locationsDevices);
            
            if (empty($sourceDeviceIds)) {
                echo json_encode(['status' => 'success', 'message' => 'لا توجد أجهزة في جدول المواقع', 'added' => 0]);
                exit;
            }
            
            $getDeviceName = function($deviceId) use ($locationsDevices) {
                return $locationsDevices[$deviceId] ?? $deviceId;
            };
        }
        
        // ✅ جلب الأجهزة الموجودة في MySQL
        $placeholders = str_repeat('?,', count($sourceDeviceIds) - 1) . '?';
        $stmtExisting = $conn->prepare("SELECT device_id FROM devices WHERE device_id IN ($placeholders)");
        $stmtExisting->execute($sourceDeviceIds);
        $existingDeviceIds = [];
        while ($row = $stmtExisting->fetch(PDO::FETCH_ASSOC)) {
            $existingDeviceIds[] = $row['device_id'];
        }
        
        // ✅ تحديد الأجهزة الجديدة فقط
        $newDeviceIds = array_diff($sourceDeviceIds, $existingDeviceIds);
        
        if (empty($newDeviceIds)) {
            echo json_encode(['status' => 'success', 'message' => 'جميع الأجهزة موجودة', 'added' => 0]);
            exit;
        }
        
        // ✅ إضافة أول 5 أجهزة فقط (للسرعة)
        $devicesToProcess = array_slice($newDeviceIds, 0, 5);
        $added = 0;
        
        foreach ($devicesToProcess as $deviceId) {
            $deviceName = $getDeviceName($deviceId);
            
            if ($deviceName && 
                $deviceName !== 'Unknown Device' && 
                $deviceName !== $deviceId) {
                try {
                    $insertStmt = $conn->prepare("
                        INSERT INTO devices (device_id, device_name, status) 
                        VALUES (?, ?, 'active')
                    ");
                    $insertStmt->execute([$deviceId, $deviceName]);
                    $added++;
                } catch (PDOException $e) {
                    // تجاهل الأخطاء (مثل التكرار)
                }
            }
        }
        
        $sourceName = (defined('USE_FIREBASE') && USE_FIREBASE) ? 'Firebase' : 'قاعدة البيانات';
        echo json_encode([
            'status' => 'success', 
            'message' => "تمت إضافة {$added} جهاز جديد من {$sourceName}",
            'added' => $added,
            'remaining' => count($newDeviceIds) - count($devicesToProcess)
        ], JSON_UNESCAPED_UNICODE);
        
    } catch (Exception $e) {
        echo json_encode(['status' => 'error', 'message' => $e->getMessage()], JSON_UNESCAPED_UNICODE);
    }
    
    exit;
}

// تم تعطيل التحقق التلقائي من الأجهزة الجديدة لتجنب إعادة تحميل الصفحة المستمرة
// يمكن تحديث قائمة الأجهزة يدوياً عبر تحديث الصفحة

//------------------------------------------------------
// التحقق من تسجيل الدخول
//------------------------------------------------------
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}

$user_id   = $_SESSION['user_id'];
$user_role = $_SESSION['role'] ?? 'user'; // قد يكون 'admin' أو 'user'

// التأكد من تهيئة device_cache_timestamp
if (!isset($_SESSION['device_cache_timestamp'])) {
    $_SESSION['device_cache_timestamp'] = 0; // آخر وقت تحديث للكاش
}

// تهيئة متغيرات التخزين المؤقت للبيانات إذا لم تكن موجودة
if (!isset($_SESSION['device_data_needs_refresh'])) {
    $_SESSION['device_data_needs_refresh'] = true; // تحتاج إلى تحديث في المرة الأولى
}
if (!isset($_SESSION['device_data_cache'])) {
    $_SESSION['device_data_cache'] = [];
    $_SESSION['device_data_needs_refresh'] = true; // تحتاج إلى تحديث إذا كان الكاش فارغًا
}

// ✅ إجبار تحديث الكاش عند استخدام Firebase (لضمان جلب البيانات من Firebase وليس MySQL)
if (defined('USE_FIREBASE') && USE_FIREBASE) {
    // إذا كان الكاش من MySQL (الطريقة القديمة)، نحتاج لتحديثه من Firebase
    if (isset($_SESSION['device_data_cache']['firebase_mode']) && 
        $_SESSION['device_data_cache']['firebase_mode'] !== true) {
        $_SESSION['device_data_needs_refresh'] = true;
    }
    // إذا لم يكن هناك كاش على الإطلاق، نحتاج لتحديثه
    if (empty($_SESSION['device_data_cache'])) {
        $_SESSION['device_data_needs_refresh'] = true;
    }
}

// التحقق من وجود أجهزة جديدة بناءً على آخر timestamp في قاعدة البيانات
function checkForNewDevices($conn, $lastCacheTime) {
    $stmt = $conn->prepare("SELECT COUNT(DISTINCT device_id) as device_count, MAX(timestamp) as latest_timestamp FROM locations WHERE timestamp > ?");
    $stmt->execute([date('Y-m-d H:i:s', $lastCacheTime)]);
    $result = $stmt->fetch(PDO::FETCH_ASSOC);
    return $result['device_count'] > 0;
}

// ✅ دالة مساعدة لإغلاق الاتصال قبل إعادة التوجيه
function closeDbAndRedirect($url) {
    if (isset($GLOBALS['dbInstance']) && method_exists($GLOBALS['dbInstance'], 'closeConnection')) {
        try {
            $GLOBALS['dbInstance']->closeConnection();
        } catch (Exception $e) {
            // تجاهل الأخطاء
        }
    }
    header("Location: " . $url);
    exit;
}

// ✅ تحديث يدوي للقائمة عند الضغط على زر التحديث
if (isset($_GET['refresh_devices'])) {
    $_SESSION['device_data_needs_refresh'] = true;
    $_SESSION['device_cache_timestamp'] = 0; // إعادة تعيين timestamp لإجبار التحديث
    // إعادة التوجيه بدون المعامل لتجنب إعادة التحديث عند تحديث الصفحة
    header("Location: " . str_replace('?refresh_devices=1', '', $_SERVER['REQUEST_URI']));
    exit;
}

// التحقق من ملف الإشارة للأجهزة الجديدة (فوري)
$new_device_flag_file = 'new_device_flag.txt';
if (file_exists($new_device_flag_file)) {
    $flag_time = (int)file_get_contents($new_device_flag_file);
    if (isset($_SESSION['device_cache_timestamp']) && $flag_time > $_SESSION['device_cache_timestamp']) {
        $_SESSION['device_data_needs_refresh'] = true;
        $_SESSION['device_cache_timestamp'] = $flag_time;
        // حذف ملف الإشارة بعد المعالجة
        unlink($new_device_flag_file);
    }
}

// ✅ التحقق من ملفات flag لتحديث أسماء الأجهزة
$cacheFlagsDir = __DIR__ . '/cache_flags';
if (is_dir($cacheFlagsDir)) {
    $flagFiles = glob($cacheFlagsDir . '/device_name_updated_*.flag');
    foreach ($flagFiles as $flagFile) {
        if (file_exists($flagFile)) {
            $flag_time = filemtime($flagFile);
            if (isset($_SESSION['device_cache_timestamp']) && $flag_time > $_SESSION['device_cache_timestamp']) {
                $_SESSION['device_data_needs_refresh'] = true;
                $_SESSION['device_cache_timestamp'] = $flag_time;
                // حذف ملف flag بعد استخدامه
                @unlink($flagFile);
            }
        }
    }
}

// ✅ تحسين كبير: زيادة مدة الكاش إلى 30 دقيقة لتقليل الطلبات إلى Firebase
// التحقق التلقائي من الأجهزة الجديدة كل 30 دقيقة (احتياطي)
if (!isset($_SESSION['device_cache_timestamp']) || (time() - $_SESSION['device_cache_timestamp'] > 1800)) { // 30 دقيقة
    if (checkForNewDevices($conn, $_SESSION['device_cache_timestamp'])) {
        $_SESSION['device_data_needs_refresh'] = true;
    }
    $_SESSION['device_cache_timestamp'] = time();
}


//----------------------------------------------------------------------------------
// [1] منطق إنشاء المجموعات وإدارتها (Admin فقط)
//----------------------------------------------------------------------------------
if ($user_role === 'admin') {

    // إنشاء مجموعة جديدة
    if (isset($_POST['create_group']) && !empty($_POST['group_name'])) {
        $group_name = trim($_POST['group_name']);
        if (!empty($group_name)) {
            $stmt = $conn->prepare("INSERT INTO device_groups (group_name) VALUES (?)");
            $stmt->execute([$group_name]);
            $_SESSION['device_data_needs_refresh'] = true; // تحديث الكاش
            // ✅ إغلاق الاتصال بعد العملية
            if (isset($GLOBALS['dbInstance']) && method_exists($GLOBALS['dbInstance'], 'closeConnection')) {
                try { $GLOBALS['dbInstance']->closeConnection(); } catch (Exception $e) {}
            }
            header("Location: " . $_SERVER['PHP_SELF']);
            exit;
        }
    }

    // تعديل اسم المجموعة
    if (isset($_POST['rename_group']) && !empty($_POST['new_group_name']) && !empty($_POST['group_id'])) {
        $newName = trim($_POST['new_group_name']);
        $gid     = (int) $_POST['group_id'];

        if (!empty($newName)) {
            $stmt = $conn->prepare("UPDATE device_groups SET group_name = ? WHERE id = ?");
            $stmt->execute([$newName, $gid]);
            $_SESSION['device_data_needs_refresh'] = true; // تحديث الكاش
        }
        closeDbAndRedirect($_SERVER['PHP_SELF']);
    }

    // إضافة جهاز إلى مجموعة
    if (isset($_POST['add_device_to_group']) && !empty($_POST['selected_group']) && !empty($_POST['selected_device_for_group'])) {
        $group_id  = (int)$_POST['selected_group'];
        $device_id = trim($_POST['selected_device_for_group']);

        // التحقق إن كان الجهاز مضافًا مسبقًا في نفس المجموعة لتفادي التكرار
        $checkStmt = $conn->prepare("SELECT * FROM device_group_members WHERE group_id = ? AND device_id = ?");
        $checkStmt->execute([$group_id, $device_id]);
        if ($checkStmt->rowCount() == 0) {
            $stmt = $conn->prepare("INSERT INTO device_group_members (group_id, device_id) VALUES (?, ?)");
            $stmt->execute([$group_id, $device_id]);
            $_SESSION['device_data_needs_refresh'] = true; // تحديث الكاش
        }
        closeDbAndRedirect($_SERVER['PHP_SELF']);
    }

    // حذف جهاز من داخل المجموعة
    if (isset($_GET['remove_device_from_group']) && isset($_GET['group_id'])) {
        $gid = (int)$_GET['group_id'];
        $did = trim($_GET['remove_device_from_group']);

        $stmt = $conn->prepare("DELETE FROM device_group_members WHERE group_id = ? AND device_id = ?");
        $stmt->execute([$gid, $did]);
        $_SESSION['device_data_needs_refresh'] = true; // تحديث الكاش
        closeDbAndRedirect($_SERVER['PHP_SELF']);
    }

    // حذف مجموعة كاملة
    if (isset($_GET['delete_group'])) {
        $delete_group_id = (int) $_GET['delete_group'];
        try {
            // استخدام المعاملات لحذف آمن
            $conn->beginTransaction();

            // حذف الأجهزة المرتبطة بالمجموعة
            $stmtDelMembers = $conn->prepare("DELETE FROM device_group_members WHERE group_id = ?");
            $stmtDelMembers->execute([$delete_group_id]);

            // حذف المجموعة نفسها
            $stmtDelGroup = $conn->prepare("DELETE FROM device_groups WHERE id = ?");
            $stmtDelGroup->execute([$delete_group_id]);

            $conn->commit();
            $_SESSION['device_data_needs_refresh'] = true; // تحديث الكاش
            closeDbAndRedirect($_SERVER['PHP_SELF']);
        } catch (Exception $e) {
            $conn->rollBack();
            echo "خطأ في حذف المجموعة: " . $e->getMessage();
            exit;
        }
    }

    // نقل جهاز من مجموعة إلى أخرى
    if (isset($_POST['move_device']) 
        && !empty($_POST['move_device_from_group']) 
        && !empty($_POST['move_device_to_group']) 
        && !empty($_POST['device_id_to_move'])) 
    { // التحقق من أن المجموعتين مختلفتين لتجنب العمليات غير الضرورية
        $fromGroup = (int)$_POST['move_device_from_group'];
        $toGroup   = (int)$_POST['move_device_to_group'];
        $deviceId  = $_POST['device_id_to_move'];

        // أولاً: حذف الجهاز من المجموعة القديمة
        $stmt = $conn->prepare("DELETE FROM device_group_members WHERE group_id = ? AND device_id = ?");
        $stmt->execute([$fromGroup, $deviceId]);

        // ثانيًا: إضافة الجهاز إلى المجموعة الجديدة (إذا لم يكن مضافًا)
        $checkStmt = $conn->prepare("SELECT * FROM device_group_members WHERE group_id = ? AND device_id = ?");
        $checkStmt->execute([$toGroup, $deviceId]);
        if ($checkStmt->rowCount() == 0) {
            $stmt = $conn->prepare("INSERT INTO device_group_members (group_id, device_id) VALUES (?, ?)");
            $stmt->execute([$toGroup, $deviceId]);
        }
        $_SESSION['device_data_needs_refresh'] = true; // تحديث الكاش
        closeDbAndRedirect($_SERVER['PHP_SELF']);
    }
}


//------------------------------------------------------
// حذف بيانات جهاز (للمسؤول فقط)
//------------------------------------------------------
if (isset($_GET['delete_device']) && $user_role === 'admin') {
    $device_id = trim($_GET['delete_device']);
    
    if (empty($device_id)) {
        $_SESSION['error_message'] = "معرف الجهاز غير صالح.";
        closeDbAndRedirect($_SERVER['PHP_SELF']);
        exit;
    }
    
    try {
        $conn->beginTransaction();
        
        $deletedCounts = [];
        
        // 1. حذف جميع سجلات الجهاز من جدول المواقع
        $stmt = $conn->prepare("DELETE FROM locations WHERE device_id = ?");
        $stmt->execute([$device_id]);
        $deletedCounts['locations'] = $stmt->rowCount();
        
        // 2. حذف الجهاز من جميع المجموعات
        $stmt = $conn->prepare("DELETE FROM device_group_members WHERE device_id = ?");
        $stmt->execute([$device_id]);
        $deletedCounts['group_members'] = $stmt->rowCount();
        
        // 3. حذف الجهاز من جدول الأجهزة الرئيسي
        $stmt_delete_device = $conn->prepare("DELETE FROM devices WHERE device_id = ?");
        $stmt_delete_device->execute([$device_id]);
        $deletedCounts['devices'] = $stmt_delete_device->rowCount();
        
        // 4. حذف جهات الاتصال المرتبطة بالجهاز
        try {
            $stmt = $conn->prepare("DELETE FROM device_contacts WHERE device_id = ?");
            $stmt->execute([$device_id]);
            $deletedCounts['contacts'] = $stmt->rowCount();
        } catch (PDOException $e) {
            // تجاهل الخطأ إذا كان الجدول غير موجود
            $deletedCounts['contacts'] = 0;
        }
        
        // 5. حذف التنبيهات المرتبطة بالجهاز (إذا كان جدول alerts موجود)
        try {
            $stmt = $conn->prepare("DELETE FROM alerts WHERE device_id = ?");
            $stmt->execute([$device_id]);
            $deletedCounts['alerts'] = $stmt->rowCount();
        } catch (PDOException $e) {
            // تجاهل الخطأ إذا كان الجدول غير موجود
            $deletedCounts['alerts'] = 0;
        }
        
        $conn->commit();
        
        // 6. حذف الجهاز من Firebase إذا كان مفعلاً
        $firebaseDeleted = false;
        if (defined('USE_FIREBASE') && USE_FIREBASE) {
            try {
                require_once __DIR__ . '/firebase_service.php';
                $firebaseDeleted = FirebaseService::deleteDevice($device_id);
                if (!$firebaseDeleted) {
                    error_log("⚠️ تحذير: فشل حذف الجهاز من Firebase: {$device_id}");
                } else {
                    error_log("✅ تم حذف الجهاز من Firebase بنجاح: {$device_id}");
                }
            } catch (Exception $e) {
                error_log("❌ خطأ في حذف الجهاز من Firebase: " . $e->getMessage());
            }
        }
        
        // التحقق من نجاح الحذف
        if ($deletedCounts['devices'] > 0 || $firebaseDeleted) {
            $_SESSION['device_data_needs_refresh'] = true; // تحديث الكاش
            $message = "تم حذف الجهاز وبياناته بنجاح.";
            if ($deletedCounts['devices'] > 0) {
                $message .= " (تم حذف {$deletedCounts['devices']} جهاز من MySQL)";
            }
            if ($firebaseDeleted) {
                $message .= " (تم حذف من Firebase)";
            }
            $_SESSION['success_message'] = $message;
        } else {
            $_SESSION['error_message'] = "لم يتم العثور على الجهاز للحذف. قد يكون قد تم حذفه مسبقاً أو غير موجود.";
        }
    } catch (Exception $e) {
        $conn->rollBack();
        $_SESSION['error_message'] = "حدث خطأ أثناء حذف الجهاز: " . $e->getMessage();
    }
    
    closeDbAndRedirect($_SERVER['PHP_SELF']);
}


//----------------------------------------------------------------------------------
// [2] نظام الكاش الذكي للأجهزة والمجموعات
// - يجلب البيانات مرة واحدة ويخزنها في الجلسة
// - يتحقق من الأجهزة الجديدة فورياً عبر ملف الإشارة
// - يتحقق احتياطياً كل 5 دقائق من قاعدة البيانات
// - يحسن الأداء ويقلل الاستعلامات غير الضرورية
//----------------------------------------------------------------------------------
if ($_SESSION['device_data_needs_refresh'] === true || empty($_SESSION['device_data_cache'])) {
    
    // ✅ استخدام MySQL فقط للأجهزة والمجموعات (سريع جداً)
    // Firebase يُستخدم فقط لجلب المواقع عند اختيار جهاز
    if (defined('USE_FIREBASE') && USE_FIREBASE) {
        // ✅ 1. التأكد من وجود جدول devices في MySQL
        try {
            $conn->query("SELECT 1 FROM devices LIMIT 1");
        } catch (PDOException $e) {
            // إنشاء جدول devices إذا لم يكن موجوداً
            $conn->exec("
                CREATE TABLE IF NOT EXISTS `devices` (
                  `id` int(11) NOT NULL AUTO_INCREMENT,
                  `device_id` varchar(255) NOT NULL,
                  `device_name` varchar(255) NOT NULL,
                  `first_seen` timestamp DEFAULT CURRENT_TIMESTAMP,
                  `last_seen` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
                  `status` enum('active','inactive') DEFAULT 'active',
                  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
                  `updated_at` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
                  PRIMARY KEY (`id`),
                  UNIQUE KEY `unique_device_id` (`device_id`),
                  KEY `idx_device_name` (`device_name`),
                  KEY `idx_status` (`status`)
                ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
            ");
        }
        
        // ✅ 2. جلب الأجهزة من MySQL مباشرة (سريع جداً - بدون Firebase)
        try {
            $stmtAll = $conn->query("
                SELECT device_id, device_name, 
                       UNIX_TIMESTAMP(last_seen) as last_seen_timestamp
                FROM devices 
                WHERE status = 'active'
                AND device_name <> 'Unknown Device'
                ORDER BY device_name ASC
            ");
            $allDevices = $stmtAll->fetchAll(PDO::FETCH_ASSOC);
        } catch (PDOException $e) {
            $allDevices = [];
        }
        
        // ✅ 3. جلب المجموعات من MySQL
        try {
            $stmtGroups = $conn->query("SELECT * FROM device_groups ORDER BY group_name ASC");
            $groups = $stmtGroups->fetchAll(PDO::FETCH_ASSOC);
        } catch (PDOException $e) {
            // إنشاء جدول device_groups إذا لم يكن موجوداً
            try {
                $conn->exec("
                    CREATE TABLE IF NOT EXISTS `device_groups` (
                      `id` int(11) NOT NULL AUTO_INCREMENT,
                      `group_name` varchar(255) NOT NULL,
                      `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
                      PRIMARY KEY (`id`)
                    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
                ");
                $groups = [];
            } catch (Exception $ex) {
                $groups = [];
            }
        }
        
        // ✅ 4. جلب الأجهزة غير المجمعة من MySQL
        try {
            $stmtUngrouped = $conn->query("
                SELECT d.device_id, d.device_name,
                       UNIX_TIMESTAMP(d.last_seen) as last_seen_timestamp
                FROM devices d
                WHERE d.device_id NOT IN (
                    SELECT DISTINCT device_id FROM device_group_members
                )
                AND d.status = 'active'
                AND d.device_name <> 'Unknown Device'
                ORDER BY d.device_name ASC
            ");
            $ungroupedDevices = $stmtUngrouped->fetchAll(PDO::FETCH_ASSOC);
        } catch (PDOException $e) {
            // إنشاء جدول device_group_members إذا لم يكن موجوداً
            try {
                $conn->exec("
                    CREATE TABLE IF NOT EXISTS `device_group_members` (
                      `id` int(11) NOT NULL AUTO_INCREMENT,
                      `group_id` int(11) NOT NULL,
                      `device_id` varchar(255) NOT NULL,
                      PRIMARY KEY (`id`),
                      UNIQUE KEY `unique_group_device` (`group_id`, `device_id`)
                    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
                ");
                $ungroupedDevices = [];
            } catch (Exception $ex) {
                $ungroupedDevices = [];
            }
        }
        
        // ✅ 5. جلب الأجهزة المتعلقة بكل مجموعة من MySQL
        $groupedDevices = [];
        foreach ($groups as $grp) {
            $gid = $grp['id'];
            try {
                $stmtG = $conn->prepare("
                    SELECT d.device_id, d.device_name,
                           UNIX_TIMESTAMP(d.last_seen) as last_seen_timestamp
                    FROM devices d
                    JOIN device_group_members gm ON d.device_id = gm.device_id
                    WHERE gm.group_id = ? 
                    AND d.status = 'active'
                    AND d.device_name <> 'Unknown Device'
                    ORDER BY d.device_name ASC
                ");
                $stmtG->execute([$gid]);
                $groupedDevices[$gid] = $stmtG->fetchAll(PDO::FETCH_ASSOC);
            } catch (PDOException $e) {
                $groupedDevices[$gid] = [];
            }
        }
        
        // ✅ 6. ترتيب ذكي للأجهزة (النشطة أولاً)
        usort($allDevices, function($a, $b) {
            $now = time();
            $aRecent = isset($a['last_seen_timestamp']) && $a['last_seen_timestamp'] > ($now - 60);
            $bRecent = isset($b['last_seen_timestamp']) && $b['last_seen_timestamp'] > ($now - 60);
            
            if ($aRecent && !$bRecent) return -1;
            if (!$aRecent && $bRecent) return 1;
            
            if ($aRecent && $bRecent) {
                $timeDiff = ($b['last_seen_timestamp'] ?? 0) - ($a['last_seen_timestamp'] ?? 0);
                if ($timeDiff != 0) return $timeDiff > 0 ? 1 : -1;
            }
            
            if (!$aRecent && !$bRecent) {
                $timeDiff = ($b['last_seen_timestamp'] ?? 0) - ($a['last_seen_timestamp'] ?? 0);
                if ($timeDiff != 0) return $timeDiff > 0 ? 1 : -1;
            }
            
            return strcmp($a['device_name'], $b['device_name']);
        });
        
        // ✅ 7. إضافة الأجهزة الجديدة من Firebase في الخلفية (بدون تأخير)
        // ✅ هذا يتم في الخلفية فقط ولا يؤثر على سرعة تحميل الصفحة
        // ✅ يمكن إضافة هذا كـ AJAX call منفصل أو cron job لاحقاً
        
    } else {
        // ✅ استخدام MySQL (الطريقة القديمة)
        // التحقق من وجود جدول devices، إذا لم يكن موجوداً سيتم إنشاؤه تلقائياً (مع فهرس فريد)
        try {
            $conn->query("SELECT 1 FROM devices LIMIT 1");
        } catch (PDOException $e) {
            // إنشاء جدول devices إذا لم يكن موجوداً
            $conn->exec("
                CREATE TABLE IF NOT EXISTS `devices` (
                  `id` int(11) NOT NULL AUTO_INCREMENT,
                  `device_id` varchar(255) NOT NULL,
                  `device_name` varchar(255) NOT NULL,
                  `first_seen` timestamp DEFAULT CURRENT_TIMESTAMP,
                  `last_seen` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
                  `status` enum('active','inactive') DEFAULT 'active',
                  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
                  `updated_at` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
                  PRIMARY KEY (`id`),
                  UNIQUE KEY `unique_device_id` (`device_id`),
                  KEY `idx_device_name` (`device_name`),
                  KEY `idx_status` (`status`)
                ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
            ");
            
            // نقل الأجهزة الموجودة من locations إلى devices
            $conn->exec(" 
                INSERT IGNORE INTO `devices` (`device_id`, `device_name`, `first_seen`, `last_seen`)
                SELECT 
                    `device_id`,
                    `device_name`,
                    MIN(`timestamp`) as `first_seen`,
                    MAX(`timestamp`) as `last_seen`
                FROM `locations`
                WHERE `device_id` IS NOT NULL AND `device_name` IS NOT NULL
                GROUP BY `device_id`, `device_name`
            ");
        }

        // جلب فقط الأجهزة غير المضافة لأي مجموعة لعرضها في القائمة الجانبية
        // ملاحظة: يتم إخفاء الأجهزة التي لم يُحدَّد لها اسم (Unknown Device)
        // استخدام جدول devices بدلاً من locations لتحسين الأداء بشكل كبير
        $stmt = $conn->query("
            SELECT d.device_id, d.device_name
            FROM devices d
            WHERE d.device_id NOT IN (
                SELECT DISTINCT device_id FROM device_group_members
            )
            AND d.status = 'active'
            AND d.device_name <> 'Unknown Device'
            ORDER BY d.device_name ASC
        ");
        $ungroupedDevices = $stmt->fetchAll(PDO::FETCH_ASSOC);

        // جلب كل الأجهزة لاستخدامها في صندوق الاختيار الرئيسي وصندوق "نقل جهاز" و"إضافة جهاز"
        // يتم هنا أيضاً إخفاء الأجهزة التي لم يُحدَّد لها اسم (Unknown Device)
        // استخدام جدول devices بدلاً من locations لتحسين الأداء بشكل كبير
        $stmtAll = $conn->query("
            SELECT device_id, device_name 
            FROM devices 
            WHERE status = 'active'
            AND device_name <> 'Unknown Device'
            ORDER BY device_name ASC
        ");
        $allDevices = $stmtAll->fetchAll(PDO::FETCH_ASSOC);

        // جلب المجموعات
        $stmtGroups = $conn->query("SELECT * FROM device_groups ORDER BY group_name ASC");
        $groups = $stmtGroups->fetchAll(PDO::FETCH_ASSOC);

        // جلب الأجهزة المتعلقة بكل مجموعة
        // استخدام جدول devices بدلاً من locations لتحسين الأداء بشكل كبير
        $groupedDevices = [];
        foreach ($groups as $grp) {
            $gid = $grp['id'];
            $stmtG = $conn->prepare("
                SELECT d.device_id, d.device_name
                FROM devices d
                JOIN device_group_members gm ON d.device_id = gm.device_id
                WHERE gm.group_id = ? AND d.status = 'active'
                ORDER BY d.device_name ASC
            ");
            $stmtG->execute([$gid]);
            $groupedDevices[$gid] = $stmtG->fetchAll(PDO::FETCH_ASSOC);
        }
    }

    // تخزين البيانات في الكاش مع timestamp
    $_SESSION['device_data_cache'] = [
        'ungroupedDevices' => $ungroupedDevices,
        'allDevices'       => $allDevices,
        'groups'           => $groups,
        'groupedDevices'   => $groupedDevices,
        'last_updated'     => time(), // وقت آخر تحديث فعلي
        'firebase_mode'    => (defined('USE_FIREBASE') && USE_FIREBASE) // علامة لتحديد مصدر البيانات
    ];
    $_SESSION['device_data_needs_refresh'] = false; // تم التحديث
    $_SESSION['device_cache_timestamp'] = time(); // تحديث وقت الكاش

} else {
    // استخدام البيانات من الكاش
    // ✅ التأكد من أن البيانات موجودة في الكاش
    $ungroupedDevices = isset($_SESSION['device_data_cache']['ungroupedDevices']) 
        ? $_SESSION['device_data_cache']['ungroupedDevices'] 
        : [];
    $allDevices = isset($_SESSION['device_data_cache']['allDevices']) 
        ? $_SESSION['device_data_cache']['allDevices'] 
        : [];
    $groups = isset($_SESSION['device_data_cache']['groups']) 
        ? $_SESSION['device_data_cache']['groups'] 
        : [];
    $groupedDevices = isset($_SESSION['device_data_cache']['groupedDevices']) 
        ? $_SESSION['device_data_cache']['groupedDevices'] 
        : [];
    
    // ✅ إذا كانت البيانات فارغة، إجبار التحديث
    if (empty($ungroupedDevices) && empty($groups) && empty($allDevices)) {
        $_SESSION['device_data_needs_refresh'] = true;
        // إعادة تحميل الصفحة لجلب البيانات
        header("Location: " . $_SERVER['PHP_SELF']);
        exit;
    }
}

// ✅ إغلاق الاتصال بعد جلب البيانات لتقليل عدد الاتصالات النشطة
if (isset($GLOBALS['dbInstance']) && method_exists($GLOBALS['dbInstance'], 'closeConnection')) {
    try {
        $GLOBALS['dbInstance']->closeConnection();
    } catch (Exception $e) {
        // تجاهل الأخطاء أثناء الإغلاق
    }
}


// (تم نقل منطق صفحة المشاركة إلى أعلى الملف قبل التحقق من تسجيل الدخول)
?>
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Almanara - نظام التتبع المطوَّر</title>
  
  <!-- New Stylesheet -->
  <?php $dash_styles_version = file_exists('dashboard_styles.css') ? filemtime('dashboard_styles.css') : time(); ?>
  <link rel="stylesheet" href="dashboard_styles.css?v=<?= $dash_styles_version ?>">

  <!-- Chart.js for Analytics -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- SheetJS -->
  <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
  <style>
    /* CSS Variables for Theme */
    
    /* Live Location Button Styles */
    .live-location-btn {
      background: rgba(33, 150, 243, 0.1) !important;
      border: 1px solid rgba(33, 150, 243, 0.3) !important;
      color: #2196F3 !important;
      border-radius: 5px !important;
      padding: 4px 8px !important;
      cursor: pointer !important;
      font-size: 16px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.2s ease !important;
      min-width: 32px !important;
      width: 32px !important;
      height: 28px !important;
      margin-left: 8px !important;
      margin-right: 0 !important;
      float: none !important;
      position: relative !important;
      z-index: 10 !important;
      flex-shrink: 0 !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    .live-location-btn:hover {
      background: rgba(33, 150, 243, 0.2);
      border-color: rgba(33, 150, 243, 0.5);
      transform: scale(1.05);
    }
    
    .live-location-btn.active {
      background: rgba(244, 67, 54, 0.2);
      border-color: rgba(244, 67, 54, 0.5);
      color: #F44336;
      animation: pulse 1.5s infinite;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    /* Live Location Marker Styles */
    .live-location-marker {
      background: #F44336;
      border: 3px solid #fff;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      animation: livePulse 2s infinite;
    }
    
    @keyframes livePulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7); }
      50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(244, 67, 54, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
    }
  </style>
  <script>
    // Loading Overlay Functions
    function showLoading() {
      document.getElementById('loadingOverlay').style.display = 'flex';
    }
    
    function hideLoading() {
      document.getElementById('loadingOverlay').style.display = 'none';
    }
    
    // Add loading state to all forms
     document.addEventListener('DOMContentLoaded', function() {
       // إخفاء شاشة "جارِ التحميل..." فور اكتمال تحميل عناصر الصفحة
       hideLoading();
       
       const forms = document.querySelectorAll('form');
       forms.forEach(form => {
         form.addEventListener('submit', function(event) { // إضافة event
           showLoading();
         });
       });
     });
    
    // التحقق من وجود تفضيل مسبق للوضع
    const currentTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', currentTheme);

    // تبديل الوضع بين الداكن والفاتح
    function toggleTheme() {
      const currentTheme = document.documentElement.getAttribute('data-theme');
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme);
      
      // تحديث أيقونة الزر
      const themeToggle = document.getElementById('themeToggle');
      themeToggle.textContent = newTheme === 'dark' ? '🌙' : '☀️';
    }

    // تحديث أيقونة الزر عند تحميل الصفحة
    window.addEventListener('load', () => {
      const themeToggle = document.getElementById('themeToggle');
      if (themeToggle) themeToggle.textContent = currentTheme === 'dark' ? '🌙' : '☀️';
    });
    
    // Live Location Variables - Make them global
    window.liveLocationIntervals = window.liveLocationIntervals || {}; // {deviceId: intervalId}
    window.liveLocationMarkers = window.liveLocationMarkers || {}; // {deviceId: marker}
    window.liveLocationActive = window.liveLocationActive || {}; // {deviceId: boolean}
    
    // Toggle Live Location - Make it global
    window.toggleLiveLocation = async function(deviceId, deviceName, buttonElement) {
      console.log('🔍 toggleLiveLocation called:', deviceId, deviceName);
      
      if (!deviceId || !deviceName) {
        console.error('❌ Live Location: deviceId or deviceName missing', {deviceId, deviceName});
        alert('❌ خطأ: معرف الجهاز أو الاسم غير موجود');
        return;
      }
      
      const isActive = window.liveLocationActive[deviceId] || false;
      console.log('📊 Current state:', {deviceId, isActive});
      
      if (isActive) {
        // Stop Live Location
        console.log('⏹️ Stopping live location...');
        await window.stopLiveLocation(deviceId, buttonElement);
      } else {
        // Start Live Location
        console.log('▶️ Starting live location...');
        await window.startLiveLocation(deviceId, deviceName, buttonElement);
      }
    }
    
    // Start Live Location - Make it global
    window.startLiveLocation = async function(deviceId, deviceName, buttonElement) {
      try {
        console.log('🚀 Starting live location for device:', deviceId);
        
        // Show loading indicator
        if (buttonElement) {
          buttonElement.disabled = true;
          buttonElement.textContent = '⏳';
        }
        
        // Create request in Firebase
        const url = 'dashboard.php?action=request_live_location&device_id=' + encodeURIComponent(deviceId);
        console.log('📡 Requesting live location:', url);
        
        const response = await fetch(url, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        console.log('📥 Response status:', response.status);
        
        if (!response.ok) {
          throw new Error('HTTP error! status: ' + response.status);
        }
        
        const data = await response.json();
        console.log('📦 Response data:', data);
        
        if (data.status === 'success') {
          // Mark as active
          window.liveLocationActive[deviceId] = true;
          if (buttonElement) {
            buttonElement.classList.add('active');
            buttonElement.title = '⏹️ إيقاف لايف لوكيشن';
            buttonElement.textContent = '📍';
            buttonElement.disabled = false;
          }
          
          // Start fetching live location every 3 seconds
          const intervalId = setInterval(async () => {
            await window.fetchLiveLocation(deviceId, deviceName);
          }, 3000);
          
          window.liveLocationIntervals[deviceId] = intervalId;
          
          // Fetch immediately
          await window.fetchLiveLocation(deviceId, deviceName);
          
          console.log('✅ Live Location started for device:', deviceName);
        } else {
          if (buttonElement) {
            buttonElement.disabled = false;
            buttonElement.textContent = '📍';
          }
          alert('❌ فشل بدء لايف لوكيشن: ' + (data.message || 'خطأ غير معروف'));
        }
      } catch (error) {
        console.error('❌ Error starting live location:', error);
        if (buttonElement) {
          buttonElement.disabled = false;
          buttonElement.textContent = '📍';
        }
        alert('❌ خطأ في بدء لايف لوكيشن: ' + error.message);
      }
    }
    
    // Stop Live Location - Make it global
    window.stopLiveLocation = async function(deviceId, buttonElement) {
      try {
        console.log('⏹️ Stopping live location for device:', deviceId);
        
        // Show loading indicator
        if (buttonElement) {
          buttonElement.disabled = true;
          buttonElement.textContent = '⏳';
        }
        
        // Stop request in Firebase
        const url = 'dashboard.php?action=stop_live_location&device_id=' + encodeURIComponent(deviceId);
        console.log('📡 Stopping live location:', url);
        
        const response = await fetch(url, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        console.log('📥 Response status:', response.status);
        
        if (!response.ok) {
          throw new Error('HTTP error! status: ' + response.status);
        }
        
        const data = await response.json();
        console.log('📦 Response data:', data);
        
        // Clear interval
        if (window.liveLocationIntervals[deviceId]) {
          clearInterval(window.liveLocationIntervals[deviceId]);
          delete window.liveLocationIntervals[deviceId];
        }
        
        // Remove marker from map
        if (window.liveLocationMarkers[deviceId]) {
          window.liveLocationMarkers[deviceId].setMap(null);
          delete window.liveLocationMarkers[deviceId];
        }
        
        // Mark as inactive
        window.liveLocationActive[deviceId] = false;
        if (buttonElement) {
          buttonElement.classList.remove('active');
          buttonElement.title = '📍 لايف لوكيشن';
          buttonElement.textContent = '📍';
          buttonElement.disabled = false;
        }
        
        console.log('✅ Live Location stopped for device:', deviceId);
      } catch (error) {
        console.error('❌ Error stopping live location:', error);
        if (buttonElement) {
          buttonElement.disabled = false;
          buttonElement.textContent = '📍';
        }
      }
    }
    
    // Fetch Live Location from server - Make it global
    window.fetchLiveLocation = async function(deviceId, deviceName) {
      try {
        // ✅ استخدام نفس الخادم البعيد الذي يرسل إليه التطبيق
        // يمكن تغيير هذا إلى خادم محلي للاختبار
        const realtimeServerUrl = 'https://almanara.serveirc.com:8000/2026/almanaragps2026/real_time_location.php';
        const url = realtimeServerUrl + '?device_id=' + encodeURIComponent(deviceId) + '&t=' + Date.now();
        console.log('📡 Fetching live location from:', url);
        
        const response = await fetch(url);
        
        if (!response.ok) {
          console.error('❌ HTTP error! status:', response.status);
          throw new Error('HTTP error! status: ' + response.status);
        }
        
        const data = await response.json();
        console.log('📦 Live location response:', data);
        
        if (data.success && data.data && data.is_live) {
          console.log('✅ Live location data received:', data.data);
          const location = data.data;
          const lat = parseFloat(location.latitude);
          const lng = parseFloat(location.longitude);
          
          if (!isNaN(lat) && !isNaN(lng) && typeof map !== 'undefined' && map) {
            const position = { lat: lat, lng: lng };
            
            // Remove old marker if exists
            if (window.liveLocationMarkers[deviceId]) {
              window.liveLocationMarkers[deviceId].setMap(null);
            }
            
            // Create new marker with custom icon
            const marker = new google.maps.Marker({
              position: position,
              map: map,
              title: '📍 لايف لوكيشن: ' + deviceName,
              icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 10,
                fillColor: '#F44336',
                fillOpacity: 1,
                strokeColor: '#fff',
                strokeWeight: 3
              },
              animation: google.maps.Animation.DROP,
              zIndex: 1000 // Higher than regular markers
            });
            
            // Create InfoWindow with device name, date, and time
            // ✅ استخدام نفس تنسيق الوقت المستخدم في المخطط الزمني (دولة العراق)
            let timestamp = location.timestamp || '';
            let formattedTime = '';
            let formattedDate = '';
            
            if (timestamp) {
              try {
                // ✅ استخدام unix_timestamp لضمان الدقة في عرض الوقت بتوقيت العراق
                let dateObj;
                let iraqTimestamp = timestamp;
                
                if (location.unix_timestamp) {
                  // ✅ استخدام unix_timestamp وتحويله مباشرة إلى توقيت العراق
                  dateObj = new Date(location.unix_timestamp * 1000);
                  
                  // ✅ تحويل إلى توقيت العراق (Asia/Baghdad = UTC+3)
                  const iraqTimeStr = dateObj.toLocaleString('en-US', { 
                    timeZone: 'Asia/Baghdad',
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: false
                  });
                  
                  // ✅ تحويل من MM/DD/YYYY, HH:mm:ss إلى YYYY-MM-DD HH:mm:ss
                  const parts = iraqTimeStr.split(', ');
                  if (parts.length === 2) {
                    const datePart = parts[0].split('/');
                    const timePart = parts[1];
                    iraqTimestamp = `${datePart[2]}-${datePart[0].padStart(2, '0')}-${datePart[1].padStart(2, '0')} ${timePart}`;
                  }
                } else {
                  // ✅ إذا لم يكن unix_timestamp متوفراً، نعتبر timestamp بتوقيت العراق مباشرة
                  // (لأن real_time_location.php يحفظه بتوقيت العراق بعد date_default_timezone_set)
                  iraqTimestamp = timestamp;
                }
                
                // ✅ استخدام نفس دوال التنسيق المستخدمة في المخطط الزمني
                if (typeof formatTimeOnly12Hour === 'function') {
                  formattedTime = formatTimeOnly12Hour(iraqTimestamp);
                } else {
                  // Fallback: تنسيق يدوي بنفس الطريقة
                  const timePart = iraqTimestamp.includes(' ') ? iraqTimestamp.split(' ')[1] : iraqTimestamp;
                  const parts = timePart.split(':');
                  if (parts.length >= 2) {
                    let hours = parseInt(parts[0], 10);
                    const minutes = parts[1];
                    const ampm = hours >= 12 ? 'م' : 'ص';
                    hours = hours % 12;
                    if (hours === 0) hours = 12;
                    formattedTime = `${hours}:${minutes} ${ampm}`;
                  } else {
                    formattedTime = iraqTimestamp;
                  }
                }
                
                if (typeof formatDateOnly === 'function') {
                  formattedDate = formatDateOnly(iraqTimestamp);
                } else {
                  // Fallback: تنسيق يدوي
                  const datePart = iraqTimestamp.includes(' ') ? iraqTimestamp.split(' ')[0] : '';
                  if (datePart) {
                    const date = new Date(datePart + 'T' + (iraqTimestamp.includes(' ') ? iraqTimestamp.split(' ')[1] : '00:00:00'));
                    const months = ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 
                                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
                    formattedDate = `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
                  }
                }
              } catch (e) {
                console.error('Error formatting timestamp:', e);
                formattedTime = timestamp;
              }
            } else {
              formattedTime = new Date().toLocaleString('ar-IQ', { timeZone: 'Asia/Baghdad' });
            }
            
            const battery = location.battery ? location.battery + '%' : 'غير معروف';
            const accuracy = location.accuracy ? location.accuracy + ' م' : 'غير معروف';
            
            const infoContent = `
              <div style="min-width: 200px; text-align: right; direction: rtl; font-family: Arial, sans-serif;">
                <div style="font-weight: bold; font-size: 16px; color: #F44336; margin-bottom: 8px;">
                  📍 لايف لوكيشن
                </div>
                <div style="margin-bottom: 6px;">
                  <strong>اسم الجهاز:</strong> ${deviceName}
                </div>
                <div style="margin-bottom: 6px;">
                  <strong>التاريخ والوقت:</strong><br>
                  ${formattedDate ? formattedDate + '<br>' : ''}${formattedTime || timestamp}
                </div>
                <div style="margin-bottom: 6px;">
                  <strong>البطارية:</strong> 🔋 ${battery}
                </div>
                <div style="margin-bottom: 6px;">
                  <strong>الدقة:</strong> 📍 ${accuracy}
                </div>
                ${location.speed ? `<div style="margin-bottom: 6px;"><strong>السرعة:</strong> 🚗 ${parseFloat(location.speed).toFixed(1)} كم/س</div>` : ''}
                <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #ddd; font-size: 12px; color: #666;">
                  الموقع يتم تحديثه كل 3 ثوانٍ
                </div>
              </div>
            `;
            
            const infoWindow = new google.maps.InfoWindow({
              content: infoContent
            });
            
            // Show InfoWindow
            infoWindow.open(map, marker);
            
            // Auto-close InfoWindow after 5 seconds
            setTimeout(() => {
              infoWindow.close();
            }, 5000);
            
            // Store marker
            window.liveLocationMarkers[deviceId] = marker;
            
            // Center map on live location (only if user hasn't interacted with map)
            if (typeof userInteractedWithMap === 'undefined' || !userInteractedWithMap) {
              map.setCenter(position);
              map.setZoom(15);
            }
            
            console.log('✅ Live Location updated for device:', deviceName, 'at', lat, lng);
          } else {
            console.warn('⚠️ Invalid coordinates or map not initialized:', {lat, lng, mapExists: typeof map !== 'undefined'});
          }
        } else {
          console.log('ℹ️ No live location data available for device:', deviceName, data);
        }
      } catch (error) {
        console.error('❌ Error fetching live location:', error);
      }
    }
    
    // Make sure functions are available after page load
    document.addEventListener('DOMContentLoaded', function() {
      console.log('✅ Live Location functions initialized');
      console.log('🔍 toggleLiveLocation available:', typeof window.toggleLiveLocation);
      console.log('🔍 startLiveLocation available:', typeof window.startLiveLocation);
      console.log('🔍 stopLiveLocation available:', typeof window.stopLiveLocation);
      console.log('🔍 fetchLiveLocation available:', typeof window.fetchLiveLocation);
      
      // Wait a bit for all scripts to load
      setTimeout(function() {
        // Add click event listeners to all live location buttons as fallback
        const liveLocationButtons = document.querySelectorAll('.live-location-btn');
        console.log('🔍 Found', liveLocationButtons.length, 'live location buttons');
        
        if (liveLocationButtons.length === 0) {
          console.warn('⚠️ No live location buttons found! Check HTML structure.');
        }
        
        liveLocationButtons.forEach(function(button, index) {
          const deviceId = button.getAttribute('data-device-id');
          const deviceName = button.getAttribute('data-device-name');
          
          console.log(`🔍 Button ${index + 1}:`, {deviceId, deviceName, visible: button.offsetParent !== null});
          
          // Ensure button is visible
          button.style.display = 'inline-flex';
          button.style.visibility = 'visible';
          button.style.opacity = '1';
          
          // Remove existing onclick and add event listener
          const oldOnclick = button.getAttribute('onclick');
          if (oldOnclick) {
            console.log('🔍 Removing old onclick:', oldOnclick);
            button.removeAttribute('onclick');
          }
          
          // Add new event listener
          button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            console.log('🔍 Button clicked:', deviceId, deviceName);
            
            if (typeof window.toggleLiveLocation === 'function') {
              console.log('✅ Calling toggleLiveLocation...');
              window.toggleLiveLocation(deviceId, deviceName, button);
            } else {
              console.error('❌ toggleLiveLocation function not available!');
              alert('❌ خطأ: الدالة غير متاحة. يرجى تحديث الصفحة.');
            }
          }, true); // Use capture phase
        });
      }, 500); // Wait 500ms for all scripts to load
    });
    
    // Also make sure functions are available immediately (before DOMContentLoaded)
    console.log('🔍 Live Location functions defined:', {
      toggleLiveLocation: typeof window.toggleLiveLocation,
      startLiveLocation: typeof window.startLiveLocation,
      stopLiveLocation: typeof window.stopLiveLocation,
      fetchLiveLocation: typeof window.fetchLiveLocation
    });
  </script>

</head>
<body>

  <!-- Loading Overlay (moved from head) -->
  <div id="loadingOverlay">
    <div class="spinner"></div>
    <div id="loadingText">جارِ التحميل...</div>
  </div>

  <!-- شريط علوي بسيط -->
  <nav class="top-nav">
    <div class="logo" id="appTitle">Almanara - نظام التتبع</div>
    <div class="actions">
      <a href="contacts_backup.php" class="admin-link" style="margin-left: 10px;">📱 نسخ احتياطي لجهات الاتصال</a>
      <?php if ($user_role === 'admin'): ?>
        <a href="admin.php" class="admin-link">لوحة الأدمن</a>
      <?php endif; ?>
      <button id="themeToggle">🌙</button>
      <button id="langLabel">English</button>
      <button onclick="window.location='logout.php'" id="btnLogout">خروج</button>
    </div>
  </nav>

  <div class="container">
    <!-- Overlay للقائمة الجانبية (للموبايل) -->
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>

    <!-- زر إخفاء/إظهار القائمة الجانبية (للموبايل فقط) -->
    <button id="sidebarToggle" class="sidebar-toggle-btn" onclick="toggleSidebar()" aria-label="إظهار/إخفاء القائمة">
      <span id="sidebarToggleIcon">☰</span>
    </button>

    <!-- القائمة الجانبية للأجهزة + المجموعات -->
    <div class="sidebar" id="sidebar">
      <div class="sidebar-header">
        <h2 id="deviceListTitle">الأجهزة والمجموعات</h2>
        <button class="sidebar-close-btn" onclick="toggleSidebar()" aria-label="إغلاق القائمة">✕</button>
      </div>
      <div style="margin-bottom: 10px;">
        <a href="?refresh_devices=1" 
           style="display: inline-block; padding: 8px 12px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; font-size: 12px;"
           onclick="showLoading();">
          🔄 تحديث القائمة
        </a>
      </div>
      <input type="text" id="searchDevice" placeholder="🔍 ابحث عن جهاز..." oninput="filterDevices()">
      
      <div class="sidebar-section" id="groupsSection">
        <h3>المجموعات</h3>
        <!-- عرض المجموعات بشكل قابل للطيّ -->
        <?php if (empty($groups)): ?>
          <p style="color: #999; padding: 10px; text-align: center; font-size: 14px;">لا توجد مجموعات</p>
        <?php endif; ?>
        <?php foreach ($groups as $grp): ?>
          <li class="group-header" onclick="toggleGroupDevices(<?= $grp['id'] ?>)">
            <?php
              // إذا طلب المستخدم تحرير اسم هذه المجموعة، نظهر فورم التعديل بدل الاسم العادي
              if (isset($_GET['edit_group']) && $_GET['edit_group'] == $grp['id'] && $user_role === 'admin'):
            ?>
              <form method="post" style="display:inline;" onsubmit="showLoading();" onclick="event.stopPropagation();">
                <input type="text" name="new_group_name" value="<?= htmlspecialchars($grp['group_name'], ENT_QUOTES, 'UTF-8') ?>" required>
                <input type="hidden" name="group_id" value="<?= $grp['id'] ?>">
                <button type="submit" name="rename_group">حفظ</button>
              </form>
            <?php else: ?>
              <?= htmlspecialchars($grp['group_name'], ENT_QUOTES, 'UTF-8') ?>
              <?php if ($user_role === 'admin'): ?>
                <a href="?edit_group=<?= $grp['id'] ?>" class="edit-btn" style="float:left;margin-left:5px;"
                   onclick="event.stopPropagation(); showLoading();">
                  تعديل
                </a>
                <a href="?delete_group=<?= $grp['id'] ?>" 
                   class="delete-btn" 
                   style="float: left; margin-left: 5px;"
                   onclick="event.stopPropagation(); if(confirm('هل أنت متأكد من حذف هذه المجموعة؟')) { showLoading(); return true; } return false;">
                  حذف
                </a>
              <?php endif; ?>
            <?php endif; ?>
          </li>

          <ul id="group-devices-<?= $grp['id'] ?>" class="group-devices">
            <?php if (!empty($groupedDevices[$grp['id']])): ?>
              <?php foreach ($groupedDevices[$grp['id']] as $dvc): ?>
                <?php
                  // ✅ تحديد إذا كان الجهاز نشطاً (آخر ظهور خلال دقيقة واحدة)
                  $isActive = false;
                  if (isset($dvc['last_seen_timestamp'])) {
                      $isActive = $dvc['last_seen_timestamp'] > (time() - 60); // نشط إذا كان آخر ظهور خلال 60 ثانية (دقيقة واحدة)
                  }
                  $deviceClass = $isActive ? 'device-active' : 'device-inactive';
                ?>
                <li data-device-id="<?= htmlspecialchars($dvc['device_id'], ENT_QUOTES, 'UTF-8') ?>"
                    data-device-name="<?= htmlspecialchars($dvc['device_name'], ENT_QUOTES, 'UTF-8') ?>"
                    class="group-device-item <?= $deviceClass ?>">
                  <span class="device-name">
                    <?php if ($isActive): ?>
                      <span class="device-status-indicator" title="نشط">🟢</span>
                    <?php else: ?>
                      <span class="device-status-indicator" title="غير نشط">⚪</span>
                    <?php endif; ?>
                    <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><?= htmlspecialchars($dvc['device_name'], ENT_QUOTES, 'UTF-8') ?></span>
                  </span>
                  <div style="display: flex; align-items: center; gap: 4px; flex-shrink: 0;">
                    <button class="live-location-btn" 
                            data-device-id="<?= htmlspecialchars($dvc['device_id'], ENT_QUOTES, 'UTF-8') ?>"
                            data-device-name="<?= htmlspecialchars($dvc['device_name'], ENT_QUOTES, 'UTF-8') ?>"
                            onclick="event.stopPropagation(); if(typeof window.toggleLiveLocation === 'function') { window.toggleLiveLocation('<?= htmlspecialchars($dvc['device_id'], ENT_QUOTES, 'UTF-8') ?>', '<?= htmlspecialchars($dvc['device_name'], ENT_QUOTES, 'UTF-8') ?>', this); } else { console.error('toggleLiveLocation not found'); alert('يرجى تحديث الصفحة'); }"
                            title="📍 لايف لوكيشن">
                      📍
                    </button>
                    <?php if ($user_role === 'admin'): ?>
                      <a href="?remove_device_from_group=<?= htmlspecialchars($dvc['device_id'], ENT_QUOTES, 'UTF-8') ?>&group_id=<?= $grp['id'] ?>" 
                         class="delete-btn" 
                         style="flex-shrink: 0;"
                         onclick="event.stopPropagation(); if(confirm('هل تريد إزالة هذا الجهاز من المجموعة؟')) { showLoading(); return true; } return false;">
                        حذف
                      </a>
                    <?php endif; ?>
                  </div>
                </li>
              <?php endforeach; ?>
            <?php else: ?>
              <li style="cursor: default; color: #bbb;">لا توجد أجهزة في هذه المجموعة</li>
            <?php endif; ?>
          </ul>
        <?php endforeach; ?>
      </div>

      <div class="sidebar-section" id="ungroupedDevicesSection">
        <h3>الأجهزة غير المجمعة</h3>
        <ul id="deviceList" class="devices-list">
          <!-- عرض جميع الأجهزة غير المضافة لأي مجموعة -->
          <?php if (empty($ungroupedDevices)): ?>
            <li style="cursor: default; color: #999; padding: 15px; text-align: center;">لا توجد أجهزة غير مجمعة</li>
          <?php endif; ?>
          <?php if (!empty($ungroupedDevices)): ?>
            <?php foreach ($ungroupedDevices as $device): ?>
              <?php
                // ✅ تحديد إذا كان الجهاز نشطاً (آخر ظهور خلال دقيقة واحدة)
                $isActive = false;
                if (isset($device['last_seen_timestamp'])) {
                    $isActive = $device['last_seen_timestamp'] > (time() - 60); // نشط إذا كان آخر ظهور خلال 60 ثانية (دقيقة واحدة)
                }
                $deviceClass = $isActive ? 'device-active' : 'device-inactive';
              ?>
              <li data-device-id="<?= htmlspecialchars($device['device_id'], ENT_QUOTES, 'UTF-8') ?>"
                  data-device-name="<?= htmlspecialchars($device['device_name'], ENT_QUOTES, 'UTF-8') ?>"
                  class="<?= $deviceClass ?>">
                <span class="device-name">
                  <?php if ($isActive): ?>
                    <span class="device-status-indicator" title="نشط">🟢</span>
                  <?php else: ?>
                    <span class="device-status-indicator" title="غير نشط">⚪</span>
                  <?php endif; ?>
                  <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><?= htmlspecialchars($device['device_name'], ENT_QUOTES, 'UTF-8') ?></span>
                </span>
                <div style="display: flex; align-items: center; gap: 4px; flex-shrink: 0;">
                  <button class="live-location-btn" 
                          data-device-id="<?= htmlspecialchars($device['device_id'], ENT_QUOTES, 'UTF-8') ?>"
                          data-device-name="<?= htmlspecialchars($device['device_name'], ENT_QUOTES, 'UTF-8') ?>"
                          onclick="event.stopPropagation(); if(typeof window.toggleLiveLocation === 'function') { window.toggleLiveLocation('<?= htmlspecialchars($device['device_id'], ENT_QUOTES, 'UTF-8') ?>', '<?= htmlspecialchars($device['device_name'], ENT_QUOTES, 'UTF-8') ?>', this); } else { console.error('toggleLiveLocation not found'); alert('يرجى تحديث الصفحة'); }"
                          title="📍 لايف لوكيشن">
                    📍
                  </button>
                  <?php if ($user_role === 'admin'): ?>
                    <a href="?delete_device=<?= htmlspecialchars($device['device_id'], ENT_QUOTES, 'UTF-8') ?>"
                       class="delete-btn" style="flex-shrink: 0;"
                       onclick="event.stopPropagation(); if(confirm('هل أنت متأكد من حذف الجهاز \'<?= htmlspecialchars($device['device_name'], ENT_QUOTES, 'UTF-8') ?>\'؟ سيتم حذف جميع بياناته بما في ذلك المواقع والمجموعات.')) { showLoading(); return true; } return false;">
                      حذف
                    </a>
                  <?php endif; ?>
                </div>
              </li>
            <?php endforeach; ?>
          <?php else: ?>
            <li style="cursor: default; color: #bbb; padding: 15px; text-align: center;">
              <?php if (defined('USE_FIREBASE') && USE_FIREBASE): ?>
                لا توجد أجهزة غير مجمعة
                <br><small style="font-size: 11px; color: #999;">جميع الأجهزة موجودة في مجموعات أو جرب "🔄 تحديث القائمة"</small>
              <?php else: ?>
                لا توجد أجهزة غير مجمعة
              <?php endif; ?>
            </li>
          <?php endif; ?>
        </ul>
      </div>

      <!-- قسم خاص بإضافة المجموعات وأجهزة للمجموعة (للمسؤول فقط) -->
      <?php if ($user_role === 'admin'): ?>
        <div class="sidebar-section">
            <h3>🗂️ إدارة المجموعات</h3>
            <!-- نموذج إنشاء مجموعة جديدة -->
            <form method="post" class="card" onsubmit="showLoading();">
                <div class="card-header">إنشاء مجموعة جديدة</div>
                <label>اسم المجموعة</label>
                <input type="text" name="group_name" placeholder="اكتب اسم المجموعة..." required>
                <button type="submit" name="create_group">إنشاء ➕</button>
            </form>

            <!-- نموذج إضافة جهاز إلى مجموعة -->
            <form method="post" class="card" onsubmit="showLoading();">
                <div class="card-header">إضافة جهاز إلى مجموعة</div>
                <label>اختر المجموعة</label>
                <select name="selected_group" required>
                    <option value="" disabled selected>اختر مجموعة...</option>
                    <?php foreach ($groups as $grp): ?>
                        <option value="<?= $grp['id'] ?>"><?= htmlspecialchars($grp['group_name'], ENT_QUOTES, 'UTF-8') ?></option>
                    <?php endforeach; ?>
                </select>
                <label>اختر الجهاز</label>
                <select name="selected_device_for_group" required>
                    <option value="" disabled selected>اختر جهازًا...</option>
                    <?php foreach ($ungroupedDevices as $device): ?>
                        <option value="<?= htmlspecialchars($device['device_id'], ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($device['device_name'], ENT_QUOTES, 'UTF-8') ?></option>
                    <?php endforeach; ?>
                </select>
                <button type="submit" name="add_device_to_group">إضافة ➕</button>
            </form>
        </div>
      <?php endif; ?>
    </div>

    <!-- المحتوى الرئيسي -->
    <div class="main-content">
      <div class="main-content-wrapper">
          <div class="controls">
            <div class="controls-main">
              <div class="control-group">
                  <label id="lblChooseDevice">الجهاز:</label>
                  <select id="deviceSelect">
                      <option value="" id="optAllDevices">جميع الأجهزة</option>
                      <?php foreach ($allDevices as $device): ?>
                          <option value="<?= htmlspecialchars($device['device_id'], ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($device['device_name'], ENT_QUOTES, 'UTF-8') ?></option>
                      <?php endforeach; ?>
                  </select>
              </div>
              <div class="control-group">
                  <label id="lblBattery">البطارية:</label>
                  <input type="text" id="batteryDisplay" readonly placeholder="--">
              </div>
              <div class="control-group">
                  <label id="lblDate">التاريخ:</label>
                  <input type="date" id="dateSelect">
              </div>
              <div class="control-group" id="timeControls" style="display: none;">
                  <label id="lblTimeFrom">من:</label>
                  <input type="text" id="timeFrom" placeholder="01:00 PM">
                  <label id="lblTimeTo">إلى:</label>
                  <input type="text" id="timeTo" placeholder="05:30 PM">
              </div>
              <button onclick="fetchTimelineAndRoute()" id="btnSearch" class="primary">🔍 بحث</button>
              <button onclick="fetchLatestLocation()" id="btnLatestLoc" class="secondary">📡 آخر موقع</button>
              <button onclick="shareLocation()" id="btnShare" class="secondary">🔗 مشاركة</button>
              <button onclick="toggleThresholdSettings()" id="btnThresholdSettings" class="secondary">⚙️</button>
              <button onclick="toggleTimelineSidebar()" id="btnToggleTimeline" class="secondary" title="إظهار/إخفاء المخطط الزمني">📊 المخطط الزمني</button>
              <button onclick="showAnalytics()" id="btnAnalytics" class="secondary" title="الإحصائيات والتحليلات">📈 إحصائيات</button>
              <button onclick="showAlerts()" id="btnAlerts" class="secondary" title="التنبيهات">🔔 تنبيهات <span id="alertsBadge" class="badge" style="display:none;">0</span></button>
              <button onclick="showGeofencing()" id="btnGeofencing" class="secondary" title="المناطق الجغرافية">📍 مناطق</button>
              <button onclick="toggleMultiDeviceView()" id="btnMultiDevice" class="secondary" title="عرض جميع الأجهزة">👥 جميع الأجهزة</button>
            </div>
            <div class="controls-animation">
              <div class="animation-panel" id="animationPanel" data-state="disabled">
                <div class="animation-panel__row">
                  <div class="animation-info">
                    <div class="animation-time-group">
                      <span class="animation-label">الوقت الحالي:</span>
                      <strong id="animationTimeLabel">--:--</strong>
                    </div>
                    <div id="animationStatusLabel" class="animation-status-text">الحركة غير متاحة</div>
                  </div>
                  <div class="animation-panel__controls">
                    <button type="button" id="animationPlayPause" class="animation-btn" disabled>▶️ تشغيل</button>
                    <button type="button" id="animationReset" class="animation-btn" disabled>⟲ بداية</button>
                    <div class="animation-progress-control">
                      <label for="animationProgressRange">المسار</label>
                      <input type="range" id="animationProgressRange" min="0" max="100" step="1" value="0">
                    </div>
                    <div class="animation-speed-control">
                      <label for="animationSpeedRange">السرعة</label>
                      <input type="range" id="animationSpeedRange" min="0.25" max="5" step="0.25" value="1">
                      <span id="animationSpeedLabel">1x</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Threshold Settings Panel -->
          <div id="thresholdSettingsPanel" class="settings-panel" style="display:none;">
            <div class="settings-content">
              <h3>إعدادات التصنيف</h3>
              <div class="settings-grid">
                <label id="lblThStopMinDuration">أقل مدة للتوقف (دقيقة)<input type="number" step="0.1" id="th_stopMinDuration" /></label>
                <label id="lblThStationaryThreshold">أقصى انتشار للتوقف (متر)<input type="number" step="1" id="th_stationaryThreshold" /></label>
                <label id="lblThStopMaxSpeed">أقصى سرعة للتوقف (كم/س)<input type="number" step="0.1" id="th_stopMaxSpeed" /></label>
                <label id="lblThDrivingMinSpeed">أدنى سرعة للقيادة (كم/س)<input type="number" step="0.1" id="th_drivingMinSpeed" /></label>
                <label id="lblThDrivingMinSegment">أقل مدة قيادة (دقيقة)<input type="number" step="0.1" id="th_drivingMinSegment" /></label>
                <label id="lblThDrivingMinDistance">أقل مسافة قيادة (متر)<input type="number" step="1" id="th_drivingMinDistance" /></label>
              </div>
              <div class="settings-actions">
                <button onclick="toggleThresholdSettings()" id="btnCloseSettings" class="secondary">✖ إغلاق</button>
                <button onclick="resetThresholdsToDefault()" id="btnResetThresholds" class="secondary" title="إعادة تعيين جميع الإعدادات إلى القيم الافتراضية">🔄 إعادة تعيين</button>
                <button id="btnSaveThresholds" class="primary">💾 حفظ وتطبيق</button>
              </div>
            </div>
          </div>

      <div class="map-and-timeline">
        <div class="map-container">
          <div id="selectedDeviceContainer">
              <strong id="lblSelectedDeviceName">اسم الجهاز المختار:</strong> 
              <span id="selectedDeviceName">لا يوجد جهاز محدد</span>
              <small id="map-hint" style="display: block; color: var(--text-secondary); font-weight: normal; margin-top: 5px;">
                  💡 تلميح: انقر بالزر الأيمن على الخريطة لإضافة "مكان مفضل" (مثل المنزل أو العمل).
              </small>
          </div>
          <div id="map"></div>
        </div>

        <!-- Timeline Sidebar on the Right -->
        <div class="timeline-sidebar">
          <div class="logs">
              <div class="timeline-header">
                  <h2 id="logsTitle">المخطط الزمني للنشاط</h2>
                  <button onclick="toggleTimelineSidebar()" class="timeline-toggle-btn" id="timelineToggleBtn" title="إخفاء/إظهار المخطط الزمني">◄</button>
              </div>
              <div class="logs-controls">
                  <input type="text" id="logsSearchInput" oninput="filterLogsTable()" placeholder="ابحث في المخطط الزمني...">
                  <button onclick="downloadLogsXLSX()" id="btnDownloadExcel" class="secondary">📥 Excel</button>
              </div>
              <div class="timeline-content-wrapper">
                  <table id="logsTable">
                      <thead>
                          <!-- Header is now visually hidden, but kept for accessibility -->
                          <tr style="display:none;">
                              <th id="thTime">الوقت</th>
                              <th id="thActivity">النشاط</th>
                              <th id="thDuration">المدة</th>
                          </tr>
                      </thead>
                      <tbody>
                          <!-- Timeline entries will be generated by JS -->
                      </tbody>
                  </table>
              </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>

  <!-- Toast notifications container -->
  <div id="toastContainer"></div>

  <!-- NEW: Favorite Place Modal -->
  <div id="favoritePlaceModal" class="modal-overlay" style="display: none;">
      <div class="modal-content">
          <h3 id="modalTitle">إضافة مكان مفضل جديد</h3>
          <form id="favoritePlaceForm" onsubmit="event.preventDefault(); saveFavoritePlace();">
              <div class="form-group">
                  <label for="placeName" id="labelPlaceName">اسم المكان (مثال: المنزل، العمل)</label>
                  <input type="text" id="placeName" required>
              </div>
              <div class="form-group">
                  <label for="placeRadius" id="labelPlaceRadius">نصف القطر (متر)</label>
                  <input type="number" id="placeRadius" value="100" min="10" max="5000" required>
              </div>
              <input type="hidden" id="placeLat">
              <input type="hidden" id="placeLng">
              <button type="button" onclick="closeFavoritePlaceModal()" id="btnCancelModal" class="secondary" style="width:48%; float:left;">إلغاء</button>
              <button type="submit" id="btnSaveModal" class="primary" style="width:48%; float:right;">حفظ المكان</button>
          </form>
      </div>
  </div>

  <!-- ALL SCRIPT LOGIC MOVED TO EXTERNAL FILE -->
  <script>
    // This block is intentionally left empty.
    // All JavaScript logic has been moved to `dashboard_scripts.js`
    // to improve performance and code organization.
  </script>
  <!-- Load the main script file - بدون defer لأن الدوال مطلوبة فوراً للـ onclick -->
  <?php $dash_scripts_version = file_exists('dashboard_scripts.js') ? filemtime('dashboard_scripts.js') : time(); ?>
  <script src="dashboard_scripts.js?v=<?= $dash_scripts_version ?>"></script>
  
  <!-- عرض رسائل النجاح والخطأ من الجلسة -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
        <?php if (isset($_SESSION['success_message'])): ?>
            setTimeout(function() {
                if (typeof showToast === 'function') {
                    showToast('<?= addslashes($_SESSION['success_message']) ?>', 'success', 4000);
                } else {
                    alert('<?= addslashes($_SESSION['success_message']) ?>');
                }
            }, 500);
            <?php unset($_SESSION['success_message']); ?>
        <?php endif; ?>
        
        <?php if (isset($_SESSION['error_message'])): ?>
            setTimeout(function() {
                if (typeof showToast === 'function') {
                    showToast('<?= addslashes($_SESSION['error_message']) ?>', 'error', 5000);
                } else {
                    alert('<?= addslashes($_SESSION['error_message']) ?>');
                }
            }, 500);
            <?php unset($_SESSION['error_message']); ?>
        <?php endif; ?>
    });
  </script>
  
  <!-- Real-time Updates System -->
  <?php $realtime_version = file_exists('realtime_updates.js') ? filemtime('realtime_updates.js') : time(); ?>
  <script src="realtime_updates.js?v=<?= $realtime_version ?>"></script>
  
  <!-- Multi-Device View System -->
  <?php $multidevice_version = file_exists('multi_device_view.js') ? filemtime('multi_device_view.js') : time(); ?>
  <script src="multi_device_view.js?v=<?= $multidevice_version ?>"></script>

  <!-- 
    الحل الجذري لمشكلة عدم ظهور الخريطة:
    1. تعريف دالة initializeMap مباشرة هنا لضمان وجودها قبل استدعاء جوجل لها.
    2. سكربت جوجل سيقوم باستدعاء هذه الدالة عبر الـ callback.
    3. بقية الدوال المتعلقة بالخريطة موجودة في dashboard_scripts.js الذي يتم تحميله بـ defer.
  -->
  <script>
    function initializeMap() { // This function is the callback for the Google Maps API
        const el = document.getElementById("map");
        if (el && window.google && window.google.maps) {
            // تهيئة الأيقونات بعد تحميل Google Maps
            if (typeof initializeMapIcons === 'function') {
                initializeMapIcons();
            }
            try {
                map = new google.maps.Map(el, {
                    center: { lat: 33.3152, lng: 44.3661 }, // Baghdad
                    zoom: 6,
                    mapTypeControl: false,
                    // تمكين التكبير/التصغير مباشرة عبر عجلة الفأرة دون الحاجة إلى Ctrl
                    gestureHandling: 'greedy',
                    streetViewControl: false // Disable street view for a cleaner interface
                });
                infoWindow = new google.maps.InfoWindow();
                directionsService = new google.maps.DirectionsService();

                // [جديد] النقر العادي لتحديد مركز منطقة جغرافية (Geofence)
                map.addListener('click', (e) => {
                    const geoPanel = document.getElementById('geofencingPanel');
                    const geoForm  = document.getElementById('addGeofenceForm');
                    const isGeoOpen = geoPanel && geoPanel.style.display === 'flex';
                    const isGeoFormVisible = geoForm && geoForm.style.display === 'block';

                    // نفعّل التحديد فقط إذا كانت لوحة الجغرافية ونموذج الإضافة ظاهرين
                    if (!isGeoOpen || !isGeoFormVisible) return;

                    const lat = e.latLng.lat();
                    const lng = e.latLng.lng();

                    const latInput = document.getElementById('geofenceLat');
                    const lngInput = document.getElementById('geofenceLng');
                    const radiusInput = document.getElementById('geofenceRadius');

                    if (latInput && lngInput) {
                        latInput.value = lat.toFixed(6);
                        lngInput.value = lng.toFixed(6);
                    }

                    // رسم دائرة معاينة على الخريطة للمساعدة في اختيار المنطقة
                    try {
                        let radius = 100;
                        if (radiusInput && radiusInput.value) {
                            const r = parseInt(radiusInput.value, 10);
                            if (!isNaN(r) && r > 0) radius = r;
                        }

                        if (typeof geofenceCircles !== 'undefined' && Array.isArray(geofenceCircles)) {
                            geofenceCircles.forEach(c => { if (c) c.setMap(null); });
                            geofenceCircles = [];

                            const circle = new google.maps.Circle({
                                strokeColor: '#007bff',
                                strokeOpacity: 0.8,
                                strokeWeight: 2,
                                fillColor: '#007bff',
                                fillOpacity: 0.25,
                                map: map,
                                center: { lat: lat, lng: lng },
                                radius: radius
                            });
                            geofenceCircles.push(circle);
                        }

                        map.setCenter({ lat, lng });
                        map.setZoom(15);
                    } catch (circleErr) {
                        console.error('خطأ في رسم دائرة المنطقة الجغرافية:', circleErr);
                    }
                });

                // [الحل] النقر بالزر الأيمن لفتح نافذة \"مكان مفضل\" كما كان سابقاً
                map.addListener('rightclick', (e) => {
                    if (typeof openFavoritePlaceModal === 'function') {
                        openFavoritePlaceModal(e.latLng);
                    }
                }); // تم نقل هذا المستمع إلى هنا لضمان عمله بعد تهيئة الخريطة

                // تتبع تفاعل المستخدم مع الخريطة لمنع إعادة التمركز التلقائي
                // عندما يقوم المستخدم بتحريك الخريطة (سحب أو تكبير/تصغير)، نوقف التمركز التلقائي
                map.addListener('dragend', () => {
                    if (typeof userInteractedWithMap !== 'undefined') {
                        userInteractedWithMap = true;
                    }
                });
                
                map.addListener('zoom_changed', () => {
                    if (typeof userInteractedWithMap !== 'undefined') {
                        userInteractedWithMap = true;
                    }
                });

                // [جديد] إضافة عناصر التحكم في حركة المسار على الخريطة
                if (typeof setupAnimationUI === 'function') {
                    setupAnimationUI();
                }
                
                console.log('✅ تم تحميل خرائط Google بنجاح');
            } catch (error) {
                console.error('❌ خطأ في تهيئة الخريطة:', error);
                if (el) {
                    el.innerHTML = `
                        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #f5f5f5; padding: 20px; text-align: center; direction: rtl;">
                            <div style="font-size: 48px; margin-bottom: 20px;">❌</div>
                            <h2 style="color: #d32f2f; margin-bottom: 15px;">خطأ في تهيئة الخريطة</h2>
                            <p style="color: #666;">${error.message || 'حدث خطأ غير متوقع'}</p>
                        </div>
                    `;
                }
            }
        } else {
            console.error('❌ Map container #map or Google Maps API not found.');
            const el = document.getElementById("map");
            if (el) {
                el.innerHTML = `
                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #f5f5f5; padding: 20px; text-align: center; direction: rtl;">
                        <div style="font-size: 48px; margin-bottom: 20px;">⚠️</div>
                        <h2 style="color: #d32f2f; margin-bottom: 15px;">لم يتم العثور على خرائط Google</h2>
                        <p style="color: #666;">يرجى التحقق من مفتاح API وإعدادات Google Cloud Console</p>
                    </div>
                `;
            }
        }
    }
  </script>

  <!-- لوحات إضافية - يجب أن تكون قبل إغلاق body -->
  <?php 
  // تضمين اللوحات مع معالجة الأخطاء
  try {
      include 'alerts_panel.php';
  } catch (Exception $e) {
      error_log("❌ خطأ في تحميل alerts_panel.php: " . $e->getMessage());
      echo '<!-- خطأ في تحميل لوحة التنبيهات -->';
  }
  
  try {
      include 'analytics_panel.php';
  } catch (Exception $e) {
      error_log("❌ خطأ في تحميل analytics_panel.php: " . $e->getMessage());
      echo '<!-- خطأ في تحميل لوحة الإحصائيات -->';
  }
  
  try {
      include 'geofencing_panel.php';
  } catch (Exception $e) {
      error_log("❌ خطأ في تحميل geofencing_panel.php: " . $e->getMessage());
      echo '<!-- خطأ في تحميل لوحة المناطق الجغرافية -->';
  }
  ?>
  
  <!-- ثم تحميل سكربت جوجل الذي سيستدعي initializeMap من السكربت الخاص بنا -->
  <?php // The config file is now included at the top of the script ?>
  <script src="https://maps.googleapis.com/maps/api/js?key=<?php echo urlencode($google_maps_api_key); ?>&libraries=geometry,places&language=ar&callback=initializeMap"></script>
  
   <!-- مزامنة الأجهزة الجديدة تلقائياً في الخلفية -->
   <script>
     // ✅ مزامنة الأجهزة الجديدة من Firebase إلى MySQL تلقائياً (في الخلفية)
     window.addEventListener('load', function() {
       // انتظار 3 ثوانٍ بعد تحميل الصفحة لتجنب التأثير على سرعة التحميل
       setTimeout(function() {
         fetch('dashboard.php?action=sync_new_devices')
           .then(res => res.json())
           .then(data => {
             if (data.status === 'success' && data.added > 0) {
               console.log('✅ تمت إضافة ' + data.added + ' جهاز جديد تلقائياً');
               // تحديث القائمة إذا تمت إضافة أجهزة جديدة
               if (data.added > 0) {
                 // تحديث القائمة بعد 2 ثانية
                 setTimeout(function() {
                   window.location.reload();
                 }, 2000);
               }
             }
           })
           .catch(err => {
             // تجاهل الأخطاء في الخلفية
             console.log('ℹ️  مزامنة الأجهزة: ' + (err.message || 'لا توجد أجهزة جديدة'));
           });
       }, 3000);
     });
   </script>
   
   <!-- فحص وجود اللوحات بعد تحميل الصفحة -->
   <script>
     // فحص فوري بعد تحميل الصفحة
     window.addEventListener('load', function() {
      // فحص وجود اللوحات
      const alertsPanel = document.getElementById('alertsPanel');
      const analyticsPanel = document.getElementById('analyticsPanel');
      const geofencingPanel = document.getElementById('geofencingPanel');
      
      console.log('🔍 فحص اللوحات بعد تحميل الصفحة:');
      console.log('  - alertsPanel:', alertsPanel ? '✅ موجود' : '❌ غير موجود');
      console.log('  - analyticsPanel:', analyticsPanel ? '✅ موجود' : '❌ غير موجود');
      console.log('  - geofencingPanel:', geofencingPanel ? '✅ موجود' : '❌ غير موجود');
      
      if (!alertsPanel) {
        console.error('❌ alertsPanel غير موجود في DOM');
      }
      if (!analyticsPanel) {
        console.error('❌ analyticsPanel غير موجود في DOM');
      }
      if (!geofencingPanel) {
        console.error('❌ geofencingPanel غير موجود في DOM');
      }
      
      // إعادة تعريف الدوال إذا كانت اللوحات موجودة
      if (alertsPanel && typeof showAlerts !== 'function') {
        window.showAlerts = function() {
          alertsPanel.style.display = 'flex';
          if (typeof updateAlertsBadge === 'function') {
            updateAlertsBadge();
          }
        };
      }
      
      if (analyticsPanel && typeof showAnalytics !== 'function') {
        window.showAnalytics = function() {
          analyticsPanel.style.display = 'flex';
          if (typeof loadDeviceList === 'function') {
            loadDeviceList();
          }
        };
      }
      
      if (geofencingPanel && typeof showGeofencing !== 'function') {
        window.showGeofencing = function() {
          geofencingPanel.style.display = 'flex';
        };
      }
      
      // التأكد من أن الدوال متاحة في النطاق العام
      if (typeof toggleGroupDevices !== 'function') {
        console.error('❌ toggleGroupDevices غير متاحة');
      } else {
        console.log('✅ toggleGroupDevices متاحة');
      }
      
      if (typeof toggleSidebar !== 'function') {
        console.error('❌ toggleSidebar غير متاحة');
      } else {
        console.log('✅ toggleSidebar متاحة');
      }
    });
  </script>
  
  <!-- تعريف الدوال المهمة فوراً قبل تحميل dashboard_scripts.js -->
  <script>
    // تعريف مؤقت للدوال المهمة حتى يتم تحميل dashboard_scripts.js
    if (typeof toggleGroupDevices === 'undefined') {
      window.toggleGroupDevices = function(groupId) {
        var el = document.getElementById("group-devices-" + groupId);
        var headerEl = document.querySelector('.group-header[onclick*="toggleGroupDevices(' + groupId + ')"]');
        
        if (!el) {
          console.error('❌ لم يتم العثور على عنصر المجموعة:', "group-devices-" + groupId);
          return;
        }
        
        const computedStyle = window.getComputedStyle(el);
        const currentDisplay = el.style.display || computedStyle.display;
        const isHidden = currentDisplay === "none" || currentDisplay === "";
        
        if (isHidden) {
          el.style.display = "block";
          if (headerEl) headerEl.classList.add('active');
          console.log('✅ تم توسيع المجموعة:', groupId);
        } else {
          el.style.display = "none";
          if (headerEl) headerEl.classList.remove('active');
          console.log('✅ تم طي المجموعة:', groupId);
        }
      };
    }
    
    if (typeof toggleSidebar === 'undefined') {
      window.toggleSidebar = function() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebarOverlay');
        const toggleIcon = document.getElementById('sidebarToggleIcon');
        
        if (sidebar) {
          const isOpen = sidebar.classList.contains('mobile-open');
          if (isOpen) {
            sidebar.classList.remove('mobile-open');
            if (overlay) overlay.classList.remove('active');
            if (toggleIcon) toggleIcon.textContent = '☰';
            document.body.style.overflow = '';
          } else {
            sidebar.classList.add('mobile-open');
            if (overlay) overlay.classList.add('active');
            if (toggleIcon) toggleIcon.textContent = '✕';
            document.body.style.overflow = 'hidden';
          }
        }
      };
    }
  </script>
</body>
</html>

