const editModalEl = document.getElementById('editModal');
const editModal = new bootstrap.Modal(editModalEl);

const modalIndex = document.getElementById('modal-index');
const modalInitial = document.getElementById('modal-initial');
const modalUsed = document.getElementById('modal-used');
const modalColor = document.getElementById('modal-color');
const adjustAmount = document.getElementById('adjust-amount');
const adjustOperation = document.getElementById('adjust-operation');
const applyAdjustmentBtn = document.getElementById('apply-adjustment');

function openModal(index) {
  fetch('/api/spool/' + index)
    .then(res => res.json())
    .then(spool => {
      modalIndex.value = index;
      modalInitial.value = spool.initial;
      modalUsed.value = spool.used.toFixed(1);
      modalColor.value = spool.color;
      adjustAmount.value = '';
      adjustOperation.value = 'add';
      editModal.show();
    });
}

// Apply + or - adjustment on Used field
applyAdjustmentBtn.addEventListener('click', () => {
  let amount = parseFloat(adjustAmount.value);
  if (isNaN(amount) || amount <= 0) {
    alert('Please enter a positive number to adjust.');
    return;
  }

  let usedVal = parseFloat(modalUsed.value) || 0;

  if (adjustOperation.value === 'add') {
    usedVal += amount;
  } else {
    usedVal -= amount;
    if (usedVal < 0) usedVal = 0;
  }

  modalUsed.value = usedVal.toFixed(1);
  adjustAmount.value = '';
});

// Attach openModal to window so inline onclick works:
window.openModal = openModal;