script.js

function showPage(pageId) {
  document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'));
  document.getElementById(pageId).classList.remove('hidden');
}

// Login
document.querySelector('#login form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const email = e.target.querySelector('input[type="email"]').value;
  const password = e.target.querySelector('input[type="password"]').value;

  const response = await fetch('http://localhost:5000/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password })
  });
  const data = await response.json();

  if (data.success) {
    localStorage.setItem('token', data.token);
    showPage('dashboard');
  } else {
    alert("Login failed: " + data.error);
  }
});

// Register
document.querySelector('#register form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const name = e.target.querySelector('input[placeholder="Name"]').value;
  const email = e.target.querySelector('input[placeholder="Email"]').value;
  const password = e.target.querySelector('input[placeholder="Password"]').value;

  const response = await fetch('http://localhost:5000/register', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, email, password })
  });
  const data = await response.json();

  if (data.success) {
    alert("Registration successful! Please log in.");
    showPage('login');
  } else {
    alert("Registration failed: " + data.error);
  }
});

// Add item (protected)
document.getElementById('itemForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  const itemName = document.getElementById('itemName').value;
  const token = localStorage.getItem('token');

  const response = await fetch('http://localhost:5000/item', {
    method: 'POST',
    headers: { 
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    },
    body: JSON.stringify({ itemName })
  });
  const data = await response.json();

  if (data.success) {
document.getElementById('qrContainer').innerHTML = `
  <h3>QR for ${itemName}</h3>
  <img src="https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=${encodeURIComponent(data.qrCode)}" alt="QR Code">`;
  } else {
    alert("Failed to add item: " + data.error);
  }
});