inventory.js

document.addEventListener('DOMContentLoaded', () => {
  const tbody = document.getElementById('inventoryBody');
  const modal = document.getElementById('inventoryModal');
  const form = document.getElementById('actionForm');

  // Buttons
  const editBtn = document.getElementById('editBtn');
  const saveBtn = document.getElementById('saveBtn');
  const cancelBtn = document.getElementById('cancelBtn');
  const deleteBtn = document.getElementById('deleteBtn');
  const sellBtn = document.getElementById('sellBtn');
  const useBtn = document.getElementById('useBtn');

  let currentId = null;

  async function loadInventory() {
    const res = await fetch('/api/inventory');
    const items = await res.json();
    tbody.innerHTML = items.map(item => `
      <tr data-id="${item.id}">
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.type}</td>
        <td>${item.color}</td>
        <td>${item.quantity}</td>
        <td>${item.price}</td>
        <td>${item.note || ''}</td>
        <td><button class="action-btn">Action</button></td>
      </tr>
    `).join('');

    document.querySelectorAll('.action-btn').forEach(btn => {
      btn.onclick = openModal;
    });
  }

  function openModal(e) {
    const row = e.target.closest('tr');
    currentId = row.dataset.id;

    // Fill form values
    form.id.value = currentId;
    form.name.value = row.children[1].textContent;
    form.type.value = row.children[2].textContent;
    form.color.value = row.children[3].textContent;
    form.quantity.value = row.children[4].textContent;
    form.price.value = row.children[5].textContent;
    form.note.value = row.children[6].textContent;

    setFormDisabled(true);
    saveBtn.style.display = 'none';
    modal.style.display = 'block';
  }

  function setFormDisabled(disabled) {
    form.name.disabled = disabled;
    form.type.disabled = disabled;
    form.color.disabled = disabled;
    form.quantity.disabled = disabled;
    form.price.disabled = disabled;
    form.note.disabled = disabled;
  }

  // Cancel closes modal
  cancelBtn.onclick = () => {
    modal.style.display = 'none';
    setFormDisabled(true);
    saveBtn.style.display = 'none';
  };

  // Edit button - enables fields
  editBtn.onclick = () => {
    setFormDisabled(false);
    saveBtn.style.display = 'inline-block';
  };

  // Save edited item
  form.onsubmit = async (e) => {
    e.preventDefault();

    const updated = {
      name: form.name.value,
      type: form.type.value,
      color: form.color.value,
      quantity: parseInt(form.quantity.value),
      price: parseFloat(form.price.value),
      note: form.note.value
    };

    const res = await fetch(`/api/inventory/${currentId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updated)
    });

    if (res.ok) {
      modal.style.display = 'none';
      await loadInventory();
    } else {
      alert('Failed to update.');
    }
  };

  // Delete
  deleteBtn.onclick = async () => {
    if (!confirm('Delete this item?')) return;
    const res = await fetch(`/api/inventory/${currentId}`, { method: 'DELETE' });
    if (res.ok) {
      modal.style.display = 'none';
      await loadInventory();
    } else {
      alert('Delete failed.');
    }
  };

  // Sell
  sellBtn.onclick = async () => {
    const qty = prompt("Quantity to sell:", 1);
    const quantity = parseInt(qty, 10);
    if (!qty || isNaN(quantity) || quantity <= 0) return alert('Invalid quantity');

    const res = await fetch(`/api/inventory/${currentId}/sell`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ quantity, payerType: "non-member" })
    });

    if (res.ok) {
      modal.style.display = 'none';
      await loadInventory();
    } else {
      alert('Sell failed.');
    }
  };

  // Use
  useBtn.onclick = async () => {
    const qty = prompt("Quantity to use:", 1);
    const quantity = parseInt(qty, 10);
    if (!qty || isNaN(quantity) || quantity <= 0) return alert('Invalid quantity');

    const res = await fetch(`/api/inventory/${currentId}/use`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ quantity })
    });

    if (res.ok) {
      modal.style.display = 'none';
      await loadInventory();
    } else {
      alert('Use failed.');
    }
  };

  // Initial load
  loadInventory();
});