<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GKPB-MDC Jombang</title>
    <link rel="icon" href="asecet/icon.png" type="image/x-icon">

    <!-- Font & Library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <!-- Style -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            background: conic-gradient(from -45deg, #ca49f7, #5a8ade, #62c6e0, #ca49f7);
            padding: 10px;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            overflow-x: hidden;
        }

        /* Overlay */
        .overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.35);
            opacity: 0; visibility: hidden;
            transition: opacity 0.35s ease;
            z-index: 1000;
        }
        .overlay.active { opacity: 1; visibility: visible; }

        /* Sidebar */
        .sidebar {
            position: fixed; top: 0; left: 0;
            width: 270px; height: 100vh;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(20px);
            color: white;
            padding-top: 70px;
            z-index: 1100;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            box-shadow: 4px 0 20px rgba(0,0,0,0.25);
            transform: translateX(-100%);
            transition: transform 0.35s cubic-bezier(0.25, 1, 0.3, 1);
        }
        .sidebar.active { transform: translateX(0); }
        .sidebar ul { list-style: none; padding: 0; margin: 0; }
        .sidebar ul li a {
            display: flex; align-items: center;
            padding: 14px 20px; margin: 6px 12px;
            border-radius: 12px; color: white;
            text-decoration: none; font-size: 16px;
        }
        .sidebar ul li a:hover {
            background: rgba(255,255,255,0.25);
        }
        .sidebar ul li a.active {
            background: rgba(0,123,255,0.35);
            box-shadow: inset 0 0 8px rgba(0,123,255,0.6);
        }
        .sidebar ul li i {
            margin-right: 14px; font-size: 20px; width: 25px; text-align: center;
        }

        #navbar-top {
            position: sticky;
            top: 10px;
            z-index: 999;
        }

        .menu-btn {
            font-size: 24px;
            cursor: pointer;
            margin-right: 15px;
            color: #fff;
        }

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

        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            margin: 5px 0;
            border-radius: 20px;
        }

        .video-container iframe {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            border: none;
            border-radius: 20px;
        }

        #catatan-box1, #catatan-box2 {
            width: 100%;
            border: 3px solid #ccc;
            padding: 20px;
            margin-top: 20px;
            border-radius: 20px;
            background: #fff;
            overflow: auto;
        }

        #catatan-box2 {
            max-height: 50dvh;
        }

        #catatan-box1 {
            max-height: 374px;
        }

        #catatan-box2 .catatan {
            text-align: left;
            white-space: pre-wrap;
        }

        .catatan {
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
        }

        footer {
            text-align: center;
            padding: 10px;
            font-size: 1em;
            color: #fff;
            margin-top: auto;
        }
    </style>
</head>
<body>

<!-- Overlay -->
<div class="overlay" id="overlay"></div>

<!-- Sidebar -->
<div class="sidebar" id="sidebar">
    <ul>
        <li><a href="/id"><i class="fas fa-th-large"></i> Home</a></li>
        <li><a href="/id/ibadah"><i class="fa-solid fa-person-praying"></i> Ibadah harian</a></li>
        <li><a href="/id/warta"><i class="fa-solid fa-newspaper"></i> Warta Jemaat</a></li>
        <li><a href="/id/alkitab"><i class="fa-solid fa-book-bible"></i> Alkitab</a></li>
        <li><a href="/id/youtube"><i class="fa-brands fa-youtube"></i> Khotbah mingguan</a></li>
        <li><a href="/id/persembahan"><i class="fa-solid fa-church"></i> Persembahan Gereja</a></li>
        <li><a href="/id/informasi"><i class="fa-solid fa-bell"></i> Informasi </a></li>
        <li><a href="/id/starkids" class="active"><i class="fa-solid fa-ranking-star"></i> starkids </a></li>
        <li><a href="/id/support"><i class="fas fa-heart"></i> Help & Support</a></li>
        <li><a href="/id/akun"><i class="fa-solid fa-user"></i> Akun Saya</a></li>
        <li><a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
    </ul>
</div>

<!-- Navbar -->
<div id="navbar-top" class="d-flex align-items-center mb-3">
    <span class="menu-btn" id="menu-btn"><i class="fas fa-bars"></i></span>
    <h5 class="text-white m-0">GKPB MDC Jombang</h5>
</div>

<!-- Konten -->
<div class="glass-card">
    <div class="container">
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jawaban</title>

<style>
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial;
  background:
    radial-gradient(900px 500px at 20% 10%, #bae6fd, transparent),
    radial-gradient(800px 500px at 80% 20%, #fbcfe8, transparent),
    linear-gradient(135deg,#fef3c7,#bae6fd,#fbcfe8);
  min-height:100vh;
  color:#0f172a;
}
.container{max-width:520px;margin:auto;padding:20px 14px 32px}
.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{width:100%;border-radius:16px}
.media iframe{width:100%;height:240px;border:0;border-radius:16px}
.note{white-space:pre-wrap;font-size:14px;line-height:1.6;margin-top:8px}

label{font-weight:700;font-size:13px;margin-bottom:6px;display:block}
input,textarea,select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.15);
  font-size:14px;
}
textarea{resize:none}

button{
  width:100%;
  margin-top:12px;
  padding:14px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:white;
  font-weight:900;
  font-size:16px;
}

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

<body>
<div class="container">

<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 style="margin-top:10px">Jawaban</label>
  <textarea id="answer" rows="4"></textarea>

  <button id="sendBtn">Kirim Jawaban</button>
</div>

<div id="successMsg" class="glass success hidden">
  ✅ Terima kasih! Jawaban kamu sudah dikirim 🎉
</div>

<div id="errorMsg" class="glass error hidden"></div>

</div>

<script>
async function loadData(){
  const res = await fetch("/id/starkids/get_json.php",{cache:"no-store"});
  const d = await res.json();
  if(!d || !d.mode) return;

  if(d.mode==="image" && d.image){
    mediaBox.innerHTML=`<img src="${d.image}">`;
  }
  if(d.mode==="youtube" && d.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(Array.isArray(d.names)){
    d.names.forEach(n=>{
      const o=document.createElement("option");
      o.value=n;o.textContent=n;
      nameSelect.appendChild(o);
    });
  }
}
loadData();

nameSelect.onchange=()=>{
  if(nameSelect.value) nameInput.value=nameSelect.value;
};

sendBtn.onclick=async()=>{
  errorMsg.classList.add("hidden");

  const name=nameInput.value.trim();
  const ans=answer.value.trim();
  if(!name||!ans){
    alert("Nama dan jawaban wajib diisi");
    return;
  }

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

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

    if(j.ok){
      formCard.classList.add("hidden");
      successMsg.classList.remove("hidden");
    }else{
      errorMsg.textContent=j.error||"Gagal mengirim";
      errorMsg.classList.remove("hidden");
      sendBtn.disabled=false;
      sendBtn.textContent="Kirim Jawaban";
    }
  }catch(e){
    errorMsg.textContent="⚠️ Koneksi bermasalah, coba lagi";
    errorMsg.classList.remove("hidden");
    sendBtn.disabled=false;
    sendBtn.textContent="Kirim Jawaban";
  }
};
</script>
</body>
</html>

<!-- Footer -->
<footer>© 2025 GKPB MDC Jombang</footer>

<!-- Script -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init();

    const menuBtn = document.getElementById('menu-btn');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');

    menuBtn.addEventListener('click', () => {
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
    });

    overlay.addEventListener('click', () => {
        sidebar.classList.remove('active');
        overlay.classList.remove('active');
    });
</script>

</body>
</html>
