<!-- <?php
session_start();
require "../config/database.php";

function kategoriRSRP($v) {
    if ($v >= -92) return ['Baik Sekali', 'badge-success'];
    if ($v >= -102) return ['Baik', 'badge-info'];
    if ($v >= -105) return ['Cukup', 'badge-warning'];
    return ['Kurang', 'badge-danger'];
}

function kategoriRSRQ($v) {
    if ($v >= -10) return ['Baik Sekali', 'badge-success'];
    if ($v >= -12) return ['Baik', 'badge-info'];
    if ($v >= -16) return ['Cukup', 'badge-warning'];
    return ['Kurang', 'badge-danger'];
}

function kategoriSINR($v) {
    if ($v > 20) return ['Baik Sekali', 'badge-success'];
    if ($v >= 15) return ['Baik', 'badge-info'];
    if ($v >= 8) return ['Cukup', 'badge-warning'];
    return ['Kurang', 'badge-danger'];
}

if (!isset($_SESSION['admin'])) {
    header("Location: ../auth/login.php");
    exit;
}

/* ================= FILTER ================= */
$operator   = $_GET['operator'] ?? 'all';
$jenis_tes  = $_GET['jenis_tes'] ?? 'all';
$kota       = $_GET['kota'] ?? 'all';
$startDate  = $_GET['start'] ?? '';
$endDate    = $_GET['end'] ?? '';

$where = [];
$params = [];

if ($operator != 'all') {
    $where[] = "operator = ?";
    $params[] = $operator;
}
if ($jenis_tes != 'all') {
    $where[] = "jenis_tes = ?";
    $params[] = $jenis_tes;
}
if ($kota != 'all') {
    $where[] = "kota_kabupaten = ?";
    $params[] = $kota;
}
if ($startDate && $endDate) {
    $where[] = "measure_date BETWEEN ? AND ?";
    $params[] = $startDate;
    $params[] = $endDate;
}

$whereSQL = $where ? "WHERE " . implode(" AND ", $where) : "";

/* ================= DATA PER OPERATOR ================= */
$sqlOperator = "
    SELECT 
        operator,
        AVG(avg_rsrp) as rsrp,
        AVG(avg_rsrq) as rsrq,
        AVG(avg_sinr) as sinr,
        COUNT(*) as total_tests
    FROM compile_summary
    $whereSQL
    GROUP BY operator
    ORDER BY operator
";

$stmt = $pdo->prepare($sqlOperator);
$stmt->execute($params);
$dataOperator = $stmt->fetchAll();

/* ================= DATA PER JENIS TES ================= */
$sqlJenisTes = "
    SELECT 
        jenis_tes,
        AVG(avg_rsrp) as rsrp,
        AVG(avg_rsrq) as rsrq,
        AVG(avg_sinr) as sinr,
        COUNT(*) as total_tests
    FROM compile_summary
    $whereSQL
    GROUP BY jenis_tes
    ORDER BY jenis_tes
";

$stmt = $pdo->prepare($sqlJenisTes);
$stmt->execute($params);
$dataJenisTes = $stmt->fetchAll();

/* ================= DATA PER HARI ================= */
$sqlHari = "
    SELECT 
        measure_date as tanggal,
        AVG(avg_rsrp) as rsrp,
        AVG(avg_rsrq) as rsrq,
        AVG(avg_sinr) as sinr,
        COUNT(*) as total_tests
    FROM compile_summary
    $whereSQL
    GROUP BY measure_date
    ORDER BY measure_date DESC
    LIMIT 14
";

$stmt = $pdo->prepare($sqlHari);
$stmt->execute($params);
$dataHari = $stmt->fetchAll();

/* ================= DATA DISTRIBUSI RSRP ================= */
$sqlDistribusi = "
    SELECT 
        CASE 
            WHEN avg_rsrp >= -85 THEN 'Baik Sekali'
            WHEN avg_rsrp >= -95 THEN 'Baik'
            WHEN avg_rsrp >= -105 THEN 'Cukup'
            ELSE 'Kurang'
        END as kategori,
        COUNT(*) as jumlah
    FROM compile_summary
    $whereSQL
    GROUP BY 
        CASE 
            WHEN avg_rsrp >= -85 THEN 'Baik Sekali'
            WHEN avg_rsrp >= -95 THEN 'Baik'
            WHEN avg_rsrp >= -105 THEN 'Cukup'
            ELSE 'Kurang'
        END
    ORDER BY 
        CASE 
            WHEN avg_rsrp >= -85 THEN 1
            WHEN avg_rsrp >= -95 THEN 2
            WHEN avg_rsrp >= -105 THEN 3
            ELSE 4
        END
