<?php
session_start();
if(!isset($_SESSION['admin_id'])){
  header("Location: index.php");
  exit;
}

require_once "../db.php";
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

/* DELETE */
if(isset($_GET['delete'])){
  $id = (int)$_GET['delete'];
  $pdo->prepare("DELETE FROM categories WHERE id=?")->execute([$id]);
  header("Location: manage_categories.php");
  exit;
}

/* UPDATE */
if(isset($_POST['update'])){
  $id   = $_POST['category_id'];
  $name = $_POST['category_name'];

  $old = $pdo->prepare("SELECT image FROM categories WHERE id=?");
  $old->execute([$id]);
  $img = $old->fetchColumn();

  if(!empty($_FILES['image']['name'])){
    $img = time()."_".$_FILES['image']['name'];
    move_uploaded_file(
      $_FILES['image']['tmp_name'],
      "../assets/images/categories/".$img
    );
  }

  $pdo->prepare(
    "UPDATE categories SET category_name=?, image=? WHERE id=?"
  )->execute([$name,$img,$id]);

  header("Location: manage_categories.php");
  exit;
}

$categories = $pdo->query("SELECT * FROM categories ORDER BY id DESC")->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Categories</title>

<style>
:root{
  --primary:#16a34a;
  --danger:#dc2626;
  --bg:#f1f5f9;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui;
  background:var(--bg);
}

/* TOP BAR */
.header{
  position:sticky;
  top:0;
  background:#fff;
  padding:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  z-index:10;
}
.header h2{margin:0;font-size:18px}
.search{
  margin-top:8px;
}
.search input{
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #cbd5e1;
}

/* LIST */
.list{
  padding:12px;
}
.card{
  background:#fff;
  border-radius:16px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.card img{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:12px;
}
.card h4{
  margin:0;
  font-size:16px;
}
.actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.btn{
  padding:6px 10px;
  border-radius:8px;
  border:none;
  color:#fff;
  font-size:13px;
}
.edit{background:#2563eb}
.delete{background:var(--danger)}

/* BOTTOM SHEET MODAL */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:flex-end;
}
.sheet{
  background:#fff;
  width:100%;
  border-radius:20px 20px 0 0;
  padding:16px;
}
.sheet img{
  height:70px;
  border-radius:12px;
  margin-bottom:10px;
}
.sheet input{
  width:100%;
  padding:12px;
  margin-bottom:10px;
  border-radius:10px;
  border:1px solid #cbd5e1;
}
.save{
  background:var(--primary);
  color:#fff;
  width:100%;
  padding:14px;
  border:none;
  border-radius:14px;
  font-size:16px;
}
.close{
  background:#e5e7eb;
  border:none;
  padding:8px 14px;
  border-radius:10px;
  margin-bottom:10px;
}
</style>
</head>
<body>

<!-- HEADER -->
<div class="header">
  <h2>📂 Categories</h2>
  <div class="search">
    <input type="text" placeholder="Search category..." onkeyup="filter(this.value)">
  </div>
</div>

<!-- LIST -->
<div class="list" id="list">
<?php foreach($categories as $c): ?>
  <div class="card" data-name="<?= strtolower($c['category_name']) ?>">
    <img src="/assets/images/categories/<?= $c['image'] ?>">
    <h4><?= htmlspecialchars($c['category_name']) ?></h4>

    <div class="actions">
      <button class="btn edit"
        onclick="openEdit('<?= $c['id'] ?>','<?= htmlspecialchars($c['category_name'],ENT_QUOTES) ?>','<?= $c['image'] ?>')">
        Edit
      </button>
      <a class="btn delete"
         onclick="return confirm('Delete category?')"
         href="?delete=<?= $c['id'] ?>">Del</a>
    </div>
  </div>
<?php endforeach; ?>
</div>

<!-- MODAL -->
<div class="modal" id="modal">
  <div class="sheet">
    <button class="close" onclick="closeEdit()">Close</button>

    <form method="post" enctype="multipart/form-data">
      <input type="hidden" name="category_id" id="cid">

      <img id="cimg">

      <input name="category_name" id="cname" required>
      <input type="file" name="image">

      <button class="save" name="update">Update</button>
    </form>
  </div>
</div>

<script>
function openEdit(id,name,img){
  cid.value=id;
  cname.value=name;
  cimg.src="/assets/images/categories/"+img;
  modal.style.display="flex";
}
function closeEdit(){
  modal.style.display="none";
}
function filter(q){
  q=q.toLowerCase();
  document.querySelectorAll('.card').forEach(c=>{
    c.style.display = c.dataset.name.includes(q) ? "flex" : "none";
  });
}
</script>

</body>
</html>
