{HEADER_HTML}
{HEADER_MIDDLE_HTML}

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

<!-- Add toast container -->
<div class="toast-container"></div>

<div class="container-fluid px-4" style="border-bottom: 1px solid #dddddd;padding: 0 0 13px 0;">
  <div class="row align-items-center">
    <!-- Filters -->
  <div class="col-auto">
      {form_html}
  </div>
      <div class="col-md-7">
          <div class="d-flex">
            <a href="selected_candidates.php{selected_parameter}" class="text-decoration-none me-3 status-link" style="color: #2cab87 !important;border: 1px solid;border-radius: 0.475rem !important;padding: 0.3rem 0.5rem;">
                <span class="mb-2"><i class="bi bi-check"></i> Selected: </span>
                <span class="">{selected_count}</span>
            </a>
            <a href="rejected_candidates.php{selected_parameter}" class="text-decoration-none me-3 status-link" style="color: #d14b4b!important;border: 1px solid;border-radius: 0.475rem !important;padding: 0.3rem 0.5rem;">
              <span class=""><i class="bi bi-x"></i> Rejected</span>
              <span class="">{rejected_count}</span>
            </a>
            <a href="process_candidates.php{selected_parameter}" class="text-decoration-none status-link" style="color: #df7a3c!important;border: 1px solid;border-radius: 0.475rem !important;padding: 0.3rem 0.5rem;">
              <span class=""><i class="bi bi-person-up"></i> In Process</span>
              <span class="">{in_process_count}</span>
            </a>
          </div>
    </div>
  </div>

  <!-- <div class="alert alert-info mb-4">
    <i class="fas fa-info-circle me-2"></i>
    <strong>Note:</strong> This Kanban board shows only candidates that are <strong>In Process</strong>. 
    Selected and rejected candidates are moved to their respective pages. 
    Click on the cards above to view selected or rejected candidates.
  </div> -->
</div>
  <div class="kanban-board">
        {canBan_html}
  </div>


<!-- 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>
<div class="kanban-footer text-center pb-2">© 2025 {HOST_NAME}</div>

