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

<style>

/* ================= ROOT ================= */

: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 ================= */

body{
 margin:0;
 min-height:220vh;
 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;
}

.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 ================= */

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

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

/* ================= CONTENT ================= */

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

/* ================= CARD ================= */

.card{
background:rgba(255,255,255,0.75);
backdrop-filter:blur(20px);
border-radius:22px;
padding:20px;
margin-bottom:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* ================= SELECT ================= */

select{
width:100%;
padding:12px;
border-radius:12px;
border:none;
background:#f3f5fa;
font-size:14px;
margin-bottom:10px;
}

/* ================= NOTE ================= */

.note{
font-size:13px;
color:#555;
margin-bottom:15px;
line-height:1.5;
}

/* ================= UPLOAD ================= */

.upload{
border:2px dashed #cfd7e6;
padding:40px;
text-align:center;
border-radius:16px;
background:white;
cursor:pointer;
transition:.2s;
}

.upload.drag{
border-color:#4f8cff;
background:#eef5ff;
}

/* ================= GRID ================= */

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
gap:18px;
}

/* ================= MEDIA ================= */

.media{
background:white;
border-radius:18px;
padding:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.07);
}

.media img{
width:100%;
height:120px;
object-fit:cover;
border-radius:12px;
cursor:pointer;
}

/* ================= DELETE ================= */

.delete{
margin-top:8px;
background:#ff4d4d;
color:white;
padding:6px;
border-radius:8px;
font-size:12px;
text-align:center;
cursor:pointer;
}

/* ================= PREVIEW ================= */

.preview{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.9);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}

.preview img{
max-width:90%;
max-height:90%;
border-radius:12px;
}

.close{
position:absolute;
top:20px;
right:25px;
font-size:30px;
color:white;
cursor:pointer;
}

</style>
</head>

<body>

<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"><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" class="active"><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>

<div class="content">

<div class="card">

<select id="type">
<option value="slide">Upload Slide</option>
<option value="warta">Upload Warta</option>
</select>

<div class="note">
<b>Ukuran wajib:</b><br>
Slide → 1920 × 1080 px<br>
Warta → 1788 × 608 px
</div>

<div class="upload" id="dropZone">
Drag & Drop gambar di sini<br>
atau klik untuk pilih file
<input type="file" id="fileInput" multiple hidden>
</div>

</div>

<div class="card">
<div id="mediaList" class="grid"></div>
</div>

</div>

<div class="preview" id="preview">

<div class="close" onclick="closePreview()">✕</div>

<img id="previewImg">

</div>

<script>

const sidebar=document.getElementById("sidebar")
const overlay=document.getElementById("overlay")

function toggleMenu(){
 sidebar.classList.toggle("show")
 overlay.classList.toggle("show")
}

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

let dropZone=document.getElementById("dropZone")
let fileInput=document.getElementById("fileInput")

dropZone.onclick=()=>fileInput.click()

dropZone.addEventListener("dragover",e=>{
 e.preventDefault()
 dropZone.classList.add("drag")
})

dropZone.addEventListener("dragleave",()=>{
 dropZone.classList.remove("drag")
})

dropZone.addEventListener("drop",e=>{
 e.preventDefault()
 dropZone.classList.remove("drag")
 uploadFiles([...e.dataTransfer.files])
})

fileInput.addEventListener("change",()=>{
 uploadFiles([...fileInput.files])
})

async function uploadFiles(files){

let type=document.getElementById("type").value
let formData=new FormData()
let valid=0

for(let file of files){

if(!file.type.startsWith("image/")) continue

let img=new Image()

await new Promise(resolve=>{

img.onload=function(){

if(type=="slide" && (img.width!=1920 || img.height!=1080)){
alert(file.name+" harus 1920x1080")
resolve()
return
}

if(type=="warta" && (img.width!=1788 || img.height!=608)){
alert(file.name+" harus 1788x608")
resolve()
return
}

preview(URL.createObjectURL(file))

formData.append("gambar[]",file)
valid++

resolve()

}

img.src=URL.createObjectURL(file)

})

}

if(valid==0) return

formData.append("type",type)

let originalText=dropZone.innerHTML
dropZone.innerHTML="Uploading 0%..."

let xhr=new XMLHttpRequest()

xhr.upload.addEventListener("progress",e=>{

if(e.lengthComputable){

let percent=Math.round((e.loaded/e.total)*100)
dropZone.innerHTML="Uploading "+percent+"%..."

}

})

xhr.onload=function(){

dropZone.innerHTML=originalText
closePreview()
loadMedia()

}

xhr.open("POST","upload.php")
xhr.send(formData)

}

function loadMedia(){

fetch("get_media.php")
.then(res=>res.json())
.then(data=>{

let html=""

data.forEach(m=>{

html+=`
<div class="media">
<img src="uploads/${m.type}/${m.gambar}" onclick="preview(this.src)">
<div class="delete" onclick="hapus(${m.id})">Hapus</div>
</div>
`

})

document.getElementById("mediaList").innerHTML=html

})

}

function preview(src){
document.getElementById("previewImg").src=src
document.getElementById("preview").style.display="flex"
}

function closePreview(){
document.getElementById("preview").style.display="none"
}

function hapus(id){

fetch("delete.php",{
method:"POST",
headers:{'Content-Type':'application/x-www-form-urlencoded'},
body:"id="+id
})
.then(()=>loadMedia())

}

loadMedia()

</script>

</body>
</html>