document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.car-model-attributes');

    if (container) {
        fetch('/wp-json/wc/v3/products/attributes?search=car-model', { // Reemplaza 'car-model' si es necesario
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic ' + btoa('TU_CONSUMER_KEY:TU_CONSUMER_SECRET') // Reemplaza con tus credenciales
            }
        })
        .then(response => response.json())
        .then(attributes => {
            if (attributes.length > 0) {
                const attributeId = attributes[0].id; // Obtiene el ID del atributo 'car-model'

                fetch(`/wp-json/wc/v3/products/attributes/${attributeId}/terms`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Basic ' + btoa('TU_CONSUMER_KEY:TU_CONSUMER_SECRET') // Reemplaza con tus credenciales
                    }
                })
                .then(response => response.json())
                .then(terms => {
                    terms.forEach(term => {
                        const item = document.createElement('div');
                        item.classList.add('item', 'col-md-3', 'col-sm-6', 'col-xs-12');

                        const bannerWrap = document.createElement('div');
                        bannerWrap.classList.add('banner-wrap');

                        const link = document.createElement('a');
                        link.href = term.link; // El enlace al término del atributo

                        const icon = document.createElement('span');
                        icon.classList.add('icon');
                        icon.textContent = term.id; // Puedes usar el ID o cualquier otro dato como "icono"

                        const bannerCout = document.createElement('div');
                        bannerCout.classList.add('banner-cout');

                        const heading = document.createElement('h3');
                        heading.textContent = term.name; // El nombre del término

                        // Obtener la imagen del término (si está disponible)
                        if (term.image && term.image.src) {
                            const image = document.createElement('img');
                            image.src = term.image.src;
                            image.alt = term.name;
                            bannerCout.appendChild(image);
                        }

                        bannerCout.appendChild(heading);
                        link.appendChild(icon);
                        link.appendChild(bannerCout);
                        bannerWrap.appendChild(link);
                        item.appendChild(bannerWrap);
                        container.appendChild(item);
                    });
                })
                .catch(error => console.error('Error fetching terms:', error));
            } else {
                console.log('Attribute "car-model" not found.');
            }
        })
        .catch(error => console.error('Error fetching attributes:', error));
    }
});