<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

include "../db.php";

/* Fetch products with category */
$products = $pdo->query("
    SELECT p.id, p.product_name, p.images, p.created_at, c.category_name
    FROM products p
    LEFT JOIN categories c ON c.id = p.category_id
    ORDER BY p.created_at DESC
")->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>
<title>View Products</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">

<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:25px;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

h2{
    color:var(--primary);
    margin-bottom:20px;
}

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

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

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

tbody tr:hover{
    background:#f0fdf4;
}

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

/* ACTIONS */
.actions a{
    text-decoration:none;
    font-size:13px;
    padding:6px 10px;
    border-radius:6px;
    margin-right:5px;
    font-weight:500;
}

.actions .edit{
    background:#dcfce7;
    color:#065f46;
}

.actions .delete{
    background:#fee2e2;
    color:#7f1d1d;
}

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

<body>

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

<h2>View Products</h2>

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

<table>
<thead>
<tr>
    <th>#</th>
    <th>Image</th>
    <th>Product Name</th>
    <th>Category</th>
    <th>Created</th>
    <th>Action</th>
</tr>
</thead>
<tbody>

<?php foreach($products as $i => $p): 
    $imgs = json_decode($p['images'], true);
    $img = $imgs[0] ?? '';
?>
<tr>
    <td><?= $i+1 ?></td>
    <td>
        <?php if($img): ?>
            <img src="../<?= htmlspecialchars($img) ?>" class="product-img">
        <?php else: ?>
            —
        <?php endif; ?>
    </td>
    <td><?= htmlspecialchars($p['product_name']) ?></td>
    <td><?= htmlspecialchars($p['category_name'] ?? '-') ?></td>
    <td><?= date('d M Y', strtotime($p['created_at'])) ?></td>
    <td class="actions">
        <a href="edit_product.php?id=<?= $p['id'] ?>" class="edit">Edit</a>
        <a href="delete_product.php?id=<?= $p['id'] ?>" 
           class="delete"
           onclick="return confirm('Delete this product?')">Delete</a>
    </td>
</tr>
<?php endforeach; ?>

</tbody>
</table>

<?php endif; ?>

</div>
</div>

</body>
</html>
