const table = document.getElementById('myTable');

const tableHeaders = table.querySelectorAll('thead > tr > th');
const tableRows = table.querySelectorAll('tbody > tr');

document.getElementById('searchBox')
    .addEventListener('keyup', filterTable);

function filterTable(event) {
    let searchValue = event.target.value;
    if (!searchValue.length) {
        // Als er geen zoekterm is willen we alle rijen van de tabel laten zien, dit doen we door de class 'hidden' van alle rijen te verwijderen.
        tableRows.forEach(tableRow => {
            tableRow.classList.remove('hidden');
        });
        return;
    }

    const columnToFilterBy = document.getElementById('selectedColumn').value;
    // We zoeken hier het id van de column op waarop we willen filteren zodat we hier later mee kunnen werken wanneer we over de rijen van de tabel heen loopen, op deze manier weten we welke column we moeten checken uit elke rij.
    const columnToFilterByIndex = Array.from(tableHeaders)
        .findIndex(tableHeader => tableHeader.id === columnToFilterBy);
    // Moet er gekeken worden naar hoofdletters of niet?
    const shouldIgnoreUppercase = document.getElementById('ignoreUpperCase').checked;

    // Ga door elke rij heen in de tabel.
    tableRows.forEach(tableRow => {
        const columns = tableRow.querySelectorAll('td');
        // Ga door elke column heen in de desbetreffende tabel.
        columns.forEach((column, columnIndex) => {
            // Als de columnIndex niet gelijk is aan columnToFilterByIndex betekent dit dat deze column niet de column is waarop we willen filteren.
            if (columnIndex !== columnToFilterByIndex) {
                return;
            }

            let columnText = column.textContent;

            if (shouldIgnoreUppercase) {
                // Als shouldIgnoreUppercase waar is willen we zowel de tekst in de column en de zoekterm naar kleine letters veranderen.
                columnText = columnText.toLowerCase();
                searchValue = searchValue.toLowerCase();
            }

            // Als de zoekterm zich niet begeeft in de tekst van de column willen we deze rij van de tabel verbergen.
            if (columnText.indexOf(searchValue) === -1) {
                tableRow.classList.add('hidden');
                return;
            }
            //
            tableRow.classList.remove('hidden');
        });
    });
}