<!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-inline">
                            <input type="hidden" name="product_id" value="<%= product.id %>">
                            <div class="input-group input-group-sm" style="width: 150px;">
                              <input type="number" name="quantity" class="form-control" 
                                     min="1" max="<%= product.quantity %>" value="1" required>
                              <button type="submit" class="btn btn-primary">เบิกสินค้า</button>
                            </div>
                          </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>
