document.addEventListener('DOMContentLoaded', function() {

    //this is the code for english language

    var maindiv=document.getElementById("tab-call-to-action-english");
    var rowDiv=maindiv.querySelector(".row");
    rowDiv.style.position="relative";
    if (rowDiv){
        var secondchild=rowDiv.children[1];
        secondchild.style.backgroundColor="white";
        secondchild.classList.add('col-md-5');

        secondchild.style.borderRadius="20px";
        // var paragraph=document.createElement('p');
        //  paragraph.textContent="Preview Page";
        //  paragraph.style.color="black";
        //  secondchild.appendChild(paragraph);


        var ctaImage = document.getElementById('CTA_ctaTranslationEn_image_file');
        var output=document.createElement('img');
        // img.src = 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';
        secondchild.appendChild(output);
        ctaImage.onchange=evt=>{

            const [file] = ctaImage.files
            output.src = URL.createObjectURL(file)
            output.style.height = '300px';
            output.style.width="600px";
        }
     //   alert(ctaImage.placeholder);
        if (ctaImage.placeholder){
            output.src='uploads/'+ctaImage.placeholder;
            output.style.height = '300px';
            output.style.width="600px";
        }

        const source = document.getElementById('CTA_ctaTranslationEn_title');
        const result =document.createElement('h4');
        result.style.color='black';
        result.style.textAlign="center";
        const inputHandler = function(e) {
            result.innerText = e.target.value;
        }
        if (source.value){
            result.innerText=source.value;
        }
        source.addEventListener('input', inputHandler);
        secondchild.appendChild(result);

        const sourceDesc = document.getElementById('CTA_ctaTranslationEn_description');
        const resultDesc =document.createElement('p');
        if (sourceDesc.value){
            resultDesc.innerText=sourceDesc.value;
        }

        resultDesc.style.color='black';
        const inputHandlerDesc = function(e) {
            resultDesc.innerText = e.target.value;
        }

        sourceDesc.addEventListener('input', inputHandlerDesc);
        secondchild.appendChild(resultDesc);

        const sourceLabel = document.getElementById('CTA_ctaTranslationEn_button_label');
        const resultLabel =document.createElement('a');
        const sourceLink=document.getElementById("CTA_ctaTranslationEn_button_link");

        if (sourceLabel.value){
            resultLabel.innerText=sourceLabel.value;
            resultLabel.style.display="inline-block";
            resultLabel.style.color="white";
            resultLabel.style.width="200px";
            resultLabel.style.height="50px";
            resultLabel.style.textAlign="center";
            resultLabel.style.backgroundColor="black";
        }

        const inputHandlerLabel = function(e) {
            resultLabel.innerText = e.target.value;
            resultLabel.style.display="inline-block";
            resultLabel.style.color="white";
            resultLabel.style.width="200px";
            resultLabel.style.height="50px";
            resultLabel.style.textAlign="center";
            resultLabel.style.backgroundColor="black";
        }
        const inputHandLink=function (e){
            resultLabel.href=e.target.value;

        }
       if (sourceLink.value){
           resultLabel.href=sourceLink.value;
       }
        sourceLabel.addEventListener('input', inputHandlerLabel);
        sourceLink.addEventListener('input',inputHandLink);
        secondchild.appendChild(resultLabel);

    }

    //this is the code for german language

    var maindivDe=document.getElementById("tab-call-to-action-german");
    var rowDivDe=maindivDe.querySelector(".row");
    if (rowDivDe){
        var secondchildDe=rowDivDe.children[1];
        secondchildDe.classList.add('col-md-5');
        secondchildDe.style.backgroundColor="white";
        secondchildDe.style.borderRadius="20px";

        var ctaImageDe = document.getElementById('CTA_ctaTranslationDe_image_file');
        var outputDe=document.createElement('img');
        // img.src = 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';

        ctaImageDe.onchange=evt=>{
            const [file] = ctaImageDe.files
            outputDe.src = URL.createObjectURL(file)
            outputDe.style.height = '300px';
            outputDe.style.width="600px";
        }
        secondchildDe.appendChild(outputDe);

        const sourceDe = document.getElementById('CTA_ctaTranslationDe_title');
        const resultDe =document.createElement('h4');
        resultDe.style.color='black';
        resultDe.style.textAlign="center";
        const inputHandlerDe = function(e) {
            resultDe.innerText = e.target.value;
        }
        sourceDe.addEventListener('input', inputHandlerDe);
        secondchildDe.appendChild(resultDe);


        const sourceDescDe = document.getElementById('CTA_ctaTranslationDe_description');
        const resultDescDe =document.createElement('p');
        resultDescDe.style.color='black';
        const inputHandlerDescDe = function(e) {
            resultDescDe.innerText = e.target.value;
        }
        sourceDescDe.addEventListener('input', inputHandlerDescDe);
        secondchildDe.appendChild(resultDescDe);


        const sourceLabelDe = document.getElementById('CTA_ctaTranslationDe_button_label');
        const resultLabelDe =document.createElement('a');
        const sourceLinkDe=document.getElementById("CTA_ctaTranslationDe_button_link");
        const inputHandlerLabelDe = function(e) {
            resultLabelDe.innerText = e.target.value;
            resultLabelDe.style.display="inline-block";
            resultLabelDe.style.color="white";
            resultLabelDe.style.width="200px";
            resultLabelDe.style.height="50px";
            resultLabelDe.style.textAlign="center";
            resultLabelDe.style.backgroundColor="black";
        }
        const inputHandLinkDe=function (e){
            resultLabelDe.href=e.target.value;

        }
        sourceLabelDe.addEventListener('input', inputHandlerLabelDe);
        sourceLinkDe.addEventListener('input',inputHandLinkDe);
        secondchildDe.appendChild(resultLabelDe);

    }




});