Add online menu management, modernized and hardened

Adds a public menu page (menu.php) and an admin CRUD interface
(admin/menu.php + admin/menu.js) backed by new menu_categories and
menu_items tables, replacing the "menu lives on Facebook" placeholder
on the homepage.

The admin JS/PHP came out of an AI-assisted pass that used outdated
JS (var, .then() chains, string-built HTML) and had some rough edges
security-wise, so this also:

- Rewrites the admin JS to modern ES (const/let, async/await,
  template literals, dataset API) and splits it out of admin/menu.php
  into admin/menu.js for proper separation of concerns
- Adds declare(strict_types=1) and PHP 8 match-based action dispatch
  in place of an if-chain
- Validates category_id/item_id/category_id server-side before use,
  so a bad ID returns a clean JSON error instead of an uncaught
  PDOException or a null item breaking the client
- Rejects non-string POST fields instead of crashing trim() on them
- Replaces the category-save handler's full-page location.reload()
  with in-place DOM updates (panel insert/update, resort by
  sort_order, keep the item modal's category dropdown in sync), so
  every admin action is now AJAX with no reload
- Sets data-name/data-desc via dataset assignment rather than string-
  interpolating them into an HTML attribute, closing a stored-XSS
  path through the category name/description fields

Removes seed-menu.php, a leftover stub with no working code left in
it after the AI's one-time seeding run.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
David DyerandClaude Sonnet 5 committed 2026-08-30 21:35:22 -04:00
1 parent 21ad6c31cf
commit f1bbf59548
8 files changed
+1382 -27

No files matched your search

+4
View File
@@ -76,6 +76,10 @@ $today = date('Y-m-d');
<img src="../assets/knot.png" alt="" class="knot">
<span>The Old Fitz Admin</span>
</a>
<div class="admin-nav-links">
<a href="index.php" class="active">Announcements</a>
<a href="menu.php">Menu</a>
</div>
<div class="admin-user">
<span>Logged in as <strong><?= htmlspecialchars($user['username']) ?></strong></span>
<a href="../" target="_blank" rel="noopener">View Public Site ↗</a>
+416
View File
@@ -0,0 +1,416 @@
// Menu Management admin page: category/item CRUD via fetch, modal handling.
// The CSRF token is handed off from PHP via <body data-csrf-token="..."> so
// this file stays pure static JS with no server-side templating in it.
const csrfToken = document.body.dataset.csrfToken;
// Item Modal helpers
const itemModal = document.getElementById('modal-item-backdrop');
const catModal = document.getElementById('modal-cat-backdrop');
function openItemModal(itemData = null) {
const title = document.getElementById('modal-item-title');
const idField = document.getElementById('item-field-id');
const nameField = document.getElementById('item-field-name');
const catField = document.getElementById('item-field-cat');
const priceField = document.getElementById('item-field-price');
const badgeField = document.getElementById('item-field-badge');
const descField = document.getElementById('item-field-desc');
const sortField = document.getElementById('item-field-sort');
const availField = document.getElementById('item-field-available');
if (itemData) {
title.textContent = '✏️ Edit Menu Item';
idField.value = itemData.id || 0;
nameField.value = itemData.name || '';
catField.value = itemData.category_id || catField.options[0]?.value || 0;
priceField.value = itemData.price || '';
badgeField.value = itemData.badge || '';
descField.value = itemData.description || '';
sortField.value = itemData.sort_order || 0;
availField.checked = parseInt(itemData.is_available, 10) === 1;
} else {
title.textContent = '✨ Add Menu Item';
idField.value = 0;
nameField.value = '';
priceField.value = '';
badgeField.value = '';
descField.value = '';
sortField.value = 0;
availField.checked = true;
}
itemModal.classList.add('is-open');
nameField.focus();
}
function closeItemModal() {
itemModal.classList.remove('is-open');
}
function openCategoryModal(catData = null) {
const title = document.getElementById('modal-cat-title');
const idField = document.getElementById('cat-field-id');
const nameField = document.getElementById('cat-field-name');
const descField = document.getElementById('cat-field-desc');
const sortField = document.getElementById('cat-field-sort');
if (catData) {
title.textContent = '✏️ Edit Category';
idField.value = catData.id || 0;
nameField.value = catData.name || '';
descField.value = catData.description || '';
sortField.value = catData.sort_order || 0;
} else {
title.textContent = '✨ Add Category';
idField.value = 0;
nameField.value = '';
descField.value = '';
sortField.value = 0;
}
catModal.classList.add('is-open');
nameField.focus();
}
function closeCategoryModal() {
catModal.classList.remove('is-open');
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text ?? '';
return div.innerHTML;
}
async function postForm(formData) {
const response = await fetch('menu.php', {
method: 'POST',
body: formData,
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
return response.json();
}
// Modal listeners
document.getElementById('btn-new-item').addEventListener('click', () => openItemModal());
document.getElementById('btn-new-cat').addEventListener('click', () => openCategoryModal());
document.getElementById('btn-create-first-cat')?.addEventListener('click', () => openCategoryModal());
document.getElementById('btn-close-item-modal').addEventListener('click', closeItemModal);
document.getElementById('btn-cancel-item').addEventListener('click', closeItemModal);
document.getElementById('btn-close-cat-modal').addEventListener('click', closeCategoryModal);
document.getElementById('btn-cancel-cat').addEventListener('click', closeCategoryModal);
// Close on backdrop click
itemModal.addEventListener('click', (e) => { if (e.target === itemModal) closeItemModal(); });
catModal.addEventListener('click', (e) => { if (e.target === catModal) closeCategoryModal(); });
// Close on Escape key
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeItemModal();
closeCategoryModal();
}
});
// Form submit: Save Item (Async Fetch)
document.getElementById('form-item').addEventListener('submit', async (e) => {
e.preventDefault();
const saveBtn = document.getElementById('btn-save-item');
saveBtn.disabled = true;
saveBtn.textContent = 'Saving...';
try {
const res = await postForm(new FormData(e.target));
if (res.success) {
closeItemModal();
updateOrInsertItemRow(res.item, res.is_new);
} else {
alert(res.error || 'Failed to save item.');
}
} catch {
alert('Network error. Please try again.');
} finally {
saveBtn.disabled = false;
saveBtn.textContent = 'Save Item';
}
});
// Form submit: Save Category (Async Fetch)
document.getElementById('form-cat').addEventListener('submit', async (e) => {
e.preventDefault();
const saveBtn = document.getElementById('btn-save-cat');
saveBtn.disabled = true;
saveBtn.textContent = 'Saving...';
try {
const res = await postForm(new FormData(e.target));
if (res.success) {
closeCategoryModal();
updateOrInsertCategoryPanel(res.category);
} else {
alert(res.error || 'Failed to save category.');
}
} catch {
alert('Network error. Please try again.');
} finally {
saveBtn.disabled = false;
saveBtn.textContent = 'Save Category';
}
});
// Delegate Table Actions: Edit, Toggle Availability, Delete
document.getElementById('categories-container').addEventListener('click', async (e) => {
const { target } = e;
// Edit Item
if (target.classList.contains('btn-edit-item')) {
const row = target.closest('tr');
openItemModal(JSON.parse(row.dataset.item));
return;
}
// Edit Category
if (target.classList.contains('btn-edit-cat')) {
openCategoryModal({
id: target.dataset.id,
name: target.dataset.name,
description: target.dataset.desc,
sort_order: target.dataset.sort
});
return;
}
// Toggle Availability (Mark Sold Out / Mark Available)
if (target.classList.contains('btn-toggle-item')) {
const row = target.closest('tr');
const statusBadge = row.querySelector('.status-badge');
target.disabled = true;
const fd = new FormData();
fd.append('action', 'toggle_item');
fd.append('item_id', target.dataset.id);
fd.append('csrf_token', csrfToken);
try {
const data = await postForm(fd);
if (data.success) {
statusBadge.className = `status-badge ${data.status_class}`;
statusBadge.textContent = data.status_badge;
target.textContent = data.btn_text;
const currentData = JSON.parse(row.dataset.item);
currentData.is_available = data.is_available ? 1 : 0;
row.dataset.item = JSON.stringify(currentData);
}
} catch {
alert('Failed to update status.');
} finally {
target.disabled = false;
}
return;
}
// Delete Item
if (target.classList.contains('btn-delete-item')) {
if (!confirm('Are you sure you want to delete this menu item?')) return;
const row = target.closest('tr');
const fd = new FormData();
fd.append('action', 'delete_item');
fd.append('item_id', target.dataset.id);
fd.append('csrf_token', csrfToken);
try {
const data = await postForm(fd);
if (data.success && row) {
row.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
row.style.opacity = '0';
row.style.transform = 'translateX(-10px)';
setTimeout(() => row.remove(), 200);
}
} catch {
alert('Failed to delete item.');
}
return;
}
// Delete Category
if (target.classList.contains('btn-delete-cat')) {
if (!confirm('Are you sure you want to delete this category and ALL its menu items?')) return;
const panel = document.getElementById(`cat-panel-${target.dataset.id}`);
const fd = new FormData();
fd.append('action', 'delete_category');
fd.append('category_id', target.dataset.id);
fd.append('csrf_token', csrfToken);
try {
const data = await postForm(fd);
if (data.success && panel) {
panel.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
panel.style.opacity = '0';
panel.style.transform = 'translateY(-10px)';
setTimeout(() => panel.remove(), 200);
}
} catch {
alert('Failed to delete category.');
}
}
});
function updateOrInsertItemRow(item, isNew) {
const isAvail = parseInt(item.is_available, 10) === 1;
const existingRow = document.getElementById(`item-row-${item.id}`);
if (existingRow) {
// Update existing row
existingRow.dataset.item = JSON.stringify(item);
const statusBadge = existingRow.querySelector('.status-badge');
statusBadge.className = `status-badge ${isAvail ? 'active' : 'inactive'}`;
statusBadge.textContent = isAvail ? '● Available' : '○ Sold Out / Hidden';
existingRow.querySelector('.item-name-cell').textContent = item.name;
existingRow.querySelector('.item-desc-cell').textContent = item.description || '';
existingRow.querySelector('.item-price-cell').textContent = item.price;
existingRow.querySelector('.item-sort-cell').textContent = item.sort_order || 0;
const badgeCell = existingRow.querySelector('.item-badge-cell');
badgeCell.innerHTML = item.badge
? `<span class="eyebrow" style="font-size: 0.68rem;">${escapeHtml(item.badge)}</span>`
: '<span class="muted">—</span>';
existingRow.querySelector('.btn-toggle-item').textContent = isAvail ? 'Sold Out' : 'Available';
return;
}
// Item was created or moved — insert into matching category table
const catTable = document.getElementById(`cat-table-${item.category_id}`);
if (!catTable) return;
const tbody = catTable.querySelector('tbody');
tbody.querySelector('.no-items-row')?.remove();
const tr = document.createElement('tr');
tr.id = `item-row-${item.id}`;
tr.dataset.itemId = item.id;
tr.dataset.item = JSON.stringify(item);
tr.innerHTML = `
<td><span class="status-badge ${isAvail ? 'active' : 'inactive'}">${isAvail ? '● Available' : '○ Sold Out / Hidden'}</span></td>
<td><strong class="item-name-cell">${escapeHtml(item.name)}</strong><div class="muted item-desc-cell" style="font-size: 0.82rem; margin-top: 0.2rem;">${escapeHtml(item.description || '')}</div></td>
<td class="font-mono item-price-cell" style="color: var(--gold-bright); font-weight: 500;">${escapeHtml(item.price)}</td>
<td class="item-badge-cell">${item.badge ? `<span class="eyebrow" style="font-size: 0.68rem;">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td>
<td class="font-mono item-sort-cell" style="color: var(--ink-muted); font-size: 0.8rem;">${item.sort_order || 0}</td>
<td><div class="admin-table-actions">
<button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
<button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="${item.id}">${isAvail ? 'Sold Out' : 'Available'}</button>
<button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
</div></td>
`;
tbody.appendChild(tr);
}
// Static shell for a category panel. Only text-content positions use
// escapeHtml() here — it does not escape quote characters, so it must never
// be used to build an HTML *attribute* string (see applyCategoryData below,
// which sets data-name/data-desc directly via dataset instead).
function categoryPanelHtml(category) {
return `
<div class="panel-head">
<div>
<h2 class="cat-name-heading" style="margin-bottom: 0.25rem;">
<span>${escapeHtml(category.name)}</span>
</h2>
<p class="muted cat-desc-text" style="font-size: 0.88rem;">${escapeHtml(category.description || '')}</p>
</div>
<div class="admin-table-actions">
<button type="button" class="btn btn-outline btn-sm btn-edit-cat">Edit Category</button>
<button type="button" class="btn btn-danger btn-sm btn-delete-cat">Delete Category</button>
</div>
</div>
<div class="admin-table-wrap">
<table class="admin-table" id="cat-table-${category.id}">
<thead>
<tr>
<th>Status</th>
<th>Item</th>
<th>Price</th>
<th>Tag</th>
<th>Order</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="items-tbody">
<tr class="no-items-row">
<td colspan="6" class="muted" style="text-align: center; padding: 1.5rem 0;">No items in this category yet.</td>
</tr>
</tbody>
</table>
</div>
`;
}
// Sets id/data-* on a category panel via direct property assignment (never
// via HTML-string interpolation), so arbitrary characters in the name or
// description can't break out of an attribute.
function applyCategoryData(panel, category) {
panel.id = `cat-panel-${category.id}`;
panel.dataset.catId = category.id;
panel.dataset.sortOrder = category.sort_order || 0;
const editBtn = panel.querySelector('.btn-edit-cat');
editBtn.dataset.id = category.id;
editBtn.dataset.name = category.name;
editBtn.dataset.desc = category.description || '';
editBtn.dataset.sort = category.sort_order || 0;
panel.querySelector('.btn-delete-cat').dataset.id = category.id;
}
// Keeps category panels in the same order the server would render them in
// (by sort_order, then id) after an in-place create/edit.
function resortCategoryPanels() {
const container = document.getElementById('categories-container');
const panels = [...container.querySelectorAll('.category-panel')];
panels.sort((a, b) => {
const bySortOrder = (Number(a.dataset.sortOrder) || 0) - (Number(b.dataset.sortOrder) || 0);
return bySortOrder !== 0 ? bySortOrder : (Number(a.dataset.catId) || 0) - (Number(b.dataset.catId) || 0);
});
panels.forEach((panel) => container.appendChild(panel));
}
// Keeps the "Menu Category" dropdown in the item modal in sync so a
// newly-created or renamed category is immediately usable without a reload.
function syncCategoryOption(category) {
const select = document.getElementById('item-field-cat');
let option = select.querySelector(`option[value="${category.id}"]`);
if (!option) {
option = document.createElement('option');
option.value = category.id;
select.appendChild(option);
}
option.textContent = category.name;
}
function updateOrInsertCategoryPanel(category) {
document.getElementById('empty-menu-panel')?.remove();
let panel = document.getElementById(`cat-panel-${category.id}`);
if (panel) {
panel.querySelector('.cat-name-heading span').textContent = category.name;
panel.querySelector('.cat-desc-text').textContent = category.description || '';
} else {
panel = document.createElement('div');
panel.className = 'panel category-panel';
panel.innerHTML = categoryPanelHtml(category);
document.getElementById('categories-container').appendChild(panel);
}
applyCategoryData(panel, category);
syncCategoryOption(category);
resortCategoryPanels();
}
+385
View File
@@ -0,0 +1,385 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/../inc/auth.php';
require_once __DIR__ . '/../inc/menu.php';
require_auth();
$user = get_logged_in_user();
/**
* Safely read a trimmed string from a POST payload, guarding against
* unexpected non-string input (e.g. a spoofed `name[]=` array field).
*/
function post_str(array $data, string $key, string $default = ''): string {
$value = $data[$key] ?? $default;
return is_string($value) ? trim($value) : $default;
}
function handle_save_item(array $post): array {
$categoryId = (int)($post['category_id'] ?? 0);
if (!category_exists($categoryId)) {
return ['success' => false, 'error' => 'Please choose a valid menu category.'];
}
$name = post_str($post, 'name');
$price = post_str($post, 'price');
if ($name === '' || $price === '') {
return ['success' => false, 'error' => 'Item name and price are required.'];
}
$itemId = !empty($post['item_id']) ? (int)$post['item_id'] : null;
if ($itemId !== null && ($itemId <= 0 || !get_menu_item_by_id($itemId))) {
return ['success' => false, 'error' => 'Menu item not found.'];
}
$savedId = save_menu_item([
'category_id' => $categoryId,
'name' => $name,
'description' => post_str($post, 'description'),
'price' => $price,
'badge' => post_str($post, 'badge'),
'is_available' => isset($post['is_available']) ? 1 : 0,
'sort_order' => (int)($post['sort_order'] ?? 0),
], $itemId);
return ['success' => true, 'item' => get_menu_item_by_id($savedId), 'is_new' => $itemId === null];
}
function handle_toggle_item(array $post): array {
$itemId = (int)($post['item_id'] ?? 0);
if ($itemId <= 0 || !get_menu_item_by_id($itemId)) {
return ['success' => false, 'error' => 'Menu item not found.'];
}
toggle_menu_item_availability($itemId);
$item = get_menu_item_by_id($itemId);
return [
'success' => true,
'is_available' => (bool)$item['is_available'],
'status_badge' => $item['is_available'] ? '● Available' : '○ Sold Out / Hidden',
'status_class' => $item['is_available'] ? 'active' : 'inactive',
'btn_text' => $item['is_available'] ? 'Sold Out' : 'Available',
];
}
function handle_delete_item(array $post): array {
$itemId = (int)($post['item_id'] ?? 0);
if ($itemId <= 0) {
return ['success' => false, 'error' => 'Menu item not found.'];
}
delete_menu_item($itemId);
return ['success' => true];
}
function handle_save_category(array $post): array {
$name = post_str($post, 'name');
if ($name === '') {
return ['success' => false, 'error' => 'Category name is required.'];
}
$catId = !empty($post['category_id']) ? (int)$post['category_id'] : null;
if ($catId !== null && ($catId <= 0 || !get_category_by_id($catId))) {
return ['success' => false, 'error' => 'Category not found.'];
}
$savedId = save_category([
'name' => $name,
'description' => post_str($post, 'description'),
'sort_order' => (int)($post['sort_order'] ?? 0),
], $catId);
return ['success' => true, 'category' => get_category_by_id($savedId), 'is_new' => $catId === null];
}
function handle_delete_category(array $post): array {
$catId = (int)($post['category_id'] ?? 0);
if ($catId <= 0) {
return ['success' => false, 'error' => 'Category not found.'];
}
delete_category($catId);
return ['success' => true];
}
function handle_menu_action(string $action, array $post): array {
return match ($action) {
'save_item' => handle_save_item($post),
'toggle_item' => handle_toggle_item($post),
'delete_item' => handle_delete_item($post),
'save_category' => handle_save_category($post),
'delete_category' => handle_delete_category($post),
default => ['success' => false, 'error' => 'Unknown action'],
};
}
// Handle AJAX actions (JSON response)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
header('Content-Type: application/json; charset=utf-8');
$csrfToken = $_POST['csrf_token'] ?? null;
if (!verify_csrf_token(is_string($csrfToken) ? $csrfToken : null)) {
http_response_code(403);
echo json_encode(['success' => false, 'error' => 'Session expired or invalid security token. Please refresh.']);
exit;
}
$action = is_string($_POST['action'] ?? null) ? $_POST['action'] : '';
echo json_encode(handle_menu_action($action, $_POST));
exit;
}
$categories = get_all_categories();
$menuGrouped = get_full_menu(false);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Menu Management | The Old Fitz Admin</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../styles.css">
</head>
<body data-csrf-token="<?= htmlspecialchars(get_csrf_token(), ENT_QUOTES, 'UTF-8') ?>">
<nav class="admin-nav">
<div class="container admin-nav-inner">
<a href="index.php" class="admin-brand">
<img src="../assets/knot.png" alt="" class="knot">
<span>The Old Fitz Admin</span>
</a>
<div class="admin-nav-links">
<a href="index.php">Announcements</a>
<a href="menu.php" class="active">Menu</a>
</div>
<div class="admin-user">
<span>Logged in as <strong><?= htmlspecialchars($user['username']) ?></strong></span>
<a href="../" target="_blank" rel="noopener">View Public Site ↗</a>
<a href="logout.php">Sign Out</a>
</div>
</div>
</nav>
<main class="dashboard-layout">
<div class="container">
<div class="dash-header">
<p class="eyebrow">Food &amp; Drink</p>
<h1>Online Menu Management</h1>
</div>
<div class="admin-toolbar">
<button type="button" class="btn btn-primary btn-sm" id="btn-new-item">+ Add Menu Item</button>
<button type="button" class="btn btn-outline btn-sm" id="btn-new-cat">+ Add Category</button>
</div>
<div id="categories-container">
<?php if (empty($menuGrouped)): ?>
<div class="panel" id="empty-menu-panel">
<div class="empty-state">
<p>No categories or menu items yet.</p>
<button type="button" class="btn btn-primary btn-sm" id="btn-create-first-cat">+ Create First Category</button>
</div>
</div>
<?php else: ?>
<?php foreach ($menuGrouped as $category): ?>
<div class="panel category-panel" id="cat-panel-<?= (int)$category['id'] ?>" data-cat-id="<?= (int)$category['id'] ?>" data-sort-order="<?= (int)$category['sort_order'] ?>">
<div class="panel-head">
<div>
<h2 class="cat-name-heading" style="margin-bottom: 0.25rem;">
<span><?= htmlspecialchars($category['name']) ?></span>
</h2>
<p class="muted cat-desc-text" style="font-size: 0.88rem;"><?= htmlspecialchars($category['description'] ?? '') ?></p>
</div>
<div class="admin-table-actions">
<button type="button" class="btn btn-outline btn-sm btn-edit-cat"
data-id="<?= (int)$category['id'] ?>"
data-name="<?= htmlspecialchars($category['name']) ?>"
data-desc="<?= htmlspecialchars($category['description'] ?? '') ?>"
data-sort="<?= (int)$category['sort_order'] ?>">
Edit Category
</button>
<button type="button" class="btn btn-danger btn-sm btn-delete-cat" data-id="<?= (int)$category['id'] ?>">
Delete Category
</button>
</div>
</div>
<div class="admin-table-wrap">
<table class="admin-table" id="cat-table-<?= (int)$category['id'] ?>">
<thead>
<tr>
<th>Status</th>
<th>Item</th>
<th>Price</th>
<th>Tag</th>
<th>Order</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="items-tbody">
<?php if (empty($category['items'])): ?>
<tr class="no-items-row">
<td colspan="6" class="muted" style="text-align: center; padding: 1.5rem 0;">No items in this category yet.</td>
</tr>
<?php else: ?>
<?php foreach ($category['items'] as $item): ?>
<tr id="item-row-<?= (int)$item['id'] ?>" data-item-id="<?= (int)$item['id'] ?>" data-item='<?= htmlspecialchars(json_encode($item), ENT_QUOTES, 'UTF-8') ?>'>
<td>
<?php if ($item['is_available']): ?>
<span class="status-badge active">● Available</span>
<?php else: ?>
<span class="status-badge inactive">○ Sold Out / Hidden</span>
<?php endif; ?>
</td>
<td>
<strong class="item-name-cell"><?= htmlspecialchars($item['name']) ?></strong>
<div class="muted item-desc-cell" style="font-size: 0.82rem; margin-top: 0.2rem;">
<?= htmlspecialchars($item['description'] ?? '') ?>
</div>
</td>
<td class="font-mono item-price-cell" style="color: var(--gold-bright); font-weight: 500;">
<?= htmlspecialchars($item['price']) ?>
</td>
<td class="item-badge-cell">
<?php if (!empty($item['badge'])): ?>
<span class="eyebrow" style="font-size: 0.68rem;"><?= htmlspecialchars($item['badge']) ?></span>
<?php else: ?>
<span class="muted">—</span>
<?php endif; ?>
</td>
<td class="font-mono item-sort-cell" style="color: var(--ink-muted); font-size: 0.8rem;">
<?= (int)$item['sort_order'] ?>
</td>
<td>
<div class="admin-table-actions">
<button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
<button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="<?= (int)$item['id'] ?>">
<?= $item['is_available'] ? 'Sold Out' : 'Available' ?>
</button>
<button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="<?= (int)$item['id'] ?>">
Delete
</button>
</div>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</main>
<!-- Modal Backdrop: Menu Item -->
<div class="admin-modal-backdrop" id="modal-item-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-item-title">
<div class="admin-modal">
<div class="modal-header">
<h2 id="modal-item-title">✨ Add Menu Item</h2>
<button type="button" class="modal-close" aria-label="Close dialog" id="btn-close-item-modal">&times;</button>
</div>
<form id="form-item">
<input type="hidden" name="action" value="save_item">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars(get_csrf_token()) ?>">
<input type="hidden" name="item_id" id="item-field-id" value="0">
<div class="form-grid">
<div class="form-group full-width">
<label class="checkbox-label checkbox-label-lg">
<input type="checkbox" name="is_available" id="item-field-available" value="1" checked>
<strong>Available (Uncheck to Mark as Sold Out / Hidden)</strong>
</label>
</div>
<div class="form-group">
<label for="item-field-cat">Menu Category</label>
<select id="item-field-cat" name="category_id" class="form-control" required>
<?php foreach ($categories as $cat): ?>
<option value="<?= (int)$cat['id'] ?>"><?= htmlspecialchars($cat['name']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="item-field-name">Item Name</label>
<input type="text" id="item-field-name" name="name" class="form-control" placeholder="e.g. Fish & Chips" required>
</div>
<div class="form-group">
<label for="item-field-price">Price</label>
<input type="text" id="item-field-price" name="price" class="form-control" placeholder="e.g. $15 or $7 / pint" required>
</div>
<div class="form-group">
<label for="item-field-badge">Badge / Tag (Optional)</label>
<input type="text" id="item-field-badge" name="badge" class="form-control" placeholder="e.g. Local Favorite, On Tap">
</div>
<div class="form-group full-width">
<label for="item-field-desc">Description</label>
<textarea id="item-field-desc" name="description" class="form-control" placeholder="Ingredients, preparation, flavor notes..."></textarea>
</div>
<div class="form-group">
<label for="item-field-sort">Sort Order</label>
<input type="number" id="item-field-sort" name="sort_order" class="form-control" value="0">
</div>
</div>
<div class="form-actions" style="display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem;">
<button type="submit" class="btn btn-primary" id="btn-save-item">Save Item</button>
<button type="button" class="btn btn-outline" id="btn-cancel-item">Cancel</button>
</div>
</form>
</div>
</div>
<!-- Modal Backdrop: Category -->
<div class="admin-modal-backdrop" id="modal-cat-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-cat-title">
<div class="admin-modal">
<div class="modal-header">
<h2 id="modal-cat-title">✨ Add Category</h2>
<button type="button" class="modal-close" aria-label="Close dialog" id="btn-close-cat-modal">&times;</button>
</div>
<form id="form-cat">
<input type="hidden" name="action" value="save_category">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars(get_csrf_token()) ?>">
<input type="hidden" name="category_id" id="cat-field-id" value="0">
<div class="form-grid">
<div class="form-group full-width">
<label for="cat-field-name">Category Name</label>
<input type="text" id="cat-field-name" name="name" class="form-control" placeholder="e.g. Fare to Share" required>
</div>
<div class="form-group full-width">
<label for="cat-field-desc">Description / Subtitle (Optional)</label>
<input type="text" id="cat-field-desc" name="description" class="form-control" placeholder="e.g. Small bites and shareable plates.">
</div>
<div class="form-group">
<label for="cat-field-sort">Sort Order</label>
<input type="number" id="cat-field-sort" name="sort_order" class="form-control" value="0">
</div>
</div>
<div class="form-actions" style="display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem;">
<button type="submit" class="btn btn-primary" id="btn-save-cat">Save Category</button>
<button type="button" class="btn btn-outline" id="btn-cancel-cat">Cancel</button>
</div>
</form>
</div>
</div>
<script src="menu.js" defer></script>
</body>
</html>