<!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>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                            เพิ่มหมวดหมู่
                        </button>
                    </div>
                    <div class="card-body">
                        <% if (typeof error !== 'undefined' && error) { %>
                            <div class="alert alert-danger" role="alert">
                                <%= error %>
                            </div>
                        <% } %>
                        
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>ชื่อหมวดหมู่</th>
                                        <th>คำอธิบาย</th>
                                        <th>จัดการ</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% categories.forEach(category => { %>
                                        <tr>
                                            <td><%= category.name %></td>
                                            <td><%= category.description || '-' %></td>
                                            <td>
                                                <button class="btn btn-sm btn-warning me-1" 
                                                        onclick="editCategory('<%= category.id %>', '<%= category.name %>', '<%= category.description %>')"
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#editCategoryModal">
                                                    แก้ไข
                                                </button>
                                                <button class="btn btn-sm btn-danger"
                                                        onclick="deleteCategory('<%= category.id %>', '<%= category.name %>')">
                                                    ลบ
                                                </button>
                                            </td>
                                        </tr>
                                    <% }); %>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal เพิ่มหมวดหมู่ -->
    <div class="modal fade" id="addCategoryModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">เพิ่มหมวดหมู่ใหม่</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="/categories/create" method="POST">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="name" class="form-label">ชื่อหมวดหมู่</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">คำอธิบาย</label>
                            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                        <button type="submit" class="btn btn-primary">บันทึก</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal แก้ไขหมวดหมู่ -->
    <div class="modal fade" id="editCategoryModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">แก้ไขหมวดหมู่</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editCategoryForm" method="POST">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="editName" class="form-label">ชื่อหมวดหมู่</label>
                            <input type="text" class="form-control" id="editName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="editDescription" class="form-label">คำอธิบาย</label>
                            <textarea class="form-control" id="editDescription" name="description" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                        <button type="submit" class="btn btn-primary">บันทึกการแก้ไข</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function editCategory(id, name, description) {
            const form = document.getElementById('editCategoryForm');
            form.action = `/categories/${id}?_method=PUT`;
            document.getElementById('editName').value = name;
            document.getElementById('editDescription').value = description || '';
        }

        function deleteCategory(id, name) {
            if (confirm(`ต้องการลบหมวดหมู่ "${name}" หรือไม่?`)) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/categories/${id}?_method=DELETE`;
                document.body.appendChild(form);
                form.submit();
            }
        }
    </script>
</body>
</html> 