<!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">

<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">

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

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

/* ===== SEGMENT ===== */
.media-toggle{
  position:relative;
  max-width:360px;
  margin:0 auto 18px;
  padding:6px;
  display:flex;
  border-radius:22px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(22px);
  box-shadow:0 12px 26px rgba(0,0,0,.2);
}

.media-toggle button{
  flex:1;
  border:none;
  background:none;
  padding:12px 0;
  font-weight:600;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  z-index:2;
}

.media-toggle button.active{ color:#000; }

.media-indicator{
  position:absolute;
  top:6px;
  left:6px;
  width:calc(50% - 6px);
  height:calc(100% - 12px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition:left .3s cubic-bezier(.22,.61,.36,1);
}

/* ===== CONTENT ===== */
.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);
}

.video-container{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  border-radius:20px;
  overflow:hidden;
}
.video-container iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}

#catatan-box1,#catatan-box2{
  background:#fff;
  border-radius:20px;
  padding:20px;
  margin-top:20px;
}
#catatan-box1{max-height:360px;overflow:auto}
#catatan-box2{max-height:50vh;overflow:auto}

footer{text-align:center;color:#fff;margin-top:30px}
</style>
</head>

<body>

<!-- ===== TOGGLE ===== -->
<div class="media-toggle" id="mediaToggle">
  <div class="media-indicator" id="indicator"></div>

  <button id="btnYT">
    <i class="fa-brands fa-youtube"></i> YouTube
  </button>

  <button id="btnPPT">
    <i class="fa-solid fa-file-powerpoint"></i> PPT
  </button>
</div>

<!-- ===== CONTENT ===== -->
<div id="swipeArea">

<!-- YOUTUBE -->
<div id="youtubeSection">
<div class="glass-card">

  <div class="video-container">
    <?php
    include 'db.php';
    $q=$conn->query("SELECT youtube_link FROM catatan LIMIT 1");
    if($q && $q->num_rows){
      $r=$q->fetch_assoc();
      echo '<iframe src="'.htmlspecialchars($r['youtube_link']).'" allowfullscreen></iframe>';
    }
    ?>
  </div>

  <div id="catatan-box1">
    <?php
    $q=$conn->query("SELECT title FROM catatan");
    while($r=$q->fetch_assoc()){
      echo '<div>'.htmlspecialchars($r['title']).'</div>';
    }
    ?>
  </div>

  <div id="catatan-box2">
    <?php
    $q=$conn->query("SELECT notes FROM catatan");
    while($r=$q->fetch_assoc()){
      echo '<div>'.nl2br(htmlspecialchars($r['notes'])).'</div>';
    }
    ?>
  </div>

</div>
</div>

<!-- PPT -->
<div id="pptSection" style="display:none">
<div class="glass-card" style="height:75vh">
<?php
$src='https://mdcjombang.id/siap/ppt/list_ppt.php';
$json=@file_get_contents($src);
$data=json_decode($json,true);
if($data){
  echo '<iframe style="width:100%;height:100%" src="https://docs.google.com/gview?embedded=true&url='.urlencode($data[0]['url']).'"></iframe>';
}
?>
</div>
</div>

</div>

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

<script>
const yt=document.getElementById('youtubeSection');
const ppt=document.getElementById('pptSection');
const btnYT=document.getElementById('btnYT');
const btnPPT=document.getElementById('btnPPT');
const indicator=document.getElementById('indicator');
const toggle=document.getElementById('mediaToggle');

let active=0;

function updateIndicator(){
  const pad=6;
  const half=(toggle.clientWidth-pad*2)/2;
  indicator.style.left=pad+(half*active)+'px';
}

function snap(index){
  active=index;

  yt.style.display=index===0?'block':'none';
  ppt.style.display=index===1?'block':'none';

  btnYT.classList.toggle('active',index===0);
  btnPPT.classList.toggle('active',index===1);

  updateIndicator();
}

btnYT.onclick=()=>snap(0);
btnPPT.onclick=()=>snap(1);

window.addEventListener('resize',updateIndicator);

/* 🔥 INI PENTING */
snap(0); // ← WAJIB supaya konten muncul
</script>

</body>
</html>