<?php
include 'includes/header.php';

$msg = '';

// Handle deletion
if (isset($_GET['delete'])) {
    $id = intval($_GET['delete']);
    $conn->query("DELETE FROM categories WHERE id = $id");
    $msg = 'Category deleted successfully';
}

// Handle Add/Edit
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name = $_POST['name'];
    $slug = $_POST['slug'];
    $description = $_POST['description'] ?? '';
    
    if (isset($_POST['id']) && $_POST['id']) {
        // Update
        $id = intval($_POST['id']);
        $conn->query("UPDATE categories SET name='$name', slug='$slug', description='$description' WHERE id = $id");
        $msg = "Category updated successfully";
    } else {
        // Insert
        $conn->query("INSERT INTO categories (name, slug, description) VALUES ('$name', '$slug', '$description')");
        $msg = "Category added successfully";
    }
}

// Fetch all categories
$categories = get_all("SELECT * FROM categories ORDER BY name ASC");

// Fetch category for editing
$edit_category = null;
if (isset($_GET['edit'])) {
    $edit_category = get_row("SELECT * FROM categories WHERE id = ?", [$_GET['edit']]);
}
?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div class="search-wrap" style="width: 300px;">
        <div class="input-group">
            <span class="input-group-text bg-transparent border-end-0" style="border-color: rgba(212,175,55,0.2);">
                <i class="bi bi-search text-muted"></i>
            </span>
            <input type="text" id="categorySearch" onkeyup="filterTable('categorySearch', 'categoriesTable')" 
                   class="form-control bg-transparent border-start-0" style="border-color: rgba(212,175,55,0.2); color: var(--text-dark)" 
                   placeholder="Search categories...">
        </div>
    </div>
    <button class="btn btn-saffron px-4" data-bs-toggle="modal" data-bs-target="#categoryModal" onclick="resetForm()">
        <i class="bi bi-plus-lg me-2"></i> Add New Category
    </button>
</div>

<?php if($msg): ?>
    <div class="alert alert-success py-2 mb-4" style="font-size: 0.9rem;">
        <i class="bi bi-check-circle me-2"></i> <?php echo htmlspecialchars($msg); ?>
    </div>
<?php endif; ?>

<div class="admin-card">
    <div class="table-responsive">
        <table class="table table-custom" id="categoriesTable">
            <thead>
                <tr>
                    <th>Category Name</th>
                    <th>Slug</th>
                    <th>Description</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($categories as $cat): ?>
                <tr>
                    <td style="font-weight:700; color: var(--maroon);">
                        <?php echo htmlspecialchars($cat['name']); ?>
                    </td>
                    <td class="text-muted" style="font-size:0.85rem">
                        <?php echo htmlspecialchars($cat['slug']); ?>
                    </td>
                    <td style="font-size:0.85rem; color: var(--text-medium)">
                        <?php echo htmlspecialchars($cat['description']); ?>
                    </td>
                    <td>
                        <div class="d-flex gap-2">
                            <button class="btn-action bg-info bg-opacity-10 text-info" 
                                    title="Edit" onclick="editCategory(<?php echo $cat['id']; ?>)">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <a href="categories.php?delete=<?php echo $cat['id']; ?>" 
                               class="btn-action bg-danger bg-opacity-10 text-danger" 
                               title="Delete" 
                               onclick="return confirm('Are you sure you want to delete this category? Books in this category will still exist.')">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Category Modal -->
<div class="modal fade" id="categoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="background: var(--warm-white); border: 1px solid var(--cream-dark);">
            <div class="modal-header">
                <h5 class="modal-title" id="categoryModalLabel">Add New Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <input type="hidden" name="id" id="cat_id" value="">
                    <div class="mb-3">
                        <label class="form-label">Category Name *</label>
                        <input type="text" name="name" class="form-control" required 
                               value="<?php echo $edit_category['name'] ?? ''; ?>"
                               style="background: var(--cream); border: 1px solid var(--cream-dark)">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Slug (URL-friendly) *</label>
                        <input type="text" name="slug" class="form-control" required
                               value="<?php echo $edit_category['slug'] ?? ''; ?>"
                               style="background: var(--cream); border: 1px solid var(--cream-dark)">
                        <small class="text-muted">Example: vedic-astrology</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="3"
                                  style="background: var(--cream); border: 1px solid var(--cream-dark)"><?php echo $edit_category['description'] ?? ''; ?></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" style="background: var(--cream-dark); color: var(--text-dark);" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-saffron">Save Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function editCategory(id) {
    fetch('get_category.php?id=' + id)
        .then(r => r.json())
        .then(cat => {
            document.getElementById('categoryModalLabel').textContent = 'Edit Category';
            document.getElementById('cat_id').value = cat.id;
            document.querySelector('input[name="name"]').value = cat.name;
            document.querySelector('input[name="slug"]').value = cat.slug;
            document.querySelector('textarea[name="description"]').value = cat.description;
            new bootstrap.Modal(document.getElementById('categoryModal')).show();
        });
}

function resetForm() {
    document.getElementById('categoryModalLabel').textContent = 'Add New Category';
    document.getElementById('cat_id').value = '';
    document.querySelector('input[name="name"]').value = '';
    document.querySelector('input[name="slug"]').value = '';
    document.querySelector('textarea[name="description"]').value = '';
}
</script>

<?php include 'includes/footer.php'; ?>