<?php
include "../db.php";
$settings=$conn->query("SELECT * FROM site_settings WHERE id=1")->fetch_assoc();
?>

<!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{
flex:1;
padding:30px;
}

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

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

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

/* FILTER BAR */

.filter-bar{
display:flex;
gap:10px;
margin-bottom:15px;
flex-wrap:wrap;
}

.filter-bar input,
.filter-bar select{
padding:8px;
border:1px solid #ccc;
border-radius:6px;
}

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

/* TOGGLE */

.switch{
position:relative;
display:inline-block;
width:44px;
height:24px;
}

.switch input{
opacity:0;
width:0;
height:0;
}

.slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background:#ccc;
border-radius:24px;
}

.slider:before{
position:absolute;
content:"";
height:18px;
width:18px;
left:3px;
bottom:3px;
background:white;
border-radius:50%;
transition:.3s;
}

input:checked + .slider{
background:#009688;
}

input:checked + .slider:before{
transform:translateX(20px);
}

/* 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">
<h2>Manage Radio Stations</h2>
<a href="add_menu.php" class="btn">+ Add Radio</a>
</div>

<div class="filter-bar">

<input type="text" id="searchInput" placeholder="Search radio">

<select id="limitSelect">
<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>

</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();

/* SEARCH */

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

/* LIMIT */

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

/* PAGINATION CLICK */

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

/* TOGGLE */

document.addEventListener("change",function(e){

if(e.target.classList.contains("toggleStatus")){

let id=e.target.dataset.id;
let status=e.target.checked?1:0;

fetch("toggle_status.php",{
method:"POST",
headers:{
"Content-Type":"application/x-www-form-urlencoded"
},
body:`id=${id}&status=${status}`
});

}

});

</script>

</body>
</html>