<script>
let showThisFieldIf = {
websites: {
whatservicedoyouneed: [1],
},
emailmarketing: {
whatservicedoyouneed: [2],
},
seo: {
whatservicedoyouneed: [3],
},
}


/* Code from https://element.how/elementor-pro-add-conditional-form-fields/
    * You are allowed to use on your website and your clients websites
    * No sale or redistribution without permission
    * Copyright 2023 by Element.how
    * Version 1.1 2023/03/15
    */
    document.addEventListener('DOMContentLoaded', conditionalFormFieldFunc);
    document.addEventListener('DOMContentLoaded', function () {
        jQuery(document).on('elementor/popup/show', (event, id, instance) => {
            conditionalFormFieldFunc();
        });
    });

    function conditionalFormFieldFunc() {
        function testLogic() {
            for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
                let conditionalInput = setInputsElemArray(conditionalInputID);
                let match = true;
                for (const [conditionID, conditionValues] of Object.entries(condition)) {
                    let inputs = setInputsElemArray(conditionID);
                    let selectedInputs = [];
                    inputs.forEach((input, i) => {
                        if (input.checked) {
                            selectedInputs.push(i);
                        }
                    });
                    if (inputs[0].tagName === 'SELECT') {
                        selectedInputs.push(inputs[0].selectedIndex);
                    }
                    let adjustedConditionValues = conditionValues.map(e => e - 1);
                    if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {
                        match = false;
                    }
                };
                if (match) {
                    conditionalInput.forEach(e => {
                        e.closest('.elementor-field-group').style.display = "block";
                        e.disabled = false; // Ensure the field is enabled when shown
                    });
                } else {
                    conditionalInput.forEach(e => {
                        e.closest('.elementor-field-group').style.display = "none";
                        e.disabled = true; // Disable the field when hidden
                    });
                }
            }
        }
        testLogic();

        /* Add event listeners */
        for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
            for (const [conditionID, conditionValues] of Object.entries(condition)) {
                let inputs = setInputsElemArray(conditionID);
                inputs.forEach(input => {
                    input.addEventListener('input', function () {
                        testLogic();
                    })
                })
            }
        }
    }

    function setInputsElemArray(ID) {
        let selectors = `[name="form_fields[${ID}]"]`;
        let inputs = Array.from(document.querySelectorAll(selectors));
        if (!inputs.length) {
            selectors = `[name="form_fields[${ID}][]"]`;
            inputs = Array.from(document.querySelectorAll(selectors));
        }
        return inputs;
    }
</script>