";

$stmt = $pdo->prepare($sqlDistribusi);
$stmt->execute($params);
$dataDistribusi = $stmt->fetchAll();

/* ================= DATA TOP 3 OPERATOR ================= */
$sqlTop3 = "
    SELECT 
        operator,
        AVG(avg_rsrp) as rsrp,
        AVG(avg_rsrq) as rsrq,
        AVG(avg_sinr) as sinr,
        COUNT(*) as total_tests
    FROM compile_summary
    $whereSQL
    GROUP BY operator
    ORDER BY rsrp DESC
    LIMIT 3
";
$stmt = $pdo->prepare($sqlTop3);
$stmt->execute($params);
$dataTop3 = $stmt->fetchAll();

/* ================= FILTER MASTER ================= */
$operators = $pdo->query("SELECT DISTINCT operator FROM compile_summary WHERE operator IS NOT NULL ORDER BY operator")->fetchAll();
$jenisTesList = $pdo->query("SELECT DISTINCT jenis_tes FROM compile_summary WHERE jenis_tes IS NOT NULL ORDER BY jenis_tes")->fetchAll();
$kotas = $pdo->query("SELECT DISTINCT kota_kabupaten FROM compile_summary WHERE kota_kabupaten IS NOT NULL ORDER BY kota_kabupaten")->fetchAll();

/* ================= STATISTIK ================= */
$sqlStats = "
    SELECT 
        COUNT(*) as total_tests,
        COUNT(DISTINCT operator) as operator_count,
        COUNT(DISTINCT jenis_tes) as jenis_tes_count,
        COUNT(DISTINCT kota_kabupaten) as kota_count,
        AVG(avg_rsrp) as avg_rsrp,
        AVG(avg_rsrq) as avg_rsrq,
        AVG(avg_sinr) as avg_sinr,
        MIN(avg_rsrp) as min_rsrp,
        MAX(avg_rsrp) as max_rsrp,
        MIN(avg_sinr) as min_sinr,
        MAX(avg_sinr) as max_sinr
    FROM compile_summary
    $whereSQL
";

