const tableBody = document.getElementById('table-body');
const prevPageButton = document.getElementById('prev-page');
const nextPageButton = document.getElementById('next-page');
let currentPage = 1;
const itemsPerPage = 5;

async function fetchEmployees() {
    const response = await fetch('employees.json');
    const data = await response.json();
    return data.employees;
}

function displayEmployees(employees, page) {
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const paginatedEmployees = employees.slice(start, end);

    tableBody.innerHTML = '';
    paginatedEmployees.forEach(employee => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${employee.id}</td>
            <td>${employee.name}</td>
            <td>${employee.age}</td>
            <td>${employee.position}</td>
        `;
        tableBody.appendChild(row);
    });
}

function handlePagination(employees) {
    const totalPages = Math.ceil(employees.length / itemsPerPage);

    displayEmployees(employees, currentPage);

    prevPageButton.disabled = currentPage <= 1;
    nextPageButton.disabled = currentPage >= totalPages;

    nextPageButton.addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            displayEmployees(employees, currentPage);
            prevPageButton.disabled = false;
        }
        if (currentPage === totalPages) {
            nextPageButton.disabled = true;
        }
    });

    prevPageButton.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            displayEmployees(employees, currentPage);
            nextPageButton.disabled = false;
        }
        if (currentPage === 1) {
            prevPageButton.disabled = true;
        }
    });
}

async function init() {
    const employees = await fetchEmployees();
    handlePagination(employees);
}

init();