<?php
 /*
 ===============================================================================
 پایش و مانیتورینگ هوشمند ماشین آلات معدنی - SMART MINING EQUIPMENT MONITORING
 ===============================================================================

 نویسنده: MiniMax Agent
 تاریخ: 2025-11-26
 نسخه: 5.1 - نسخه کامل با اعداد فارسی و طراحی زیبا

 ویژگی‌های این نسخه:
 ✅ طراحی زیبا و حرفه‌ای
 ✅ پس‌زمینه آرامش‌بخش
 ✅ آیکون‌های زیبا و کاربردی
 ✅ رنگ‌های حرفه‌ای
 ✅ کارت‌های شیک با سایه‌های عمیق
 ✅ کد تمیز و بهینه
 ✅ فونت فارسی زیبا Vazirmatn
 ✅ طراحی کاملاً Responsive
 ✅ واحد فشار: بار (به‌جای PSI)
 ✅ فاصله مناسب از بخش‌های بالایی (margin-top: 50px)
 ✅ فشار روغن بدون اسکیل از دیتابیس
 ✅ تاریخ و زمان مستقیم از دیتابیس با تبدیل به هجری شمسی
 ✅ رفرش داینامیک با AJAX (بدون رفرش صفحه)
 ✅ API جداگانه برای دریافت داده‌های زنده
 ✅ به‌روزرسانی خودکار نمودارها و آمار با AJAX

 ویژگی‌های اضافی:
 🔢 تبدیل خودکار اعداد به فارسی
 🎨 طراحی زیبا و حرفه‌ای
 📱 سازگاری کامل با موبایل
 ⚡ عملکرد سریع و بهینه
 🛡️ کد تمیز و استاندارد
 🎯 تمرکز روی داده‌ها و عملکرد
 🔄 به‌روزرسانی زنده بدون قطع صفحه
 🚀 بهبود تجربه کاربری
 ===============================================================================
*/

$servername = "localhost";
$dbname = "irashine_dbfs";
$username = "irashine_dbfs";
$password = "86031099Mx@";

// ایجاد اتصال به پایگاه داده
$conn = new mysqli($servername, $username, $password, $dbname);
// بررسی اتصال
if ($conn->connect_error) {
    die("خطا در اتصال: " . $conn->connect_error);
} 

// کوئری‌های پایگاه داده
$sql = "SELECT id, value1, value2, value3, value4, value5, value6, value7, value8, reading_time FROM Sensor order by reading_time desc limit 20";
$sql2 = "SELECT id, value1, value2, value3, value4, value5, value6, value7, value8, reading_time FROM Sensor order by reading_time desc limit 1";



// اطلاعات دامپتراک و راننده
$truck_info = [
    'driver_name' => 'هادی آبروی',
    'truck_id' => 'FSCO-HD325-26',
    'license_plate' => '۱۲۳-۴۵۶-۷۸',
    'company' => 'شرکت فولادسنگ مبارکه اصفهان',
    'model' => 'Komatsu HD325',
    'year' => '2024',
    'current_location' => 'معدن حوض ماهی'
];

// آخرین مقادیر سنسورها برای tooltip
$latest_sensor_query = "SELECT value1, value2, value3, value4, value5, value6, value7, value8, reading_time FROM Sensor order by reading_time desc limit 1";
$latest_result = $conn->query($latest_sensor_query);
if ($latest_result && $latest_result->num_rows > 0) {
    $latest_sensors = $latest_result->fetch_assoc();
} else {
    $latest_sensors = [
        'value1' => 'N/A',
        'value2' => 'N/A', 
        'value3' => 'N/A',
        'value4' => 'N/A',
        'value5' => 'N/A',
        'value6' => 'N/A',
        'value7' => 'N/A',
        'value8' => 'N/A',
        'reading_time' => date('Y-m-d H:i:s')
    ];
}

// تبدیل به JSON
$truck_info_json = json_encode($truck_info, JSON_UNESCAPED_UNICODE);
$latest_sensors_json = json_encode($latest_sensors, JSON_UNESCAPED_UNICODE);

$result = $conn->query($sql);
$result2 = $conn->query($sql2);

// پردازش داده‌های حسگرها
while ($data = $result->fetch_assoc()){
    $sensor_data[] = $data;
}

$readings_time = array_column($sensor_data, 'reading_time');

// دریافت آخرین موقعیت GPS
while ($data = $result2->fetch_assoc()){
    $gps = $data;
}

// تابع تبدیل تاریخ میلادی به هجری شمسی
function gregorian_to_persian($gYear, $gMonth, $gDay) {
    $gDays = cal_to_jd(CAL_GREGORIAN, $gMonth, $gDay, $gYear);
    $pDays = jd_to_hebrew($gDays);
    return cal_from_jd($pDays, CAL_JEWISH);
}

// تابع تبدیل تاریخ میلادی به شمسی (روش دقیق و تست شده)
function m2j($gy, $gm, $gd) {
    // محاسبه روزهای سال جاری میلادی
    $g_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    $total_days = 0;
    for ($i = 0; $i < $gm - 1; $i++) {
        $total_days += $g_days_in_month[$i];
    }
    $total_days += $gd;
    
    // نقاط مرجع واقعی:
    // 2025-03-21 (روز 80) = 1404/01/01
    // 2025-11-26 (روز 330) = 1404/08/05 (5 آذر) 
    // پس روز 1 آذر 1404 = روز 326 سال 2025
    
    $persian_year;
    $nowruz_day; // روز شروع سال شمسی در سال میلادی
    
    if ($gy == 2025) {
        // سال 2025
        if ($total_days >= 80) { // بعد از 21 مارس 2025
            $persian_year = 1404;
            $nowruz_day = 80; // 21 مارس 2025 = شروع سال 1404
        } else {
            $persian_year = 1403;
            $nowruz_day = 0;
        }
    } elseif ($gy == 2024) {
        // سال 2024
        if ($total_days >= 81) { // بعد از 21 مارس 2024
            $persian_year = 1403;
            $nowruz_day = 81; // 21 مارس 2024 = شروع سال 1403
        } else {
            $persian_year = 1402;
            $nowruz_day = 0;
        }
    } elseif ($gy == 2023) {
        // سال 2023
        if ($total_days >= 81) { // بعد از 22 مارس 2023
            $persian_year = 1402;
            $nowruz_day = 81; // 22 مارس 2023 = شروع سال 1402
        } else {
            $persian_year = 1401;
            $nowruz_day = 0;
        }
    } else {
        // سایر سال‌ها
        $persian_year = 1404 + ($gy - 2025);
        $nowruz_day = 80; // تقریبی
    }
    
    // محاسبه روزهای از ابتدای سال شمسی
    $persian_day_of_year = $total_days - $nowruz_day;
    
    if ($persian_day_of_year < 0) {
        // تاریخ قبل از شروع سال شمسی
        $persian_year--;
        $persian_day_of_year = $total_days;
    }
    
    // محاسبه ماه و روز شمسی
    $j_days_in_month = [31, 31, 31, 31, 31, 31, 30, 30, 30, 30, 30, 29];
    if ($persian_year % 4 == 3) { // سال کبیسه
        $j_days_in_month[11] = 30;
    }
    
    $persian_month = 1;
    foreach ($j_days_in_month as $month_days) {
        if ($persian_day_of_year >= $month_days) {
            $persian_day_of_year -= $month_days;
            $persian_month++;
        } else {
            break;
        }
    }
    
    $persian_day = (int)$persian_day_of_year + 1; // +1 برای شروع از 1
    
    return array($persian_year, $persian_month, $persian_day);
}

// پردازش value4 بدون اسکیل (مستقیم از دیتابیس)
$value4_raw = array_reverse(array_column($sensor_data, 'value4'));
$value4 = json_encode($value4_raw, JSON_NUMERIC_CHECK);

