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

if(isset($_POST['save'])){

$name=$_POST['menu_name'];
$slug=$_POST['menu_slug'];
$url=$_POST['stream_url'];
$type=$_POST['stream_type'];
$link=$_POST['menu_link'];
$status=$_POST['status'];

$conn->query("
INSERT INTO menus
(menu_name,menu_slug,stream_url,stream_type,menu_link,status)
VALUES
('$name','$slug','$url','$type','$link','$status')
");

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

}
?>

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Add Station</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);
max-width:700px;
}

/* HEADER */

.page-header{
margin-bottom:20px;
}

.page-header h2{
margin:0;
}

/* FORM */

.form-group{
margin-bottom:18px;
}

label{
display:block;
margin-bottom:6px;
font-weight:bold;
font-size:14px;
}

input,select{
width:100%;
padding:10px;
border:1px solid #ddd;
border-radius:6px;
box-sizing:border-box;
}

/* BUTTON */

.btn{
background:#009688;
color:white;
padding:10px 18px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:14px;
}

/* MOBILE */

@media(max-width:768px){

.sidebar{
display:none;
}

.main{
padding:20px;
}

}

</style>

</head>

<body>

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

<div class="main">

<div class="card">

<div class="page-header">
<h2>Add Radio Station</h2>
</div>

<form method="post">

<div class="form-group">
<label>Station Name</label>
<input type="text" name="menu_name" id="menu_name" required>
</div>

<div class="form-group">
<label>Station Slug</label>
<input type="text" name="menu_slug" id="menu_slug" required>
</div>

<div class="form-group">
<label>Stream URL</label>
<input type="text" name="stream_url" required>
</div>

<div class="form-group">
<label>Stream Type</label>

<select name="stream_type">

<option value="HLS">HLS (m3u8)</option>
<option value="ICECAST">Icecast</option>
<option value="MP3">MP3</option>

</select>

</div>

<div class="form-group">
<label>Copyright Text</label>
<input type="text" name="menu_link">
</div>

<div class="form-group">
<label>Status</label>

<select name="status">

<option value="1">Active</option>
<option value="0">Disabled</option>

</select>

</div>

<button class="btn" name="save">Add Station</button>

</form>

</div>

</div>

<script>

/* AUTO SLUG GENERATOR */

document.getElementById("menu_name").addEventListener("keyup",function(){

let slug=this.value
.toLowerCase()
.replace(/[^a-z0-9]+/g,'-')
.replace(/(^-|-$)/g,'');

document.getElementById("menu_slug").value=slug;

});

</script>

</body>
</html>