@extends('layouts.admin')

@section('content')
<h3 class="mb-4">Monitoring</h3>

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Router</th>
            <th>IP Address</th>
            <th>Location</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody id="monitoring_table"></tbody>
</table>

<script>
document.addEventListener("DOMContentLoaded", function () {

    function loadMonitoring() {
        fetch('/api/monitoring/routers')
            .then(r => r.json())
            .then(rows => {
                let html = '';
                rows.forEach(rt => {
                    html += `
                        <tr>
                            <td>${rt.id}</td>
                            <td>${rt.name}</td>
                            <td>${rt.ip}</td>
                            <td>${rt.location ?? ''}</td>
                            <td>
                                <span class="badge ${rt.online ? 'bg-success' : 'bg-danger'}">
                                    ${rt.online ? 'Online' : 'Offline'}
                                </span>
                            </td>
                        </tr>
                    `;
                });
                document.getElementById('monitoring_table').innerHTML = html;
            });
    }

    loadMonitoring();
    setInterval(loadMonitoring, 15000); // refresh tiap 15 detik
});
</script>
@endsection