<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/settings" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Settings
        </a>
        <h1>Categories</h1>
        <div class="page-subtitle">Manage product categories and subcategories</div>
    </div>
    <button class="btn btn-primary" onclick="showAddCategoryModal()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        Add Category
    </button>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">All Categories</h3>
    </div>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Parent Category</th>
                    <th>Description</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($categories as $category): ?>
                <tr>
                    <td>
                        <a href="<?= APP_URL ?>/products?category_id=<?= $category['id'] ?>" class="font-medium" style="color:var(--primary); text-decoration:none;">
                            <?= e($category['name']) ?>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:12px; vertical-align:middle; margin-left:4px;">
                                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                                <polyline points="15 3 21 3 21 9"></polyline>
                                <line x1="10" y1="14" x2="21" y2="3"></line>
                            </svg>
                        </a>
                    </td>
                    <td>
                        <?= $category['parent_name'] ? e($category['parent_name']) : '<span class="text-muted">None</span>' ?>
                    </td>
                    <td>
                        <span class="text-sm text-muted">
                            <?= e($category['description'] ?? 'No description') ?>
                        </span>
                    </td>
                    <td>
                        <span class="text-sm text-muted">
                            <?= date('M j, Y', strtotime($category['created_at'])) ?>
                        </span>
                    </td>
                    <td>
                        <div class="flex gap-2">
                            <button class="btn btn-ghost btn-icon" onclick="editCategory(<?= $category['id'] ?>, '<?= e($category['name']) ?>', '<?= e($category['description'] ?? '') ?>', <?= $category['parent_id'] ?? 'null' ?>)" title="Edit">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                </svg>
                            </button>
                            <form method="POST" action="<?= APP_URL ?>/settings/delete-category" onsubmit="return confirm('Are you sure you want to delete this category?')" style="display:inline;">
                                <?= Security::csrfField() ?>
                                <input type="hidden" name="id" value="<?= $category['id'] ?>">
                                <button type="submit" class="btn btn-ghost btn-icon text-danger" title="Delete">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                        <polyline points="3,6 5,6 21,6"></polyline>
                                        <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($categories)): ?>
                <tr>
                    <td colspan="5" class="text-center text-muted py-8">
                        No categories found. Create your first category to get started.
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Add Category Modal -->
<div class="modal-overlay" id="addCategoryModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add Category</h3>
            <button class="modal-close" onclick="hideAddCategoryModal()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <form method="POST" action="<?= APP_URL ?>/settings/store-category">
            <?= Security::csrfField() ?>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Category Name *</label>
                    <input type="text" name="name" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Parent Category</label>
                    <select name="parent_id" class="form-select">
                        <option value="">None (Top Level)</option>
                        <?php foreach ($categories as $category): ?>
                        <option value="<?= $category['id'] ?>"><?= e($category['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-textarea" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="hideAddCategoryModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Category</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Category Modal -->
<div class="modal-overlay" id="editCategoryModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Edit Category</h3>
            <button class="modal-close" onclick="hideEditCategoryModal()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <form method="POST" action="<?= APP_URL ?>/settings/update-category">
            <?= Security::csrfField() ?>
            <input type="hidden" name="id" id="editCategoryId">
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Category Name *</label>
                    <input type="text" name="name" id="editCategoryName" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Parent Category</label>
                    <select name="parent_id" id="editCategoryParent" class="form-select">
                        <option value="">None (Top Level)</option>
                        <?php foreach ($categories as $category): ?>
                        <option value="<?= $category['id'] ?>" data-category-id="<?= $category['id'] ?>"><?= e($category['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea name="description" id="editCategoryDescription" class="form-textarea" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="hideEditCategoryModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Update Category</button>
            </div>
        </form>
    </div>
</div>

<script>
function showAddCategoryModal() {
    document.getElementById('addCategoryModal').classList.add('show');
}

function hideAddCategoryModal() {
    document.getElementById('addCategoryModal').classList.remove('show');
}

function editCategory(id, name, description, parentId) {
    document.getElementById('editCategoryId').value = id;
    document.getElementById('editCategoryName').value = name;
    document.getElementById('editCategoryDescription').value = description || '';
    
    // Set parent category
    const parentSelect = document.getElementById('editCategoryParent');
    parentSelect.value = parentId || '';
    
    // Remove self from parent options to prevent self-reference
    Array.from(parentSelect.options).forEach(option => {
        if (option.dataset.categoryId == id) {
            option.disabled = true;
        } else {
            option.disabled = false;
        }
    });
    
    document.getElementById('editCategoryModal').classList.add('show');
}

function hideEditCategoryModal() {
    document.getElementById('editCategoryModal').classList.remove('show');
}
</script>
