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

<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:100vh;
 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);}

/* DARK SWITCH */
.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 PREMIUM GLASS ===== */
.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%);
 -webkit-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 .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 PREMIUM ===== */
.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);
}

/* CAPSULE PREMIUM */
.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 */
.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);
 transition:.3s cubic-bezier(.34,1.56,.64,1);
}

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

.nav-item.active .icon{
 transform:translateY(-5px) scale(1.08);
}

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

/* Glass Card */
.glass-card{
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,.25);
  border-radius:20px;
  padding:22px;
  max-width:700px;
  margin:20px auto;
  box-shadow:0 8px 24px rgba(0,0,0,.15)
}

/* Inner App */
.inner{
  max-width:520px;margin:auto
}
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.75));
  backdrop-filter:blur(18px);
  border-radius:22px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:0 14px 30px rgba(0,0,0,.16)
}
.title{text-align:center;font-size:22px;font-weight:900}
.media img,.media iframe{width:100%;border-radius:16px}
.media iframe{height:240px;border:0}
.note{white-space:pre-wrap;font-size:14px;line-height:1.6}

label{font-weight:700;font-size:13px;margin-bottom:6px}
input,textarea,select{
  width:100%;padding:12px 14px;
  border-radius:14px;border:1px solid rgba(0,0,0,.15)
}
textarea{resize:none}
button{
  width:100%;padding:14px;margin-top:12px;
  border:none;border-radius:16px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:#fff;font-weight:900
}

