theoldfitz/admin/menu.js

// 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 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 || '';
    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 = '';
    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');

  if (catData) {
    title.textContent = '✏️ Edit Category';
    idField.value = catData.id || 0;
    nameField.value = catData.name || '';
    descField.value = catData.description || '';
  } else {
    title.textContent = '✨ Add Category';
    idField.value = 0;
    nameField.value = '';
    descField.value = '';
  }

  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);

// 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('.item-row');
    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
    });
    return;
  }

  // Move Item Up/Down
  if (target.classList.contains('btn-move-item')) {
    const direction = target.dataset.direction;
    const row = target.closest('.item-row');
    const rowsContainer = row.parentElement;
    const sibling = direction === 'up' ? row.previousElementSibling : row.nextElementSibling;
    if (!sibling) return; // already at this edge; button should be disabled anyway

    target.disabled = true;
    const fd = new FormData();
    fd.append('action', 'move_item');
    fd.append('item_id', row.dataset.itemId);
    fd.append('direction', direction);
    fd.append('csrf_token', csrfToken);

    try {
      const data = await postForm(fd);
      if (!data.success) {
        alert(data.error || 'Failed to reorder item.');
        target.disabled = false;
        return;
      }
      if (direction === 'up') {
        rowsContainer.insertBefore(row, sibling);
      } else {
        rowsContainer.insertBefore(sibling, row);
      }
      // Re-derives disabled state from DOM position rather than re-enabling
      // `target` unconditionally, since the swap may have just moved it
      // onto an edge (e.g. into the first/last slot) where it should stay disabled.
      refreshMoveButtonStates(rowsContainer);
    } catch {
      alert('Network error. Please try again.');
      target.disabled = false;
    }
    return;
  }

  // Move Category Up/Down
  if (target.classList.contains('btn-move-cat')) {
    const direction = target.dataset.direction;
    const panel = target.closest('.category-panel');
    const container = panel.parentElement;
    const sibling = direction === 'up' ? panel.previousElementSibling : panel.nextElementSibling;
    if (!sibling) return;

    target.disabled = true;
    const fd = new FormData();
    fd.append('action', 'move_category');
    fd.append('category_id', target.dataset.id);
    fd.append('direction', direction);
    fd.append('csrf_token', csrfToken);

    try {
      const data = await postForm(fd);
      if (!data.success) {
        alert(data.error || 'Failed to reorder category.');
        target.disabled = false;
        return;
      }
      if (direction === 'up') {
        container.insertBefore(panel, sibling);
      } else {
        container.insertBefore(sibling, panel);
      }
      refreshCategoryMoveButtonStates();
    } catch {
      alert('Network error. Please try again.');
      target.disabled = false;
    }
    return;
  }

  // Toggle Availability — the status badge itself is the button now, so
  // `target` IS the badge; no separate "Mark Sold Out" control to sync.
  if (target.classList.contains('btn-toggle-item')) {
    const row = target.closest('.item-row');
    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) {
        target.className = `status-badge btn-toggle-item ${data.status_class}`;
        target.textContent = data.status_badge;
        target.title = `Click to mark as ${data.is_available ? 'sold out' : 'available'}`;

        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('.item-row');
    const rowsContainer = row?.parentElement;

    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();
          refreshMoveButtonStates(rowsContainer);
        }, 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();
          refreshCategoryMoveButtonStates();
        }, 200);
      }
    } catch {
      alert('Failed to delete category.');
    }
  }
});

// Sets the up/down move buttons' disabled state from each row's actual DOM
// position, rather than tracking indices by hand — first row can't move up,
// last can't move down, everything in between can do either. Call this
// after any insert/remove/reorder in a category's item-rows container.
function refreshMoveButtonStates(rowsContainer) {
  if (!rowsContainer) return;
  const rows = [...rowsContainer.querySelectorAll('.item-row[data-item-id]')];
  rows.forEach((row, index) => {
    const upBtn = row.querySelector('.btn-move-item[data-direction="up"]');
    const downBtn = row.querySelector('.btn-move-item[data-direction="down"]');
    if (upBtn) upBtn.disabled = index === 0;
    if (downBtn) downBtn.disabled = index === rows.length - 1;
  });
}

// Same idea as refreshMoveButtonStates(), for category panels.
function refreshCategoryMoveButtonStates() {
  const panels = [...document.querySelectorAll('#categories-container .category-panel')];
  panels.forEach((panel, index) => {
    const upBtn = panel.querySelector('.btn-move-cat[data-direction="up"]');
    const downBtn = panel.querySelector('.btn-move-cat[data-direction="down"]');
    if (upBtn) upBtn.disabled = index === 0;
    if (downBtn) downBtn.disabled = index === panels.length - 1;
  });
}

