admin.js

// =======================
// Load members from API and populate table
// =======================
async function loadMembers() {
  try {
    const res = await fetch('/api/members');
    if (!res.ok) throw new Error('Failed to fetch members');

    const members = await res.json();
    const tbody = document.getElementById('membersBody');
    tbody.innerHTML = members
      .map(
        (m) => `

      <tr>

        <td>${m.id || ''}</td>

        <td>${m.name}</td>

        <td>${m.address || ''}</td>

        <td>${m.email}</td>

        <td>${m.phone || ''}</td>

                <td><button onclick="openMemberModal(${m.id})">Action</button></td>

      </tr>`
      )
      .join('');
  } catch (err) {
    console.error(err);
  }
}

// =======================
// Fetch and show the next available member ID
// =======================
async function previewNextId() {
  try {
    const res = await fetch('/api/members/next-id');
    if (!res.ok) throw new Error('Failed to fetch next ID');

    const data = await res.json();
    const previewEl = document.getElementById('nextIdPreview');
    if (previewEl) previewEl.textContent = data.nextId;
  } catch (err) {
    console.error(err);
  }
}

// =======================
// Handle Add Member form submission
// =======================
document.getElementById('memberForm').addEventListener('submit', async (e) => {
  e.preventDefault();

  const newMember = {
    name: document.getElementById('name').value.trim(),
    address: document.getElementById('address').value.trim(),
    email: document.getElementById('email').value.trim(),
    phone: document.getElementById('phone').value.trim()
  };

  try {
    const res = await fetch('/api/members', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newMember)
    });

    if (!res.ok) throw new Error('Failed to add member');

    document.getElementById('memberForm').reset();
    await loadMembers();
    await previewNextId();
  } catch (err) {
    console.error(err);
    alert('Error saving member');
  }
});

// =======================
// Export members as JSON by redirecting to API endpoint
// =======================
document.getElementById('exportMembers').addEventListener('click', () => {
  window.location.href = '/api/members/export';
});

// =======================
// Initialize on page load
// =======================
window.addEventListener('DOMContentLoaded', () => {
  loadMembers();
  previewNextId();
});

// =======================
// Tabs (optional)
// =======================
// Admin main tab switching
document.querySelectorAll('.admin-tabs button').forEach(btn => {
  btn.addEventListener('click', () => {
    // Remove active class from all buttons and hide all tabs
    document.querySelectorAll('.admin-tabs button').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.admin-tab').forEach(tab => (tab.style.display = 'none'));

    // Activate clicked button and show corresponding tab
    btn.classList.add('active');
    const tabId = btn.dataset.tab;
    document.getElementById(tabId).style.display = 'block';
  });
});

// Toggle visibility helper for forms with button label change
function setupToggle(buttonId, containerId, defaultLabel = "Add", closeLabel = "Close") {
  const button = document.getElementById(buttonId);
  const container = document.getElementById(containerId);

  button.addEventListener('click', () => {
    const isVisible = container.style.display === 'block';
    container.style.display = isVisible ? 'none' : 'block';
    button.textContent = isVisible ? defaultLabel : `${closeLabel} ${defaultLabel}`;
  });
}

// Setup toggles for member, transaction, and item forms
setupToggle("toggleMemberForm", "memberFormContainer", "Add Member");
setupToggle("toggleTransactionForm", "transactionFormContainer", "Add Transaction");
setupToggle("toggleItemForm", "itemFormContainer", "Add Item");

// Accounting sub-tabs view toggle
document.querySelectorAll('#accountingTabs button').forEach(button => {
  button.addEventListener('click', () => {
    // Remove active class from all accounting tab buttons
    document.querySelectorAll('#accountingTabs button').forEach(b => b.classList.remove('active'));

    // Add active class to clicked button
    button.classList.add('active');

    const selected = button.dataset.tab;

    // Hide all accounting views initially
    document.querySelectorAll('.accounting-tab-view').forEach(view => {
      view.style.display = 'none';
    });

    // Show all or a specific accounting view
    if (selected === 'all') {
      document.querySelectorAll('.accounting-tab-view').forEach(view => {
        view.style.display = 'block';
      });
    } else {
      const view = document.getElementById(`view-${selected}`);
      if (view) view.style.display = 'block';
    }
  });
});

///////////////////////////////////////
///////////////////////////////////////////////
// ================= INVENTORY =================

let selectedMember = null;

window.openMemberModal = async function (id) {
  const res = await fetch('/api/members');
  const members = await res.json();
  selectedMember = members.find(m => m.id === id);

  if (!selectedMember) return alert('Member not found');

  // Populate modal form
  document.getElementById('editMemberId').value = selectedMember.id;
  document.getElementById('editMemberName').value = selectedMember.name;
  document.getElementById('editMemberEmail').value = selectedMember.email;
  document.getElementById('editMemberPhone').value = selectedMember.phone || '';
  document.getElementById('editMemberAddress').value = selectedMember.address || '';

  // Show modal
  document.getElementById('memberModal').classList.remove('hidden');
};

document.getElementById('closeModalBtn').addEventListener('click', () => {
  document.getElementById('memberModal').classList.add('hidden');
});

document.getElementById('cancelModalBtn').addEventListener('click', () => {
  document.getElementById('memberModal').classList.add('hidden');
});

// Save edited member
document.getElementById('editMemberForm').addEventListener('submit', async e => {
  e.preventDefault();

  const updated = {
    name: document.getElementById('editMemberName').value,
    email: document.getElementById('editMemberEmail').value,
    phone: document.getElementById('editMemberPhone').value,
    address: document.getElementById('editMemberAddress').value
  };

  const id = document.getElementById('editMemberId').value;

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

  if (!res.ok) return alert('Failed to update member');

  document.getElementById('memberModal').classList.add('hidden');
  loadMembers();
});

// Delete member
document.getElementById('deleteMemberBtn').addEventListener('click', async () => {
  if (!confirm('Are you sure you want to delete this member?')) return;

  const id = document.getElementById('editMemberId').value;

  const res = await fetch(`/api/members/${id}`, {
    method: 'DELETE'
  });

  if (!res.ok) return alert('Failed to delete member');

  document.getElementById('memberModal').classList.add('hidden');
  loadMembers();
});