<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

<style>
:root{
 --bg:#f4f5f7;
 --card:rgba(255,255,255,.72);
 --text:#222;
 --shadow:0 8px 24px rgba(0,0,0,.15);
}

body.dark{
 --bg:#0f1116;
 --card:rgba(25,25,28,.7);
 --text:#fff;
}

body{
 margin:0;
 min-height:220vh;
 background:var(--bg);
 font-family:-apple-system,Arial,sans-serif;
 color:var(--text);
 transition:.25s;
 overflow-x:hidden;
}

/* TOP BAR */
.topbar{
 position:fixed;
 top:10px;
 left:50%;
 transform:translateX(-50%);
 width:95%;
 max-width:520px;
 display:flex;
 justify-content:space-between;
 z-index:2000;
}

.menu-btn,.switch{
 background:var(--card);
 backdrop-filter:blur(18px);
 box-shadow:var(--shadow);
}

.menu-btn{
 width:42px;height:42px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:20px;
 cursor:pointer;
}

.switch{
 width:62px;height:34px;
 border-radius:20px;
 position:relative;
 cursor:pointer;
}

.knob{
 width:28px;height:28px;
 border-radius:50%;
 background:#fff;
 position:absolute;
 top:3px;left:3px;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:.4s;
}

body.dark .knob{
 left:31px;
 background:#222;
 color:#fff;
}

/* SIDEBAR */
.sidebar{
 position:fixed;
 top:0;
 left:-85%;
 width:82%;
 max-width:340px;
 height:100%;
 background:rgba(255,255,255,.18);
 backdrop-filter:blur(30px);
 border-right:1px solid rgba(255,255,255,.35);
 box-shadow:0 20px 40px rgba(0,0,0,.25);
 transition:left .4s;
 padding-top:80px;
 z-index:1500;
}

.sidebar.show{ left:0; }

.sidebar a{
 display:flex;
 align-items:center;
 gap:12px;
 padding:14px 18px;
 margin:4px 10px;
 border-radius:14px;
 text-decoration:none;
 color:#fff;
 font-weight:600;
}

.sidebar a.active{
 background:rgba(70,150,255,.45);
}

/* OVERLAY */
.overlay{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.25);
 opacity:0;
 pointer-events:none;
 transition:.3s;
 z-index:1400;
}

.overlay.show{
 opacity:1;
 pointer-events:auto;
}

/* NAVBAR */
.bottom-nav{
 position:fixed;
 bottom:20px;
 left:50%;
 transform:translateX(-50%);
 width:95%;
 max-width:520px;
 height:65px;
 display:flex;
 align-items:center;
 justify-content:space-around;
 border-radius:34px;
 background:var(--card);
 backdrop-filter:blur(18px);
 box-shadow:var(--shadow);
 z-index:2000;
}

.slider{
 position:absolute;
 height:42px;
 width:120px;
 border-radius:24px;
 background:#e7f2ff;
 transition:.3s;
}

.nav-item{
 flex:1;
 text-align:center;
 font-size:12px;
 font-weight:600;
 cursor:pointer;
 color:var(--text);
 z-index:2;
 text-decoration:none;
}

.icon{
 display:block;
 font-size:18px;
}

.nav-item.active{
 color:#0a84ff;
}

.content{
 padding-top:90px;
 padding-left:16px;
 padding-right:16px;
 display:flex;
 justify-content:center;
}

/* CARD */
.glass-card{
 backdrop-filter: blur(20px);
 background: rgba(255,255,255,0.25);
 border-radius:20px;
 padding:24px;
 width:100%;
 max-width:520px;
 box-shadow:0 8px 24px rgba(0,0,0,.15);
 margin:0 auto;
 box-sizing:border-box;
}

.card-edit{
 width:100%;
 max-width:520px;
 margin:auto;
 box-sizing:border-box;
}

.card-edit label{
 font-weight:600;
 display:block;
 margin:15px 0 8px;
}

.card-edit input,
.card-edit textarea{
 width:100%;
 padding:14px;
 border-radius:12px;
 border:1px solid rgba(0,0,0,0.1);
}

.card-edit button{
 margin-top:18px;
 width:100%;
 padding:16px;
 border:none;
 border-radius:14px;
 font-size:18px;
 font-weight:600;
 color:white;
 background:linear-gradient(135deg,#4facfe,#00f2fe);
 cursor:pointer;
}

#msg{
 text-align:center;
 margin-top:10px;
 font-weight:600;
 display:none;
}
</style>
</head>

