<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบจัดการคลังสินค้า</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<%- include('partials/navbar') %>
<div class="container mt-4">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">รายการสินค้า</h5>
<div class="d-flex gap-2">
<form action="/products/search" method="GET" class="d-flex">
<input type="text" name="searchQuery" class="form-control me-2"
placeholder="ค้นหาสินค้า..." value="<%= typeof searchQuery != 'undefined' ? searchQuery : '' %>">
<button type="submit" class="btn btn-outline-primary">ค้นหา</button>
</form>
<a href="/products/add" class="btn btn-primary">เพิ่มสินค้า</a>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>ชื่อสินค้า</th>
<th>หมวดหมู่</th>
<th>จำนวน</th>
<th>ราคา</th>
<th>การจัดการ</th>
</tr>
</thead>
<tbody>
<% products.forEach(product => { %>
<tr>
<td><%= product.name %></td>
<td><%= product.category_name || 'ไม่ระบุ' %></td>
<td><%= product.quantity %></td>
<td><%= product.price %></td>
<td>
<div class="d-flex gap-2">
<form action="/products/withdraw" method="POST" class="d-flex align-items-center gap-2">
<input type="hidden" name="product_id" value="<%= product.id %>">
<input type="number" name="quantity" class="form-control form-control-sm quantity-input"
min="1" max="<%= product.quantity %>" value="1" required>
<button type="submit" class="btn btn-primary btn-sm">เบิก</button>
</form>
<a href="/products/edit/<%= product.id %>"
class="btn btn-warning btn-sm">แก้ไข</a>
<form action="/products/delete/<%= product.id %>" method="POST" style="display: inline;">
<button type="submit" class="btn btn-danger btn-sm"
onclick="return confirm('คำเตือน: หากสินค้านี้มีประวัติการเบิก ข้อมูลประวัติจะยังคงอยู่\nต้องการลบสินค้า <%= product.name %> หรือไม่?')">
ลบ
</button>
</form>
</div>
</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function deleteProduct(id, name) {
if (confirm(`ต้องการลบสินค้า "${name}" หรือไม่?`)) {
const form = document.createElement('form');
form.method = 'POST';
form.action = `/products/delete/${id}?_method=DELETE`;
document.body.appendChild(form);
form.submit();
}
}
</script>
</body>
</html>