$stmtStats = $pdo->prepare($sqlStats);
$stmtStats->execute($params);
$stats = $stmtStats->fetch(PDO::FETCH_ASSOC);
?> -->

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Kualitas Sinyal - Balmon Surabaya</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .main {
            padding: 30px;
        }
        
        .topbar {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        }
        
        .topbar h1 {
            color: #0b3c68;
            font-size: 28px;
            margin-bottom: 5px;
        }
        
        .topbar span {
            color: #666;
            font-size: 15px;
        }
        
        .filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .filter-grid select,
        .filter-grid input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .filter-grid button {
            background: linear-gradient(135deg, #0b3c68, #1e5fa3);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .filter-grid button:hover {
            background: #2980b9;
        }
        
        .card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        }
        
        .card h3 {
            color: #0b3c68;
            margin-bottom: 20px;
            font-size: 20px;
        }
        
        .chart-container {
            position: relative;
            height: 350px;
            width: 100%;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 25px;
            margin-bottom: 25px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: #0b3c68;
            margin: 10px 0;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .stat-subvalue {
            font-size: 13px;
            color: #888;
            margin-top: 5px;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .data-table th {
            background: #f1f1f1;
            padding: 12px;
            text-align: left;
            border-bottom: 2px solid #ddd;
            color: #0b3c68;
        }
        
        .data-table td {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .data-table tr:hover {
            background: #f9f9f9;
        }
        
        .badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .badge-success {
            background: #d4edda;
            color: #155724;
        }
        
        .badge-warning {
            background: #fff3cd;
            color: #856404;
        }
        
        .badge-danger {
            background: #f8d7da;
            color: #721c24;
        }
        
        .badge-info {
            background: #d1ecf1;
            color: #0c5460;
        }
        
        .badge-primary {
            background: #cce5ff;
            color: #004085;
        }
        
        .warning-box {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            border-left: 4px solid #ffc107;
        }
        
        .reset-link {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            text-align: center;
            text-decoration: none;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            transition: all 0.3s;
        }
        
        .reset-link:hover {
            background: #f8f9fa;
            border-color: #0b3c68;
            color: #0b3c68;
        }
        
        /* Gaya untuk section baru */
        .section-title {
            font-size: 24px;
            color: #0b3c68;
            margin: 30px 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .chart-small {
            height: 300px;
        }
        
        .interpretation-box {
            background: #f8f9fa;
            border-left: 4px solid #0b3c68;
            padding: 15px;
            margin: 20px 0;
            border-radius: 8px;
        }
        
        .interpretation-box h4 {
            color: #0b3c68;
            margin-bottom: 10px;
        }
        
        .table-wrapper {
            overflow-x: auto;
            margin-top: 15px;
        }
    </style>
</head>
<body>

    <div class="sidebar">
        <div class="sidebar-header">
            <h2>BALMON<br>Surabaya</h2>
            <p class="role">Admin Dashboard</p>
        </div>
    
        <nav class="sidebar-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span class="nav-text">Dashboard</span>
            </a>
    
            <a href="upload_DT.html" class="nav-item">
                <span class="nav-icon">🚗</span>
                <span class="nav-text">Upload File Drivetest</span>
            </a>
    
            <a href="upload_summary.html" class="nav-item active">
                <span class="nav-icon">📤</span>
                <span class="nav-text">Upload File Data QoS</span>
            </a>
    
            <a href="kualitas_sinyal.html" class="nav-item">
                <span class="nav-icon">📶</span>
                <span class="nav-text">Kualitas Sinyal</span>
            </a>
    
            <a href="kualitas_layanan.html" class="nav-item">
                <span class="nav-icon">📊</span>
                <span class="nav-text">Kualitas Layanan</span>
            </a>
    
            <a href="mapping.html" class="nav-item">
                <span class="nav-icon">🗺️</span>
                <span class="nav-text">Mapping</span>
            </a>
        </nav>
    </div>

<div class="main">
    <!-- 1. TOPBAR -->
    <div class="topbar">
        <div>
            <h1>Dashboard Kualitas Sinyal</h1>
            <span>Monitoring RSRP, RSRQ, SINR</span>
        </div>
    </div>

    <!-- Warning jika tidak ada data -->
    <!-- <?php 
    $totalData = $pdo->query("SELECT COUNT(*) as total FROM compile_summary")->fetch()['total'];
    if ($totalData == 0): ?> -->
    <div class="warning-box">
        <h4>⚠ Data Belum Tersedia</h4>
        <p>Silakan upload data compile summary terlebih dahulu untuk melihat visualisasi kualitas sinyal.</p>
        <a href="upload_summary.html" style="display: inline-block; margin-top: 10px; padding: 8px 16px; background: #0b3c68; color: white; border-radius: 6px; text-decoration: none;">
            📊 Upload Data Summary
        </a>
    </div>
    <!-- <?php endif; ?> -->

    <!-- 2. INTERPRETASI DATA 
    <div class="interpretation-box">
        <h4>🧠 Interpretasi KPI RF</h4>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 10px;">
            <div>
                <strong>RSRP (Reference Signal Received Power)</strong><br>
                Kekuatan sinyal (dBm)<br>
                ≥-92: Baik Sekali, ≥-102: Baik, ≥-105: Cukup
            </div>
            <div>
                <strong>RSRQ (Reference Signal Received Quality)</strong><br>
                Kualitas sinyal (dB)<br>
                ≥-10: Baik Sekali, ≥-12: Baik, ≥-16: Cukup
            </div>
            <div>
                <strong>SINR (Signal to Interference & Noise Ratio)</strong><br>
                Rasio sinyal terhadap noise (dB)<br>
                >20: Baik Sekali, ≥15: Baik, ≥8: Cukup
            </div>
        </div>
    </div> -->

    <!-- 3. FILTER CARD -->
    <div class="card">
        <h3>Filter Data</h3>
        <form method="GET" class="filter-grid">
            <select name="operator">
                <option value="all">Semua Operator</option>
                <!-- <?php foreach($operators as $op): ?>
                    <option value="<?= htmlspecialchars($op['operator']) ?>" <?= $operator == $op['operator'] ? 'selected' : '' ?>>
                        <?= htmlspecialchars($op['operator']) ?>
                    </option>
                <?php endforeach ?> -->
            </select>

            <select name="jenis_tes">
                <option value="all">Semua Jenis Test</option>
                <!-- <?php foreach($jenisTesList as $jt): ?>
                    <option value="<?= htmlspecialchars($jt['jenis_tes']) ?>" <?= $jenis_tes == $jt['jenis_tes'] ? 'selected' : '' ?>>
                        <?= htmlspecialchars($jt['jenis_tes']) ?>
                    </option>
                <?php endforeach ?> -->
            </select>

            <select name="kota">
                <option value="all">Semua Kota/Kab</option>
                <!-- <?php foreach($kotas as $k): ?>
                    <option value="<?= htmlspecialchars($k['kota_kabupaten']) ?>" <?= $kota == $k['kota_kabupaten'] ? 'selected' : '' ?>>
                        <?= htmlspecialchars($k['kota_kabupaten']) ?>
                    </option>
                <?php endforeach ?> -->
            </select>

            <!-- <input type="date" name="start" value="<?= htmlspecialchars($startDate) ?>" placeholder="Tanggal Mulai"> 
            <input type="date" name="end" value="<?= htmlspecialchars($endDate) ?>" placeholder="Tanggal Akhir"> -->

            <button type="submit">Terapkan Filter</button>
            <a href="kualitas_sinyal.html" class="reset-link">
                Reset Filter
            </a>
        </form>
    </div>

    <!-- 4. STATS GRID -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value"> <!-- <?= number_format($stats['total_tests'] ?? 0) ?> --></div>
            <div class="stat-label">Total Pengujian</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-value"><!-- <?= number_format($stats['avg_rsrp'] ?? 0, 1) ?> --></div>
            <div class="stat-label">Rata² RSRP (dBm)</div>
            <div class="stat-subvalue">
                <!-- Min: <?= number_format($stats['min_rsrp'] ?? 0, 1) ?> | 
                Max: <?= number_format($stats['max_rsrp'] ?? 0, 1) ?> -->
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-value"><!-- <?= number_format($stats['avg_sinr'] ?? 0, 1) ?> --></div>
            <div class="stat-label">Rata² SINR (dB)</div>
            <div class="stat-subvalue">
                <!-- Min: <?= number_format($stats['min_sinr'] ?? 0, 1) ?> | 
                Max: <?= number_format($stats['max_sinr'] ?? 0, 1) ?> -->
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-value"><?= number_format($stats['avg_rsrq'] ?? 0, 1) ?></div>
            <div class="stat-label">Rata² RSRQ (dB)</div>
            <div class="stat-subvalue">
                Kualitas Sinyal
            </div>
        </div>
    </div>

    <!-- 5. SECTION 1: RSRP (STRENGTH) -->
    <h2 class="section-title">📡 1. RSRP</h2>
    
    <div class="card-grid">
        <!-- Chart 1.1: Tren RSRP per Hari -->
        <div class="card">
            <h3>Tren RSRP per Hari</h3>
            <div class="chart-container chart-small">
                <canvas id="chartRsrpTrend"></canvas>
            </div>
        </div>

        <!-- Chart 1.2: Perbandingan RSRP 3 Operator Terbaik -->
        <div class="card">
            <h3>Perbandingan RSRP 3 Operator</h3>
            <div class="chart-container chart-small">
                <canvas id="chartTop3Rsrp"></canvas>
            </div>
        </div>
    </div>

    <!-- 6. SECTION 2: SINR (QUALITY) -->
    <h2 class="section-title">📶 2. SINR</h2>
    
    <div class="card-grid">
        <!-- Chart 2.1: Tren SINR per Hari -->
        <div class="card">
            <h3>Tren SINR per Hari</h3>
            <div class="chart-container chart-small">
                <canvas id="chartSinrTrend"></canvas>
            </div>
        </div>

        <!-- Chart 2.2: Perbandingan SINR 3 Operator Terbaik -->
        <div class="card">
            <h3>Perbandingan SINR 3 Operator</h3>
            <div class="chart-container chart-small">
                <canvas id="chartTop3Sinr"></canvas>
            </div>
        </div>
    </div>

    <!-- 7. SECTION 3: RSRQ & DISTRIBUSI -->
    <h2 class="section-title">📊 3. RSRQ</h2>
    
    <div class="card-grid">
        <!-- Chart 3.1: Tren RSRQ per Hari -->
        <div class="card">
            <h3>Tren RSRQ per Hari</h3>
            <div class="chart-container chart-small">
                <canvas id="chartRsrqTrend"></canvas>
            </div>
        </div>

        <!-- Chart 3.2: Perbandingan RSRQ 3 Operator Terbaik -->
        <div class="card">
            <h3>Perbandingan RSRQ 3 Operator</h3>
            <div class="chart-container chart-small">
                <canvas id="chartTop3Rsrq"></canvas>
            </div>
        </div>
    </div>

    <!-- 8. TABLE CARD 1 (Data per Operator) -->
    <div class="card">
        <h3>Detail Data per Operator</h3>
        <div class="table-wrapper">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Operator</th>
                        <th>RSRP (dBm)</th>
                        <th>RSRQ (dB)</th>
                        <th>SINR (dB)</th>
                        <th>Total Tests</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($dataOperator as $row):
                        [$rsrpTxt,$rsrpCls] = kategoriRSRP($row['rsrp']);
                        [$rsrqTxt,$rsrqCls] = kategoriRSRQ($row['rsrq']);
                        [$sinrTxt,$sinrCls] = kategoriSINR($row['sinr']);
                    ?>
                    <tr>
                        <td><strong><?= htmlspecialchars($row['operator']) ?></strong></td>
                        <td><?= number_format($row['rsrp'],1) ?> <span class="badge <?= $rsrpCls ?>"><?= $rsrpTxt ?></span></td>
                        <td><?= number_format($row['rsrq'],1) ?> <span class="badge <?= $rsrqCls ?>"><?= $rsrqTxt ?></span></td>
                        <td><?= number_format($row['sinr'],1) ?> <span class="badge <?= $sinrCls ?>"><?= $sinrTxt ?></span></td>
                        <td><?= number_format($row['total_tests']) ?></td>
                    </tr>
                    <?php endforeach ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 9. TABLE CARD 2 (Data per Hari) -->
    <div class="card">
        <h3>Data per Hari (14 Hari Terakhir)</h3>
        <div class="table-wrapper">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>RSRP (dBm)</th>
                        <th>RSRQ (dB)</th>
                        <th>SINR (dB)</th>
                        <th>Total Tests</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($dataHari as $row):
                        [$rsrpTxt,$rsrpCls] = kategoriRSRP($row['rsrp']);
                        [$rsrqTxt,$rsrqCls] = kategoriRSRQ($row['rsrq']);
                        [$sinrTxt,$sinrCls] = kategoriSINR($row['sinr']);
                    ?>
                    <tr>
                        <td><?= htmlspecialchars($row['tanggal']) ?></td>
                        <td><?= number_format($row['rsrp'],1) ?> <span class="badge <?= $rsrpCls ?>"><?= $rsrpTxt ?></span></td>
                        <td><?= number_format($row['rsrq'],1) ?> <span class="badge <?= $rsrqCls ?>"><?= $rsrqTxt ?></span></td>
                        <td><?= number_format($row['sinr'],1) ?> <span class="badge <?= $sinrCls ?>"><?= $sinrTxt ?></span></td>
                        <td><?= number_format($row['total_tests']) ?></td>
                    </tr>
                    <?php endforeach ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
// Data dari PHP ke JavaScript
/* const dataOperator = <?= json_encode($dataOperator) ?>;
const dataHari = <?= json_encode($dataHari) ?>;
const dataDistribusi = <?= json_encode($dataDistribusi) ?>;
const dataTop3 = <?= json_encode($dataTop3) ?>; */

// ==================== 1. RSRP (STRENGTH) ====================

// Chart 1.1: Tren RSRP per Hari
if (dataHari.length > 0) {
    new Chart(document.getElementById('chartRsrpTrend'), {
        type: 'line',
        data: {
            labels: dataHari.map(d => d.tanggal),
            datasets: [
                {
                    label: 'RSRP (dBm)',
                    data: dataHari.map(d => d.rsrp),
                    borderColor: '#0b3c68',
                    backgroundColor: 'rgba(11, 60, 104, 0.1)',
                    tension: 0.3,
                    fill: true,
                    yAxisID: 'y'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true, position: 'top' },
                title: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    reverse: true,
                    title: {
                        display: true,
                        text: 'RSRP (dBm)'
                    },
                    ticks: {
                        callback: function(value) {
                            return value + ' dBm';
                        }
                    },
                    grid: {
                        color: 'rgba(0,0,0,0.05)'
                    }
                }
            }
        }
    });
}

// Chart 1.2: Perbandingan RSRP 3 Operator Terbaik
if (dataTop3.length > 0) {
    new Chart(document.getElementById('chartTop3Rsrp'), {
        type: 'bar',
        data: {
            labels: dataTop3.map(d => d.operator),
            datasets: [
                {
                    label: 'RSRP (dBm)',
                    data: dataTop3.map(d => d.rsrp),
                    backgroundColor: '#0b3c68',
                    borderColor: '#082a48',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true, position: 'top' },
                title: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    reverse: true,
                    title: {
                        display: true,
                        text: 'RSRP (dBm)'
                    },
                    ticks: {
                        callback: function(value) {
                            return value + ' dBm';
                        }
                    }
                }
            }
        }
    });
}

// ==================== 2. SINR (QUALITY) ====================

// Chart 2.1: Tren SINR per Hari
if (dataHari.length > 0) {
    new Chart(document.getElementById('chartSinrTrend'), {
        type: 'line',
        data: {
            labels: dataHari.map(d => d.tanggal),
            datasets: [
                {
                    label: 'SINR (dB)',
                    data: dataHari.map(d => d.sinr),
                    borderColor: '#2ecc71',
                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true, position: 'top' },
                title: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'SINR (dB)'
                    },
                    ticks: {
                        callback: function(value) {
                            return value + ' dB';
                        }
                    }
                }
            }
        }
    });
}

