webprogrammierung/js/filter.js

let currentClientPage = 1;
const itemsPerPage = 10;

function initFilter() {
    const filterSelect = document.getElementById('category-filter');
    const listContainer = document.querySelector('.s-res-list');

    if (!filterSelect || !listContainer) return;

    updateVisibility();

    filterSelect.addEventListener('change', function() {
        currentClientPage = 1; // Bei Filterwechsel zurück auf Seite 1
        updateVisibility();
    });


    const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
    pageButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            const targetPage = this.getAttribute('data-page');
            if (targetPage) {
                currentClientPage = parseInt(targetPage, 10);
                updateVisibility();
            }
        }, true);
    });
}

function updateVisibility() {
    const filterSelect = document.getElementById('category-filter');
    const listContainer = document.querySelector('.s-res-list');
    const selectedCategory = filterSelect.value.toLowerCase().trim();
    const cards = listContainer.querySelectorAll('.s-res-item');

    // filtern
    let visibleCards = [];
    cards.forEach(card => {
        const cardCategory = (card.getAttribute('data-category') || '').toLowerCase().trim();
        
        if (selectedCategory === 'all' || cardCategory.includes(selectedCategory) || selectedCategory.includes(cardCategory)) {
            visibleCards.push(card);
        } else {
            card.style.display = 'none';
        }
    });

    // nur 10 karten anzeigen
    const totalVisible = visibleCards.length;
    const totalPages = Math.max(1, ceil(totalVisible / itemsPerPage));
    
    // aktuelle seite validieren
    if (currentClientPage < 1) currentClientPage = 1;
    if (currentClientPage > totalPages) currentClientPage = totalPages;

    const startOffset = (currentClientPage - 1) * itemsPerPage;
    const endOffset = startOffset + itemsPerPage;

    visibleCards.forEach((card, index) => {
        if (index >= startOffset && index < endOffset) {
            card.style.display = 'flex';
        } else {
            card.style.display = 'none';
        }
    });

    // update der seitenzahl
    updatePaginatorUI(currentClientPage, totalPages);
}

function updatePaginatorUI(currentPage, totalPages) {
    const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
    
    pageButtons.forEach(button => {
        const targetPage = button.getAttribute('data-page');
        
        if (button.textContent.includes('«')) {
            button.setAttribute('data-page', currentPage - 1);
            button.disabled = (currentPage <= 1);
        } else if (button.textContent.includes('»')) {
            button.setAttribute('data-page', currentPage + 1);
            button.disabled = (currentPage >= totalPages);
        } else {
            const pageNum = parseInt(button.textContent.trim(), 10);
            
            // Falls es die Seite im neuen Filter gar nicht mehr gibt -> Button verstecken
            if (pageNum > totalPages) {
                button.style.display = 'none';
            } else {
                button.style.display = 'inline-block';
                if (pageNum === currentPage) {
                    button.classList.add('s-res-page-btn-active');
                } else {
                    button.classList.remove('s-res-page-btn-active');
                }
            }
        }
    });
}

// Hilfsfunktion für Math.ceil in JS
function ceil(val) { return Math.ceil(val); }

// ist das DOM bereits vollständig aufgebaut?
if (document.readyState === 'loading') {
    // Falls noch geladen wird, auf das Event warten
    document.addEventListener('DOMContentLoaded', initFilter);
} else {
    // Falls das HTML bereits komplett da ist, sofort ausführen
    initFilter();
}