@extends('layouts.app')

@section('content')

<style>

/* ===== CONTAINER ===== */
.table-box{
background:#020617;
padding:20px;
border-radius:12px;
border:1px solid rgba(0,255,255,.2);
box-shadow:0 0 20px rgba(0,255,255,.08);
}

/* ===== HEADER ===== */
.title{
display:flex;
align-items:center;
gap:10px;
color:#00ffff;
margin-bottom:15px;
}

/* ===== TABLE ===== */
table{
width:100%;
border-collapse:collapse;
}

th,td{
padding:12px;
border-bottom:1px solid rgba(0,255,255,.08);
text-align:left;
}

th{
color:#00ffff;
font-weight:600;
}

/* ===== ROW STYLE ===== */
tr:hover{
background:rgba(0,255,255,.05);
transition:.2s;
}

/* ===== TOP USER ===== */
.top-user{
color:#00ff88;
font-weight:bold;
}

/* ===== SVG ICON ===== */
.icon{
width:18px;
height:18px;
fill:#00ffff;
vertical-align:middle;
}

/* ===== BADGE ===== */
.badge{
padding:4px 10px;
border-radius:20px;
font-size:12px;
background:rgba(0,255,255,.1);
border:1px solid rgba(0,255,255,.2);
}

</style>

<h2 class="title">

<!-- Network Icon -->
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a5 5 0 110 10 5 5 0 010-10z"/>
</svg>

Top Bandwidth Users

</h2>

<div class="table-box">

<table>

<thead>
<tr>
<th>User</th>
<th>IP Address</th>
<th>Download</th>
<th>Upload</th>
</tr>
</thead>

<tbody id="userTable"></tbody>

</table>

</div>

<script>

function convert(bytes){
return (bytes/1024/1024).toFixed(2) + ' MB';
}

function loadUsers(){

fetch('/top-users/1') // router id dynamic later
.then(res=>res.json())
.then(data=>{

let html = '';

data.forEach((u,i)=>{

html += `
<tr class="${i==0?'top-user':''}">

<td>
${i==0 ? `
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2l3 6 6 .9-4.5 4.4 1 6-5.5-3-5.5 3 1-6L3 8.9 9 8z"/>
</svg>` : ''}

${u.name}
</td>

<td>
<span class="badge">${u.address}</span>
</td>

<td>
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 16l4-4h-3V4h-2v8H8l4 4z"/>
</svg>
${convert(u.rx)}
</td>

<td>
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 8l-4 4h3v8h2v-8h3l-4-4z"/>
</svg>
${convert(u.tx)}
</td>

</tr>
`;

});

document.getElementById('userTable').innerHTML = html;

});

}

setInterval(loadUsers,3000);
loadUsers();

</script>

@endsection