<?php
session_start();
include "../db.php";

/* TOTAL STATIONS */

$total=$conn->query("
SELECT COUNT(*) as c FROM menus
")->fetch_assoc()['c'];

/* ACTIVE STATIONS */

$active=$conn->query("
SELECT COUNT(*) as c FROM menus WHERE status=1
")->fetch_assoc()['c'];

/* TOTAL VISITS */

$totalVisits=$conn->query("
SELECT COUNT(*) as c FROM page_visits
")->fetch_assoc()['c'];

/* LIVE USERS */

$live=$conn->query("
SELECT COUNT(DISTINCT session_id) as users
FROM page_visits
WHERE visit_time > NOW() - INTERVAL 5 MINUTE
")->fetch_assoc()['users'];

/* TOP RADIOS */

$top=$conn->query("
SELECT menus.menu_name, COUNT(page_visits.id) as visits
FROM page_visits
LEFT JOIN menus ON menus.id=page_visits.menu_id
GROUP BY menu_id
ORDER BY visits DESC
LIMIT 5
");
?>

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Radio Dashboard</title>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<meta http-equiv="refresh" content="20">

<style>

/* GLOBAL */

body{
margin:0;
font-family:Arial;
background:#f2f2f2;
display:flex;
}

/* SIDEBAR */

.sidebar{
width:220px;
background:#009688;
color:white;
min-height:100vh;
padding:20px 10px;
box-sizing:border-box;
}

.sidebar h2{
text-align:center;
margin-bottom:20px;
}

.sidebar a{
display:block;
color:white;
text-decoration:none;
padding:10px;
border-radius:4px;
margin-bottom:6px;
}

.sidebar a:hover{
background:rgba(255,255,255,0.2);
}

/* MAIN */

.main{
flex:1;
padding:30px;
}

/* HEADER */

.header-bar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.header-bar h2{
margin:0;
}

/* LIVE INDICATOR */

.live-indicator{
background:#e8f5e9;
padding:6px 12px;
border-radius:20px;
font-size:14px;
color:#2e7d32;
display:flex;
align-items:center;
gap:6px;
}

.live-dot{
width:8px;
height:8px;
background:#2e7d32;
border-radius:50%;
}

/* DASHBOARD GRID */

.dashboard-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:25px;
}

/* DASH CARDS */

.dash-card{
background:white;
border-radius:10px;
padding:20px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
display:flex;
align-items:center;
gap:15px;
}

.dash-card i{
font-size:24px;
color:#009688;
}

.dash-card h3{
margin:0;
font-size:14px;
color:#666;
}

.dash-card p{
margin:3px 0 0 0;
font-size:22px;
font-weight:bold;
}

/* TABLE CARD */

.card{
background:white;
border-radius:10px;
padding:25px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

/* TABLE */

table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}

table th{
background:#009688;
color:white;
padding:10px;
text-align:left;
}

table td{
padding:10px;
border-bottom:1px solid #eee;
}

/* MOBILE */

@media(max-width:900px){

.dashboard-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:600px){

.dashboard-grid{
grid-template-columns:1fr;
}

.sidebar{
display:none;
}

}

</style>

</head>

<body>

<?php include "sidebar.php"; ?>

<div class="main">

<div class="header-bar">

<h2>Radio Dashboard</h2>

<div class="live-indicator">
<span class="live-dot"></span>
<?php echo $live ?> Live Users
</div>

</div>


<div class="dashboard-grid">

<div class="dash-card">
<i class="fa-solid fa-radio"></i>
<div>
<h3>Total Stations</h3>
<p><?php echo $total ?></p>
</div>
</div>


<div class="dash-card">
<i class="fa-solid fa-signal"></i>
<div>
<h3>Active Stations</h3>
<p><?php echo $active ?></p>
</div>
</div>


<div class="dash-card">
<i class="fa-solid fa-users"></i>
<div>
<h3>Live Users</h3>
<p><?php echo $live ?></p>
</div>
</div>


<div class="dash-card">
<i class="fa-solid fa-chart-line"></i>
<div>
<h3>Total Visits</h3>
<p><?php echo $totalVisits ?></p>
</div>
</div>

</div>


<div class="card">

<h3>Top Radio Stations</h3>

<table>

<tr>
<th>Station</th>
<th>Total Visits</th>
</tr>

<?php while($r=$top->fetch_assoc()){ ?>

<tr>
<td><?php echo $r['menu_name']; ?></td>
<td><?php echo $r['visits']; ?></td>
</tr>

<?php } ?>

</table>

</div>

</div>

</body>
</html>