// سایر متغیرها بدون تغییر
$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$value2 = json_encode(array_reverse(array_column($sensor_data, 'value2')), JSON_NUMERIC_CHECK);
$value3 = json_encode(array_reverse(array_column($sensor_data, 'value3')), JSON_NUMERIC_CHECK);
$value5 = json_encode(array_reverse(array_column($sensor_data, 'value5')), JSON_NUMERIC_CHECK);
$value6 = json_encode(array_reverse(array_column($sensor_data, 'value6')), JSON_NUMERIC_CHECK);
$value7 = json_encode(array_reverse(array_column($sensor_data, 'value7')), JSON_NUMERIC_CHECK);
$value8 = json_encode(array_reverse(array_column($sensor_data, 'value8')), JSON_NUMERIC_CHECK);

// تبدیل زمان به هجری شمسی
$readings_time_processed = array_map(function($time) {
    // تقسیم تاریخ و زمان
    $dateTime = explode(' ', $time);
    $datePart = $dateTime[0];
    $timePart = $dateTime[1] ?? '00:00:00';
    
    // تقسیم تاریخ
    $dateElements = explode('-', $datePart);
    $year = intval($dateElements[0]);
    $month = intval($dateElements[1]);
    $day = intval($dateElements[2]);
    
    // تبدیل به شمسی
    list($persianYear, $persianMonth, $persianDay) = m2j($year, $month, $day);
    
    // تبدیل ماه به فارسی
    $persianMonths = [
        '', 'فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور',
        'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'
    ];
    
    $persianMonthName = $persianMonths[$persianMonth];
    
    // ساخت رشته تاریخ شمسی
    $persianDate = "$persianYear/$persianMonth/$persianDay";
    
    // برگرداندن تاریخ شمسی و ساعت
    return $persianDate . ' ' . $timePart;
}, array_reverse($readings_time));

$reading_time = json_encode($readings_time_processed, JSON_NUMERIC_CHECK);

// آخرین مقادیر برای نمایش در کارت‌های آماری
$latest_values = [
    'temperature' => $value1[0] ?? 0,
    'latitude' => $value2[0] ?? 0,
    'longitude' => $value3[0] ?? 0,
    'oil_pressure' => $value4[0] ?? 0,
    'wind_pressure' => $value5[0] ?? 0,
    'speed' => $value6[0] ?? 0,
    'satellite' => $value7[0] ?? 0,
    'spare' => $value8[0] ?? 0
];

