// // src/scripts/filters.js

// Upravlja sa item.style.display na osnovu aktivnog filtera i data-status atributa
// Također upravlja sa stilovima kartica (ring, border) i naslovom filtera
// export function initFilters() {
//     const cards = document.querySelectorAll('.stat-card');
//     const items = document.querySelectorAll('.nalog-item');
//     const title = document.getElementById('filter-title');
//     let activeFilter = null;

//     cards.forEach(card => {
//         card.addEventListener('click', () => {
//             const filter = card.getAttribute('data-filter');

//             if (activeFilter === filter) {
//                 activeFilter = null;
//                 items.forEach(item => item.style.display = 'flex');
//                 cards.forEach(c => c.classList.remove('ring-4', 'ring-blue-600/20', 'border-blue-600'));
//                 if (title) title.innerText = "Zadnje aktivnosti";
//             } else {
//                 activeFilter = filter;
//                 cards.forEach(c => c.classList.remove('ring-4', 'ring-blue-600/20', 'border-blue-600'));
//                 card.classList.add('ring-4', 'ring-blue-600/20', 'border-blue-600');
                
//                 if (title) title.innerText = `Filtrirano: ${filter.replace('_', ' ')}`;

//                 items.forEach(item => {
//                     const status = item.getAttribute('data-status');
//                     item.style.display = (status === filter) ? 'flex' : 'none';
//                 });
//             }
//         });
//     });
// }



// src/scripts/filters.js

export function initFilters() {
    const cards = document.querySelectorAll('.stat-card');
    
    // Dohvaćamo trenutni aktivni filter iz URL-a
    const urlParams = new URLSearchParams(window.location.search);
    const currentActiveFilter = urlParams.get('status');

    cards.forEach(card => {
        const filterValue = card.getAttribute('data-filter');

        // Dodaj vizualno aktivno stanje ako se URL podudara s gumbom
        if (currentActiveFilter === filterValue) {
            card.classList.add('ring-4', 'ring-blue-600/20', 'border-blue-600');
        }

        card.addEventListener('click', () => {
            const newParams = new URLSearchParams(window.location.search);

            if (currentActiveFilter === filterValue) {
                // Ako kliknemo na već aktivni filter, poništavamo ga
                newParams.delete('status');
            } else {
                // Inače postavljamo novi filter
                newParams.set('status', filterValue);
            }

            // Osvježi stranicu s novim parametrom - to okida novi API request na serveru
            window.location.search = newParams.toString();
        });
    });
}