document.addEventListener('DOMContentLoaded', function() {
    // English Language
    setupLanguage('english', 'tab-call-to-action-english', 'CTA_ctaTranslationEn');

    // German Language
    setupLanguage('german', 'tab-call-to-action-german', 'CTA_ctaTranslationDe');
});

function setupLanguage(language, mainDivId, prefix) {
    var mainDiv = document.getElementById(mainDivId);
    if (!mainDiv) return;

    var rowDiv = mainDiv.querySelector('.row');
    if (!rowDiv) return;

    var secondChild = rowDiv.children[1];
    if (!secondChild) return;

    secondChild.classList.add('col-md-5');
    secondChild.style.backgroundColor = 'white';
    secondChild.style.borderRadius = '20px';

    var imageInput = document.getElementById(`${prefix}_image_file`);
    var titleLabel = document.getElementById(`${prefix}_title`);
    var descriptionLabel = document.getElementById(`${prefix}_description`);
    var buttonLabel = document.getElementById(`${prefix}_button_label`);
    var buttonLink = document.getElementById(`${prefix}_button_link`);

    if (imageInput) {
        var outputImage = document.createElement('img');
        imageInput.onchange = function(evt) {
            const [file] = imageInput.files;
            outputImage.src = URL.createObjectURL(file);
            outputImage.style.height = '300px';
            outputImage.style.width = '600px';
        };
        secondChild.appendChild(outputImage);
    }

    if (titleLabel) {
        var titleResult = createAndAppendElement(secondChild, 'h4');
        titleResult.style.color = 'black';
        titleResult.style.textAlign = 'center';
        titleLabel.addEventListener('input', function(e) {
            titleResult.innerText = e.target.value;
        });
        if (titleLabel.value) {
            titleResult.innerText = titleLabel.value;
        }
    }

    if (descriptionLabel) {
        var descriptionResult = createAndAppendElement(secondChild, 'p');
        descriptionResult.style.color = 'black';
        descriptionLabel.addEventListener('input', function(e) {
            descriptionResult.innerText = e.target.value;
        });
        if (descriptionLabel.value) {
            descriptionResult.innerText = descriptionLabel.value;
        }
    }

    if (buttonLabel && buttonLink) {
        var buttonResult = createAndAppendElement(secondChild, 'a');
        buttonLabel.addEventListener('input', function(e) {
            buttonResult.innerText = e.target.value;
            applyButtonStyles(buttonResult);
        });
        buttonLink.addEventListener('input', function(e) {
            buttonResult.href = e.target.value;
        });
        if (buttonLabel.value) {
            buttonResult.innerText = buttonLabel.value;
            applyButtonStyles(buttonResult);
        }
        if (buttonLink.value) {
            buttonResult.href = buttonLink.value;
        }
    }
}

function createAndAppendElement(parent, tagName) {
    var element = document.createElement(tagName);
    parent.appendChild(element);
    return element;
}

function applyButtonStyles(button) {
    button.style.display = 'inline-block';
    button.style.color = 'white';
    button.style.width = '200px';
    button.style.height = '50px';
    button.style.textAlign = 'center';
    button.style.backgroundColor = 'black';
}