/**
 * Esegue le chiamate Ajax
 * Example: <a class="js-ajax" data-post='{"test":"uno","prova":"due"}' data-file="file-ajax.php" data-tpl='<div><p>Test: ${test}</p><p>Prova: ${prova}</p></div>'>CARICA ALTRO</a>
 */
document.addEventListener("DOMContentLoaded", function() {
    const buttons = document.querySelectorAll('.js-ajax');

    buttons.forEach(button => {
        button.addEventListener('click', function(event) {
            event.preventDefault(); // Previene il comportamento predefinito del link

            // Ottiene i dati dal data-post e li converte in un oggetto JSON
            const dataPost = button.getAttribute('data-post');
            const postData = JSON.parse(dataPost.replace(/'/g, '"')); // Sostituisce i singoli apici con doppi apici

            // Ottiene il nome del file dal data-file
            const file = button.getAttribute('data-file');

            // Ottiene il template dal data-tpl
            const template = button.getAttribute('data-tpl');

            // Esegue la chiamata AJAX
            fetch(file, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(postData)
            })
                .then(response => response.json())
        .then(data => {
                console.log('Success:', data);

                // Usa il template per visualizzare la risposta
                let output = template;
                for (const key in data) {
                const regex = new RegExp(`\\$\\{${key}\\}`, 'g');
                output = output.replace(regex, data[key]);
            }

            // Crea un contenitore per la risposta e aggiungilo al DOM
            const responseContainer = document.createElement('div');
            responseContainer.classList.add('response-container');
            responseContainer.innerHTML = output;
            button.parentElement.appendChild(responseContainer);
        })
        .catch(error => {
                console.error('Error:', error);
            });
        });
    });

});


/**
 * Aggiunge l'attributo error a tutte le immagini, mettendo l'immagine di default
 */
function replaceBrokenImages() {
    // URL dell'immagine di default
    var defaultImageUrl = 'assets/img/default-image.jpg'; // Sostituisci 'default-image.jpg' con il percorso dell'immagine di default

    // Selezioniamo tutte le immagini nel documento
    var images = document.getElementsByTagName('img');

    // Iteriamo su tutte le immagini
    for (var i = 0; i < images.length; i++) {
        // Aggiungiamo un gestore per l'evento "error" per ciascuna immagine
        images[i].addEventListener('error', function() {
            // Impostiamo l'attributo 'src' con l'URL dell'immagine di default
            this.src = defaultImageUrl;
        });
    }
}

// Chiamiamo la funzione quando il documento è completamente caricato
document.addEventListener('DOMContentLoaded', replaceBrokenImages);