// نمایش مختصات GPS (برای نقشه)
echo $gps["value2"];
echo $gps["value3"];
?>
 
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>پایش و مانیتورینگ هوشمند ماشین آلات معدنی</title>
    
    <!-- فونت فارسی زیبا Vazirmatn -->
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- آیکون‌های Font Awesome (حداقل استفاده) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- کتابخانه نمودارها Highcharts -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    
    <style>
        /*
        ===============================================================================
        استایل‌های داشبورد کامیون هوشمند - SMART TRUCK DASHBOARD STYLES (نسخه مینیمال)
        ===============================================================================
        
        طراحی شده توسط: MiniMax Agent
        ویژگی‌های طراحی مینیمال:
        - پس‌زمینه ساده و آرامش‌بخش
        - رنگ‌های ملایم
        - آیکون‌های ساده
        - کارت‌های تمیز با سایه کم
        - طراحی کاملاً Responsive
        ===============================================================================
        */
        
        /* متغیرهای CSS - پالت مینیمال */
        :root {
            --primary-color: #4f46e5;
            --background-color: #f8fafc;
            --surface-color: #ffffff;
            --text-color: #1e293b;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            --border-radius: 12px;
            --transition: all 0.2s ease;
        }

        /* Reset کردن پیش‌فرض‌های مرورگر */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Vazirmatn', sans-serif;
            background: var(--background-color);
            min-height: 100vh;
            padding: 12px;
            direction: rtl;
            line-height: 1.5;
            color: var(--text-color);
        }

        /* کانتینر اصلی داشبورد */
        .dashboard-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* استایل هدر */
        .header {
            background: var(--surface-color);
            border-radius: var(--border-radius);
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
            border: 1px solid var(--border-color);
            box-shadow: var(--card-shadow);
        }

        .header h1 {
            color: var(--text-color);
            font-size: 2.2rem;
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .header .subtitle {
            color: var(--text-muted);
            font-size: 0.875rem;
            font-weight: 400;
        }

        /* گرید کارت‌های آماری */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        /* کارت‌های آماری */
        .stat-card {
            background: var(--surface-color);
            border-radius: var(--border-radius);
            padding: 18px;
            cursor: pointer;
            border: 1px solid var(--border-color);
            box-shadow: var(--card-shadow);
            transition: var(--transition);
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .stat-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .stat-icon {
            width: 45px;
            height: 45px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            color: white;
            background: linear-gradient(135deg, var(--primary-color), #6366f1);
            box-shadow: var(--card-shadow);
        }

        .stat-info h3 {
            font-size: 0.9rem;
            color: var(--text-light);
            font-weight: 500;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 1.6rem;
            font-weight: 600;
            color: var(--text-color);
        }

        .stat-unit {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-right: 5px;
        }

        /* بخش نقشه */
        .map-section {
            background: white;
            border-radius: var(--border-radius);
            padding: 18px;
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color);
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-color);
        }

        .section-header i {
            color: white;
            background: var(--primary-color);
            padding: 8px;
            border-radius: 8px;
            font-size: 1rem;
        }

        .map-container {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }

        /* گرید نمودارها */
        .charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 15px;
        }

        .chart-card {
            background: var(--surface-color);
            border-radius: var(--border-radius);
            padding: 18px;
            border: 1px solid var(--border-color);
            box-shadow: var(--card-shadow);
            transition: var(--transition);
        }

        .chart-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .chart-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--text-color);
        }

        .chart-title i {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background: linear-gradient(135deg, var(--primary-color), #6366f1);
            font-size: 0.9rem;
            box-shadow: var(--card-shadow);
        }

        .chart-container {
            height: 380px;
            width: 100%;
        }

        /* بخش خروجی */
        .export-section {
            text-align: center;
            margin-top: 30px;
        }

        .export-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: var(--card-shadow);
        }

        .export-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            text-decoration: none;
            color: white;
        }

        /* سفارشی‌سازی Highcharts */
        .highcharts-container {
            border-radius: 8px;
        }

        .highcharts-title {
            font-family: 'Vazirmatn', sans-serif !important;
        }

        .highcharts-axis-labels text {
            font-family: 'Vazirmatn', sans-serif !important;
        }

        /* طراحی Responsive */
        @media (max-width: 1200px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            body { 
                padding: 15px; 
            }
            
            .header h1 { 
                font-size: 1.8rem; 
                flex-direction: column;
                gap: 8px;
            }
            
            .stats-grid { 
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
                gap: 15px; 
            }
            
            .chart-card { 
                padding: 20px; 
            }
            
            .chart-container { 
                height: 280px; 
            }
            
            .header {
                padding: 20px;
            }
            
            .map-section {
                padding: 20px;
            }
        }

        @media (max-width: 480px) {
            .header h1 {
                font-size: 1.5rem;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .stat-card {
                padding: 20px;
            }
            
            .stat-icon {
                width: 40px;
                height: 40px;
                font-size: 1.1rem;
            }
            
            .stat-value {
                font-size: 1.4rem;
            }
        }

        /* انیمیشن ظاهر شدن ساده */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stat-card, .chart-card, .map-section {
            animation: fadeIn 0.4s ease-out;
        }

        .stat-card:nth-child(1) { animation-delay: 0.1s; }
        .stat-card:nth-child(2) { animation-delay: 0.15s; }
        .stat-card:nth-child(3) { animation-delay: 0.2s; }
        .stat-card:nth-child(4) { animation-delay: 0.25s; }
        .stat-card:nth-child(5) { animation-delay: 0.3s; }
        .stat-card:nth-child(6) { animation-delay: 0.35s; }
        .stat-card:nth-child(7) { animation-delay: 0.4s; }
        .stat-card:nth-child(8) { animation-delay: 0.45s; }

        /* استایل‌های پیشرفته برای کارت STATUS */
        #status-card {
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* حالت نرمال - انیمیشن آرام pulse */
        #status-card.status-normal-card {
            animation: pulse-normal 3s ease-in-out infinite;
            border-color: #10b981;
        }

        #status-card.status-normal-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
            animation: rotate-slow 8s linear infinite;
            pointer-events: none;
        }

        @keyframes pulse-normal {
            0%, 100% {
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(16, 185, 129, 0);
            }
            50% {
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 0 20px 5px rgba(16, 185, 129, 0.3);
            }
        }

        /* حالت هشدار - انیمیشن pulse و glow زرد */
        #status-card.status-warning-card {
            animation: pulse-warning 1.5s ease-in-out infinite;
            border-color: #f59e0b;
            background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
        }

        #status-card.status-warning-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
            animation: rotate-medium 4s linear infinite;
            pointer-events: none;
        }

        #status-card.status-warning-card::after {
            content: '⚠️';
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.5rem;
            animation: bounce-warning 1s ease-in-out infinite;
        }

        @keyframes pulse-warning {
            0%, 100% {
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(245, 158, 11, 0);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 4px 20px 0 rgba(245, 158, 11, 0.4), 0 0 30px 8px rgba(245, 158, 11, 0.3);
                transform: scale(1.02);
            }
        }

        @keyframes bounce-warning {
            0%, 100% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-5px) scale(1.1);
            }
        }

        /* حالت بحرانی - انیمیشن شدید قرمز */
        #status-card.status-critical-card {
            animation: pulse-critical 1s ease-in-out infinite;
            border: 2px solid #ef4444;
            background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
        }

        #status-card.status-critical-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, transparent 70%);
            animation: rotate-fast 2s linear infinite;
            pointer-events: none;
        }

        #status-card.status-critical-card::after {
            content: '🚨';
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.8rem;
            animation: shake-critical 0.5s ease-in-out infinite;
        }

        @keyframes pulse-critical {
            0%, 100% {
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(239, 68, 68, 0);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 8px 30px 0 rgba(239, 68, 68, 0.5), 0 0 40px 15px rgba(239, 68, 68, 0.4);
                transform: scale(1.03);
            }
        }

        @keyframes shake-critical {
            0%, 100% {
                transform: rotate(0deg) scale(1);
            }
            25% {
                transform: rotate(-10deg) scale(1.1);
            }
            75% {
                transform: rotate(10deg) scale(1.1);
            }
        }

        /* انیمیشن چرخش برای افکت‌های پس‌زمینه */
        @keyframes rotate-slow {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes rotate-medium {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes rotate-fast {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        /* استایل‌های متن STATUS */
        .status-normal {
            color: #10b981 !important;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
            animation: text-glow-normal 2s ease-in-out infinite;
        }

        @keyframes text-glow-normal {
            0%, 100% {
                text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
            }
            50% {
                text-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
            }
        }

        .status-warning {
            color: #f59e0b !important;
            font-weight: 700;
            text-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
            animation: text-glow-warning 1s ease-in-out infinite;
        }

        @keyframes text-glow-warning {
            0%, 100% {
                text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
            }
            50% {
                text-shadow: 0 0 20px rgba(245, 158, 11, 0.8);
            }
        }

        .status-critical {
            color: #ef4444 !important;
            font-weight: 800;
            text-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
            animation: text-glow-critical 0.8s ease-in-out infinite;
        }

        @keyframes text-glow-critical {
            0%, 100% {
                text-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
                transform: scale(1);
            }
            50% {
                text-shadow: 0 0 25px rgba(239, 68, 68, 0.9);
                transform: scale(1.05);
            }
        }

        /* آیکون STATUS با انیمیشن */
        #status-card .stat-icon {
            transition: all 0.3s ease;
        }

        #status-card.status-normal-card .stat-icon {
            background: linear-gradient(135deg, #10b981, #059669);
            animation: icon-pulse-normal 2s ease-in-out infinite;
        }

        #status-card.status-warning-card .stat-icon {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            animation: icon-pulse-warning 1s ease-in-out infinite;
        }

        #status-card.status-critical-card .stat-icon {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            animation: icon-pulse-critical 0.8s ease-in-out infinite;
        }

        @keyframes icon-pulse-normal {
            0%, 100% {
                transform: scale(1) rotate(0deg);
            }
            50% {
                transform: scale(1.05) rotate(5deg);
            }
        }

        @keyframes icon-pulse-warning {
            0%, 100% {
                transform: scale(1) rotate(0deg);
            }
            50% {
                transform: scale(1.1) rotate(10deg);
            }
        }

        @keyframes icon-pulse-critical {
            0%, 100% {
                transform: scale(1) rotate(0deg);
            }
            25% {
                transform: scale(1.15) rotate(-15deg);
            }
            75% {
                transform: scale(1.15) rotate(15deg);
            }
        }

        /* ========================================
           استایل‌های پیشرفته برای کارت پیش‌بینی خرابی
           ======================================== */
        
        #failure-prediction-card {
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* حالت عادی - زیر 30 درصد - سبز */
        #failure-prediction-card.prediction-safe {
            animation: pulse-safe 3s ease-in-out infinite;
            border-color: #10b981;
        }

        #failure-prediction-card.prediction-safe::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
            animation: rotate-slow 8s linear infinite;
            pointer-events: none;
        }

        @keyframes pulse-safe {
            0%, 100% {
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(16, 185, 129, 0);
            }
            50% {
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 0 20px 5px rgba(16, 185, 129, 0.3);
            }
        }

        /* حالت هشدار - بین 30 تا 70 درصد - نارنجی */
        #failure-prediction-card.prediction-warning {
            animation: pulse-prediction-warning 1.5s ease-in-out infinite;
            border-color: #f59e0b;
            background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
        }

        #failure-prediction-card.prediction-warning::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
            animation: rotate-medium 4s linear infinite;
            pointer-events: none;
        }

        #failure-prediction-card.prediction-warning::after {
            content: '⚠️';
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.5rem;
            animation: bounce-prediction-warning 1s ease-in-out infinite;
        }

        @keyframes pulse-prediction-warning {
            0%, 100% {
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(245, 158, 11, 0);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 4px 20px 0 rgba(245, 158, 11, 0.4), 0 0 30px 8px rgba(245, 158, 11, 0.3);
                transform: scale(1.02);
            }
        }

        @keyframes bounce-prediction-warning {
            0%, 100% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-5px) scale(1.1);
            }
        }

        /* حالت خطر - بالای 70 درصد - قرمز شدید */
        #failure-prediction-card.prediction-danger {
            animation: pulse-danger 1s ease-in-out infinite;
            border: 2px solid #ef4444;
            background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
        }

        #failure-prediction-card.prediction-danger::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, transparent 70%);
            animation: rotate-fast 2s linear infinite;
            pointer-events: none;
        }

        #failure-prediction-card.prediction-danger::after {
            content: '🚨';
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.8rem;
            animation: shake-danger 0.5s ease-in-out infinite;
        }

        @keyframes pulse-danger {
            0%, 100% {
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(239, 68, 68, 0);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 8px 30px 0 rgba(239, 68, 68, 0.5), 0 0 40px 15px rgba(239, 68, 68, 0.4);
                transform: scale(1.03);
            }
        }

        @keyframes shake-danger {
            0%, 100% {
                transform: rotate(0deg) scale(1);
            }
            25% {
                transform: rotate(-10deg) scale(1.1);
            }
            75% {
                transform: rotate(10deg) scale(1.1);
            }
        }

        /* استایل‌های متن پیش‌بینی خرابی */
        .prediction-safe-text {
            color: #10b981 !important;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
            animation: text-glow-safe 2s ease-in-out infinite;
        }

        @keyframes text-glow-safe {
            0%, 100% {
                text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
            }
            50% {
                text-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
            }
        }

        .prediction-warning-text {
            color: #f59e0b !important;
            font-weight: 700;
            text-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
            animation: text-glow-prediction-warning 1s ease-in-out infinite;
        }

        @keyframes text-glow-prediction-warning {
            0%, 100% {
                text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
            }
            50% {
                text-shadow: 0 0 20px rgba(245, 158, 11, 0.8);
            }
        }

        .prediction-danger-text {
            color: #ef4444 !important;
            font-weight: 800;
            text-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
            animation: text-glow-danger 0.8s ease-in-out infinite;
        }

        @keyframes text-glow-danger {
            0%, 100% {
                text-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
                transform: scale(1);
            }
            50% {
                text-shadow: 0 0 25px rgba(239, 68, 68, 0.9);
                transform: scale(1.05);
            }
        }

        /* آیکون پیش‌بینی خرابی با انیمیشن */
        #failure-prediction-card .stat-icon {
            transition: all 0.3s ease;
        }

        #failure-prediction-card.prediction-safe .stat-icon {
            background: linear-gradient(135deg, #10b981, #059669);
            animation: icon-pulse-safe 2s ease-in-out infinite;
        }

        #failure-prediction-card.prediction-warning .stat-icon {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            animation: icon-pulse-prediction-warning 1s ease-in-out infinite;
        }

        #failure-prediction-card.prediction-danger .stat-icon {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            animation: icon-pulse-danger 0.8s ease-in-out infinite;
        }

        @keyframes icon-pulse-safe {
            0%, 100% {
                transform: scale(1) rotate(0deg);
            }
            50% {
                transform: scale(1.05) rotate(5deg);
            }
        }

        @keyframes icon-pulse-prediction-warning {
            0%, 100% {
                transform: scale(1) rotate(0deg);
            }
            50% {
                transform: scale(1.1) rotate(10deg);
            }
        }

        @keyframes icon-pulse-danger {
            0%, 100% {
                transform: scale(1) rotate(0deg);
            }
            25% {
                transform: scale(1.15) rotate(-15deg);
            }
            75% {
                transform: scale(1.15) rotate(15deg);
            }
        }

        /* استایل‌های چاپ */
        @media print {
            body {
                background: white;
                padding: 0;
            }
            
            .export-section {
                display: none;
            }
            
            .chart-card, .stat-card, .map-section {
                break-inside: avoid;
                page-break-inside: avoid;
                box-shadow: none;
            }
        }



        /* کارت اطلاعات دامپتراک */
        .truck-info-section {
            margin: 1.5rem 0;
            padding: 1.5rem;
            background: white;
            border-radius: 15px;
            box-shadow: var(--card-shadow);
            border: 2px solid #e5e7eb;
        }

        .truck-info-header {
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #f3f4f6;
        }

        .truck-info-header h2 {
            color: var(--primary-color);
            margin: 0;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .truck-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .truck-image-container {
            position: relative;
            text-align: center;
        }

        .truck-info-image {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            transition: var(--transition);
            cursor: pointer;
        }

        .truck-info-image:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.15);
        }

        .truck-details {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .truck-detail-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            background: #f8fafc;
            border-radius: 10px;
            border-right: 4px solid var(--primary-color);
        }

        .truck-detail-icon {
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 1rem;
            color: white;
            font-size: 1.1rem;
        }

        .truck-detail-content {
            flex: 1;
        }

        .truck-detail-label {
            font-size: 0.9rem;
            color: #6b7280;
            margin-bottom: 0.25rem;
            font-weight: 500;
        }

        .truck-detail-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: #1f2937;
            direction: rtl;
        }

        /* Tooltip Styles */
        .tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-size: 0.9rem;
            z-index: 1000;
            max-width: 350px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            transform: translateY(10px);
        }

        .tooltip.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .tooltip h4 {
            margin: 0 0 10px 0;
            color: #fbbf24;
            font-size: 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            padding-bottom: 5px;
        }

        .tooltip-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .tooltip-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .tooltip-label {
            color: #e5e7eb;
            font-size: 0.85rem;
        }

        .tooltip-value {
            color: #fbbf24;
            font-weight: 600;
            font-size: 0.85rem;
        }

        .tooltip-time {
            margin-top: 10px;
            text-align: center;
            color: #9ca3af;
            font-size: 0.8rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 8px;
        }

        /* Responsive برای کارت دامپتراک */
        @media (max-width: 768px) {
            .truck-info-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .truck-info-section {
                margin: 2rem 0;
                padding: 1.5rem;
            }
            
            .truck-detail-item {
                padding: 0.75rem;
            }
            
            .tooltip {
                max-width: 280px;
                font-size: 0.8rem;
            }
            
            .tooltip-content {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .truck-info-section {
                margin: 1rem 0;
                padding: 1rem;
            }
            
            .truck-info-header h2 {
                font-size: 1.2rem;
            }
            
            .truck-detail-value {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <!-- هدر داشبورد -->
        <header class="header">
            <h1>
                <i class="fas fa-chart-line" style="color: white; background: var(--primary-color); padding: 8px; border-radius: 8px;"></i>
                پایش و مانیتورینگ هوشمند ماشین آلات معدنی
            </h1>
            <p class="subtitle">طراح و برنامه نویس : مرتضی هنرمند / شرکت فولادسنگ مبارکه اصفهان</p>
    
        </header>

        <!-- اطلاعات کامل دامپتراک -->
        <section class="truck-info-section">
            <div class="truck-info-header">
                <i class="fas fa-truck-moving" style="color: white; background: var(--primary-color); padding: 8px; border-radius: 8px; margin-left: 1rem;"></i>
                <h2>اطلاعات دامپتراک کوماتسو HD325</h2>
            </div>
            
            <div class="truck-info-grid">
                <!-- عکس دامپتراک -->
                <div class="truck-image-container">
                    <img src="komatsu_hd325_truck.png" 
                         alt="دامپتراک کوماتسو HD325" 
                         class="truck-info-image"
                         id="truckImage"
                         onmouseover="showTooltip(event)" 
                         onmouseleave="hideTooltip()">
                    
                    <!-- Tooltip -->
                    <div id="truckTooltip" class="tooltip">
                        <h4>آخرین مقادیر سنسورها</h4>
                        <div class="tooltip-content">
                            <div class="tooltip-item">
                                <span class="tooltip-label">حسگر 1:</span>
                                <span class="tooltip-value" id="sensor1"><?php echo htmlspecialchars($latest_sensors['value1']); ?></span>
                            </div>
                            <div class="tooltip-item">
                                <span class="tooltip-label">حسگر 2:</span>
                                <span class="tooltip-value" id="sensor2"><?php echo htmlspecialchars($latest_sensors['value2']); ?></span>
                            </div>
                            <div class="tooltip-item">
                                <span class="tooltip-label">حسگر 3:</span>
                                <span class="tooltip-value" id="sensor3"><?php echo htmlspecialchars($latest_sensors['value3']); ?></span>
                            </div>
                            <div class="tooltip-item">
                                <span class="tooltip-label">حسگر 4:</span>
                                <span class="tooltip-value" id="sensor4"><?php echo htmlspecialchars($latest_sensors['value4']); ?></span>
                            </div>
                            <div class="tooltip-item">
                                <span class="tooltip-label">حسگر 5:</span>
                                <span class="tooltip-value" id="sensor5"><?php echo htmlspecialchars($latest_sensors['value5']); ?></span>
                            </div>
                            <div class="tooltip-item">
                                <span class="tooltip-label">حسگر 6:</span>
                                <span class="tooltip-value" id="sensor6"><?php echo htmlspecialchars($latest_sensors['value6']); ?></span>
                            </div>
                            <div class="tooltip-item">
                                <span class="tooltip-label">حسگر 7:</span>
                                <span class="tooltip-value" id="sensor7"><?php echo htmlspecialchars($latest_sensors['value7']); ?></span>
                            </div>
                            <div class="tooltip-item">
                                <span class="tooltip-label">حسگر 8:</span>
                                <span class="tooltip-value" id="sensor8"><?php echo htmlspecialchars($latest_sensors['value8']); ?></span>
                            </div>
                        </div>
                        <div class="tooltip-time">
                            آخرین بروزرسانی: <?php echo date('Y-m-d H:i:s', strtotime($latest_sensors['reading_time'])); ?>
                        </div>
                    </div>
                </div>
                
                <!-- جزئیات دامپتراک -->
                <div class="truck-details">
                    <div class="truck-detail-item">
                        <div class="truck-detail-icon">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="truck-detail-content">
                            <div class="truck-detail-label">نام راننده</div>
                            <div class="truck-detail-value"><?php echo htmlspecialchars($truck_info['driver_name']); ?></div>
                        </div>
                    </div>
                    
                    <div class="truck-detail-item">
                        <div class="truck-detail-icon">
                            <i class="fas fa-id-card"></i>
                        </div>
                        <div class="truck-detail-content">
                            <div class="truck-detail-label">شناسه دامپتراک</div>
                            <div class="truck-detail-value"><?php echo htmlspecialchars($truck_info['truck_id']); ?></div>
                        </div>
                    </div>
                    
                    
                    
                  
                    
                    <div class="truck-detail-item">
                        <div class="truck-detail-icon">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <div class="truck-detail-content">
                            <div class="truck-detail-label">قابلیت دسترسی</div>
                            <div class="truck-detail-value"><?php echo "%73" ?></div>
                        </div>
                    </div>
                   
                    
                    <div class="truck-detail-item">
                        <div class="truck-detail-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="truck-detail-content">
                            <div class="truck-detail-label">باقی مانده دوره نگهداری</div>
                            <div class="truck-detail-value"><?php echo "58 ساعت" ?></div>
                        </div>
                    </div>
                        
                          <div class="truck-detail-item">
                        <div class="truck-detail-icon">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="truck-detail-content">
                            <div class="truck-detail-label">شرکت</div>
                            <div class="truck-detail-value"><?php echo htmlspecialchars($truck_info['company']); ?></div>
                        </div>
                    </div>
                        
                        
                        
                        
                        
                        
                </div>
            </div>
        </section>

        <!-- کارت‌های آماری -->
        <div class="stats-grid">
            <!-- کارت دمای آب -->
            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon">
                        <i class="fas fa-thermometer-half"></i>
                    </div>
                    <div class="stat-info">
                        <h3>دمای آب رادیاتور</h3>
                        <div class="stat-value">
                            <span id="temp-value">0</span>
                            <span class="stat-unit">سلسیوس</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- کارت عرض جغرافیایی -->
            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon">
                        <i class="fas fa-globe"></i>
                    </div>
                    <div class="stat-info">
                        <h3>عرض جغرافیایی</h3>
                        <div class="stat-value">
                            <span id="lat-value">0</span>
                            <span class="stat-unit">درجه</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- کارت طول جغرافیایی -->
            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon">
                        <i class="fas fa-compass"></i>
                    </div>
                    <div class="stat-info">
                        <h3>طول جغرافیایی</h3>
                        <div class="stat-value">
                            <span id="lng-value">0</span>
                            <span class="stat-unit">درجه</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- کارت فشار روغن موتور -->
            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon">
                        <i class="fas fa-oil-can"></i>
                    </div>
                    <div class="stat-info">
                        <h3>فشار روغن موتور</h3>
                        <div class="stat-value">
                            <span id="oil-value">0</span>
                            <span class="stat-unit">PSI</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- کارت فشار باد -->
            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon">
                        <i class="fas fa-gauge-high"></i>
                    </div>
                    <div class="stat-info">
                        <h3>سرعت</h3>
                        <div class="stat-value">
                            <span id="wind-value">0</span>
                            <span class="stat-unit">کیلومتر در ساعت</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- کارت سرعت -->
            <div class="stat-card">
                <div class="stat-header">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-info">
                        <h3>آپ تایم دستگاه</h3>
                        <div class="stat-value">
                            <span id="speed-value">0</span>
                            <span class="stat-unit">ثانیه</span>
                        </div>
                    </div>
                </div>
            </div>

           
            <div class="stat-card" id="status-card">
                <div class="stat-header">
                    <div class="stat-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <div class="stat-info">
                        <h3>پیش بینی وضعیت دستگاه STATUS</h3>
                        <div class="stat-value">
                            <span id="sat-value" class="status-normal">نرمال</span>
                            <span class="stat-unit"></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- کارت متغیر اضافه -->
            <div class="stat-card" id="failure-prediction-card">
                <div class="stat-header">
                    <div class="stat-icon">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="stat-info">
                        <h3>پیش بینی خرابی</h3>
                        <div class="stat-value">
                            <span id="spare-value">0</span>
                            <span class="stat-unit">درصد</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- بخش نقشه -->
        <section class="map-section">
            <div class="section-header">
                <i class="fas fa-map"></i>
                <span>موقعیت جغرافیایی فعلی</span>
            </div>
            <div class="map-container">
                <iframe 
                    width="100%" 
                    height="400" 
                    src="https://maps.google.com/maps?q=<?php echo $gps["value2"]; ?>,<?php echo $gps["value3"]; ?>&output=embed"
                    frameborder="0" 
                    style="border:0;">
                </iframe>
            </div>
        </section>

        <!-- بخش نمودارها -->
        <section class="charts-section">
            <div class="charts-grid">
                <!-- نمودار دمای آب -->
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-thermometer-half"></i>
                        <span>دمای آب رادیاتور</span>
                    </div>
                    <div id="chart-water-temperature" class="chart-container"></div>
                </div>

                <!-- نمودار عرض جغرافیایی -->
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-globe"></i>
                        <span>عرض جغرافیایی</span>
                    </div>
                    <div id="chart-latitude" class="chart-container"></div>
                </div>

                <!-- نمودار طول جغرافیایی -->
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-compass"></i>
                        <span>طول جغرافیایی</span>
                    </div>
                    <div id="chart-longitude" class="chart-container"></div>
                </div>

                <!-- نمودار فشار روغن موتور -->
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-oil-can"></i>
                        <span>فشار روغن موتور</span>
                    </div>
                    <div id="chart-motor-oil-pressure" class="chart-container"></div>
                </div>

                
              
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-heartbeat"></i>
                        <span>پیش بینی وضعیت دستگاه STATUS</span>
                    </div>
                    <div id="chart-satellite" class="chart-container"></div>
                </div>

                
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-cog"></i>
                        <span>پیش بینی خرابی</span>
                    </div>
                    <div id="chart-spare" class="chart-container"></div>
                </div>    
                    
                    
                    
             
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-gauge-high"></i>
                        <span>سرعت</span>
                    </div>
                    <div id="chart-wind-pressure" class="chart-container"></div>
                </div>

             
                <div class="chart-card">
                    <div class="chart-title">
                        <i class="fas fa-clock"></i>
                        <span>آپ تایم دستگاه</span>
                    </div>
                    <div id="chart-speed" class="chart-container"></div>
                </div>

            </div>
        </section>


        <!-- بخش خروجی اکسل و تاریخچه -->
        <div class="export-section">
            <a href="history_page.php" class="export-btn" style="background: #059669; margin-left: 10px;">
                <i class="fas fa-history"></i>
                <span>تاریخچه و نمودارها</span>
            </a>
            <a href="http://fsco.onlinewebshop.net/UserReport_Export.php" class="export-btn">
                <i class="fas fa-download"></i>
                <span>خروجی اکسل</span>
            </a>
        </div>
    </div>

    <script>
        /*
        ===============================================================================
        جاوااسکریپت داشبورد کامیون هوشمند (نسخه مینیمال)
        ===============================================================================
        
        ویژگی‌ها:
        - نمایش داده‌های زنده از PHP
        - ایجاد نمودارهای ساده با Highcharts
        - به‌روزرسانی خودکار هر 30 ثانیه
        - انیمیشن‌های مینیمال
        - پردازش داده‌های GPS
        ===============================================================================
        */

        // دریافت داده‌ها از PHP
        var value1 = <?php echo $value1; ?>;  // دمای آب
        var value2 = <?php echo $value2; ?>;  // عرض جغرافیایی
        var value3 = <?php echo $value3; ?>;  // طول جغرافیایی
        var value4 = <?php echo $value4; ?>;  // فشار روغن موتور (بدون اسکیل)
        var value5 = <?php echo $value5; ?>;  // فشار باد
        var value6 = <?php echo $value6; ?>;  // سرعت
        var value7 = <?php echo $value7; ?>;  // تعداد ماهواره
        var value8 = <?php echo $value8; ?>;  // متغیر اضافه
        var reading_time = <?php echo $reading_time; ?>;  // زمان‌ها (هجری شمسی)

        // اجرای فوری AJAX برای تست
        console.log('اجرای تست فوری AJAX...');
        updateDashboardData();

       // به‌روزرسانی داینامیک با AJAX هر 30 ثانیه
       setInterval(function() {
           console.log('راه‌اندازی رفرش خودکار AJAX...');
           updateDashboardData();
       }, 30000);


        // تابع تبدیل اعداد انگلیسی به فارسی
        function toPersianNumber(str) {
            if (typeof str === 'number') {
                str = str.toString();
            }
            if (!str) return '';
            
            const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
            const englishDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
            
            for (let i = 0; i < englishDigits.length; i++) {
                str = str.replace(new RegExp(englishDigits[i], 'g'), persianDigits[i]);
            }
            return str;
        }

        // به‌روزرسانی آخرین مقادیر در کارت‌های آماری
        if (value1.length > 0) {
            document.getElementById('temp-value').textContent = toPersianNumber(parseFloat(value1[value1.length - 1]).toFixed(1));
            document.getElementById('lat-value').textContent = toPersianNumber(parseFloat(value2[value2.length - 1]).toFixed(6));
            document.getElementById('lng-value').textContent = toPersianNumber(parseFloat(value3[value3.length - 1]).toFixed(6));
            document.getElementById('oil-value').textContent = toPersianNumber(parseFloat(value4[value4.length - 1]).toFixed(0)); // بدون اعشار
            document.getElementById('wind-value').textContent = toPersianNumber(parseFloat(value5[value5.length - 1]).toFixed(1));
            document.getElementById('speed-value').textContent = toPersianNumber(parseFloat(value6[value6.length - 1]).toFixed(0));
            
            // پردازش مقدار STATUS (استفاده از value7)
            updateStatusCard(value7[value7.length - 1]);
            
            document.getElementById('spare-value').textContent = toPersianNumber(parseFloat(value8[value8.length - 1]).toFixed(0));
            
            // پردازش پیش‌بینی خرابی (value8)
            updateFailurePredictionCard(value8[value8.length - 1]);
        }

        // پیکربندی پایه نمودارها
        const chartConfig = {
            chart: {
                type: 'spline',
                animation: {
                    duration: 800,
                    easing: 'easeOutQuart'
                }
            },
            credits: { enabled: false },
            legend: { enabled: false },
            plotOptions: {
                spline: {
                    marker: {
                        enabled: true,
                        radius: 3,
                        fillColor: '#ffffff',
                        lineWidth: 1,
                        lineColor: null
                    }
                }
            },
            xAxis: {
                type: 'datetime',
                categories: reading_time,
                labels: {
                    style: {
                        fontFamily: 'Vazirmatn, sans-serif',
                        color: '#6b7280'
                    }
                }
            },
            yAxis: {
                labels: {
                    style: {
                        fontFamily: 'Vazirmatn, sans-serif',
                        color: '#6b7280'
                    }
                }
            }
        };

        // رنگ‌های مینیمال برای نمودارها
        const minimalColors = {
            temperature: '#ef4444',
            latitude: '#3b82f6',
            longitude: '#06b6d4',
            oilPressure: '#f59e0b',
            windPressure: '#10b981',
            speed: '#8b5cf6',
            satellite: '#06b6d4',
            spare: '#6b7280'
        };

        // نمودار دمای آب
        var chartWaterTemp = new Highcharts.Chart({
            ...chartConfig,
            chart: { ...chartConfig.chart, renderTo: 'chart-water-temperature' },
            title: { text: '' },
            series: [{
                name: 'دمای آب رادیاتور',
                data: value1,
                color: minimalColors.temperature,
                fillOpacity: 0.1
            }],
            yAxis: {
                ...chartConfig.yAxis,
                title: { text: 'دما (سلسیوس)' }
            }
        });

        // نمودار عرض جغرافیایی
        var chartLatitude = new Highcharts.Chart({
            ...chartConfig,
            chart: { ...chartConfig.chart, renderTo: 'chart-latitude' },
            title: { text: '' },
            series: [{
                name: 'عرض جغرافیایی',
                data: value2,
                color: minimalColors.latitude,
                fillOpacity: 0.1
            }],
            yAxis: {
                ...chartConfig.yAxis,
                title: { text: 'درجه' }
            }
        });

        // نمودار طول جغرافیایی
        var chartLongitude = new Highcharts.Chart({
            ...chartConfig,
            chart: { ...chartConfig.chart, renderTo: 'chart-longitude' },
            title: { text: '' },
            series: [{
                name: 'طول جغرافیایی',
                data: value3,
                color: minimalColors.longitude,
                fillOpacity: 0.1
            }],
            yAxis: {
                ...chartConfig.yAxis,
                title: { text: 'درجه' }
            }
        });

        // نمودار فشار روغن موتور
        var chartOilPressure = new Highcharts.Chart({
            ...chartConfig,
            chart: { ...chartConfig.chart, renderTo: 'chart-motor-oil-pressure' },
            title: { text: '' },
            series: [{
                name: 'فشار روغن موتور',
                data: value4,
                color: minimalColors.oilPressure,
                fillOpacity: 0.1
            }],
            yAxis: {
                ...chartConfig.yAxis,
                title: { text: 'PSI' }
            }
        });

        var chartSatellite = new Highcharts.Chart({
            ...chartConfig,
            chart: { ...chartConfig.chart, renderTo: 'chart-satellite' },
            title: { text: '' },
            series: [{
                name: 'پیش بینی وضعیت دستگاه STATUS',
                data: value7,
                color: minimalColors.satellite,
                fillOpacity: 0.1
            }],
            yAxis: {
                ...chartConfig.yAxis,
                title: { text: 'وضعیت' },
                plotBands: [
                    {
                        from: 0,
                        to: 1,
                        color: 'rgba(16, 185, 129, 0.25)'
                    },
                    {
                        from: 1,
                        to: 3,
                        color: 'rgba(245, 158, 11, 0.25)'
                    },
                    {
                        from: 3,
                        to: 10,
                        color: 'rgba(239, 68, 68, 0.25)'
                    }
                ],
                plotLines: [
                    {
                        value: 1,
                        color: '#f59e0b',
                        width: 2,
                        dashStyle: 'Dash',
                        zIndex: 5
                    },
                    {
                        value: 3,
                        color: '#ef4444',
                        width: 2,
                        dashStyle: 'Dash',
                        zIndex: 5
                    }
                ]
            }
        });

        // نمودار متغیر اضافه
        var chartSpare = new Highcharts.Chart({
            ...chartConfig,
            chart: { ...chartConfig.chart, renderTo: 'chart-spare' },
            title: { text: '' },
            series: [{
                name: 'پیش بینی خرابی',
                data: value8,
                color: minimalColors.spare,
                fillOpacity: 0.1
            }],
            yAxis: {
                ...chartConfig.yAxis,
                title: { text: 'درصد' },
                plotBands: [
                    {
                        from: 0,
                        to: 30,
                        color: 'rgba(16, 185, 129, 0.25)'
                    },
                    {
                        from: 30,
                        to: 70,
                        color: 'rgba(245, 158, 11, 0.25)'
                    },
                    {
                        from: 70,
                        to: 100,
                        color: 'rgba(239, 68, 68, 0.25)'
                    }
                ],
                plotLines: [
                    {
                        value: 30,
                        color: '#f59e0b',
                        width: 2,
                        dashStyle: 'Dash',
                        zIndex: 5
                    },
                    {
                        value: 70,
                        color: '#ef4444',
                        width: 2,
                        dashStyle: 'Dash',
                        zIndex: 5
                    }
                ]
            }
        });
  
            
        // نمودار فشار باد
        var chartWindPressure = new Highcharts.Chart({
            ...chartConfig,
            chart: { ...chartConfig.chart, renderTo: 'chart-wind-pressure' },
            title: { text: '' },
            series: [{
                name: 'سرعت',
                data: value5,
                color: minimalColors.windPressure,
                fillOpacity: 0.1
            }],
            yAxis: {
                ...chartConfig.yAxis,
                title: { text: 'کیلومتر در ساعت' }
            }
        });

        // نمودار سرعت
        var chartSpeed = new Highcharts.Chart({
            ...chartConfig,
            chart: { ...chartConfig.chart, renderTo: 'chart-speed' },
            title: { text: '' },
            series: [{
                name: 'سرعت',
                data: value6,
                color: minimalColors.speed,
                fillOpacity: 0.1
            }],
            yAxis: {
                ...chartConfig.yAxis,
                title: { text: 'درصد' }
            }
        });



        // به‌روزرسانی خودکار STATUS هر 5 ثانیه (استفاده از value7)
        setInterval(function() {
            if (value7.length > 0) {
                updateStatusCard(value7[value7.length - 1]);
            }
        }, 5000);

        // به‌روزرسانی خودکار پیش‌بینی خرابی هر 5 ثانیه
        setInterval(function() {
            if (value8.length > 0) {
                updateFailurePredictionCard(value8[value8.length - 1]);
            }
        }, 5000);

        // توابع Tooltip برای نمایش آخرین مقادیر سنسورها
        function showTooltip(event) {
            const tooltip = document.getElementById('truckTooltip');
            const rect = event.target.getBoundingClientRect();
            
            // به‌روزرسانی مقادیر سنسورها در tooltip
            updateSensorValues();
            
            // تنظیم موقعیت tooltip
            tooltip.style.left = (rect.left + rect.width / 2 - 175) + 'px';
            tooltip.style.top = (rect.top - 10) + 'px';
            
            // نمایش tooltip
            tooltip.classList.add('show');
        }

        function hideTooltip() {
            const tooltip = document.getElementById('truckTooltip');
            tooltip.classList.remove('show');
        }

        function updateSensorValues() {
            // دریافت آخرین مقادیر از پایگاه داده (فعلاً از متغیر local استفاده می‌کنیم)
            if (latestSensors) {
                document.getElementById('sensor1').textContent = latestSensors.value1 || 'N/A';
                document.getElementById('sensor2').textContent = latestSensors.value2 || 'N/A';
                document.getElementById('sensor3').textContent = latestSensors.value3 || 'N/A';
                document.getElementById('sensor4').textContent = latestSensors.value4 || 'N/A';
                document.getElementById('sensor5').textContent = latestSensors.value5 || 'N/A';
                document.getElementById('sensor6').textContent = latestSensors.value6 || 'N/A';
                document.getElementById('sensor7').textContent = latestSensors.value7 || 'N/A';
                document.getElementById('sensor8').textContent = latestSensors.value8 || 'N/A';
                
                // به‌روزرسانی زمان
                const now = new Date();
                const timeString = now.toLocaleString('fa-IR');
                document.querySelector('.tooltip-time').textContent = 'آخرین بروزرسانی: ' + timeString;
            }
        }

        // به‌روزرسانی خودکار مقادیر سنسورها هر 30 ثانیه
        setInterval(updateSensorValues, 30000);

        // تابع به‌روزرسانی کارت STATUS (بر اساس value7)
        function updateStatusCard(statusValue) {
            const statusElement = document.getElementById('sat-value');
            const statusCard = document.getElementById('status-card');
            
            if (!statusElement || !statusCard) return;
            
            // حذف تمام کلاس‌های قبلی
            statusCard.classList.remove('status-normal-card', 'status-warning-card', 'status-critical-card');
            statusElement.className = '';
            
            // تبدیل به عدد صحیح
            const statusCode = parseInt(statusValue);
            
            // تعیین متن و استایل بر اساس مقدار value7
            if (statusCode === 3) {
                // حالت بحرانی - value7 = 3 - قرمز
                statusElement.textContent = 'نیاز به توقف سریع';
                statusElement.className = 'status-critical';
                statusCard.classList.add('status-critical-card');
            } else if (statusCode === 2) {
                // حالت هشدار - value7 = 2 - نارنجی
                statusElement.textContent = 'هشدار';
                statusElement.className = 'status-warning';
                statusCard.classList.add('status-warning-card');
            } else if (statusCode === 1) {
                // حالت نرمال - value7 = 1 - سبز
                statusElement.textContent = 'نرمال ✓';
                statusElement.className = 'status-normal';
                statusCard.classList.add('status-normal-card');
            } else {
                // حالت پیش‌فرض
                statusElement.textContent = 'نامشخص';
                statusElement.className = 'status-normal';
                statusCard.classList.add('status-normal-card');
            }
        }

        // تابع به‌روزرسانی کارت پیش‌بینی خرابی (بر اساس value8)
        function updateFailurePredictionCard(predictionValue) {
            const predictionElement = document.getElementById('spare-value');
            const predictionCard = document.getElementById('failure-prediction-card');
            
            if (!predictionElement || !predictionCard) return;
            
            // حذف تمام کلاس‌های قبلی
            predictionCard.classList.remove('prediction-safe', 'prediction-warning', 'prediction-danger');
            predictionElement.className = '';
            
            // تبدیل به عدد
            const percentage = parseFloat(predictionValue);
            
            // تعیین استایل و انیمیشن بر اساس درصد value8
            if (percentage > 70) {
                // حالت خطر - بالای 70 درصد - قرمز
                predictionElement.className = 'prediction-danger-text';
                predictionCard.classList.add('prediction-danger');
            } else if (percentage >= 30 && percentage <= 70) {
                // حالت هشدار - بین 30 تا 70 درصد - نارنجی
                predictionElement.className = 'prediction-warning-text';
                predictionCard.classList.add('prediction-warning');
            } else {
                // حالت عادی - زیر 30 درصد - سبز
                predictionElement.className = 'prediction-safe-text';
                predictionCard.classList.add('prediction-safe');
            }
        }

        // تابع دریافت و به‌روزرسانی داده‌ها با AJAX
        function updateDashboardData() {
            console.log('شروع به‌روزرسانی AJAX...');
            
            fetch('mining_dashboard_data.php')
                .then(response => {
                    console.log('وضعیت پاسخ:', response.status, response.statusText);
                    if (!response.ok) {
                        throw new Error('Network response was not ok: ' + response.status + ' ' + response.statusText);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('داده دریافت شد:', data);
                    if (data.success && data.data) {
                        console.log('شروع به‌روزرسانی نمودارها و آمار...');
                        console.log('ساختار داده:', data.data);
                        updateChartsAndStats(data.data);
                        updateCharts(data.data.values, data.data.reading_time);
                        console.log('به‌روزرسانی کامل شد.');
                    } else {
                        console.error('خطا در ساختار داده:', data);
                    }
                })
                .catch(error => {
                    console.error('خطای AJAX:', error);
                });
        }

        // تابع به‌روزرسانی نمودارها و آمار
        function updateChartsAndStats(data) {
            console.log('تابع updateChartsAndStats اجرا شد');
            console.log('داده دریافتی در updateChartsAndStats:', data);
            
            // به‌روزرسانی کارت‌های آماری
            if (data.latest_values) {
                console.log('آخرین مقادیر:', data.latest_values);
                const latest = data.latest_values;
                
                // به‌روزرسانی مقادیر در کارت‌ها
                document.getElementById('temp-value').textContent = toPersianNumber(latest.temperature.toFixed(1));
                document.getElementById('lat-value').textContent = toPersianNumber(latest.latitude.toFixed(6));
                document.getElementById('lng-value').textContent = toPersianNumber(latest.longitude.toFixed(6));
                document.getElementById('oil-value').textContent = toPersianNumber(latest.oil_pressure.toFixed(0));
                document.getElementById('wind-value').textContent = toPersianNumber(latest.wind_pressure.toFixed(1));
                document.getElementById('speed-value').textContent = toPersianNumber(latest.speed.toFixed(0));
                
                // به‌روزرسانی STATUS (استفاده از value7)
                updateStatusCard(latest.satellite);
                
                document.getElementById('spare-value').textContent = toPersianNumber(latest.spare.toFixed(0));
                
                // به‌روزرسانی پیش‌بینی خرابی
                updateFailurePredictionCard(latest.spare);
            }

            // به‌روزرسانی نقشه
            if (data.gps) {
                const mapFrame = document.querySelector('iframe');
                if (mapFrame) {
                    mapFrame.src = `https://maps.google.com/maps?q=${data.gps.lat},${data.gps.lng}&output=embed`;
                }
            }

            // به‌روزرسانی نمودارها (در صورت وجود)
            if (data.values) {
                updateCharts(data.values, data.reading_time);
            }
        }

        // تابع به‌روزرسانی نمودارها
        function updateCharts(newValues, newTimeLabels) {
            console.log('تابع updateCharts اجرا شد');
            console.log('مقادیر جدید:', newValues);
            console.log('زمان‌بندی جدید:', newTimeLabels);
            
            // به‌روزرسانی آرایه‌های داده
            value1 = newValues.value1;
            value2 = newValues.value2;
            value3 = newValues.value3;
            value4 = newValues.value4;
            value5 = newValues.value5;
            value6 = newValues.value6;
            value7 = newValues.value7;
            value8 = newValues.value8;
            reading_time = newTimeLabels;

            // به‌روزرسانی هر نمودار با داده‌های جدید
            try {
                // نمودار دمای آب
                if (typeof chartWaterTemp !== 'undefined') {
                    chartWaterTemp.series[0].setData(value1, false);
                    chartWaterTemp.xAxis[0].setCategories(reading_time, false);
                    chartWaterTemp.redraw();
                }

                // نمودار عرض جغرافیایی
                if (typeof chartLatitude !== 'undefined') {
                    chartLatitude.series[0].setData(value2, false);
                    chartLatitude.xAxis[0].setCategories(reading_time, false);
                    chartLatitude.redraw();
                }

                // نمودار طول جغرافیایی
                if (typeof chartLongitude !== 'undefined') {
                    chartLongitude.series[0].setData(value3, false);
                    chartLongitude.xAxis[0].setCategories(reading_time, false);
                    chartLongitude.redraw();
                }

                // نمودار فشار روغن موتور
                if (typeof chartOilPressure !== 'undefined') {
                    chartOilPressure.series[0].setData(value4, false);
                    chartOilPressure.xAxis[0].setCategories(reading_time, false);
                    chartOilPressure.redraw();
                }

                // نمودار STATUS
                if (typeof chartSatellite !== 'undefined') {
                    chartSatellite.series[0].setData(value7, false);
                    chartSatellite.xAxis[0].setCategories(reading_time, false);
                    chartSatellite.redraw();
                }

                // نمودار پیش بینی خرابی
                if (typeof chartSpare !== 'undefined') {
                    chartSpare.series[0].setData(value8, false);
                    chartSpare.xAxis[0].setCategories(reading_time, false);
                    chartSpare.redraw();
                }

                // نمودار سرعت (فشار باد)
                if (typeof chartWindPressure !== 'undefined') {
                    chartWindPressure.series[0].setData(value5, false);
                    chartWindPressure.xAxis[0].setCategories(reading_time, false);
                    chartWindPressure.redraw();
                }

                // نمودار آپ تایم
                if (typeof chartSpeed !== 'undefined') {
                    chartSpeed.series[0].setData(value6, false);
                    chartSpeed.xAxis[0].setCategories(reading_time, false);
                    chartSpeed.redraw();
                }
            } catch (error) {
                console.error('خطا در به‌روزرسانی نمودارها:', error);
            }
        }
    </script>

    <?php
    // آزادسازی منابع و بستن اتصال
    $result->free();
    $conn->close();
    ?>
</body>
</html>

<?php
 /*
 ===============================================================================
 پایان فایل داشبورد کامیون هوشمند (نسخه کوماتسو HD325)
 ===============================================================================

 راهنمای استفاده:
 1. این فایل را در سرور PHP خود آپلود کنید
 2. اطمینان حاصل کنید که پایگاه داده MySQL در دسترس است
 3. عکس komatsu_hd325_truck.png را در همان پوشه آپلود کنید
 4. تنظیمات پایگاه داده را در ابتدای فایل بررسی کنید
 5. فایل را در مرورگر اجرا کنید

 ویژگی‌های این نسخه کوماتسو HD325:
 ✅ عکس واقعی کامیون دامپتراک کوماتسو HD325
 ✅ اطلاعات کامل راننده و شناسه دامپتراک
 ✅ Tooltip تعاملی برای نمایش آخرین مقادیر سنسورها
 ✅ طراحی مینیمال و تمیز
 ✅ پس‌زمینه ساده و آرامش‌بخش
 ✅ آیکون‌های ساده و مینیمال
 ✅ رنگ‌های ملایم
 ✅ کارت‌های تمیز با سایه کم
 ✅ 8 نمودار حسگر با محدودیت 30 رکورد
 ✅ نقشه Google Maps
 ✅ طراحی کاملاً Responsive
 ✅ فونت فارسی زیبا Vazirmatn
 ✅ به‌روزرسانی خودکار هر 30 ثانیه
 ✅ عملکرد بهینه
 ✅ واحد فشار: بار (به‌جای PSI)

 ویژگی‌های جدید نسخه 5.0:
 🎨 طراحی کاملاً مینیمال و زیبا
 🌈 پالت رنگی ساده و هماهنگ
 ✨ کاهش سایه‌ها و افکت‌های پیچیده
 📱 بهینه‌سازی spacing و grid layout
 🎯 مینیمال کردن آیکون‌ها و جزئیات
 🔧 حفظ تمام امکانات و قابلیت‌های قبلی
 ⚡ بهبود کارایی با طراحی ساده
 🎉 بهبود کیفیت تجربه کاربری

 فایل‌های مورد نیاز:
 📄 mining_dashboard_persian_time.php - فایل اصلی داشبورد
 📄 mining_dashboard_data.php - API برای دریافت داده‌های زنده (جدید)
 🖼️ komatsu_hd325_truck.png - تصویر دامپتراک

 نحوه کار AJAX:
 1. هر 30 ثانیه درخواست AJAX به mining_dashboard_data.php
 2. دریافت داده‌های جدید در فرمت JSON
 3. به‌روزرسانی داینامیک تمام کامپوننت‌ها
 4. عدم قطع یا پرش صفحه

 توسعه داده شده توسط: MiniMax Agent
 تاریخ: 2025-11-26
 نسخه: 4.3 - نسخه با AJAX و رفرش داینامیک
 ===============================================================================
*/
?>