// Chart 2.2: Perbandingan SINR 3 Operator Terbaik
if (dataTop3.length > 0) {
    new Chart(document.getElementById('chartTop3Sinr'), {
        type: 'bar',
        data: {
            labels: dataTop3.map(d => d.operator),
            datasets: [
                {
                    label: 'SINR (dB)',
                    data: dataTop3.map(d => d.sinr),
                    backgroundColor: '#2ecc71',
                    borderColor: '#27ae60',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true, position: 'top' },
                title: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'SINR (dB)'
                    },
                    ticks: {
                        callback: function(value) {
                            return value + ' dB';
                        }
                    }
                }
            }
        }
    });
}

// ==================== 3. RSRQ & DISTRIBUSI ====================

// ==================== 3. RSRQ & DISTRIBUSI ====================

// Chart 3.1: Tren RSRQ per Hari
if (dataHari.length > 0) {
    new Chart(document.getElementById('chartRsrqTrend'), {
        type: 'line',
        data: {
            labels: dataHari.map(d => d.tanggal),
            datasets: [
                {
                    label: 'RSRQ (dB)',
                    data: dataHari.map(d => d.rsrq),
                    borderColor: '#f39c12',
                    backgroundColor: 'rgba(243, 156, 18, 0.1)',
                    tension: 0.3,
                    fill: true,
                    yAxisID: 'y'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true, position: 'top' },
                title: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    reverse: true,
                    title: {
                        display: true,
                        text: 'RSRQ (dB)'
                    },
                    ticks: {
                        callback: function(value) {
                            return value + ' dB';
                        }
                    }
                }
            }
        }
    });
}