function itemRowHtml(item, isAvail) {
  const badgeHtml = item.badge ? `<span class="menu-item-badge">${escapeHtml(item.badge)}</span>` : '';
  return `
    <div data-label="Status"><button type="button" class="status-badge btn-toggle-item ${isAvail ? 'active' : 'inactive'}" data-id="${item.id}" title="Click to mark as ${isAvail ? 'sold out' : 'available'}">${isAvail ? '● Available' : '○ Sold Out'}</button></div>
    <div data-label="Item"><span class="item-name-row"><strong class="item-name-cell">${escapeHtml(item.name)}</strong>${badgeHtml}</span><div class="muted item-desc-cell">${escapeHtml(item.description || '')}</div></div>
    <div class="font-mono item-price-cell" data-label="Price">${escapeHtml(item.price)}</div>
    <div data-label="Actions"><div class="row-actions">
      <div class="action-stack">
        <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="up" aria-label="Move ${escapeHtml(item.name)} up">↑</button>
        <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move ${escapeHtml(item.name)} down">↓</button>
      </div>
      <div class="action-stack">
        <button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
        <button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
      </div>
    </div></div>
  `;
}

function updateOrInsertItemRow(item, isNew) {
  const isAvail = parseInt(item.is_available, 10) === 1;
  let existingRow = document.getElementById(`item-row-${item.id}`);

  // An edit can reassign an item to a different category — when that
  // happens the row needs to move grids, not just update in place, so
  // detach it here and let it fall through to the insert path below.
  if (existingRow && existingRow.closest('.item-rows')?.id !== `item-rows-${item.category_id}`) {
    const oldRowsContainer = existingRow.parentElement;
    existingRow.remove();
    existingRow = null;
    refreshMoveButtonStates(oldRowsContainer);
    if (oldRowsContainer && !oldRowsContainer.querySelector('.item-row[data-item-id]')) {
      oldRowsContainer.innerHTML = '<p class="muted item-grid-empty">No items in this category yet.</p>';
    }
  }

  if (existingRow) {
    // Update existing row
    existingRow.dataset.item = JSON.stringify(item);
    const statusBadge = existingRow.querySelector('.status-badge');
    statusBadge.className = `status-badge btn-toggle-item ${isAvail ? 'active' : 'inactive'}`;
    statusBadge.textContent = isAvail ? '● Available' : '○ Sold Out';
    statusBadge.title = `Click to mark as ${isAvail ? 'sold out' : 'available'}`;

    existingRow.querySelector('.item-name-cell').textContent = item.name;
    existingRow.querySelector('.item-desc-cell').textContent = item.description || '';
    existingRow.querySelector('.item-price-cell').textContent = item.price;

    const nameRow = existingRow.querySelector('.item-name-row');
    nameRow.querySelector('.menu-item-badge')?.remove();
    if (item.badge) {
      nameRow.insertAdjacentHTML('beforeend', `<span class="menu-item-badge">${escapeHtml(item.badge)}</span>`);
    }

    return;
  }

  // Item was created or moved to this category — it always joins at the
  // end (see next_item_sort_order() server-side), so just append it.
  const rowsContainer = document.getElementById(`item-rows-${item.category_id}`);
  if (!rowsContainer) return;

  rowsContainer.querySelector('.item-grid-empty')?.remove();

  const row = document.createElement('div');
  row.className = 'item-row';
  row.id = `item-row-${item.id}`;
  row.dataset.itemId = item.id;
  row.dataset.item = JSON.stringify(item);
  row.innerHTML = itemRowHtml(item, isAvail);

  rowsContainer.appendChild(row);
  refreshMoveButtonStates(rowsContainer);
}

// 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">
      <h2 class="cat-name-heading">
        <span>${escapeHtml(category.name)}</span>
      </h2>
      <p class="muted cat-desc-text">${escapeHtml(category.description || '')}</p>
      <div class="row-actions">
        <div class="action-stack">
          <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="${category.id}" aria-label="Move category up">↑</button>
          <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="${category.id}" aria-label="Move category down">↓</button>
        </div>
        <div class="action-stack">
          <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>

    <div class="item-grid-wrap">
      <div class="item-grid-head" aria-hidden="true">
        <span class="col-status">Status</span>
        <span class="col-item">Item</span>
        <span class="col-price">Price</span>
        <span class="col-actions">Actions</span>
      </div>
      <div class="item-rows" id="item-rows-${category.id}">
        <p class="muted item-grid-empty">No items in this category yet.</p>
      </div>
    </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 || '';

  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();
  refreshCategoryMoveButtonStates();
}