38682-vm/admin/categories.php
2026-02-25 18:22:13 +00:00

287 lines
14 KiB
PHP

<?php
require_once __DIR__ . '/../db/config.php';
require_once __DIR__ . '/../includes/functions.php';
$pdo = db();
require_permission('categories_view');
$message = '';
// Handle Add/Edit Category
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
$action = $_POST['action'];
$id = isset($_POST['id']) ? (int)$_POST['id'] : null;
$name = $_POST['name'];
$name_ar = $_POST['name_ar'] ?? '';
$description = $_POST['description'];
$image_url = null;
if ($id) {
$stmt = $pdo->prepare("SELECT image_url FROM categories WHERE id = ?");
$stmt->execute([$id]);
$image_url = $stmt->fetchColumn();
} else {
$image_url = 'https://placehold.co/400x300?text=' . urlencode($name);
}
if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
$uploadDir = __DIR__ . '/../assets/images/categories/';
if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);
$file_ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
if (in_array($file_ext, ['jpg', 'jpeg', 'png', 'gif', 'webp'])) {
$fileName = uniqid('cat_') . '.' . $file_ext;
if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadDir . $fileName)) {
$image_url = 'assets/images/categories/' . $fileName;
}
}
}
try {
if ($action === 'edit_category' && $id) {
if (!has_permission('categories_edit') && !has_permission('categories_add')) {
$message = '<div class="alert alert-danger">Access Denied: You do not have permission to edit categories.</div>';
} else {
$stmt = $pdo->prepare("UPDATE categories SET name = ?, name_ar = ?, description = ?, image_url = ? WHERE id = ?");
$stmt->execute([$name, $name_ar, $description, $image_url, $id]);
$message = '<div class="alert alert-success">Category updated successfully!</div>';
}
} elseif ($action === 'add_category') {
if (!has_permission('categories_add')) {
$message = '<div class="alert alert-danger">Access Denied: You do not have permission to add categories.</div>';
} else {
$stmt = $pdo->prepare("INSERT INTO categories (name, name_ar, description, image_url) VALUES (?, ?, ?, ?)");
$stmt->execute([$name, $name_ar, $description, $image_url]);
$message = '<div class="alert alert-success">Category created successfully!</div>';
}
}
} catch (PDOException $e) {
$message = '<div class="alert alert-danger">Database error: ' . $e->getMessage() . '</div>';
}
}
// Handle Delete (Soft Delete)
if (isset($_GET['delete'])) {
if (!has_permission('categories_del')) {
$message = '<div class="alert alert-danger">Access Denied: You do not have permission to delete categories.</div>';
} else {
try {
$id = (int)$_GET['delete'];
// Soft delete to avoid breaking product relations and historical order integrity
$pdo->prepare("UPDATE categories SET is_deleted = 1 WHERE id = ?")->execute([$id]);
header("Location: categories.php?deleted=1");
exit;
} catch (PDOException $e) {
$message = '<div class="alert alert-danger">Error removing category: ' . $e->getMessage() . '</div>';
}
}
}
if (isset($_GET['deleted'])) {
$message = '<div class="alert alert-success">Category removed successfully!</div>';
}
$query = "SELECT * FROM categories WHERE is_deleted = 0 ORDER BY name ASC";
$categories_pagination = paginate_query($pdo, $query);
$categories = $categories_pagination['data'];
include 'includes/header.php';
?>
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h2 class="fw-bold mb-1"><?= t('categories') ?></h2>
<p class="text-muted mb-0">Organize your menu and inventory</p>
</div>
<?php if (has_permission('categories_add')): ?>
<button class="btn btn-primary btn-lg shadow-sm" data-bs-toggle="modal" data-bs-target="#categoryModal" onclick="prepareAddForm()" style="border-radius: 12px;">
<i class="bi bi-plus-lg me-1"></i> <?= t('add') ?> <?= t('categories') ?>
</button>
<?php endif; ?>
</div>
<?= $message ?>
<?php if (empty($categories)): ?>
<div class="text-center py-5 bg-white rounded-4 shadow-sm">
<i class="bi bi-tags display-1 text-muted opacity-25 mb-3 d-block"></i>
<h4 class="text-dark"><?= t('none') ?></h4>
<p class="text-muted">Start by adding your first category.</p>
</div>
<?php else: ?>
<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="bg-light">
<tr>
<th class="ps-4"><?= t('category') ?></th>
<th><?= t('arabic_name') ?></th>
<th><?= t('description') ?></th>
<th class="text-end pe-4"><?= t('actions') ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($categories as $cat): ?>
<tr>
<td class="ps-4">
<div class="d-flex align-items-center py-2">
<img src="<?= htmlspecialchars(strpos($cat['image_url'], 'http') === 0 ? $cat['image_url'] : '../' . $cat['image_url']) ?>" alt="" class="rounded-3 me-3 border shadow-sm" style="width: 50px; height: 50px; object-fit: cover;">
<div class="fw-bold text-dark fs-6"><?= htmlspecialchars($cat['name']) ?></div>
</div>
</td>
<td>
<div class="text-dark"><?= htmlspecialchars($cat['name_ar'] ?? '-') ?></div>
</td>
<td>
<div class="text-muted small text-truncate" style="max-width: 300px;"><?= htmlspecialchars($cat['description'] ?? t('none')) ?></div>
</td>
<td class="text-end pe-4">
<div class="d-inline-flex gap-2">
<?php if (has_permission('categories_edit') || has_permission('categories_add')): ?>
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3"
data-bs-toggle="modal" data-bs-target="#categoryModal"
onclick='prepareEditForm(<?= htmlspecialchars(json_encode($cat), ENT_QUOTES, "UTF-8") ?>)'><?= t('edit') ?></button>
<?php endif; ?>
<?php if (has_permission('categories_del')): ?>
<a href="?delete=<?= $cat['id'] ?>" class="btn btn-sm btn-outline-danger rounded-pill px-3" onclick="return confirm('<?= t('are_you_sure') ?>')"><?= t('delete') ?></a>
<?php endif; ?>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<div class="p-3 border-top bg-light">
<?php render_pagination_controls($categories_pagination); ?>
</div>
</div>
<?php endif; ?>
<!-- Category Modal -->
<?php if (has_permission('categories_add') || has_permission('categories_edit')): ?>
<div class="modal fade" id="categoryModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content border-0 shadow-lg rounded-4">
<div class="modal-header bg-primary text-white border-0 py-3">
<h5 class="modal-title fw-bold" id="categoryModalTitle"><?= t('add') ?> <?= t('categories') ?></h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form method="POST" id="categoryForm" enctype="multipart/form-data">
<div class="modal-body p-4">
<input type="hidden" name="action" id="categoryAction" value="add_category">
<input type="hidden" name="id" id="categoryId">
<div class="mb-3">
<label class="form-label small fw-bold text-muted d-flex justify-content-between">
<span><?= t('name') ?> (EN) <span class="text-danger">*</span></span>
<a href="javascript:void(0)" onclick="translateTo('English')" class="text-decoration-none small text-primary fw-bold" id="translateBtnEn">
<i class="bi bi-translate me-1"></i> Auto-translate
</a>
</label>
<input type="text" name="name" id="categoryName" class="form-control rounded-3 border-0 bg-light" required>
</div>
<div class="mb-3">
<label class="form-label small fw-bold text-muted d-flex justify-content-between">
<span><?= t('arabic_name') ?></span>
<a href="javascript:void(0)" onclick="translateTo('Arabic')" class="text-decoration-none small text-primary fw-bold" id="translateBtnAr">
<i class="bi bi-translate me-1"></i> Auto-translate
</a>
</label>
<input type="text" name="name_ar" id="categoryNameAr" class="form-control rounded-3 border-0 bg-light" dir="rtl">
</div>
<div class="mb-3">
<label class="form-label small fw-bold text-muted"><?= t('description') ?></label>
<textarea name="description" id="categoryDescription" class="form-control rounded-3 border-0 bg-light" rows="3" placeholder="Optional category description..."></textarea>
</div>
<div class="mb-0">
<label class="form-label small fw-bold text-muted">IMAGE</label>
<div class="d-flex align-items-center gap-3 bg-light p-3 rounded-4 border border-dashed">
<img src="" id="categoryImagePreview" class="rounded-3 border shadow-sm" style="width: 60px; height: 60px; object-fit: cover; display: none;">
<div class="flex-grow-1">
<input type="file" name="image" class="form-control border-0 bg-transparent" accept="image/*">
</div>
</div>
</div>
</div>
<div class="modal-footer border-0 p-4 pt-0">
<button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal"><?= t('cancel') ?></button>
<button type="submit" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm"><?= t('save') ?></button>
</div>
</form>
</div>
</div>
</div>
<script>
function prepareAddForm() {
document.getElementById('categoryModalTitle').innerText = '<?= t('add') ?> <?= t('categories') ?>';
document.getElementById('categoryAction').value = 'add_category';
document.getElementById('categoryForm').reset();
document.getElementById('categoryId').value = '';
document.getElementById('categoryImagePreview').style.display = 'none';
}
function prepareEditForm(cat) {
if (!cat) return;
document.getElementById('categoryModalTitle').innerText = '<?= t('edit') ?> <?= t('categories') ?>: ' + cat.name;
document.getElementById('categoryAction').value = 'edit_category';
document.getElementById('categoryId').value = cat.id;
document.getElementById('categoryName').value = cat.name;
document.getElementById('categoryNameAr').value = cat.name_ar || '';
document.getElementById('categoryDescription').value = cat.description || '';
if (cat.image_url) {
const preview = document.getElementById('categoryImagePreview');
preview.src = cat.image_url.startsWith('http') ? cat.image_url : '../' + cat.image_url;
preview.style.display = 'block';
} else {
document.getElementById('categoryImagePreview').style.display = 'none';
}
}
async function translateTo(targetLang) {
const sourceId = targetLang === 'Arabic' ? 'categoryName' : 'categoryNameAr';
const targetId = targetLang === 'Arabic' ? 'categoryNameAr' : 'categoryName';
const btnId = targetLang === 'Arabic' ? 'translateBtnAr' : 'translateBtnEn';
const sourceText = document.getElementById(sourceId).value;
if (!sourceText) {
alert('Please enter text to translate first.');
return;
}
const btn = document.getElementById(btnId);
const originalContent = btn.innerHTML;
btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Translating...';
btn.classList.add('disabled');
try {
const response = await fetch('../api/translate.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: sourceText, target_lang: targetLang })
});
const data = await response.json();
if (data.success) {
document.getElementById(targetId).value = data.translated_text;
} else {
alert('Translation error: ' + data.error);
}
} catch (error) {
console.error('Translation error:', error);
alert('An error occurred during translation.');
} finally {
btn.innerHTML = originalContent;
btn.classList.remove('disabled');
}
}
</script>
<?php endif; ?>
<?php include 'includes/footer.php'; ?>