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

/* DELETE STATION */

if(isset($_GET['delete'])){

$id = intval($_GET['delete']);

$conn->query("DELETE FROM menus WHERE id='$id'");

header("Location: manage_stations.php");
exit;

}
?>

<!DOCTYPE html>
<html>
<head>

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

<style>

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 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;
}

/* CARD */

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

/* HEADER BAR */

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

.header-left{
font-size:22px;
font-weight:bold;
}

.header-right{
display:flex;
gap:10px;
align-items:center;
}

/* SEARCH */

.search-box{
padding:8px 12px;
border:1px solid #ccc;
border-radius:6px;
width:220px;
}

/* ADD BUTTON */

.add-btn{
background:#009688;
color:white;
padding:9px 15px;
border-radius:6px;
text-decoration:none;
}

/* TABLE */

table{
width:100%;
border-collapse:collapse;
}

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

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

/* BUTTONS */

.btn{
padding:6px 12px;
border-radius:4px;
text-decoration:none;
font-size:13px;
color:white;
}

.edit{ background:#2196f3; }
.delete{ background:#f44336; }

/* STATUS */

.status-active{
color:green;
font-weight:bold;
}

.status-off{
color:red;
font-weight:bold;
}

</style>
</head>

<body>

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

<div class="main">

<div class="card">

<div class="header-bar">

<div class="header-left">
Manage Radio Stations
</div>

<div class="header-right">

<input type="text"
id="searchBox"
class="search-box"
placeholder="Search station...">

<a class="add-btn" href="add_station.php">
+ Add Station
</a>

</div>

</div>

<table>

<thead>

<tr>
<th>ID</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Actions</th>
</tr>

</thead>

<tbody id="stationTable"></tbody>

</table>

</div>

</div>

<script>

function loadStations(page=1){

let search=document.getElementById("searchBox").value;

fetch("load_stations.php?page="+page+"&search="+encodeURIComponent(search))

.then(res=>res.text())

.then(data=>{
document.getElementById("stationTable").innerHTML=data;
});

}

document.getElementById("searchBox").addEventListener("keyup",function(){
loadStations();
});

loadStations();

</script>

</body>
</html>