document.addEventListener('DOMContentLoaded', function () {
    const items = document.querySelectorAll('.clothing-item');
    const shirtDisplay = document.getElementById('shirt-display');
    const pantsDisplay = document.getElementById('pants-display');
    const capDisplay = document.getElementById('cap-display');
    const resetButton = document.getElementById('reset-button');
    const modelDisplay = document.getElementById('model-display');
    const modelThumbnails = document.querySelectorAll('.model-thumbnail');

    items.forEach(item => {
        item.addEventListener('click', function () {
            const color = this.dataset.color;
            const itemType = this.dataset.type;

            if (itemType === 'shirt') {
                shirtDisplay.style.backgroundColor = color;
                shirtDisplay.style.display = 'block';
            } else if (itemType === 'pants') {
                pantsDisplay.style.backgroundColor = color;
                pantsDisplay.style.display = 'block';
            } else if (itemType === 'cap') {
                capDisplay.style.backgroundColor = color;
                capDisplay.style.display = 'block';
            }
        });
    });

    resetButton.addEventListener('click', function () {
        shirtDisplay.style.display = 'none';
        pantsDisplay.style.display = 'none';
        capDisplay.style.display = 'none';
        shirtDisplay.style.backgroundColor = 'transparent';
        pantsDisplay.style.backgroundColor = 'transparent';
        capDisplay.style.backgroundColor = 'transparent';
    });

    modelThumbnails.forEach(thumbnail => {
        thumbnail.addEventListener('click', function() {
            // Remove active class from all thumbnails
            modelThumbnails.forEach(t => t.classList.remove('active'));
            // Add active class to the clicked one
            this.classList.add('active');
            // Change the main model image source
            const fullSrc = this.dataset.fullSrc;
            if (fullSrc) {
                modelDisplay.src = fullSrc;
            }
        });
    });
});