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; 
        updateVisibility();
    });

    const navigationContainer = document.querySelector('.s-res-page-navigation');
    if (navigationContainer) {
        navigationContainer.addEventListener('click', function(e) {
            const button = e.target.closest('.s-res-page-btn');
            if (!button || button.disabled) return;

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

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');

    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';
        }
    });

    const totalVisible = visibleCards.length;
    const totalPages = Math.max(1, Math.ceil(totalVisible / itemsPerPage));
    
    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';
        }
    });

    updatePaginatorUI(currentClientPage, totalPages);
}

function updatePaginatorUI(currentPage, totalPages) {
    const prevBtn = document.getElementById('prev-page-btn');
    const nextBtn = document.getElementById('next-page-btn');
    const numbersContainer = document.getElementById('dynamic-page-numbers');

    if (!prevBtn || !nextBtn || !numbersContainer) return;

    prevBtn.setAttribute('data-page', currentPage - 1);
    prevBtn.disabled = (currentPage <= 1);

    nextBtn.setAttribute('data-page', currentPage + 1);
    nextBtn.disabled = (currentPage >= totalPages);

    let buttonsHTML = '';
    for (let i = 1; i <= totalPages; i++) {
        const activeClass = (i === currentPage) ? 's-res-page-btn-active' : '';
        buttonsHTML += `<button type="button" class="s-res-page-btn ${activeClass}" data-page="${i}">${i}</button> `;
    }
    numbersContainer.innerHTML = buttonsHTML;
}

// 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();
}