document.addEventListener('DOMContentLoaded', function() {
    const blocks = document.querySelectorAll('.blogs-card-grid-block');

    function fetchPage(block, page) {
        var blockId        = block.id.replace('block-', '');
        var cardsTarget    = document.getElementById('cards-container-' + blockId);
        var paginTarget    = document.getElementById('pagination-container-' + blockId);

        if (!cardsTarget || !paginTarget) return;

        var ajaxUrl  = block.getAttribute('data-ajax-url');
        var postType = block.getAttribute('data-post-type');  // may be JSON array string
        var perPage   = block.getAttribute('data-per-page');
        var typeLabel = block.getAttribute('data-type-label');
        var ctaText   = block.getAttribute('data-cta-text');

        var taxonomy = block.getAttribute('data-taxonomy');
        var termId   = block.getAttribute('data-term-id');

        cardsTarget.style.opacity = '0.5';

        var formData = new FormData();
        formData.append('action',     'resource_ajax_action');
        formData.append('block_id',   blockId);
        formData.append('page_no',    page);
        formData.append('post_type',  postType);
        formData.append('per_page',   perPage);
        formData.append('type_label', typeLabel);
        formData.append('cta_text',   ctaText);

        formData.append('taxonomy', taxonomy);
        formData.append('term_id', termId);

        fetch(ajaxUrl, { method: 'POST', body: formData })
            .then(function(res) { return res.json(); })
            .then(function(res) {
                if (res.success && res.data) {
                    cardsTarget.innerHTML  = res.data.cards || '';
                    paginTarget.innerHTML  = res.data.pagination || '';
                } else {
                    cardsTarget.innerHTML  = res.cards || '';
                    paginTarget.innerHTML  = res.pagination || '';
                }
                cardsTarget.style.opacity = '1';
                block.scrollIntoView({ behavior: 'smooth' });
            })
            .catch(function(err) {
                console.error('Pagination AJAX error:', err);
                cardsTarget.style.opacity = '1';
            });
    }

    blocks.forEach(function(block) {
        block.addEventListener('click', function(e) {
            if (e.target.classList.contains('page-numbers') && e.target.getAttribute('data-page')) {
                e.preventDefault();
                var page = parseInt(e.target.getAttribute('data-page'), 10) || 1;
                fetchPage(block, page);
            }
        });
    });
});