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

$result=$conn->query("
SELECT ads.*, menus.menu_name 
FROM radio_ads ads
LEFT JOIN menus ON menus.id=ads.menu_id
ORDER BY ads.id DESC
");
?>

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Manage Ads</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 AREA */

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

/* BUTTONS */

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

.btn:hover{
background:#00796b;
}

/* DELETE BUTTON */

.btn-danger{
background:#e53935;
}

.btn-danger:hover{
background:#c62828;
}

/* TABLE */

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

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

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

/* STATUS BADGES */

.badge{
padding:4px 8px;
border-radius:4px;
font-size:12px;
color:white;
}

.badge-active{
background:#43a047;
}

.badge-off{
background:#e53935;
}

/* MOBILE */

@media(max-width:768px){

.sidebar{
display:none;
}

.main{
padding:20px;
}

.table th,
.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 Ads</h2>

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

</div>


<table class="table">

<tr>
<th>ID</th>
<th>Station</th>
<th>Ad Name</th>
<th>Interval</th>
<th>Status</th>
<th>Actions</th>
</tr>

<?php while($row=$result->fetch_assoc()){ ?>

<tr>

<td><?php echo $row['id']; ?></td>

<td><?php echo $row['menu_name']; ?></td>

<td><?php echo $row['ad_name']; ?></td>

<td><?php echo $row['ad_interval']; ?> sec</td>

<td>

<?php if($row['status']==1){ ?>

<span class="badge badge-active">Active</span>

<?php } else { ?>

<span class="badge badge-off">Disabled</span>

<?php } ?>

</td>

<td>

<a href="edit_ad.php?id=<?php echo $row['id']; ?>" class="btn">Edit</a>

<a href="delete_ad.php?id=<?php echo $row['id']; ?>"
class="btn btn-danger"
onclick="return confirm('Delete this ad?')">

Delete

</a>

</td>

</tr>

<?php } ?>

</table>

</div>

</div>

</body>
</html>