let currentPage = 1;

function paginate() {
  const table = document.getElementById('data');
  const rows = table.querySelectorAll('tbody tr');
  const totalPages = Math.ceil(rows.length / rowsPerPage);

  // Hide all rows
  rows.forEach(row => row.style.display = 'none');

  // Show only the rows for the current page
  let startRow = (currentPage - 1) * rowsPerPage;
  let endRow = Math.min(currentPage * rowsPerPage, rows.length);

  for (let i = startRow; i < endRow; i++) {
    rows[i].style.display = '';
  }

  // Update pagination info
  document.getElementById('page-info').textContent = `Page ${currentPage} of ${totalPages}`;

  // Optionally hide the "Previous" button on the first page and the "Next" button on the last page
  document.querySelector('#pagination-controls > button:nth-child(1)').disabled = currentPage === 1;
  document.querySelector('#pagination-controls > button:nth-child(2)').disabled = currentPage === 1;
  document.querySelector('#pagination-controls > button:nth-child(4)').disabled = currentPage === totalPages;
  document.querySelector('#pagination-controls > button:nth-child(5)').disabled = currentPage === totalPages;

  // Make the table visible after pagination is applied
  table.style.visibility = 'visible';
}

function changePage(direction) {
  const totalPages = Math.ceil(document.querySelectorAll('#data tbody tr').length / rowsPerPage);

  if (direction === -999) {
    currentPage = 1; // Go to first page
  } else if (direction === 999) {
    currentPage = totalPages; // Go to last page
  } else if ((direction === -1 && currentPage > 1) || (direction === 1 && currentPage < totalPages)) {
    currentPage += direction; // Move one step
  }

  paginate();
}