<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Youth Gallery Admin — youth</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

<style>
:root{
  --cyan:#00f5ff;
  --violet:#a855f7;
  --bg:#040611;
  --glass:rgba(255,255,255,.10);
  --blur:blur(22px);
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:Poppins,sans-serif;
  background:radial-gradient(circle at top,#0b1f46,#040611 70%);
  color:white;
  min-height:100vh;
}

/* ===== SIDEBAR ===== */
.sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:260px;
  background:linear-gradient(180deg,
    rgba(0,245,255,.18),
    rgba(168,85,247,.14));
  backdrop-filter:var(--blur);
  border-right:1px solid rgba(255,255,255,.25);
  transform:translateX(-100%);
  transition:.4s ease;
  z-index:120;
  padding:30px 20px;
}
.sidebar.active{transform:translateX(0);}

.menu a{
  display:block;
  padding:14px 16px;
  border-radius:14px;
  margin-bottom:12px;
  color:white;
  text-decoration:none;
  background:rgba(255,255,255,.05);
}

/* ===== BACKDROP ===== */
.sidebar-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:.35s;
  z-index:110;
}
.sidebar-backdrop.active{
  opacity:1;
  pointer-events:auto;
}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;
  top:0;
  display:flex;
  gap:15px;
  padding:18px 26px;
  background:rgba(4,6,17,.6);
  backdrop-filter:blur(14px);
}
.menu-btn{font-size:1.5rem;cursor:pointer;}

/* ===== WRAP ===== */
.wrap{max-width:1150px;margin:auto;padding:20px;}

/* ===== UPLOAD PANEL ===== */
.upload-card{
  background:linear-gradient(145deg,
    rgba(0,245,255,.18),
    rgba(168,85,247,.12));
  border-radius:26px;
  padding:32px;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:var(--blur);
}

.upload-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.upload-grid input,
.upload-grid select,
.upload-grid button{
  grid-column:span 2;
  padding:16px;
  border-radius:14px;
  border:none;
  background:#0c1433;
  color:white;
}

.upload-grid button{
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  font-weight:700;
}

/* ===== PROGRESS ===== */
.progress-wrap{
  grid-column:span 2;
  height:6px;
  background:rgba(255,255,255,.15);
  border-radius:999px;
  overflow:hidden;
  display:none;
}
.progress{height:100%;width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
}

/* ===== LIST ===== */
.gallery-admin{margin-top:60px;}
.list{display:flex;flex-direction:column;gap:14px;}

.item{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:18px;
  background:var(--glass);
  padding:16px;
  border-radius:20px;
}

.item img{
  width:140px;height:90px;
  object-fit:cover;border-radius:12px;
}

.item input{
  padding:12px;
  border-radius:12px;
  border:none;
  background:#0c1433;
  color:white;
}

.actions{display:flex;gap:10px;}
.actions button{
  padding:10px 16px;
  border-radius:999px;
  border:none;
  font-size:.7rem;
}
.save{background:#00ffb2;}
.del{background:#ff5f6d;}
</style>
</head>

<body>

<!-- SIDEBAR -->
<div class="sidebar" id="sidebar">
  <div class="menu">
    <a href="#upload">➕ Tambah Foto</a>
    <a href="./index.php" target="_blank">🌐 Lihat Website</a>
  </div>
</div>
<div class="sidebar-backdrop" id="sidebarBackdrop"></div>

<!-- TOPBAR -->
<div class="topbar">
  <div class="menu-btn" id="menuBtn">☰</div>
  <strong>Admin Dashboard youht</strong>
</div>

<div class="wrap">

<!-- UPLOAD -->
<div class="upload-card" id="upload">
  <h2>➕ Upload Foto Baru</h2>

  <form id="uploadForm" class="upload-grid">
    <!-- OPTIONAL -->
    <input type="url" id="linkInput" name="link" placeholder="Link tujuan (opsional)">

    <input type="file" name="image" accept="image/*" required>

    <div class="progress-wrap" id="progressWrap">
      <div class="progress" id="progressBar"></div>
    </div>

    <button>UPLOAD</button>
  </form>
</div>

<!-- LIST -->
<div class="gallery-admin">
  <h2>📂 Daftar Kegiatan</h2>
  <div class="list" id="list"></div>
</div>

</div>

<script>
const sidebar=document.getElementById("sidebar");
const backdrop=document.getElementById("sidebarBackdrop");
const menuBtn=document.getElementById("menuBtn");

menuBtn.onclick=()=>{
  sidebar.classList.toggle("active");
  backdrop.classList.toggle("active");
};
backdrop.onclick=()=>{
  sidebar.classList.remove("active");
  backdrop.classList.remove("active");
};

/* ===== LOAD DATA ===== */
const list=document.getElementById("list");

function loadData(){
  fetch("api-get.php")
    .then(r=>r.json())
    .then(data=>{
      list.innerHTML="";
      data.forEach((item,i)=>{
        const row=document.createElement("div");
        row.className="item";
        row.dataset.index=i;

        row.innerHTML=`
          <img src="${item.image}">
          <input value="${item.link || ""}" class="link" placeholder="Link (opsional)">
          <div class="actions">
            <button class="save">SAVE</button>
            <button class="del">DEL</button>
          </div>
        `;

        list.appendChild(row);
      });
    });
}
loadData();

/* ===== UPLOAD ===== */
const uploadForm=document.getElementById("uploadForm");
const progressWrap=document.getElementById("progressWrap");
const progressBar=document.getElementById("progressBar");

uploadForm.onsubmit=e=>{
  e.preventDefault();

  const xhr=new XMLHttpRequest();
  const fd=new FormData(uploadForm);

  progressWrap.style.display="block";

  xhr.upload.onprogress=e=>{
    if(e.lengthComputable){
      progressBar.style.width=(e.loaded/e.total)*100+"%";
    }
  };

  xhr.onload=()=>{
    uploadForm.reset();
    progressWrap.style.display="none";
    progressBar.style.width="0%";
    loadData();
  };

  xhr.open("POST","api-save.php");
  xhr.send(fd);
};

/* ===== SAVE / DELETE ===== */
list.onclick=e=>{
  const row=e.target.closest(".item");
  if(!row) return;

  const idx=row.dataset.index;

  if(e.target.classList.contains("save")){
    fetch("api-update.php",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        index:idx,
        link:row.querySelector(".link").value
      })
    });
  }

  if(e.target.classList.contains("del")){
    if(confirm("Hapus foto ini?")){
      fetch("api-delete.php",{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify({index:idx})
      }).then(loadData);
    }
  }
};
</script>

</body>
</html>