<?php include 'db.php'; ?>
<?php include 'layout.php'; ?>

<body>
<div class="main-wrapper">
	<div class="page-wrapper">
		<div class="content">
			<div class="page-header">
				<div class="page-title">
					<h4>Customer Categories</h4>
					<h6>Manage customer categories</h6>
				</div>
				<div class="page-btn">
					<a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#addCatModal"><i class="fa fa-plus me-2"></i>Add Category</a>
				</div>
			</div>

			<div class="card">
				<div class="card-body">
					<table class="table datatable table-bordered">
						<thead>
							<tr>
								<th>Name</th>
								<th>Description</th>
								<th>Created At</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody>
							<?php
							$res = $conn->query("SELECT * FROM customer_categories ORDER BY id DESC");
							while ($row = $res->fetch_assoc()) {
								echo "<tr>
									<td>{$row['category_name']}</td>
									<td>{$row['description']}</td>
									<td>{$row['created_at']}</td>
									<td>
										<button type='button' class='btn btn-sm btn-primary edit-category-btn' data-category-id='{$row['id']}' data-bs-toggle='modal' data-bs-target='#editCategoryModal'>
											<i class='fas fa-edit'></i> Edit
										</button>
									</td>
								</tr>";
							}
							?>
						</tbody>
					</table>
				</div>
			</div>

			<!-- Add Category Modal -->
			<div class="modal fade" id="addCatModal" tabindex="-1">
				<div class="modal-dialog">
					<form method="POST" action="add_cuscategory.php" class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title">Add Customer Category</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
						</div>
						<div class="modal-body">
							<div class="mb-2"><label>Category Name</label><input type="text" name="category_name" class="form-control" required></div>
							<div class="mb-2"><label>Description</label><textarea name="description" class="form-control"></textarea></div>
						</div>
						<div class="modal-footer"><button type="submit" class="btn btn-primary">Save Category</button></div>
					</form>
				</div>
			</div>

			<!-- Edit Category Modal -->
			<div class="modal fade" id="editCategoryModal" tabindex="-1">
				<div class="modal-dialog">
					<form id="editCategoryForm" class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title">Edit Customer Category</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
						</div>
						<div class="modal-body">
							<input type="hidden" id="edit_category_id" name="id">
							<div class="mb-2"><label>Category Name</label><input type="text" id="edit_category_name" name="category_name" class="form-control" required></div>
							<div class="mb-2"><label>Description</label><textarea id="edit_description" name="description" class="form-control"></textarea></div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
							<button type="submit" class="btn btn-primary">Update Category</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
$(document).ready(function() {
    // Handle edit category button click
    $('.edit-category-btn').click(function() {
        var categoryId = $(this).data('category-id');
        
        // Fetch category data via AJAX
        $.ajax({
            url: 'ajax/get_customer_category.php',
            type: 'GET',
            data: { id: categoryId },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    var category = response.category;
                    
                    // Populate modal fields
                    $('#edit_category_id').val(category.id);
                    $('#edit_category_name').val(category.category_name);
                    $('#edit_description').val(category.description);
                } else {
                    alert('Error loading category data');
                }
            },
            error: function() {
                alert('Error loading category data');
            }
        });
    });

    // Handle edit category form submission
    $('#editCategoryForm').submit(function(e) {
        e.preventDefault();
        
        $.ajax({
            url: 'ajax/update_customer_category.php',
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    $('#editCategoryModal').modal('hide');
                    Swal.fire({
                        title: 'Success',
                        text: 'Category updated successfully!',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(function() {
                        location.reload();
                    });
                } else {
                    alert('Error updating category: ' + response.message);
                }
            },
            error: function() {
                alert('Error updating category');
            }
        });
    });
});
</script>

</body>
</html>

<?php if (isset($_GET['success']) && $_GET['success'] == 1): ?>
<script>
Swal.fire({
  title: 'Category Added',
  text: 'Customer category added successfully!',
  icon: 'success',
  timer: 2000,
  showConfirmButton: false
});
if (window.location.search.includes('success=1')) {
  history.replaceState({}, document.title, window.location.pathname);
}
</script>
<?php endif; ?>