// Chart 3.2: Perbandingan RSRQ 3 Operator Terbaik
if (dataTop3.length > 0) {
    new Chart(document.getElementById('chartTop3Rsrq'), {
        type: 'bar',
        data: {
            labels: dataTop3.map(d => d.operator),
            datasets: [
                {
                    label: 'RSRQ (dB)',
                    data: dataTop3.map(d => d.rsrq),
                    backgroundColor: '#f39c12',
                    borderColor: '#e67e22',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true, position: 'top' },
                title: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    reverse: true,
                    title: {
                        display: true,
                        text: 'RSRQ (dB)'
                    },
                    ticks: {
                        callback: function(value) {
                            return value + ' dB';
                        }
                    }
                }
            }
        }
    });
}

// Jika tidak ada data, tampilkan pesan
if (dataOperator.length === 0) {
    document.querySelector('.card-grid').innerHTML = `
        <div class="card" style="grid-column: 1 / -1; text-align: center; padding: 40px;">
            <h3>📊 Tidak Ada Data</h3>
            <p>Upload data compile summary terlebih dahulu untuk melihat visualisasi</p>
            <a href="upload_summary.html" style="display: inline-block; margin-top: 15px; padding: 10px 20px; background: #0b3c68; color: white; text-decoration: none; border-radius: 8px;">
                📊 Upload Data Summary
            </a>
        </div>
    `;
}
</script>
</body>

</html>