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

?>

<!DOCTYPE html>
<html>
<head>

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

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

/* CARD */

.card{
background:white;
border-radius:10px;
padding:25px;
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;
}

.header-bar h2{
margin:0;
}

/* BUTTON */

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

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

.btn-edit{
background:#1976d2;
color:white;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
font-size:13px;
}

.btn-test{
background:#6a1b9a;
color:white;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
font-size:13px;
margin-left:5px;
border:none;
cursor:pointer;
}

/* TABLE */

.radio-table{
width:100%;
border-collapse:collapse;
margin-top:10px;
}

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

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

/* STATUS */

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

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

/* AUDIO */

audio{
width:160px;
}

/* MOBILE */

@media(max-width:768px){

.sidebar{
display:none;
}

.main{
padding:20px;
}

.radio-table th,
.radio-table td{
font-size:13px;
padding:8px;
}

}

</style>

</head>

<body>

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

<div class="main">

<div class="card">

<div class="header-bar">

<h2>Manage Advertisements</h2>

<div style="display:flex;gap:10px">

<input type="text" id="searchBox"
placeholder="Search ads..."
style="padding:8px;border:1px solid #ddd;border-radius:6px">

<a href="add_ad.php" class="btn">+ Add Advertisement</a>

</div>

</div>

<table class="radio-table">

<thead>
<tr>
<th>ID</th>
<th>Station</th>
<th>Ad Name</th>
<th>Audio</th>
<th>Play Time</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>

<tbody id="adsTable"></tbody>

</table>

<div id="pagination" style="margin-top:15px"></div>

</div>

</div>
<script>

let testPlayer = new Audio();

function playAd(src){
testPlayer.pause();
testPlayer.src = src;
testPlayer.play();
}

/* LOAD ADS */

function loadAds(page=1){

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

let search = "";

if(searchBox){
search = searchBox.value;
}

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

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

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

}

/* SEARCH EVENT */

document.addEventListener("DOMContentLoaded",function(){

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

if(searchBox){

searchBox.addEventListener("keyup",function(){
loadAds();
});

}

loadAds();

});

</script>
</body>
</html>