<section class="employee-table-container">
  <h1>Manage Employees</h1>
  <table id="employee-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Admin?</th>
        <th>Active?</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <!-- rows will be loaded with javascript -->
    </tbody>
  </table>
</section>

<script>
    const currentAdminID = <?= json_encode($_SESSION['userID']) ?>;   // the admin who is logged in

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

      // load all employees, by getting results from the datbase by fetching data from getEmployees.php file
      fetch('Functions/Employees/getEmployees.php')
          .then(res => res.json())
          .then(data => {
            data.forEach(employee => {
                const tr = document.createElement('tr');
                tr.dataset.id = employee.pk_userID;

                const isSelf = parseInt(employee.pk_userID) === parseInt(currentAdminID);

                tr.innerHTML = `
                <td>${employee.pk_userID}</td>
                <td><input class="firstName" type="text" value="${employee.firstName}" disabled /></td>
                <td><input class="lastName" type="text" value="${employee.lastName}" disabled /></td>
                <td><input class="email" type="email" value="${employee.email}" disabled /></td>
                <td><input type="checkbox" class="isAdmin"  ${parseInt(employee.isAdmin)  === 1 ? 'checked' : ''} disabled /></td>
                <td><input type="checkbox" class="isActive" ${parseInt(employee.isActive) === 1 ? 'checked' : ''} disabled /></td>
                <td>
                  <!-- show Edit and Delete buttons of all other users except of the one who is currently logged in -->
                  ${!isSelf ? `
                    <button class="btn-edit">Edit</button>
                    <button class="btn-update" style="display: none;">Save</button>
                    <button class="btn-delete">Delete</button>
                  ` : '<img src="./Assets/Images/Icons/edit_prohibited.svg" alt="Edit prohibited">'}
                </td>
                `;
                tbody.appendChild(tr);
            });
          });

      // enable editing for a specific employee row by clicking the edit button
      tbody.addEventListener('click', e => {
          if (!e.target.matches('.btn-edit')) return;
          const row = e.target.closest('tr');
          row.querySelectorAll('input').forEach(input => input.disabled = false);
          row.querySelector('.btn-update').style.display = 'inline-block';
          e.target.style.display = 'none'; // hide the edit button
      });

      // update certain employee by clicking save button and updating an employees information
      tbody.addEventListener('click', e => {
          if (!e.target.matches('.btn-update')) return;
          const row = e.target.closest('tr');
          const id   = row.dataset.id;
          const firstName = row.querySelector('.firstName').value;
          const lastName  = row.querySelector('.lastName').value;
          const email     = row.querySelector('.email').value;
          const isAdmin   = row.querySelector('.isAdmin').checked ? 1 : 0;
          const isActive  = row.querySelector('.isActive').checked ? 1 : 0;
          const fullName  = firstName + ' ' + lastName;
          const body = `id=${id}`
                  + `&firstName=${firstName}`
                  + `&lastName=${lastName}`
                  + `&email=${email}`
                  + `&isAdmin=${isAdmin}`
                  + `&isActive=${isActive}`;

          fetch('Functions/Employees/updateEmployee.php', {
          method: 'POST',
          headers: {'Content-Type':'application/x-www-form-urlencoded'},
          body
          })
          .then(result => result.json())
          .then(response => {
            if (response.status === 'success') {
                showMessage('success', `Employee ${fullName} updated successfully.`);
                // disable fields again after saving
                row.querySelectorAll('input').forEach(input => input.disabled = true);
                row.querySelector('.btn-edit').style.display = 'inline-block';
                e.target.style.display = 'none'; // hide save button again
            } else {
                showMessage('error', `Failed to update employee ${fullName}: ${response.message}`);
            }
          })
          .catch(() => showMessage('error', `Update failed for employee ${fullName}.`));
      });

      // delete certain employee by clicking delete button and deleting an employee
      tbody.addEventListener('click', e => {
          if (!e.target.matches('.btn-delete')) return;
          const row = e.target.closest('tr');
          const id  = row.dataset.id;
          const firstName = row.querySelector('.firstName').value;
          const lastName  = row.querySelector('.lastName').value;
          const fullName  = firstName + ' ' + lastName;

          const confirmed = confirm(`Are you sure you want to delete employee ${fullName}?`);
          if (!confirmed) return;

          fetch('Functions/Employees/deleteEmployee.php', {
          method: 'POST',
          headers:{'Content-Type':'application/x-www-form-urlencoded'},
          body: `id=${id}`
          })
          .then(result => result.json())
          .then(response => {
            if (response.status === 'success') {
              row.remove();
              showMessage('success', `Employee ${fullName} deleted successfully.`);
            } else {
              showMessage('error', `Failed to delete employee ${fullName}: ${response.message}`);
            }
          })
          .catch(() => showMessage('error', `Delete failed for employee ${fullName}.`));
      });
    });
</script>