var areFieldsetCompleted;
var nbrOfFieldset = 8;
var isFormFinished = false;
setTimeout(clickFunction, 500);
setInterval(function() {
    areFieldsetCompleted = areFieldsetsInputsFilled(nbrOfFieldset);
    var allTrue = areFieldsetCompleted.every(function(value){
        return value === true;
    });

    if(allTrue && !isFormFinished){
        $('#addWindowButton').show();
    }else{
        $('#addWindowButton').hide();
    }

    adjustButtonMargin();
}, 100);
function clickFunction() {
    
    // show the 8 first fieldsets
    $('fieldset').hide();
    $('fieldset').slice(0, nbrOfFieldset).add('fieldset:nth-child(39)').show(); //39 = new legal requirements
    

    // ensure the submit button is always visible
    $('.hs_submit').show();  

    // initial setup to place legal consent and buttons correctly
    moveLegalConsentContainer();
    moveAddWindowButton();
    addSpaceBetweenImageAndFirstWindow();

    $('#addWindowButton').hide();

    $(document).on('click', '#addWindowButton', function() {
        let nextWindowFound = false;

        $('fieldset:hidden').each(function() {
            
            if ($(this).find('div.hs-richtext.hs-main-font-element h3[class*="windowNumber"]').length > 0) {
                if (nextWindowFound) {
                    return false;  // break the loop when the next window start is found
                } else {
                    nbrOfFieldset = nbrOfFieldset + 3;
                    nextWindowFound = true;  
                }
            }
            // show the new window
            $(this).show();
        });

        // check if windowNumber10 is reached so we know it's finished
        if ($('fieldset:visible div.hs-richtext.hs-main-font-element h3[class="windowNumber10"]').length > 0) {
            $('fieldset:hidden').show();

            isFormFinished = true; // disable the button when it reaches the 10th window
            $('.legal-consent-container').css('margin-top', '0');
        }

        // making sure the legal consent container and add window button are set correctly
        moveLegalConsentContainer();
        
    });
}

// function to ensure that the legal consent container always appears below the last visible window
function moveLegalConsentContainer() {
    var legalConsentContainer = $('fieldset:has(div.legal-consent-container)').detach();
    $('.hs_submit.hs_submit').before(legalConsentContainer);
    legalConsentContainer.show();
}

// move the add window button at the right place
function moveAddWindowButton() {
    var addWindowButton = $('<a>', {
        id: 'addWindowButton',
        //href: '#addWindowButton',
        text: 'Fenster hinzufügen',
        click: function() {
            $('#addWindowLink').click();
        },
        style: 'color: #ff0000; text-decoration: underline; padding: 10px 20px; cursor: pointer;'
    });

    // add the button before the legal consent container
    $('fieldset:nth-child(39)').before('<br>', addWindowButton);

    // ajusting
    adjustButtonMargin();

    $('fieldset:nth-child(39)').css('margin-top', '40px');
}


function adjustButtonMargin() {
    if ($('#addWindowButton').is(':visible')) {
        $('#addWindowButton').css('margin-top', '20px').css('margin-bottom', '0');

        if ($('#addWindowButton').next('.spacer').length === 0) {
            $('<div>', {
                class: 'spacer',
                style: 'height: 20px;' // for visible space
            }).insertAfter('#addWindowButton');
        }
    } else {
        $('#addWindowButton').css('margin-top', '0').css('margin-bottom', '0');
        $('#addWindowButton').next('.spacer').remove(); // remove the spacer div if it's already there
    }
}

// add space between image and first window
function addSpaceBetweenImageAndFirstWindow() {
    var cmnsDiv = $('div.cmns');
    cmnsDiv.after('<br>');
    cmnsDiv.after('<br>');
}

function areFieldsetsInputsFilled(numberOfFieldsets) {
    // get all fieldsets
    var fieldsets = document.querySelectorAll('fieldset');
  
    // make sure the number of fieldsets to check does not exceed the actual number present
    var fieldsetsToCheck = numberOfFieldsets <= fieldsets.length ? numberOfFieldsets : fieldsets.length;
  
    // initialize an array to keep track of the fieldsets check results
    var fieldsetsCheckResults = [];
  
    for (var i = 0; i < fieldsetsToCheck; i++) {
        // get all input elements in the current fieldset
        var inputs = fieldsets[i].querySelectorAll('input, select, textarea');
      
        // assume all inputs are filled initially
        var allFilled = true;
      
        // loop through each input element
        for (var j = 0; j < inputs.length; j++) {
            var input = inputs[j];

            // check if the field is for the phone number
            if (input.id.startsWith('phone')) {
                continue;
            }
        
            // check if the input is not filled
            if (input.type === 'checkbox' || input.type === 'radio') {
                // for checkbox and radio button, check if it is not checked
                if (!input.checked) {
                    allFilled = false;
                    break;
                }
            } else {
                // for other input types, check if the value is empty
                if (input.value.trim() === '') {
                    allFilled = false;
                    break;
                }
            }
        }
      
        // add the result for the current fieldset to the results array
        fieldsetsCheckResults.push(allFilled);
    }
    return fieldsetsCheckResults;
}