<?php
include "../db.php";

/* DELETE */
if (isset($_GET['delete'])) {
    $id = intval($_GET['delete']);
    $pdo->prepare("DELETE FROM categories WHERE id=?")->execute([$id]);
    echo "<script>window.parent.loadPage(null,'view_categories.php');</script>";
    exit;
}

/* SEARCH */
$search = $_GET['search'] ?? "";
$query = "SELECT * FROM categories";
$params = [];

if ($search !== "") {
    $query .= " WHERE category_name LIKE ?";
    $params[] = "%$search%";
}

$query .= " ORDER BY id DESC";
$stmt = $pdo->prepare($query);
$stmt->execute($params);
$categories = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>
<title>View Categories</title>
<meta name="viewport" content="width=device-width,initial-scale=1">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
:root{
    --primary:#0b4f27;
    --primary-dark:#083a1d;
    --bg:#f3f4f6;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--text);
    padding:20px;
}

.container{
    max-width:1200px;
    margin:auto;
}

.card{
    background:var(--card);
    padding:22px;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.header h2{
    color:var(--primary);
    margin:0;
}

/* SEARCH */
.search-form{
    display:flex;
    gap:8px;
}

.search-form input{
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #d1d5db;
    font-size:14px;
}

.search-form button{
    padding:8px 14px;
    border:none;
    border-radius:8px;
    font-size:14px;
    cursor:pointer;
}

.btn-search{background:var(--primary);color:#fff;}
.btn-reset{background:#6b7280;color:#fff;}

.search-form button:hover{
    opacity:.9;
}

/* TABLE */
table{
    width:100%;
    border-collapse:collapse;
}

thead th{
    background:#e9f5ef;
    color:#064e3b;
    text-align:left;
    padding:12px;
    font-size:14px;
}

tbody td{
    padding:12px;
    border-bottom:1px solid #e5e7eb;
    font-size:14px;
    vertical-align:middle;
}

tbody tr:hover{
    background:#f0fdf4;
}

/* IMAGE */
.cat-img{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #e5e7eb;
}

/* ACTIONS */
.actions i{
    font-size:18px;
    cursor:pointer;
    margin-right:10px;
}

.actions .view{color:#16a34a;}
.actions .edit{color:#2563eb;}
.actions .delete{color:#dc2626;}

.empty{
    padding:20px;
    text-align:center;
    color:var(--muted);
}
</style>
</head>

<body>

<div class="container">
<div class="card">

<div class="header">
    <h2>Categories</h2>

    <form class="search-form"
        onsubmit="window.parent.loadPage(null,'view_categories.php?search='+document.getElementById('search').value); return false;">
        <input id="search" type="text" value="<?= htmlspecialchars($search) ?>" placeholder="Search category">
        <button class="btn-search">Search</button>
        <button class="btn-reset"
            onclick="window.parent.loadPage(null,'view_categories.php'); return false;">Reset</button>
    </form>
</div>

<?php if(!$categories): ?>
    <div class="empty">No categories found.</div>
<?php else: ?>

<table>
<thead>
<tr>
    <th>ID</th>
    <th>Category Name</th>
    <th>Image</th>
    <th>Created At</th>
    <th>Action</th>
</tr>
</thead>

<tbody>
<?php foreach($categories as $c): ?>
<tr>
    <td><?= $c['id'] ?></td>
    <td><?= htmlspecialchars($c['category_name']) ?></td>
    <td>
        <img src="../lbfood/uploads/categories/<?= htmlspecialchars($c['image_path']) ?>" class="cat-img">
    </td>
    <td><?= htmlspecialchars($c['created_at']) ?></td>
    <td class="actions">
        <i class="fa-solid fa-eye view"
           onclick="window.parent.loadPage(null,'view_category.php?id=<?= $c['id'] ?>')"></i>

        <i class="fa-solid fa-pen-to-square edit"
           onclick="window.parent.loadPage(null,'edit_category.php?id=<?= $c['id'] ?>')"></i>

        <i class="fa-solid fa-trash delete"
           onclick="if(confirm('Delete this category?'))
                    window.parent.loadPage(null,'view_categories.php?delete=<?= $c['id'] ?>')"></i>
    </td>
</tr>
<?php endforeach; ?>
</tbody>
</table>

<?php endif; ?>

</div>
</div>

</body>
</html>
