document.addEventListener('DOMContentLoaded', function () {
    const btnCaricaAltro = document.getElementById('btn-carica-altro');
    const contenitore = document.getElementById('itemsList');
    const loadingMsg = document.getElementById('loading-msg');

    btnCaricaAltro.addEventListener('click', function () {
        caricaAltro();
    });

    function caricaAltro() {
        // 1. Quanti elementi ci sono già in pagina
        const elementiAttuali = contenitore.querySelectorAll('.item').length;

        // 2. Quanti elementi caricare nella prossima chiamata
        const perPagina = parseInt(btnCaricaAltro.dataset.perPagina, 10) || 10;

        // Disabilito il bottone e mostro il loading, per evitare click multipli
        btnCaricaAltro.disabled = true;
        loadingMsg.style.display = 'block';

        // 3. Chiamata AJAX (fetch) a load-more.php
        const params = new URLSearchParams({
            offset: elementiAttuali,   // da dove partire
            limit: perPagina,           // quanti elementi caricare
            lang: 'it'
        });

        fetch('https://www.fondazionefamigliapiacenza.org/assets/ajax/load-more/load-more.php?' + params.toString(), {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Errore nella risposta del server: ' + response.status);
                }
                return response.json();
            })
            .then(function (data) {
                // data.items = array di oggetti da renderizzare
                // data.hasMore = boolean, indica se ci sono altri elementi da caricare

                if (data.items && data.items.length > 0) {
                    renderElementi(data.items);
                }

                // Se non ci sono più elementi, nascondo il bottone
                if (!data.hasMore) {
                    btnCaricaAltro.style.display = 'none';
                }
            })
            .catch(function (err) {
                console.error('Errore nel caricamento:', err);
                alert('Si è verificato un errore nel caricamento degli elementi.');
            })
            .finally(function () {
                btnCaricaAltro.disabled = false;
                loadingMsg.style.display = 'none';
            });
    }

    function renderElementi(items) {
        let html = ``;
        items.forEach(function (item) {

            html += `<div class="col item">
                        <div class="tp-portfolio-item anim-zoomin-wrap">
                            <div class="tp-portfolio-thumb mb-20 anim-zoomin not-hide-cursor bg-black" data-cursor="Scopri di più">
                                <a class="cursor-hide" href="${item.seo_url}">
                                    <img src="${item.copertina_blog}" alt="" class="aspect-ratio-1-1 object-fit-contain w-100 object-position-top">
                                </a>
                            </div>
                            <div class="tp-portfolio-content d-flex flex-wrap gap-2 justify-content-between align-items-center">
                                <h2 class="tp-portfolio-title tp-title-anim fix mb-20">
                                    <a class="tp-title-text" href="${item.seo_url}"><div class="text-white font-serif fs-3 mb-2">${item.sottotitolo_it}</div> <div class="fs-2">${item.titolo_it}</div></a>
                                </h2>
                            </div>
                        </div>
                    </div>`;

        });

        document.querySelector('#itemsList .list').insertAdjacentHTML('beforeend', html);
    }
});