<!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; /* FIX */
 background:var(--bg);
 font-family:-apple-system,Arial,sans-serif;
 color:var(--text);
 transition:.25s;
 overflow-x:hidden;
}

/* ===== TOP ===== */
.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{
 backdrop-filter:blur(20px);
 background:rgba(255,255,255,.25);
 border-radius:20px;
 padding:22px;
 max-width:420px;
 margin:20px auto;
 box-shadow:0 8px 24px rgba(0,0,0,.15);
}

body.dark .glass-card{
 background:rgba(30,30,30,.5);
 color:#fff;
}

.account{
 background:rgba(255,255,255,.6);
 padding:14px;
 border-radius:14px;
 margin-bottom:14px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

body.dark .account{
 background:rgba(255,255,255,.1);
}

.copy-btn{
 border:none;
 border-radius:8px;
 padding:6px 10px;
 cursor:pointer;
}

.preview-img{
 max-width:100%;
 margin-top:10px;
 border-radius:12px;
 display:none;
}

textarea{
 width:100%;
 margin-top:12px;
 padding:12px;
 border-radius:12px;
}

button.send{
 margin-top:15px;
 width:100%;
 padding:14px;
 border:none;
 border-radius:12px;
 background:#007aff;
 color:#fff;
}

#toast{
 visibility:hidden;
 background:#000;
 color:#fff;
 padding:10px;
 border-radius:10px;
 position:fixed;
 bottom:25px;
 left:50%;
 transform:translateX(-50%);
 opacity:0;
 transition:.3s;
}
#toast.show{
 visibility:visible;
 opacity:1;
}

footer{
 text-align:center;
 color:#fff;
 padding:10px;
}
</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 class="active" href="/id/persembahan">⛪ Persembahan Gereja</a>
 <a href="/id/informasi">🔔 Informasi</a>
 <a href="/youth">🧑 Youth</a>
 <a 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">
<!-- Main Content -->
<div class="glass-card">
  <h2>Rekening Persembahan</h2>
  <div class="owner">Eddy Kusmayadi & Tutik Eliyatie Gunadi</div>

  <div class="account">
    <div>
      <div class="label">Persembahan Syukur (BCA)</div>
      <div class="number">1130446562</div>
    </div>
    <button class="copy-btn" onclick="copyNumber('1130446562')">📋</button>
  </div>

  <div class="account">
    <div>
      <div class="label">Persembahan Persepuluhan (BCA)</div>
      <div class="number">1130174643</div>
    </div>
    <button class="copy-btn" onclick="copyNumber('1130174643')">📋</button>
  </div>

  <div class="account">
    <div>
      <div class="label">Persembahan Khusus (BCA)</div>
      <div class="number">1130446546</div>
    </div>
    <button class="copy-btn" onclick="copyNumber('1130446546')">📋</button>
  </div>

  <label class="upload-box">
    📷 Upload Bukti Transfer
    <input type="file" accept="image/*" onchange="previewImage(event)">
    <img id="preview" class="preview-img">
  </label>

  <textarea id="note" rows="3" placeholder="Catatan (Opsional)"></textarea>
  <button class="send" onclick="sendToTelegram()">Kirim ke Admin</button>
</div>

<div id="toast">Nomor rekening disalin!</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>
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");

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

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

/* PREMIUM CAPSULE */
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=()=>{
 moveSlider(document.querySelector(".nav-item.active"));
}

/* AUTO HIDE */
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);
});

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

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

  function copyNumber(number) {
    navigator.clipboard.writeText(number).then(() => {
      const toast = document.getElementById("toast");
      toast.textContent = "Nomor rekening berhasil disalin";
      toast.classList.add("show");
      setTimeout(() => toast.classList.remove("show"), 2000);
    });
  }

  function previewImage(event) {
    const file = event.target.files[0];
    if (file) {
      const preview = document.getElementById('preview');
      preview.src = URL.createObjectURL(file);
      preview.style.display = 'block';
    }
  }

  async function sendToTelegram() {
    const BOT_TOKEN = "7494680569:AAFE4m37_G-Dp8PHsQdE0ELDHz3DMqErkhc";
    const CHAT_ID = "-1002323505660";
    const note = document.getElementById("note").value;
    const fileInput = document.querySelector(".upload-box input");
    const file = fileInput.files[0];

    let message = "💳 *Bukti Transfer*\n";
    if (note) message += "📝 Catatan: " + note;

    await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        chat_id: CHAT_ID,
        text: message,
        parse_mode: "Markdown"
      })
    });

    if (file) {
      const formData = new FormData();
      formData.append("chat_id", CHAT_ID);
      formData.append("photo", file);

      await fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendPhoto`, {
        method: "POST",
        body: formData
      });
    }

    document.getElementById("note").value = "";
    document.getElementById("preview").style.display = "none";
    fileInput.value = "";
    showToast("Data berhasil dikirim");
  }

  function showToast(msg) {
    const toast = document.getElementById("toast");
    toast.textContent = msg;
    toast.classList.add("show");
    setTimeout(() => toast.classList.remove("show"), 2000);
  }

/* IOS SWIPE */
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){sidebar.classList.add("show");overlay.classList.add("show");}
 if(sx>120 && (sx-ex)>60){sidebar.classList.remove("show");overlay.classList.remove("show");}
 sx=ex=0;
});
</script>

</body>
</html>