.hidden{display:none}
.success{color:#16a34a;font-weight:700;text-align:center}
.error{color:#dc2626;font-weight:700;text-align:center}

footer{text-align:center;color:#fff;margin-top:auto;padding:10px}

/* ===== FIX TOUCH & LAYER ===== */

/* topbar harus paling atas */
.topbar{
  z-index:5000;
}

.menu-btn,
.switch{
  position:relative;
  z-index:5001;
}

/* sidebar & overlay */
.sidebar{ z-index:4500; }
.overlay{ z-index:4400; }

/* nav tetap di bawah */
.bottom-nav{
  z-index:3000;
}

/* slider jangan tangkap klik */
.slider{
  pointer-events:none;
}

/* sentuhan lebih stabil mobile */
body{
  touch-action:manipulation;
}
</style>
</head>

<body>

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

<!-- SIDEBAR -->
<div class="sidebar" id="sidebar">
  <a href="/id/index">🏠 Home</a>
 <a href="/id/ibadah">🙏 Ibadah harian</a>
 <a href="/id/warta">📰 Warta Jemaat</a>
 <a href="/id/alkitab">📖 Alkitab</a>
 <a href="/id/youtube">▶️ Khotbah mingguan</a>
 <a href="/id/persembahan">⛪ Persembahan Gereja</a>
 <a href="/id/informasi">🔔 Informasi</a>
 <a href="/youth">🧑 Youth</a>
 <a class="active" href="/id/starkids">⭐ Starkids</a>
 <a href="/id/support">❤️ Help & Support</a>
 <a href="/id/akun">👤 Akun Saya</a>
 <a href="/id/logout">↩️ Logout</a>

</div>

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

<div class="content">
<div class="glass-card">
  <div class="inner">

    <div class="glass"><div class="title">📘 Tugas Hari Ini</div></div>

    <div id="mediaCard" class="glass hidden">
      <div id="mediaBox" class="media"></div>
      <div id="noteText" class="note"></div>
    </div>

    <div id="formCard" class="glass hidden">
      <label>Nama</label>
      <select id="nameSelect"><option value="">— Pilih Nama —</option></select>
      <input id="nameInput" placeholder="Atau ketik nama sendiri">
      <label class="mt-2">Jawaban</label>
      <textarea id="answer" rows="4"></textarea>
      <button id="sendBtn">Kirim Jawaban</button>
    </div>

    <div id="successMsg" class="glass success hidden">✅ Jawaban terkirim</div>
    <div id="errorMsg" class="glass error hidden"></div>

  </div>
</div>

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

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

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

<a href="/id/ibadah" class="nav-item" onclick="selectTab(this)">
  <span class="icon">🙏</span>IH
</a>

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

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

<script>
/* ===== ELEMENT ===== */
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");
const menuBtn = document.querySelector(".menu-btn");

/* STARKIDS ELEMENT */
const mediaBox   = document.getElementById("mediaBox");
const noteText   = document.getElementById("noteText");
const mediaCard  = document.getElementById("mediaCard");
const formCard   = document.getElementById("formCard");
const nameSelect = document.getElementById("nameSelect");
const nameInput  = document.getElementById("nameInput");
const answer     = document.getElementById("answer");
const sendBtn    = document.getElementById("sendBtn");
const successMsg = document.getElementById("successMsg");
const errorMsg   = document.getElementById("errorMsg");

/* ===== MENU CONTROL (STABIL) ===== */
function openMenu(){
  sidebar.classList.add("show");
  overlay.classList.add("show");
}

function closeMenu(){
  sidebar.classList.remove("show");
  overlay.classList.remove("show");
}

function toggleMenu(){
  sidebar.classList.contains("show")
    ? closeMenu()
    : openMenu();
}

menuBtn.addEventListener("click", toggleMenu);
overlay.addEventListener("click", closeMenu);

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

/* ===== NAV SLIDER ===== */
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);
}

/* ===== AUTO HIDE NAV ===== */
let last=0,timer;
window.addEventListener("scroll",()=>{
  let cur=window.pageYOffset;
  if(cur>last+5) nav.classList.add("hide");
  else if(cur<last-5) nav.classList.remove("hide");
  last=cur;
  clearTimeout(timer);
  timer=setTimeout(()=>nav.classList.remove("hide"),220);
});

/* ===== LOAD DATA ===== */
async function loadData(){
  try{
    const r = await fetch(
      "https://mdcjombang.id/siap/starkids/get_json.php",
      {cache:"no-store"}
    );
    const d = await r.json();

    if(!d) return;

    if(d.mode==="image"){
      mediaBox.innerHTML=`<img src="${d.image}">`;
    }

    if(d.mode==="youtube"){
      const e=d.youtube
        .replace("watch?v=","embed/")
        .replace("youtu.be/","youtube.com/embed/");
      mediaBox.innerHTML=
        `<iframe src="${e}" allowfullscreen></iframe>`;
    }

    noteText.textContent=d.note||"";
    mediaCard.classList.remove("hidden");
    formCard.classList.remove("hidden");

    if(d.names){
      d.names.forEach(n=>{
        nameSelect.innerHTML += `<option>${n}</option>`;
      });
    }
  }catch(err){
    errorMsg.textContent="Gagal load data";
    errorMsg.classList.remove("hidden");
  }
}

/* ===== FORM ===== */
nameSelect.onchange=()=>{
  nameInput.value=nameSelect.value;
};

sendBtn.onclick=async()=>{
  if(!nameInput.value || !answer.value){
    alert("Lengkapi data dulu");
    return;
  }

  sendBtn.disabled=true;
  sendBtn.textContent="Mengirim...";

  try{
    const r = await fetch("send_telegram.php",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        name:nameInput.value,
        answer:answer.value
      })
    });

    const j=await r.json();

    if(j.ok){
      formCard.classList.add("hidden");
      successMsg.classList.remove("hidden");
    }else{
      errorMsg.textContent=j.error || "Gagal";
      errorMsg.classList.remove("hidden");
    }
  }catch{
    errorMsg.textContent="Server error";
    errorMsg.classList.remove("hidden");
  }

  sendBtn.disabled=false;
  sendBtn.textContent="Kirim Jawaban";
};

/* ===== IOS SWIPE FIX ===== */
let sx=0,ex=0;

document.addEventListener("touchstart",
 e=>sx=e.touches[0].clientX);

document.addEventListener("touchmove",
 e=>ex=e.touches[0].clientX);

document.addEventListener("touchend",()=>{
  if(sx<40 && ex>100) openMenu();
  if(sx>120 && (sx-ex)>60) closeMenu();
  sx=ex=0;
});

/* ===== INIT ===== */
window.addEventListener("load",()=>{
  moveSlider(document.querySelector(".nav-item.active"));
  loadData();
});
</script>

</body>
</html>