<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
      // Assuming you want to select a specific element, replace '#your-element-id' with the actual ID or selector
      let target = document.querySelector('.kanban-card-body');

      if (target) {
        let appId = target.getAttribute("data-app-id");
        let processRound = target.getAttribute("data-round");

        if (appId && processRound) {
          console.log("Dragging App ID:", appId);
          console.log("Dragging Process Round:", processRound);
        }
      } else {
        console.error("Target element not found.");
      }
    });
    // Drag and drop functionality
    document.addEventListener('DOMContentLoaded', function() {
      const cards = document.querySelectorAll('.kanban-card-body');
      const columns = document.querySelectorAll('.card-kanban');

      let draggedItem = null;

      // Add event listeners for drag and drop
      cards.forEach(card => {
        card.addEventListener('dragstart', function() {
          draggedItem = this;
          setTimeout(() => this.style.display = 'none', 0);
        });

        card.addEventListener('dragend', function() {
          setTimeout(() => {
            this.style.display = 'block';
            draggedItem = null;
          }, 0);
        });
      });

      columns.forEach(column => {
        column.addEventListener('dragover', function(e) {
          e.preventDefault();
        });

        column.addEventListener('dragenter', function(e) {
          e.preventDefault();
          this.style.backgroundColor = '#e9ecef';
        });

        column.addEventListener('dragleave', function() {
          this.style.backgroundColor = '#f5f5f5';
        });

        column.addEventListener('drop', function() {
          this.style.backgroundColor = '#f5f5f5';
          if (draggedItem) {
            this.querySelector('.kanban-card-header').after(draggedItem);

            // Update the process round in the database
            const appId = draggedItem.dataset.appId;
            const newRound = this.dataset.round;
            console.log(appId, newRound);
            updateProcessRound(appId, newRound);

            // Update the counts
            updateColumnCounts();
          }
        });
      });
    });

    // Function to update column counts
    function updateColumnCounts() {
      const columns = document.querySelectorAll('.card-kanban');

      columns.forEach(column => {
        const cards = column.querySelectorAll('.kanban-card-body');
        const countElement = column.querySelector('.applicant-count');
        countElement.textContent = cards.length;
      });
    }

    // Function to update process round via AJAX
    function updateProcessRound(appId, newRound) {
      if (!appId || !newRound) {
        console.error('Invalid parameters for updateProcessRound');
        showToast('Error: Invalid parameters', 'error');
        return;
      }

      fetch('update_status.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `app_id=${encodeURIComponent(appId) || ''}&round=${encodeURIComponent(newRound) || ''}&update_round=true`
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          console.log('Process round updated successfully');
          showToast('Process round updated successfully', 'success');
          // Refresh the page to ensure only in-process candidates are shown
          // setTimeout(function() {
          //   location.reload();
          // }, 1500); // Give time for the toast to be visible
        } else {
          console.error('Error updating process round:', data.message);
          showToast('Error updating process round: ' + data.message, 'error');
        }
      })
      .catch(error => {
        console.error('Error:', error);
        showToast('Error updating process round', 'error');
      });
    }

    // Helper function to show toast notifications
    function showToast(message, type = 'success') {
      const toast = document.createElement('div');
      toast.className = `toast ${type || 'success'}`;
      toast.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
        <div>
          <div>${message || ''}</div>
        </div>
      `;
      
      document.querySelector('.toast-container').appendChild(toast);
      
      // Trigger reflow
      toast.offsetHeight;
      
      // Add show class
      toast.classList.add('show');
      
      // Remove toast after 5 seconds
      setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
      }, 5000);
    }

    // Function to update application status via AJAX
    function updateStatus(appId, newStatus) {
      fetch('update_status.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: `app_id=${appId || ''}&status=${newStatus || ''}`
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            console.log('Status updated successfully');
          } else {
            console.error('Error updating status:', data.message);
          }
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }

    // 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 showToast(message, type = 'success') {
      const toast = document.createElement('div');
      toast.className = `toast ${type || 'success'}`;
      toast.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
        <span>${message || ''}</span>
      `;
      
      document.querySelector('.toast-container').appendChild(toast);
      
      // Trigger reflow
      toast.offsetHeight;
      
      // Add show class
      toast.classList.add('show');
      
      // Remove toast after 3 seconds
      setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
      }, 3000);
    }

    function updateSelection(appId, selection) {
      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) {
          if (selection === 'Yes') {
            // Redirect to selected candidates page
            // window.location.href = 'selected_candidates.php';
            window.location.reload();
          } else if (selection === 'No') {
            // Redirect to rejected candidates page
            // window.location.href = 'rejected_candidates.php';
            window.location.reload();
          } else {
            // Just refresh the current page for Process status
            location.reload();
          }
        } else {
          showToast(data.message || 'Error updating selection', 'error');
        }
      })
      .catch(error => {
        showToast('Error updating selection', 'error');
        console.error('Error:', error);
      });
    }

    function showToastWithRedirect(message, linkText, linkUrl) {
      const toast = document.createElement('div');
      toast.className = 'toast success';
      toast.innerHTML = `
        <i class="fas fa-check-circle"></i>
        <div>
          <div>${message || ''}</div>
          <a href="${linkUrl || ''}" class="mt-2 d-inline-block">${linkText || ''} <i class="fas fa-arrow-right"></i></a>
        </div>
      `;
      
      document.querySelector('.toast-container').appendChild(toast);
      
      // Trigger reflow
      toast.offsetHeight;
      
      // Add show class
      toast.classList.add('show');
      
      // Remove toast after 5 seconds
      setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
      }, 5000);
    }

    function updateCounts() {
      // Refresh the page to update counts
      // You could make this more sophisticated with AJAX if needed
      location.reload();
    }

    function redirectToStatusPage(value) {
      switch(value) {
        case 'selected':
          window.location.href = 'selected_candidates.php{selected_parameter}';
          break;
        case 'rejected':
          window.location.href = 'rejected_candidates.php{selected_parameter}';
          break;
        case 'in_process':
          // Stay on the current page but refresh with the filter
          window.location.href = 'recruiter_kanban.php{selected_parameter}?selection_status=in_process';
          break;
        default:
          // Show all candidates
          window.location.href = 'recruiter_kanban.php';
          break;
      }
    }

    // Make summary cards clickable
    document.addEventListener('DOMContentLoaded', function() {
      const cardLinks = document.querySelectorAll('.selection-summary a');
      cardLinks.forEach(link => {
        const card = link.querySelector('.card');
        if (card) {
          card.addEventListener('click', function(e) {
            window.location.href = link.getAttribute('href');
          });
          card.style.cursor = 'pointer';
        }
      });
    });

    function filterByJob(jobId) {
      if (!jobId) return;
      
      // Clear any existing job filter
      const currentUrl = new URL(window.location.href);
      
      // Set the job_id parameter and preserve other parameters
      currentUrl.searchParams.set('job_id', jobId);
      currentUrl.searchParams.set('d_jobs', 'true');
      
      // Open in new tab
      window.open(currentUrl.toString(), '_blank');
    }

    function filterByJobSame(jobId) {
      if (!jobId) {
        const currentUrl = new URL(window.location.href);
        currentUrl.search = ''; // Clear all query parameters
        window.location.href = currentUrl.toString();
        return;
      }
      
      // Clear any existing job filter
      const currentUrl = new URL(window.location.href);
      
      // Set the job_id parameter and preserve other parameters
      currentUrl.searchParams.set('job_id', jobId);
      window.location.href = currentUrl.toString();
    }
</script>