@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">

        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Server Monitoring</h6>
                        <p class="text-sm">MSJ Asset — Monitoring Server</p>
                    </div>
                </div>
            </div>
        </div>

        @foreach (['prd', 'dev'] as $srv)
            @php
                $t = $realtime[$srv]['task'] ?? null;
                $d = $realtime[$srv]['disk'] ?? null;
                $cpu = $t['cpu_used_percent'] ?? 0;
                $ram = round($t['ram']['used_percent'] ?? 0, 1);
                $ramUsed = $t['ram']['used'] ?? '-';
                $ramTot = $t['ram']['total'] ?? '-';
                $load1 = round($t['loadavg']['1m'] ?? 0, 2);
                $load5 = round($t['loadavg']['5m'] ?? 0, 2);
                $load15 = round($t['loadavg']['15m'] ?? 0, 2);
                $time = $t['time'] ?? '-';
                $dPct = $d['used_percent'] ?? 0;
                $dUsed = $d['used'] ?? '-';
                $dTot = $d['total'] ?? '-';
                $dFree = $d['available'] ?? '-';
                $cpuColor = $cpu >= 90 ? '#e74c3c' : ($cpu >= 70 ? '#f39c12' : '#27ae60');
                $ramColor = $ram >= 90 ? '#e74c3c' : ($ram >= 70 ? '#f39c12' : '#3498db');
            @endphp

            <div class="row mb-3 mt-2">
                <div class="col-12">
                    <div class="card mb-0" style="border-left: 3px solid {{ $srv === 'prd' ? '#1a73e8' : '#28a745' }};">
                        <div class="card-header p-2 px-3" style="cursor:pointer; user-select:none;"
                            data-bs-toggle="collapse" data-bs-target="#collapse_{{ $srv }}" aria-expanded="true"
                            aria-controls="collapse_{{ $srv }}">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="server-badge badge-{{ $srv }} me-2">{{ strtoupper($srv) }}</span>
                                    <span class="fw-bold"
                                        style="font-size:13px; color:#344767; text-transform:uppercase; letter-spacing:1px;">
                                        Server {{ strtoupper($srv) }}
                                    </span>
                                    <span class="ms-3 text-muted" style="font-size:11px;">
                                        🕐 Last Update: <span id="lastupdate_{{ $srv }}">{{ $time }}</span>
                                    </span>
                                </div>
                                <span class="collapse-icon"
                                    style="font-size:13px; color:#6c757d; transition: transform .3s;">▼</span>
                            </div>
                        </div>

                        <div id="collapse_{{ $srv }}" class="collapse show">
                            <div class="card-body p-3">

                                {{-- Row 1: History CPU & RAM Chart --}}
                                <div class="row mb-2">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-body p-3">
                                                <div class="d-flex justify-content-between align-items-center mb-1">
                                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">
                                                        📊 History CPU & RAM — Server {{ strtoupper($srv) }}
                                                    </p>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <small class="text-muted" style="font-size:10px;">📝 Data diambil
                                                            per 5 menit</small>
                                                        <div class="d-flex gap-1">
                                                            <button class="range-btn active"
                                                                onclick="loadHistory('{{ $srv }}','7h',this)">7H</button>
                                                            <button class="range-btn"
                                                                onclick="loadHistory('{{ $srv }}','24h',this)">24H</button>
                                                            <button class="range-btn"
                                                                onclick="loadHistory('{{ $srv }}','7d',this)">7D</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="chart_{{ $srv }}" style="height:260px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Row 2: Donut CPU + Memory + Storage --}}
                                <div class="row mb-2">
                                    <div class="col-xl-4 col-sm-12 mb-3">
                                        <div class="card h-100">
                                            <div class="card-body p-3">
                                                <p class="text-sm text-uppercase font-weight-bold mb-0">CPU Usage</p>
                                                <div id="gauge_cpu_{{ $srv }}" data-val="{{ $cpu }}"
                                                    data-srv="{{ $srv }}" style="height:230px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-sm-12 mb-3">
                                        <div class="card h-100">
                                            <div class="card-body p-3">
                                                <p class="text-sm text-uppercase font-weight-bold mb-0">Memory Usage</p>
                                                <div id="donut_ram_{{ $srv }}" data-val="{{ $ram }}"
                                                    data-used="{{ $ramUsed }}" data-total="{{ $ramTot }}"
                                                    style="height:230px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-sm-12 mb-3">
                                        <div class="card h-100">
                                            <div class="card-body p-3">
                                                <p class="text-sm text-uppercase font-weight-bold mb-0">Storage Usage</p>
                                                <div id="donut_disk_{{ $srv }}" data-val="{{ $dPct }}"
                                                    data-used="{{ $dUsed }}" data-total="{{ $dTot }}"
                                                    style="height:230px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Row 3: Tabel Data Monitoring dari DB (ikut filter 7H/24H/7D) --}}
                                <div class="row mb-2">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-body p-3">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <p class="text-sm text-uppercase font-weight-bold mb-0">
                                                        📋 Data Monitoring — Server {{ strtoupper($srv) }}
                                                    </p>
                                                    <small id="table_range_label_{{ $srv }}" class="text-muted"
                                                        style="font-size:10px;">7 jam terakhir</small>
                                                </div>
                                                <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                                                    <table class="table table-sm table-hover monitoring-table"
                                                        id="table_{{ $srv }}">
                                                        <thead class="sticky-top">
                                                            <tr>
                                                                <th class="text-center">Waktu</th>
                                                                <th class="text-center">CPU %</th>
                                                                <th class="text-center">RAM %</th>
                                                                <th class="text-center">Load 1m</th>
                                                                <th class="text-center">Load 5m</th>
                                                                <th class="text-center">Load 15m</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="tbody_{{ $srv }}">
                                                            @php
                                                                $histKey = 'history_' . $srv;
                                                                $histData = $$histKey ?? collect();
                                                                $histData = collect($histData)->sortByDesc(
                                                                    'recorded_at',
                                                                );
                                                            @endphp
                                                            @forelse($histData as $row)
                                                                @php
                                                                    $isDown = $row->server_down ?? 0;
                                                                    $rowCpu = $row->cpu_used_percent ?? 0;
                                                                    $rowRam = round($row->ram_used_percent ?? 0, 1);
                                                                    $rowLoad1 = round($row->loadavg_1m ?? 0, 2);
                                                                    $rowLoad5 = round($row->loadavg_5m ?? 0, 2);
                                                                    $rowLoad15 = round($row->loadavg_15m ?? 0, 2);
                                                                    $rowCpuClass =
                                                                        $rowCpu >= 90
                                                                            ? 'text-danger'
                                                                            : ($rowCpu >= 70
                                                                                ? 'text-warning'
                                                                                : 'text-success');
                                                                    $rowRamClass =
                                                                        $rowRam >= 90
                                                                            ? 'text-danger'
                                                                            : ($rowRam >= 70
                                                                                ? 'text-warning'
                                                                                : 'text-primary');
                                                                @endphp
                                                                @if ($isDown)
                                                                    <tr
                                                                        style="background-color:rgba(231,76,60,0.07); border-left:3px solid #e74c3c;">
                                                                        <td class="text-center"
                                                                            style="font-size:11px; white-space:nowrap; color:#999;">
                                                                            {{ \Carbon\Carbon::parse($row->recorded_at)->timezone('Asia/Jakarta')->format('d/m/Y H:i:s') }}
                                                                        </td>
                                                                        <td colspan="5" class="text-center"
                                                                            style="font-size:11px;">
                                                                            <span
                                                                                style="color:#c0392b; font-weight:600;">Server
                                                                                Down</span>
                                                                            <span
                                                                                style="color:#999; font-size:10px; margin-left:4px;">—
                                                                                data tidak terekam saat server tidak bisa
                                                                                dijangkau</span>
                                                                        </td>
                                                                    </tr>
                                                                @else
                                                                    <tr>
                                                                        <td class="text-center"
                                                                            style="font-size:11px; white-space:nowrap;">
                                                                            {{ \Carbon\Carbon::parse($row->recorded_at)->timezone('Asia/Jakarta')->format('d/m/Y H:i:s') }}
                                                                        </td>
                                                                        <td class="{{ $rowCpuClass }} fw-bold text-center"
                                                                            style="font-size:12px;">{{ $rowCpu }}%
                                                                        </td>
                                                                        <td class="{{ $rowRamClass }} fw-bold text-center"
                                                                            style="font-size:12px;">{{ $rowRam }}%
                                                                        </td>
                                                                        <td class="text-center" style="font-size:11px;">
                                                                            {{ $rowLoad1 }}</td>
                                                                        <td class="text-center" style="font-size:11px;">
                                                                            {{ $rowLoad5 }}</td>
                                                                        <td class="text-center" style="font-size:11px;">
                                                                            {{ $rowLoad15 }}</td>
                                                                    </tr>
                                                                @endif
                                                            @empty
                                                                <tr>
                                                                    <td colspan="6" class="text-center text-muted"
                                                                        style="font-size:12px;">
                                                                        Tidak ada data monitoring tersedia
                                                                    </td>
                                                                </tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>
                </div>
            </div>
        @endforeach

    </div>

    <style>
        .server-badge {
            font-size: 11px;
            padding: 3px 10px;
            border-radius: 20px;
            font-weight: bold;
        }

        .badge-prd {
            background-color: #1a73e8;
            color: #fff;
        }

        .badge-dev {
            background-color: #28a745;
            color: #fff;
        }

        .range-btn {
            font-size: 11px;
            padding: 2px 12px;
            border-radius: 20px;
            border: 1px solid #dee2e6;
            background: #fff;
            cursor: pointer;
            transition: all .2s;
        }

        .range-btn.active,
        .range-btn:hover {
            background-color: #028284;
            color: #fff;
            border-color: #028284;
        }

        .metric-label {
            font-size: 11px;
            color: #6c757d;
            margin-bottom: 2px;
        }

        .metric-value {
            font-size: 13px;
            font-weight: bold;
        }

        .last-update {
            font-size: 11px;
            color: #6c757d;
        }

        .disk-item {
            margin-bottom: 10px;
        }

        .disk-bar {
            height: 10px;
            border-radius: 6px;
            background-color: #e9ecef;
            overflow: hidden;
        }

        .disk-bar-fill {
            height: 100%;
            border-radius: 6px;
            background-color: #00b7bd;
            transition: width 0.4s;
        }

        .srv-title {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #344767;
            margin-bottom: 12px;
            padding-bottom: 6px;
            border-bottom: 2px solid #028284;
            display: inline-block;
        }

        /* Tabel monitoring */
        .monitoring-table thead th {
            background-color: #f8f9fa;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #344767;
            border-bottom: 2px solid #dee2e6;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .monitoring-table tbody tr:hover {
            background-color: #f0f9ff;
        }

        .monitoring-table tbody tr td {
            vertical-align: middle;
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(40px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    </style>

    @push('js')
        <script>
            document.addEventListener('DOMContentLoaded', function() {

                function pctColor(v) {
                    return v >= 90 ? '#e74c3c' : v >= 70 ? '#f39c12' : '#27ae60';
                }

                function ramColor(v) {
                    return v >= 90 ? '#e74c3c' : v >= 70 ? '#f39c12' : '#3498db';
                }

                // ── Gauge CPU (speedometer) — return instance ──
                const gaugeInstances = {};

                function initGauge(id) {
                    const el = document.getElementById(id);
                    if (!el) return;
                    const val = parseFloat(el.dataset.val);
                    const color = pctColor(val);
                    const chart = echarts.init(el);
                    gaugeInstances[id] = chart;
                    chart.setOption(buildGaugeOption(val, color));
                }

                function buildGaugeOption(val, color) {
                    return {
                        series: [{
                            type: 'gauge',
                            startAngle: 200,
                            endAngle: -20,
                            min: 0,
                            max: 100,
                            radius: '88%',
                            axisLine: {
                                lineStyle: {
                                    width: 20,
                                    color: [
                                        [val / 100, color],
                                        [1, '#e9ecef']
                                    ]
                                }
                            },
                            pointer: {
                                length: '65%',
                                width: 5,
                                itemStyle: {
                                    color
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            detail: {
                                valueAnimation: true,
                                formatter: '{value}%',
                                fontSize: 24,
                                fontWeight: 'bold',
                                color,
                                offsetCenter: [0, '65%']
                            },
                            title: {
                                show: false
                            },
                            data: [{
                                value: val
                            }]
                        }]
                    };
                }

                // ── Donut RAM / Disk — dengan tooltip GB ──
                const donutInstances = {};

                function initDonut(id) {
                    const el = document.getElementById(id);
                    if (!el) return;
                    const val = parseFloat(el.dataset.val);
                    const used = el.dataset.used || '-';
                    const total = el.dataset.total || '-';
                    const color = id.includes('ram') ? ramColor(val) : pctColor(val);
                    const chart = echarts.init(el);
                    donutInstances[id] = chart;
                    chart.setOption(buildDonutOption(val, used, total, color, id));
                }

                function buildDonutOption(val, used, total, color, id) {
                    const isRam = id && id.includes('ram');

                    // RAM pakai gauge speedometer seperti CPU
                    if (isRam) {
                        return {
                            series: [{
                                type: 'gauge',
                                startAngle: 200,
                                endAngle: -20,
                                min: 0,
                                max: 100,
                                radius: '88%',
                                axisLine: {
                                    lineStyle: {
                                        width: 20,
                                        color: [
                                            [val / 100, color],
                                            [1, '#e9ecef']
                                        ]
                                    }
                                },
                                pointer: {
                                    length: '65%',
                                    width: 5,
                                    itemStyle: {
                                        color
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    show: false
                                },
                                detail: {
                                    valueAnimation: true,
                                    formatter: '{value}%',
                                    fontSize: 22,
                                    fontWeight: 'bold',
                                    color,
                                    offsetCenter: [0, '55%']
                                },
                                title: {
                                    show: false
                                },
                                data: [{
                                    value: parseFloat(val).toFixed(1)
                                }]
                            }],
                            graphic: [{
                                type: 'text',
                                left: 'center',
                                bottom: 18,
                                style: {
                                    text: used + ' / ' + total,
                                    fontSize: 10,
                                    fill: '#6c757d'
                                }
                            }]
                        };
                    }

                    // Disk tetap donut
                    return {
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                if (params.name === 'Used') {
                                    return `<b>${params.name}</b><br/>` +
                                        `Persentase: <b>${val}%</b><br/>` +
                                        `Kapasitas: <b>${used} / ${total}</b>`;
                                }
                                const freeVal = (100 - val).toFixed(1);
                                let freeGb = '';
                                if (used && total && used !== '-' && total !== '-') {
                                    const usedNum = parseFloat(used);
                                    const totalNum = parseFloat(total);
                                    const unit = total.replace(/[\d.]/g, '').trim();
                                    if (!isNaN(usedNum) && !isNaN(totalNum)) {
                                        freeGb =
                                            `<br/>Kapasitas: <b>${(totalNum - usedNum).toFixed(2)} ${unit} / ${total}</b>`;
                                    }
                                }
                                return `<b>${params.name}</b><br/>Sisa: ${freeVal}%${freeGb}`;
                            }
                        },
                        series: [{
                            type: 'pie',
                            radius: ['55%', '75%'],
                            center: ['50%', '50%'],
                            label: {
                                show: false
                            },
                            emphasis: {
                                scale: false
                            },
                            data: [{
                                    value: val,
                                    name: 'Used',
                                    itemStyle: {
                                        color
                                    }
                                },
                                {
                                    value: 100 - val,
                                    name: 'Free',
                                    itemStyle: {
                                        color: '#e9ecef'
                                    }
                                }
                            ]
                        }],
                        title: [{
                                text: val + '%',
                                left: '50%',
                                top: '38%',
                                textAlign: 'center',
                                textStyle: {
                                    fontSize: 22,
                                    fontWeight: 'bold',
                                    color
                                }
                            },
                            {
                                text: used + ' / ' + total,
                                left: '50%',
                                top: '55%',
                                textAlign: 'center',
                                textStyle: {
                                    fontSize: 10,
                                    color: '#6c757d',
                                    fontWeight: 'normal'
                                }
                            }
                        ]
                    };
                }

                // ── Line Chart History ──
                const charts = {};

                function buildLineOption(data) {
                    return {
                        color: ['#e74c3c', '#3498db'],
                        tooltip: {
                            trigger: 'axis',
                            formatter: p => p[0].axisValue + '<br>' +
                                p.map(x => x.marker + ' ' + x.seriesName + ': <b>' + x.value + '%</b>').join('<br>')
                        },
                        legend: {
                            data: ['CPU', 'RAM'],
                            bottom: 0
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: data.map(d => d.recorded_at),
                            axisLabel: {
                                fontSize: 10,
                                formatter: v => v.substring(11, 16)
                            }
                        },
                        yAxis: {
                            type: 'value',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value}%',
                                fontSize: 10
                            }
                        },
                        series: [{
                                name: 'CPU',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                data: data.map(d => parseFloat(d.cpu_used_percent).toFixed(1)),
                                lineStyle: {
                                    color: '#e74c3c',
                                    width: 2
                                },
                                areaStyle: {
                                    color: 'rgba(231,76,60,0.1)'
                                }
                            },
                            {
                                name: 'RAM',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                data: data.map(d => parseFloat(d.ram_used_percent).toFixed(1)),
                                lineStyle: {
                                    color: '#3498db',
                                    width: 2
                                },
                                areaStyle: {
                                    color: 'rgba(52,152,219,0.1)'
                                }
                            }
                        ]
                    };
                }

                function initLineChart(server, initData) {
                    const el = document.getElementById('chart_' + server);
                    if (!el) return;
                    const chart = echarts.init(el);
                    charts[server] = chart;
                    chart.setOption(buildLineOption(initData));
                    window.addEventListener('resize', () => chart.resize());
                }

                window.loadHistory = function(server, range, btn) {
                    btn.closest('.d-flex').querySelectorAll('.range-btn')
                        .forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');

                    // Update label range di tabel
                    const rangeLabels = {
                        '7h': '7 jam terakhir',
                        '24h': '24 jam terakhir',
                        '7d': '7 hari terakhir'
                    };
                    const labelEl = document.getElementById('table_range_label_' + server);
                    if (labelEl) labelEl.textContent = rangeLabels[range] || range;

                    fetch(`{{ url('/monitoring/history') }}?server=${server}&range=${range}`)
                        .then(r => r.json())
                        .then(data => {
                            // Update chart
                            charts[server]?.setOption(buildLineOption(data));
                            // Update tabel monitoring
                            renderTable(server, data);
                        });
                };

                function renderTable(server, data) {
                    const tbody = document.getElementById('tbody_' + server);
                    if (!tbody) return;

                    if (!data || data.length === 0) {
                        tbody.innerHTML =
                            `<tr><td colspan="6" class="text-center text-muted" style="font-size:12px;">Tidak ada data monitoring tersedia</td></tr>`;
                        return;
                    }

                    // Urutkan descending (terbaru dulu)
                    const sorted = [...data].sort((a, b) => b.recorded_at.localeCompare(a.recorded_at));

                    tbody.innerHTML = sorted.map(row => {
                        const isDown = row.server_down == 1;

                        // Format waktu
                        const dt = row.recorded_at || '';
                        const dtFmt = dt.length >= 16 ?
                            dt.substring(8, 10) + '/' + dt.substring(5, 7) + '/' + dt.substring(0, 4) +
                            ' ' + dt.substring(11, 19) :
                            dt;

                        if (isDown) {
                            return `<tr style="background-color:rgba(231,76,60,0.07); border-left:3px solid #e74c3c;">
                                <td style="font-size:11px; white-space:nowrap; color:#999;">${dtFmt}</td>
                                <td colspan="5" style="font-size:11px;">
                                    <span style="color:#c0392b; font-weight:600;">Server Down</span>
                                    <span style="color:#999; font-size:10px; margin-left:4px;">— data tidak terekam saat server tidak bisa dijangkau</span>
                                </td>
                            </tr>`;
                        }

                        const cpu = parseFloat(row.cpu_used_percent || 0);
                        const ram = parseFloat(row.ram_used_percent || 0).toFixed(1);
                        const l1 = parseFloat(row.loadavg_1m || 0).toFixed(2);
                        const l5 = parseFloat(row.loadavg_5m || 0).toFixed(2);
                        const l15 = parseFloat(row.loadavg_15m || 0).toFixed(2);
                        const cpuClass = cpu >= 90 ? 'text-danger' : cpu >= 70 ? 'text-warning' :
                        'text-success';
                        const ramClass = ram >= 90 ? 'text-danger' : ram >= 70 ? 'text-warning' :
                        'text-primary';

                        return `<tr>
                            <td style="font-size:11px; white-space:nowrap;">${dtFmt}</td>
                            <td class="${cpuClass} fw-bold" style="font-size:12px;">${cpu}%</td>
                            <td class="${ramClass} fw-bold" style="font-size:12px;">${ram}%</td>
                            <td style="font-size:11px;">${l1}</td>
                            <td style="font-size:11px;">${l5}</td>
                            <td style="font-size:11px;">${l15}</td>
                        </tr>`;
                    }).join('');
                }

                // ── Init semua elemen ──
                ['prd', 'dev'].forEach(srv => {
                    initGauge('gauge_cpu_' + srv);
                    initDonut('donut_ram_' + srv);
                    initDonut('donut_disk_' + srv);
                });

                initLineChart('prd', @json($history_prd));
                initLineChart('dev', @json($history_dev));

                // ── Real-time CPU polling per detik ──
                let realtimeActive = true;

                function fetchRealtime() {
                    if (!realtimeActive) return;
                    fetch('{{ url('/montsr/realtime') }}')
                        .then(r => r.json())
                        .then(data => {
                            ['prd', 'dev'].forEach(srv => {
                                const srvData = data[srv];
                                if (!srvData || !srvData.task) return;

                                const task = srvData.task;
                                const cpuVal = parseFloat(task.cpu_used_percent || 0);
                                const ramVal = parseFloat(task.ram?.used_percent || 0);
                                const ramUsed = task.ram?.used || '-';
                                const ramTot = task.ram?.total || '-';
                                const load1 = parseFloat(task.loadavg?.['1m'] || 0).toFixed(2);
                                const load5 = parseFloat(task.loadavg?.['5m'] || 0).toFixed(2);
                                const load15 = parseFloat(task.loadavg?.['15m'] || 0).toFixed(2);
                                const timeStr = task.time || '-';
                                const cColor = pctColor(cpuVal);
                                const rColor = ramColor(ramVal);

                                // Update Status Real-time card (text)
                                const cpuPctEl = document.getElementById('cpu_pct_' + srv);
                                const cpuBarEl = document.getElementById('cpu_bar_' + srv);
                                const ramPctEl = document.getElementById('ram_pct_' + srv);
                                const ramBarEl = document.getElementById('ram_bar_' + srv);
                                const ramGbEl = document.getElementById('ram_gb_' + srv);
                                const load1El = document.getElementById('load1_' + srv);
                                const load5El = document.getElementById('load5_' + srv);
                                const load15El = document.getElementById('load15_' + srv);
                                const updEl = document.getElementById('lastupdate_' + srv);

                                if (cpuPctEl) {
                                    cpuPctEl.textContent = cpuVal + '%';
                                    cpuPctEl.style.color = cColor;
                                }
                                if (cpuBarEl) {
                                    cpuBarEl.style.width = cpuVal + '%';
                                    cpuBarEl.style.backgroundColor = cColor;
                                }
                                if (ramPctEl) {
                                    ramPctEl.textContent = ramVal.toFixed(1) + '%';
                                    ramPctEl.style.color = rColor;
                                }
                                if (ramBarEl) {
                                    ramBarEl.style.width = ramVal + '%';
                                    ramBarEl.style.backgroundColor = rColor;
                                }
                                if (ramGbEl) ramGbEl.textContent = ramUsed + ' / ' + ramTot;
                                if (load1El) load1El.textContent = load1;
                                if (load5El) load5El.textContent = load5;
                                if (load15El) load15El.textContent = load15;
                                if (updEl) updEl.textContent = timeStr;

                                // Update gauge CPU (animated per detik)
                                const gaugeKey = 'gauge_cpu_' + srv;
                                const gaugeChart = gaugeInstances[gaugeKey];
                                if (gaugeChart) {
                                    gaugeChart.setOption(buildGaugeOption(cpuVal, cColor));
                                }

                                // Update donut RAM
                                const ramKey = 'donut_ram_' + srv;
                                const ramChart = donutInstances[ramKey];
                                if (ramChart) {
                                    const el = document.getElementById(ramKey);
                                    if (el) {
                                        el.dataset.val = ramVal;
                                        el.dataset.used = ramUsed;
                                        el.dataset.total = ramTot;
                                    }
                                    ramChart.setOption(buildDonutOption(ramVal, ramUsed, ramTot, rColor,
                                        ramKey));
                                }

                                // Update donut Disk (realtime)
                                const disk = srvData.disk;
                                if (disk) {
                                    const diskPct = parseFloat(disk.used_percent || 0);
                                    const diskUsed = disk.used || '-';
                                    const diskTotal = disk.total || '-';
                                    const dColor = diskPct >= 90 ? '#e74c3c' : diskPct >= 70 ? '#f39c12' :
                                        '#27ae60';
                                    const diskKey = 'donut_disk_' + srv;
                                    const diskChart = donutInstances[diskKey];
                                    if (diskChart) {
                                        const el = document.getElementById(diskKey);
                                        if (el) {
                                            el.dataset.val = diskPct;
                                            el.dataset.used = diskUsed;
                                            el.dataset.total = diskTotal;
                                        }
                                        diskChart.setOption(buildDonutOption(diskPct, diskUsed, diskTotal,
                                            dColor, diskKey));
                                    }
                                }
                            });
                        })
                        .catch(() => {})
                        .finally(() => {
                            if (realtimeActive) setTimeout(fetchRealtime, 1000);
                        });
                }

                // ── Notif storage sekali saat login ──
                @foreach (['prd', 'dev'] as $srv)
                    @php $dPct = $realtime[$srv]['disk']['used_percent'] ?? 0; @endphp
                    @if ($dPct >= 70)
                        (function() {
                            const pct = {{ $dPct }};
                            const srv = '{{ $srv }}';
                            const color = pct >= 90 ? '#e74c3c' : '#f39c12';
                            const icon = pct >= 90 ? '🔴' : '🟡';
                            const el = document.createElement('div');
                            el.style.cssText = [
                                'position:fixed', 'top:' + ({{ $loop->index }} * 90 + 20) + 'px',
                                'right:20px', 'z-index:9999',
                                'background:#fff', 'border-left:4px solid ' + color,
                                'border-radius:8px', 'box-shadow:0 4px 20px rgba(0,0,0,.15)',
                                'padding:12px 16px', 'font-size:13px', 'max-width:320px',
                                'animation:slideInRight .3s ease'
                            ].join(';');
                            el.innerHTML = icon + ' <b>Storage ' + srv.toUpperCase() + ' ' + (pct >= 90 ?
                                    'Kritis!' : 'Warning!') + '</b><br>' +
                                '<span style="color:#666;font-size:12px;">Disk usage <b style="color:' + color +
                                '">' + pct + '%</b>. Segera periksa server.</span>';
                            document.body.appendChild(el);
                            setTimeout(() => el.remove(), 5000);
                        })();
                    @endif
                @endforeach

                // Mulai polling hanya saat halaman ini aktif
                fetchRealtime();

                // Pause polling saat tab tidak aktif, resume saat aktif lagi
                document.addEventListener('visibilitychange', () => {
                    if (document.hidden) {
                        realtimeActive = false;
                    } else {
                        realtimeActive = true;
                        fetchRealtime();
                    }
                });

                // ── Collapse: animasi panah + resize grafik ──
                ['prd', 'dev'].forEach(srv => {
                    const collapseEl = document.getElementById('collapse_' + srv);
                    const header = collapseEl?.previousElementSibling;

                    collapseEl?.addEventListener('hide.bs.collapse', () => {
                        if (header) header.querySelector('.collapse-icon').style.transform =
                            'rotate(-90deg)';
                    });

                    collapseEl?.addEventListener('show.bs.collapse', () => {
                        if (header) header.querySelector('.collapse-icon').style.transform =
                            'rotate(0deg)';
                    });

                    collapseEl?.addEventListener('shown.bs.collapse', () => {
                        charts[srv]?.resize();
                        gaugeInstances['gauge_cpu_' + srv]?.resize();
                        donutInstances['donut_ram_' + srv]?.resize();
                        donutInstances['donut_disk_' + srv]?.resize();
                    });
                });
            });
        </script>
    @endpush
@endsection