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

<title>Admin File Manager</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

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

/* TOPBAR */

.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;
}

.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);
 padding-top:80px;
 transition:.4s;
 z-index:1500;
}

.sidebar.show{
 left:0;
}

.sidebar a{
 display:block;
 padding:14px 18px;
 margin:4px 10px;
 border-radius:14px;
 text-decoration:none;
 color:#000;
 font-weight:600;
}

/* OVERLAY */

.overlay{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.25);
 opacity:0;
 pointer-events:none;
 transition:.3s;
}

.overlay.show{
 opacity:1;
 pointer-events:auto;
}

/* CONTENT */

.content{
 padding-top:90px;
 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:720px;
 margin:auto;
 box-shadow:0 8px 24px rgba(0,0,0,.15);
}

/* ADMIN CARD */

.admin-card .card{
 border-radius:16px;
 box-shadow:0 6px 24px rgba(16,24,40,.06);
}

.admin-card iframe{
 width:100%;
 height:65vh;
 border:0;
 border-radius:12px;
 background:#fff;
}

.btn-gradient{
 background:linear-gradient(135deg,#2563eb,#06b6d4);
 color:white;
 border:none;
}

/* NAVBAR */

.bottom-nav{
 position:fixed;
 bottom:12px;
 left:50%;
 transform:translateX(-50%);
 width:95%;
 max-width:520px;
 height:60px;
 display:flex;
 align-items:center;
 justify-content:space-around;
 border-radius:30px;
 background:var(--card);
 backdrop-filter:blur(18px);
 box-shadow:var(--shadow);
}

.slider{
 position:absolute;
 height:42px;
 width:90px;
 border-radius:24px;
 background:#e7f2ff;
 transition:.35s;
}

.nav-item{
 flex:1;
 text-align:center;
 font-size:12px;
 cursor:pointer;
 color:var(--text);
 z-index:2;
}

.icon{
 display:block;
 font-size:20px;
}

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

</style>
</head>

<body>

<!-- TOPBAR -->

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

        <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"><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="/id/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" class="active"><i class="fa-solid fa-user"></i> ppt youth</a></li>
         <li><a href="/siap/youth/id"><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>

<!-- CONTENT -->

<div class="content">

<div class="glass-card">

<div class="container admin-card">

<h2 class="mb-3">
Admin File Manager
<small class="text-muted">(PPT/PDF)</small>
</h2>

<div class="row g-3">

<div class="col-lg-5">

<div class="card p-3">

<h5>Upload PPT / PPTX / PDF</h5>

<form id="uploadForm">

<div class="mb-3">
<label>Judul</label>
<input type="text" name="title" class="form-control" required>
</div>

<div class="mb-3">
<label>File</label>
<input type="file" name="ppt_file" accept=".ppt,.pptx,.pdf" class="form-control" required>
<div class="form-text">Maks 50MB</div>
</div>

<button class="btn btn-gradient w-100">
<i class="fa fa-cloud-upload"></i> Upload
</button>

</form>

</div>

</div>

<div class="col-lg-7">

<div class="card p-3">

<div class="d-flex justify-content-between mb-2">

<h5>Daftar File</h5>

<button class="btn btn-sm btn-outline-secondary" id="refreshBtn">
<i class="fa fa-rotate"></i>
</button>

</div>

<div id="listArea"></div>

</div>

</div>

</div>

<div class="card p-3 mt-3" id="previewCard" style="display:none">

<h5 id="pvTitle"></h5>

<iframe id="pvFrame"></iframe>

</div>

</div>

</div>

</div>

<!-- NAVBAR -->

<div class="bottom-nav" id="nav">

<div class="slider" id="slider"></div>

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

<div class="nav-item" onclick="selectTab(this)">
<span class="icon">🙏</span>PPT
</div>

<div class="nav-item" onclick="selectTab(this)">
<span class="icon">▶️</span>YouTube
</div>

<div class="nav-item" onclick="selectTab(this)">
<span class="icon">📖</span>Alkitab
</div>

</div>

<script>

const sidebar=document.getElementById("sidebar")
const overlay=document.getElementById("overlay")
const slider=document.getElementById("slider")
const items=document.querySelectorAll(".nav-item")
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")
 ? "🌙"
 : "☀️"

}

/* NAVBAR SELECT */

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

/* FILE MANAGER */

const listUrl="list_ppt.php"
const uploadUrl="upload_ppt.php"
const deleteUrl="delete_ppt.php"

async function loadList(){

const res=await fetch(listUrl)
const data=await res.json()

const wrap=document.getElementById("listArea")

if(!data.length){
wrap.innerHTML="Belum ada data"
return
}

let html=""

data.forEach(d=>{

html+=`
<div class="d-flex justify-content-between border-bottom py-2">

<div>${d.title}</div>

<div>

<a href="${d.url}" target="_blank" class="btn btn-sm btn-primary">
<i class="fa fa-eye"></i>
</a>

<button onclick="hapus('${d.id}')" class="btn btn-sm btn-danger">
<i class="fa fa-trash"></i>
</button>

</div>

</div>
`

})

wrap.innerHTML=html

}

async function hapus(id){

if(!confirm("hapus file?")) return

await fetch(deleteUrl,{
method:"POST",
body:new URLSearchParams({id})
})

loadList()

}

document.getElementById("uploadForm").onsubmit=async e=>{

e.preventDefault()

const fd=new FormData(e.target)

await fetch(uploadUrl,{
method:"POST",
body:fd
})

e.target.reset()

loadList()

}

document.getElementById("refreshBtn").onclick=loadList

window.addEventListener("load",loadList)

</script>

</body>
</html>