<section class="registration-table-container">
  <h1>Manage Registrations</h1>
  <table id="registration-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>User ID</th>
        <th>Shift ID</th>
        <th>Answer</th>
        <th>Plan ID</th>
        <th>Plan From Date</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <!-- rows dynamically loaded by js -->
    </tbody>
  </table>
</section>

<script>
    const currentAdminID = <?= json_encode($_SESSION['userID']) ?>;

  document.addEventListener('DOMContentLoaded', async () => {
    const tbody = document.querySelector('#registration-table tbody');

    // fetch all registrations modifiable (only where plan.fromDate >= 1 week from now)
    const res = await fetch('Functions/Registrations/getEditableRegistrations.php');
    const data = await res.json();

    if (data.status !== 'success') {
      showMessage('error', 'Failed to load registrations');
      return;
    }

    const registrations = data.registrations;
    /* console.log(registrations); */

    registrations.forEach(reg => {
      const tr = document.createElement('tr');
      tr.dataset.id = reg.pk_register;

      const isSelf = parseInt(reg.fk_user) === parseInt(currentAdminID);

      const answerOptions = [
        // add a "None" option if there's no selected answer
        `<option value="" ${!reg.fk_answer ? 'selected' : ''}>None</option>`,

        // add each available answer as an option, mark it selected if it matches current answer
        ...reg.available_answers.map(ans =>
          `<option value="${ans.pk_answer}" ${ans.pk_answer == reg.fk_answer ? 'selected' : ''}>${ans.label}</option>`
        )
      ].join('');

      tr.innerHTML = `
        <td>${reg.pk_register}</td>
        <td>${reg.fk_user}</td>
        <td><input type="number" class="fkShift" value="${reg.fk_shift}"></td>
        <td>
          <select class="fkAnswer">
            ${answerOptions}
          </select>
        </td>
        <td>${reg.pk_plan}</td>
        <td>${reg.fromDate}</td>
        <td>
          <button class="btn-edit">Edit</button>
          <button class="btn-update" style="display:none;">Save</button>
          <button class="btn-delete">Delete</button>
        </td>
      `;


      tbody.appendChild(tr);
    });

     tbody.addEventListener('click', async e => {
      const target = e.target;
      const tr = target.closest('tr');
      if (!tr) return;

      const id = tr.dataset.id;

      if (target.classList.contains('btn-edit')) {
        tr.querySelectorAll('input, select').forEach(el => el.disabled = false);
        target.style.display = 'none';
        tr.querySelector('.btn-update').style.display = 'inline-block';
      }

      if (target.classList.contains('btn-update')) {
        const fk_shift = tr.querySelector('.fkShift').value;
        const fk_answer = tr.querySelector('.fkAnswer').value;

        const updateRes = await fetch('Functions/Registration/updateRegistration.php', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({ pk_register: id, fk_shift, fk_answer })
        });
        const updateData = await updateRes.json();

        if (updateData.status === 'success') {
          showMessage('success', 'Registration updated');
          tr.querySelectorAll('input, select').forEach(el => el.disabled = true);
          target.style.display = 'none';
          tr.querySelector('.btn-edit').style.display = 'inline-block';
        } else {
          showMessage('error', 'Update failed: ' + updateData.message);
        }
      }

      if (target.classList.contains('btn-delete')) {
        if (!confirm('Are you sure you want to delete this registration?')) return;

        const deleteRes = await fetch('Functions/Registration/deleteRegistration.php', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({ pk_register: id })
        });
        const deleteData = await deleteRes.json();

        if (deleteData.status === 'success') {
          tr.remove();
        } else {
          showMessage('error', 'Delete failed: ' + deleteData.message);
        }
      }
    });
  });
</script>