<body>

<div class="topbar">
 <div class="menu-btn" onclick="toggleMenu()">☰</div>
 <div class="switch" onclick="toggleDark()">
   <div class="knob" id="icon">☀️</div>
 </div>
</div>

<div class="sidebar" id="sidebar">
        <li><a href="/siap/index"><i class="fas fa-th-large"></i> Home</a></li>
        <li><a href="/siap/warta"><i class="fa-solid fa-person-praying"></i> Warta</a></li>
        <li><a href="/siap/khotbah"><i class="fa-brands fa-youtube"></i> Khotbah mingguan</a></li>
         <li><a href="/siap/ppt" class="active"><i class="fa-brands fa-youtube"></i> ppt mingguan</a></li>
        <li><a href="/siap/informasi"><i class="fa-solid fa-bell"></i> Informasi</a></li>
        <li><a href="/siap/youth"><i class="fa-solid fa-church"></i> Peserta Youth</a></li>
        <li><a href="/id/starkids/starkids"><i class="fas fa-heart"></i> star kids</a></li>
        <li><a href="/siap/jadwal"><i class="fa-solid fa-user"></i> jadwal ibadah</a></li>
        <li><a href="/siap/youth/jadwal"><i class="fa-solid fa-user"></i> jadwal youth</a></li>
         <li><a href="/siap/youth/ppt"><i class="fa-solid fa-user"></i> ppt youth</a></li>
         <li><a href="/siap/youth/id"><i class="fa-solid fa-user"></i> edit web youth</a></li>
         <li><a href="/siap/gambar"><i class="fa-solid fa-user"></i> edit gambar</a></li>
        <li><a href="javascript:window.close()"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
</div>

<div class="overlay" id="overlay" onclick="toggleMenu()"></div>

<div class="content">

<div class="glass-card">

<?php
include 'db.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['ajax'])) {

$id=$_POST['id'];
$youtube_link=$_POST['youtube_link'];
$title=$_POST['title'];
$notes=$_POST['notes'];

$stmt=$conn->prepare("UPDATE catatan SET youtube_link=?,title=?,notes=? WHERE id=?");
$stmt->bind_param("sssi",$youtube_link,$title,$notes,$id);

if($stmt->execute()){
echo json_encode(["status"=>"success","message"=>"Sukses Simpan!"]);
}else{
echo json_encode(["status"=>"error","message"=>"Gagal Simpan!"]);
}
exit;
}

$sql="SELECT * FROM catatan LIMIT 1";
$result=$conn->query($sql);
$row=$result->fetch_assoc();
?>

<div class="card-edit">

<h2>Khotbah mingguan</h2>

<form id="catatanForm">

<input type="hidden" name="id" value="<?php echo $row['id']; ?>">

<label>YouTube Link (live ganti embed)</label>
<input type="text" name="youtube_link" value="<?php echo htmlspecialchars($row['youtube_link']); ?>">

<label>Judul</label>
<textarea name="title"><?php echo htmlspecialchars($row['title']); ?></textarea>

<label>Deskripsi</label>
<textarea name="notes"><?php echo htmlspecialchars($row['notes']); ?></textarea>

<button type="submit">Simpan</button>

</form>

<div id="msg"></div>

</div>
</div>
</div>

<div class="bottom-nav" id="nav">

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

<a href="/siap/" class="nav-item">
<span class="icon">🏠</span>
Home
</a>

<a href="/siap/ppt" class="nav-item">
<span class="icon">🙏</span>
PPT
</a>

<a href="/siap/youtube" class="nav-item active">
<span class="icon">▶️</span>
YouTube
</a>

<a href="/siap/warta" class="nav-item">
<span class="icon">📖</span>
Warta
</a>

</div>

<script>

function toggleMenu(){
sidebar.classList.toggle("show")
overlay.classList.toggle("show")
}

function toggleDark(){
document.body.classList.toggle("dark")
icon.innerHTML=document.body.classList.contains("dark")?"🌙":"☀️"
}

document.getElementById('catatanForm').addEventListener('submit',async function(e){

e.preventDefault()

let formData=new FormData(this)
formData.append('ajax','1')

let res=await fetch('',{
method:'POST',
body:formData
})

let data=await res.json()

const msg=document.getElementById('msg')
msg.style.display="block"
msg.textContent=data.message
msg.style.color=(data.status==="success")?"lime":"red"

setTimeout(()=>{
msg.style.display="none"
},2000)

})

</script>

</body>
</html>