<?php
include "../db.php";
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Manage Radios</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;
}

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

/* MAIN */

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

/* CARD */

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

/* HEADER */

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

/* LIMIT */

.limit-select{
padding:8px;
border:1px solid #ccc;
border-radius:6px;
}

/* BUTTON */

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

/* TABLE */

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

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

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

.thumb{
width:70px;
height:50px;
object-fit:cover;
border-radius:6px;
}

/* PAGINATION */

.pagination{
margin-top:15px;
}

.pagination button{
padding:6px 10px;
margin-right:5px;
border:none;
background:#009688;
color:white;
border-radius:4px;
cursor:pointer;
}

</style>
</head>

<body>

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

<div class="main">

<div class="card">

<div class="header-bar">

<div class="header-left">
Manage Radios
</div>

<div class="header-right">

<input type="text"
id="searchInput"
class="search-box"
placeholder="Search radio">

<select id="limitSelect" class="limit-select">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="999999">All</option>
</select>

<a href="add_menu.php" class="btn">
+ Add Radio
</a>

</div>

</div>

<div id="menuTable"></div>

<div class="pagination" id="pagination"></div>

</div>

</div>

<script>

let page=1;

function loadMenus(){

let search=document.getElementById("searchInput").value;
let limit=document.getElementById("limitSelect").value;

fetch(`fetch_menus.php?page=${page}&search=${search}&limit=${limit}`)
.then(res=>res.json())
.then(data=>{

document.getElementById("menuTable").innerHTML=data.table;
document.getElementById("pagination").innerHTML=data.pagination;

});

}

loadMenus();

document.getElementById("searchInput").addEventListener("keyup",()=>{
page=1;
loadMenus();
});

document.getElementById("limitSelect").addEventListener("change",()=>{
page=1;
loadMenus();
});

function goPage(p){
page=p;
loadMenus();
}

</script>

</body>
</html>