{HEADER_HTML}

{HEADER_MIDDLE_HTML}
<link rel="stylesheet" type="text/css" href="./assets/css/kanban.css">

  <div class="container-fluid px-4" style="border-bottom: 1px solid #dddddd;padding: 0px 0 10px 0;margin: -10px 0 0 0;">
    <div class="d-flex align-items-center">
      <h1 class="kanban-title m-0">Candidates in process</h1>
      <a href="recruiter_kanban.php{selected_parameter}" class="ms-auto me-4">
        <i class="bi bi-arrow-left"></i> Back
      </a>
      <div>{filter}</div>
    </div>
  </div>

  <div class="container-fluid px-4 mt-4">
    {process_candidates_html}
  <!-- Modal for Applicant Details -->
  <div class="modal fade" id="applicantModal" tabindex="-1" aria-labelledby="applicantModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="applicantModalLabel">Applicant Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="applicantModalBody">
          Loading...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Function to view applicant details
    function viewApplicantDetails(appId) {
      const modal = new bootstrap.Modal(document.getElementById('applicantModal'));

      // Set loading state
      document.getElementById('applicantModalBody').innerHTML = 'Loading...';

      // Show the modal
      modal.show();

      // Fetch applicant details
      fetch('get_applicant_details.php?app_id=' + appId)
        .then(response => response.text())
        .then(data => {
          document.getElementById('applicantModalBody').innerHTML = data;
        })
        .catch(error => {
          document.getElementById('applicantModalBody').innerHTML = 'Error loading applicant details: ' + error;
        });
    }

    // Function to update candidate status
    function updateCandidateStatus(appId, selection) {
      const action = selection === 'Yes' ? 'select' : 'reject';
      if (confirm(`Are you sure you want to ${action} this candidate?`)) {
        fetch('update_selection.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: `app_id=${appId}&selection=${selection}`
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            alert(`Candidate has been ${action}ed.`);
            location.reload();
          } else {
            alert(data.message || `Error ${action}ing candidate`);
          }
        })
        .catch(error => {
          alert(`Error ${action}ing candidate`);
          console.error('Error:', error);
        });
      }
    }
  </script>