<!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;
 transition:.2s;
}
.menu-btn:active{transform:scale(.9);}

.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 cubic-bezier(.34,1.56,.64,1);
}

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) saturate(140%);
 border-right:1px solid rgba(255,255,255,.35);
 box-shadow:0 20px 40px rgba(0,0,0,.25);
 transition:left .42s cubic-bezier(.22,1,.36,1);
 padding-top:80px;
 z-index:1500;
}

body.dark .sidebar{
 background:rgba(20,20,20,.45);
}

.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;
 transition:.25s;
}

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

.sidebar a:hover{
 background:rgba(255,255,255,.15);
}

/* 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:calc(10px + env(safe-area-inset-bottom));
 left:50%;
 transform:translateX(-50%);
 width:95%;
 max-width:520px;
 height:clamp(58px,9vh,72px);
 display:flex;
 align-items:center;
 justify-content:space-around;
 border-radius:34px;
 background:var(--card);
 backdrop-filter:blur(18px);
 box-shadow:var(--shadow);
 transition:transform .35s ease;
 z-index:2000;
}

.bottom-nav.hide{
 transform:translateX(-50%) translateY(110px);
}

.slider{
 position:absolute;
 height:42px;
 width:clamp(70px,22vw,140px);
 border-radius:24px;
 background:#e7f2ff;
 transition:.35s cubic-bezier(.34,1.56,.64,1);
 z-index:0;
}

.nav-item{
 flex:1;
 text-align:center;
 font-size:clamp(10px,2.3vw,13px);
 font-weight:600;
 cursor:pointer;
 color:var(--text);
 z-index:2;
 user-select:none;
}

.icon{
 display:block;
 font-size:clamp(16px,4.5vw,21px);
}

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

/* CONTENT */
.content{
 padding-top:calc(60px + env(safe-area-inset-top));
 padding-left:20px;
 padding-right:20px;
}

        /* Konten */
        .glass-card {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.25);
            border-radius: 20px;
            padding: 22px;
            max-width: 600px;
            width: 100%;
            color: #222;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            margin: 20px auto;
        }

        h1, h2 {
            text-align: center;
            font-weight: 700;
        }

        form {
            display: flex; flex-direction: column; gap: 10px;
        }

        input, textarea {
            width: 100%; padding: 10px;
            border: 1px solid #ccc; border-radius: 4px;
            font-size: 14px;
        }

        input:focus, textarea:focus {
            outline: none; border-color: #1565c0;
        }

        button {
            padding: 12px; border: none;
            border-radius: 4px; cursor: pointer;
            font-size: 16px; font-weight: 600;
            color: #fff; background-color: #1565c0;
        }

        button:hover {
            background-color: #0d47a1;
        }

        .info-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
            padding: 16px;
            margin-bottom: 16px;
        }

        .info-title { font-size: 20px; font-weight: 700; color: #333; }
        .info-desc { font-size: 14px; color: #555; white-space: pre-wrap; margin: 8px 0; }
        .info-footer { display: flex; justify-content: space-between; font-size: 13px; color: #888; }
        .hapus-btn {
            background-color: #e74c3c;
            color: #fff; border: none;
            padding: 6px 10px; border-radius: 4px;
            cursor: pointer; font-size: 14px;
        }
        .hapus-btn:hover { background-color: #c0392b; }

        footer { text-align: center; padding: 10px; font-size: 1em; color: #fff; margin-top: auto; }
</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"><i class="fa-brands fa-youtube"></i> ppt mingguan</a></li>
        <li><a href="/siap/informasi" class="active"><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="/siap/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/siap"><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">
<h1>Admin Panel</h1>

<form id="form-tambah" onsubmit="tambahInformasi(event)">
<input type="text" name="judul" placeholder="Judul Informasi" required>
<textarea name="isi" rows="4" placeholder="Deskripsi Informasi" required></textarea>
<input type="url" name="gambar" placeholder="URL Gambar (Opsional)">
<input type="url" name="link" placeholder="URL Link Opsional">
<button type="submit">Tambah Informasi</button>
</form>
</div>

<div class="glass-card">
<h2>Daftar Informasi</h2>
<div id="info-list"></div>
</div>

<footer>© 2025 GKPB MDC Jombang</footer>

</div>

<!-- NAV -->
<div class="bottom-nav" id="nav">
<div class="slider" id="slider"></div>

<a href="/siap/" class="nav-item active" onclick="selectTab(this)">
<span class="icon">🏠</span>Home
</a>

<a href="/siap/ppt" class="nav-item" onclick="selectTab(this)">
<span class="icon">🙏</span>PPT
</a>

<a href="/siap/youtube" class="nav-item" onclick="selectTab(this)">
<span class="icon">▶️</span>YouTube
</a>

<a href="/siap/alkitab" class="nav-item" onclick="selectTab(this)">
<span class="icon">📖</span>Alkitab
</a>

</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

const sidebar=document.getElementById("sidebar");
const overlay=document.getElementById("overlay");
const slider=document.getElementById("slider");
const items=document.querySelectorAll(".nav-item");
const nav=document.getElementById("nav");
const icon=document.getElementById("icon");

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

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

function loadInformasi(){
 fetch("data.json?"+Date.now())
 .then(res=>res.json())
 .then(data=>{
  const list=document.getElementById("info-list");
  list.innerHTML="";
  data.forEach((item,index)=>{
   const card=document.createElement("div");
   card.className="info-card";
   card.innerHTML=`
   <h3 class="info-title">${item.judul}</h3>
   <div class="info-desc">${item.isi}</div>
   ${item.gambar?`<img src="${item.gambar}" style="max-width:100%;border-radius:4px;margin-top:10px;">`:""}
   ${item.link?`<a href="${item.link}" target="_blank">Link Selengkapnya</a>`:""}
   <div class="info-footer">
   <span>${item.tanggal}</span>
   <button class="hapus-btn" onclick="hapusInformasi(${index})">Hapus</button>
   </div>`;
   list.appendChild(card);
  });
 });
}

function tambahInformasi(e){
 e.preventDefault();
 const form=document.getElementById("form-tambah");
 const data=new FormData(form);

 fetch("tambah.php",{method:"POST",body:data})
 .then(res=>res.json())
 .then(r=>{
  if(r.error){
   Swal.fire("Error",r.error,"error");
  }else{
   Swal.fire("Berhasil",r.message,"success");
   form.reset();
   loadInformasi();
  }
 });
}

function hapusInformasi(id){
 Swal.fire({
  title:'Yakin ingin menghapus?',
  icon:'warning',
  showCancelButton:true
 }).then(result=>{
  if(result.isConfirmed){
   fetch("hapus.php?id="+id)
   .then(res=>res.json())
   .then(r=>{
    Swal.fire("Terhapus",r.message,"success");
    loadInformasi();
   });
  }
 });
}

function moveSlider(el){
 slider.style.left=(el.offsetLeft+el.offsetWidth/2-slider.offsetWidth/2)+"px";
}

function selectTab(el){
 items.forEach(i=>i.classList.remove("active"));
 el.classList.add("active");
 moveSlider(el);
}

window.onload=()=>{
 loadInformasi();
 moveSlider(document.querySelector(".nav-item.active"));
};

</script>

</body>
</html>