// Get User's url
let userInitialUrl = window.location.href
console.log("userInitialUrl:", userInitialUrl)

// Type of user's role: "Employee" or "Owner"
let currentUserRole = "", userRole, userRoleValue

// Personal data choice by Default
let PersonalDataChoice = "Yes"

// Admin section
let adminPassword = "SignUpUser"
let adminPasswordConfirm = false

// Check upload file size (Avatar picture)
function avatarSizeControl() {
    let myDialog = document.createElement("dialog");
    document.body.appendChild(myDialog)
    let text = document.createTextNode("Maximum file size is 8 MB, please select the appropriate file...");
    myDialog.appendChild(text);

    // Show modal window
    myDialog.showModal();

    // Close modal window
    myDialog.addEventListener('click', (event) => {
        myDialog.close()
    })
}

const avatarFileUploadSizeControl = document.getElementById('imageUpload')
avatarFileUploadSizeControl.addEventListener('change', (event) => {
    const target = event.target
    if (target.files && target.files[0]) {

        /*Maximum allowed size in bytes (8MB) Change first operand(multiplier) for your needs*/
        const maxAllowedSize = 8 * 1024 * 1024;
        if (target.files[0].size > maxAllowedSize) {
            target.value = null
            // Here you can ask your users to load correct file
            avatarSizeControl()
        }
    }
})

// Croppie Global variable where we have resulted image in Base64 (PNG format)
let croppieResultBase64Str = "N/A"
let elmFileUpload = document.getElementById("imageUpload")
elmFileUpload.addEventListener('change', onFileUploadChange, false)
let croppie_circle
let croppie_el = document.getElementById('croppie-circle')

// Make Company and Branch Ids
let initialTeamId = ""
let initialTeamName = ""
let initialCompanyId = ""
let initialCompanyName = ""

// Country Name and Code management
let countryCode = ""

// Make Global language json dictionaries
let langDataGER
let langDataENG
let langDataSPA
let langCurrent

// iMask fields working ------------------------------------------------------
let mobileMask = IMask(
    document.getElementById('mobile'), {
        // https://imask.js.org/guide.html
        // Universal mobile format (max 13 dig)
        // Austria - AT - 43, Denmark - DK - 45, Germany - DE - 49, Spain - ES - 34
        // Switzerland - CH - 41, Ukraine - UA - 38, United Kingdom - GB - 44, Greece - GR - 30,
        // Turkey - TR - 90 +90 (530) 421 9899
        // https://abbreviations.yourdictionary.com/articles/list-of-europe-country-codes.html
        mask: [
            {
                mask: '+CC 000 00000000',
                lazy: true,  // if false -> make placeholder always visible
                placeholderChar: '_',

                blocks: {
                    CC: {
                        mask: IMask.MaskedRange,
                        from: 30,
                        to: 90
                    }
                }
            }
        ]
    })

let ibanMask = IMask(
    document.getElementById('iban'), {
        // IBAN variation:
        // DE89 3704 0044 0532 0130 00 or GB29 NWBK 6016 1331 9268 19 or
        // AT61 1904 3002 3457 3201 or UA11 3808 0500 0000 0262 0053 54945 or
        // RO49 AAAA 1B31 0075 9384 0000 (Romanian) or CH660020220263418440A Swiss
        // IT60 x0542 8111 0100 0000 1234 56 - Italian
        mask: [
            {
                mask: 'aa00 a0000 0000 0000 0000 0000 00',
                lazy: true,  // Italian - make placeholder always visible
                placeholderChar: '_'
            },
            {
                mask: 'aa00 0000 0000 0000 0000 a',
                lazy: true,  // make placeholder always visible
                placeholderChar: '_'
            },
            {
                mask: 'aa00 0000 0000 0000 0000 00',
                lazy: true,  // make placeholder always visible
                placeholderChar: '_'
            },
            {
                mask: 'aa00 aaaa 0000 0000 0000 00',
                lazy: true,  // make placeholder always visible
                placeholderChar: '_'
            },
            {
                mask: 'aa00 aaaa 0a00 0000 0000 0000',
                lazy: true,  // make placeholder always visible
                placeholderChar: '_'
            },
            {
                mask: 'aa00 0000 0000 0000 0000',
                lazy: true,  // make placeholder always visible
                placeholderChar: '_'
            },
            {
                mask: 'aa00 0000 0000 0000 0000 0000 00000',
                lazy: true,  // make placeholder always visible
                placeholderChar: '_'
            }
        ],
        prepare: function (str) {
            return str.toUpperCase();
        }
    })

let smsCodeIMask = IMask(
    document.getElementById('sms_code'), {
        // https://imask.js.org/guide.html
        // Element value was changed outside of mask. Synchronize mask using mask.updateValue()
        mask: [
            {
                mask: '000000',
                lazy: true,  // if false -> make placeholder always visible
                placeholderChar: '_',

                blocks: {
                    CC: {
                        mask: IMask.MaskedRange,
                        from: 100001,
                        to: 999999
                    }
                }
            }
        ]
    })

// ---------------------------------------------------------------------------

function init() {
    let ele = document.getElementById("main-spacer")

    //  .style.fontSize = Math.floor(h * 0.1 * 0.5) + "px";

    if (isMobileDevice()) {
        ele.style.paddingLeft = "5px";
        ele.style.paddingRight = "5px";
    } else {

        // desktop
        console.log("is desktop");
        ele.style.paddingTop = "5%";
        ele.style.paddingLeft = "20%";
        ele.style.paddingRight = "20%";
    }
}

// Multilanguage support -----------------------------------------------------
function setCountryCode() {
    let index = langCurrent["country_list"].indexOf(document.getElementById("country").value)
    countryCode = langCurrent["country_codes"][index]
    console.log("countryCode: " + countryCode)
}

function countryListDropdown() {

    let select = document.getElementById("country")
    let options = langCurrent["country_list"]

    // Remove all options
    let i, L = select.options.length - 1
    for (i = L; i >= 0; i--) {
        select.remove(i)
    }

    for (let i = 0; i < options.length; i++) {
        // Add relevant options
        let opt = options[i]
        let el = document.createElement("option")
        el.textContent = opt
        el.value = opt
        select.appendChild(el)
    }

    // Set default country
    select.value = langCurrent["country_list_default"]

    setCountryCode()
}

// Get language files to memory and fill first (initial) form page by relevant language data -------------------------
async function getLangFiles() {

    async function getLangJSONFile(url) {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'text/html',
                'Content-Type': 'application/json'
            }
        })
        // waits until the request completes...
        // read response body and parse as JSON
        let res = await response.text()
        if (res === undefined) {
            res["dict_language"] = "Something went wrong... json file not found!!!"
        }
        return JSON.parse(res)
    }

    console.log("Get language from json file...")
    langDataGER = await getLangJSONFile("./static?file=german.json")
    console.log("Done: " + langDataGER["dict_language"])

    console.log("Get language from json file...")
    langDataENG = await getLangJSONFile("./static?file=english.json")
    console.log("Done: " + langDataENG["dict_language"])

    console.log("Get language from json file...")
    langDataSPA = await getLangJSONFile("./static?file=spain.json")
    console.log("Done: " + langDataSPA["dict_language"])

    // Set current language based on domain name: [tippie.de, tippie.es]
    let page_url = window.location.href

    langCurrent = langDataGER  // by default
    document.getElementById("GER").checked = true  // by default

    if (page_url.includes("tippie.es")) {
        langCurrent = langDataSPA
        document.getElementById("SPA").checked = true
    }
    if (page_url.includes("tippie.de")) {
        langCurrent = langDataGER
        document.getElementById("GER").checked = true
    }
    if (page_url.includes("tippie.uk")) {
        langCurrent = langDataENG
        document.getElementById("ENG").checked = true
    }

}

async function grabUrlParams() {

    const queryString = window.location.search
    const urlParams = new URLSearchParams(queryString)

    let goToStep2Page = false

    // Working with teamId url parameter
    if (urlParams.has('teamId')) {
        initialTeamId = urlParams.get('teamId')
        console.log("teamId: " + initialTeamId)

        let backendUrl = "./get_company_and_team?teamId=" + initialTeamId

        // this responseJson is returned from getJsonFromBackend() async function
        await getJsonFromBackend(backendUrl).then(function (responseJson) {
            console.log("responseJson: " + JSON.stringify(responseJson))
            initialTeamName = responseJson["teamName"]
            initialCompanyId = responseJson["companyId"]
            initialCompanyName = responseJson["companyName"]

            // Set page elements to Company and Team (branch) values
            document.getElementById("organization").value = initialCompanyName
            document.getElementById("branch").value = initialTeamName

            // Go to page with User's registration attributes
            if (initialTeamName !== "") {
                // Lock organization and branch fields for input
                document.getElementById("organization").disabled = true
                document.getElementById("branch").disabled = true
                goToStep2Page = true
            }
            console.log("initialTeamId:", initialTeamId)
            console.log("initialTeamName:", initialTeamName)
            console.log("initialCompanyId:", initialCompanyId)
            console.log("initialCompanyName:", initialCompanyName)

        })
    }

    // Working with Branch and organisation url parameter
    if (urlParams.has('branch')) {

        // Set page field to Team (branch) name
        document.getElementById("branch").value = urlParams.get('branch')

    }

    // Working with Filiale and organisation url parameter
    if (urlParams.has('filiale')) {

        // Set page field to Team (branch) name
        document.getElementById("branch").value = urlParams.get('filiale')

    }

    // Working with organiSation url parameter
    if (urlParams.has('organisation')) {

        // Set page field to Company name
        document.getElementById("organization").value = urlParams.get('organisation')

        // Go to page with User's registration attributes
        goToStep2Page = true
    }

    // Working with organiZation url parameter organization
    if (urlParams.has('organization')) {

        // Set page field to Company name
        document.getElementById("organization").value = urlParams.get('organization')

        // Go to page with User's registration attributes
        goToStep2Page = true
    }

    // Working with Admin password parameter ---------------------------------------------------------
    if (urlParams.has('password')) {
        adminPassword = urlParams.get('password')
        console.log("adminPassword: " + adminPassword)

        let backendUrl = "./admin_check_password?password=" + adminPassword

        // this responseJson is returned from getJsonFromBackend() async function
        let responseJson = await callBackendWithPromiseJsonRespond(backendUrl)
        console.log("responseJson: " + JSON.stringify(responseJson))

        // Trigger to show or hide admin elements on the registration page
        adminPasswordConfirm = responseJson["result"] === "password confirm"  // return true or false

    }
    if (adminPasswordConfirm) {  // Show Users role admin section
        showDiv("usersRoleSection")
        showDiv("step_3_confirmation_admin")
        hideDiv("step_3_confirmation")
        goToStep2Page = true
    } else {
        hideDiv("step_3_confirmation_admin")
        showDiv("step_3_confirmation")
    }
    // -------------------------------------------------------------------------------------------------

    // Working with Bank Details (IBAN, address & DOB) url parameter
    if (urlParams.has('IBAN')) {

        // Hide BankDetails selector and relevant fields
        if (urlParams.get('IBAN').toString().toLowerCase() === "no") {
            PersonalDataChoice = "No"
            document.getElementById("personalDataChoiceNo").checked = true
            hideDiv("choice_personal_data")
            hidePersonalDataFields()
        }

        // Hide BankDetails selector and relevant fields
        if (urlParams.get('IBAN').toString().toLowerCase() === "yes") {
            PersonalDataChoice = "Yes"
            document.getElementById("personalDataChoiceYes").checked = true
            hideDiv("choice_personal_data")
            showPersonalDataFields()
        }
    }

    // Working with userRole url parameter
    if (urlParams.has('userRole')) {

        showDiv("usersRoleSection")

        // Lock userRole selector and relevant fields
        if (urlParams.get('userRole').toString().toLowerCase() === "employee") {
            document.getElementById("setUserRole").selectedIndex = 0
            document.getElementById("setUserRole").setAttribute("disabled", "disabled")
            getUserRole()
        }

        // Lock userRole selector and relevant fields
        if (urlParams.get('userRole').toString().toLowerCase() === "owner") {
            hideDiv("nickname_section")
            hideDiv("motivation_section")

            document.getElementById("setUserRole").selectedIndex = 1
            document.getElementById("setUserRole").setAttribute("disabled", "disabled")
            getUserRole()
        }
    }

    return goToStep2Page
}

// Set current language
function setLanguage(lang) {

    if (lang === "GER") {
        langCurrent = langDataGER
    }
    if (lang === "SPA") {
        langCurrent = langDataSPA
    }
    if (lang === "ENG") {
        langCurrent = langDataENG
    }

    updateAllPagesContent()
}

// Update ALL pages content based on current language dictionary [langCurrent]
function updateAllPagesContent() {

    // Set user's role
    setUserRoleListDropdown()

    // Country name and code setup based on Language selection
    countryListDropdown()

    // Private data selector
    document.getElementById("personalDataChoiceLegend").innerHTML = langCurrent["personalDataChoiceLegend"]
    document.getElementById("personalDataChoiceYes_lb").innerText = langCurrent["personalDataChoiceYes_lb"]
    document.getElementById("personalDataChoiceNo_lb").innerText = langCurrent["personalDataChoiceNo_lb"]

    // Comment to use bt another logic -> static section with show/hide options
    // document.getElementById("base_pages_footer").innerHTML = langCurrent["base_pages_footer"]

    document.getElementById("step_1_header").innerHTML = langCurrent["step_1_header"]
    document.querySelector('#Weiter_step_1_button').innerHTML = langCurrent["Weiter_step_1_button"]

    document.getElementById("step_1_1_header").innerHTML = langCurrent["step_1_1_header"]
    document.querySelector('#Weiter_step_1_1_button').innerHTML = langCurrent["Weiter_step_1_1_button"]

    document.getElementById("step_2_header").innerHTML = langCurrent["step_2_header"]

    document.getElementById("setUserRole_label").innerHTML = langCurrent["user_type_label"]

    document.getElementById("organization_label").innerHTML = langCurrent["organization_label"]
    document.getElementById("organization").placeholder = langCurrent["organization_placeholder"]

    document.getElementById("branch_label").innerHTML = langCurrent["branch_label"]
    document.getElementById("branch").placeholder = langCurrent["branch_placeholder"]

    document.getElementById("first-name_label").innerHTML = langCurrent["first-name_label"]
    document.getElementById("first-name").placeholder = langCurrent["first-name_placeholder"]

    document.getElementById("last-name_label").innerHTML = langCurrent["last-name_label"]
    document.getElementById("last-name").placeholder = langCurrent["last-name_placeholder"]

    document.getElementById("nickname_label").innerHTML = langCurrent["nickname_label"]
    document.getElementById("nickname").placeholder = langCurrent["nickname_placeholder"]

    document.getElementById("motivation_label").innerHTML = langCurrent["motivation_label"]
    document.getElementById("motivation").placeholder = langCurrent["motivation_placeholder"]

    document.getElementById("mobile_label").innerHTML = langCurrent["mobile_label"]
    document.getElementById("mobile").placeholder = langCurrent["mobile_placeholder"]

    document.getElementById("email_label").innerHTML = langCurrent["email_label"]
    document.getElementById("email").placeholder = langCurrent["email_placeholder"]

    document.getElementById("street_label").innerHTML = langCurrent["street_label"]
    document.getElementById("street").placeholder = langCurrent["street_placeholder"]

    document.getElementById("postal-code_label").innerHTML = langCurrent["postal-code_label"]
    document.getElementById("postal-code").placeholder = langCurrent["postal-code_placeholder"]

    document.getElementById("city_label").innerHTML = langCurrent["city_label"]
    document.getElementById("city").placeholder = langCurrent["city_placeholder"]

    document.getElementById("country_label").innerHTML = langCurrent["country_label"]

    document.getElementById("iban_label").innerHTML = langCurrent["iban_label"]
    document.getElementById("iban").placeholder = langCurrent["iban_placeholder"]

    document.getElementById("dob_label").innerHTML = langCurrent["dob_label"]
    document.getElementById("dob").placeholder = langCurrent["dob_placeholder"]

    document.getElementById("mandatory_field").innerHTML = langCurrent["mandatory_field"]

    document.getElementById("please_choose_photo").innerHTML = langCurrent["please_choose_photo"]
    document.querySelector('#imageUpload_button').innerHTML = langCurrent["imageUpload_button"]
    document.getElementById("info").innerHTML = langCurrent["no_photo_loaded_yet"]

    document.getElementById("step_2_footer").innerHTML = langCurrent["step_2_footer"]

    document.querySelector('#Weiter_step_2_button').innerHTML = langCurrent["Weiter_step_2_button"]

    document.getElementById("step_3_confirmation").innerHTML = langCurrent["step_3_confirmation"]
    document.getElementById("step_3_confirmation_admin").innerHTML = langCurrent["step_3_confirmation_admin"]

    document.querySelector('#return_button').innerHTML = langCurrent["return_button"]
    document.querySelector('#return_button_admin').innerHTML = langCurrent["return_button"]
    document.querySelector('#check_sms_code_button').innerHTML = langCurrent["check_sms_code_button"]
    document.querySelector('#register_user_change_phone').innerHTML = langCurrent["register_user_change_phone"]
    document.querySelector('#register_user_button').innerHTML = langCurrent["register_user_button"]
    document.querySelector('#register_user_button_admin').innerHTML = langCurrent["register_user_button"]

    document.getElementById("step_4_confirmation").innerHTML = langCurrent["step_4_confirmation"]
    document.querySelector('#Send_another_user_button').innerHTML = langCurrent["Send_another_user_button"]

    document.getElementById("awaitLoader_checkMandatoryFields_text").innerHTML =
        langCurrent["awaitLoader_checkMandatoryFields_text"]
    document.getElementById("sending_sms_loader_text").innerHTML =
        langCurrent["sending_sms_loader_text"]
    document.getElementById("registration_loader_text").innerHTML =
        langCurrent["registration_loader_text"]
    document.getElementById("registration_loader_text_admin").innerHTML =
        langCurrent["registration_loader_text_admin"]

    let mobile = document.getElementById("mobile").value
    if (mobile) {  // If not undefined
        document.getElementById("step_check_phone_by_sms_header").innerHTML =
            langCurrent["step_check_phone_by_sms_header"] + mobile
    } else {  // If undefined
        document.getElementById("step_check_phone_by_sms_header").innerHTML =
            langCurrent["step_check_phone_by_sms_header"]
    }

}

// -------------------------------------------------------------------------------------------------------------------

// >>>>> ---------- Croppie functional section START ---------- <<<<<

// Destroy (clear) Croppie object
function destroyCroppie() {
    if (!croppie_circle) return
    croppie_circle.destroy()
    croppie_circle = null
    hideDiv("croppie-circle")
    document.getElementById("final-image").src = ""

}

// Croppie object initialization
function initializeCroppie() {

    croppie_circle = new Croppie(croppie_el, {

        // Circle size
        viewport: {width: 170, height: 170, type: 'circle'},

        // Croppie frame size
        boundary: {width: 350, height: 350},

        showZoomer: true
    });

    // Add Croppie listener than action on any changes
    croppie_circle.element.addEventListener('update', function (event) {

        // const cropData = event.detail;
        console.log('Update Croppie Preview...')
        imagePreview()

    });
}

function imagePreview() {
    croppie_circle.result({
        type: 'base64'
    })
        .then(function (resp) {
            document.getElementById("final-image").src = resp
            croppieResultBase64Str = resp
        })
}

function sendCroppieResultToBackend() {

    // Check if we have any Croppie result
    if (croppieResultBase64Str === "N/A") {
        return
    }

    // Make this for file Blob object and send it to backend to save result as a file (upload folder)
    // size: "original" mean no image resize
    croppie_circle.result({
        type: "blob",
        size: {width: 400, height: 400},
        format: "png"
    })
        .then(function (croppieResultBlob) {

            let formData = new FormData();
            let originalFileName = document.getElementById("file-name").value

            formData.append('files[]', croppieResultBlob,
                "croppie_" + originalFileName.replace(/\.[^/.]+$/, "") + ".png");
            console.log("added a croppie result file !!! ")

            let xhr = new XMLHttpRequest();
            xhr.open('POST', './files', true);

            xhr.onload = function () {
                if (xhr.status === 200) {

                    document.getElementById("info").innerHTML = langCurrent["photo_loaded"]
                } else {

                    document.getElementById("info").innerHTML = langCurrent["photo_loading_failed"]
                }
            };

            xhr.send(formData);
            document.getElementById("imageUpload").value = []

        });
}

async function getCroppieResultBase64() {

    // Check if we have any Croppie result
    if (croppieResultBase64Str === "N/A") {
        return
    }

    // Do this for page image -> size: "original" mean no image resize
    croppieResultBase64Str = await croppie_circle.result({
        type: 'base64',
        size: {width: 400, height: 400},
        format: "png"
    })
    // hideDiv("croppie-buttons")
    // hideDiv("croppie-circle")
}

// >>>>> ---------- Croppie functional section END ---------- <<<<<

// >>>>> Loging user's activities on the page (button click, field inputs) --------------
// Get DateTime in '2022-09-14 15:43:15' format
function padTo2Digits(num) {
    return num.toString().padStart(2, '0');
}

function formatDate(date) {
    return (
        [
            date.getFullYear(),
            padTo2Digits(date.getUTCMonth() + 1),
            padTo2Digits(date.getUTCDate()),
        ].join('-') +
        ' ' +
        [
            padTo2Digits(date.getUTCHours()),
            padTo2Digits(date.getUTCMinutes()),
            padTo2Digits(date.getUTCSeconds()),
        ].join(':')
    );
}

// Logging ALL users inputting on the site ----------------------------------------------
function formEventListener() {

    // Personal data choice
    document.getElementById("personalDataChoiceYes").addEventListener("click", function () {
        console.log("Personal data choice:", this.value)
        PersonalDataChoice = "Yes"
        showPersonalDataFields()
    })
    document.getElementById("personalDataChoiceNo").addEventListener("click", function () {
        console.log("Personal data choice:", this.value)
        PersonalDataChoice = "No"
        hidePersonalDataFields()
    })

    // Add an event listener that fires when a user clicks a button:
    document.getElementById("Weiter_step_1_button").addEventListener("click", function () {
        loggingUserActivities("Weiter_step_1_button", "click");
    })
    document.getElementById("imageUpload_button").addEventListener("click", function () {
        loggingUserActivities("imageUpload_button", "click");
    })
    document.getElementById("Weiter_step_2_button").addEventListener("click", function () {
        loggingUserActivities("Weiter_step_2_button", "click");
    })
    document.getElementById("register_user_button").addEventListener("click", function () {
        loggingUserActivities("register_user_button", "click");
    })
    document.getElementById("return_button").addEventListener("click", function () {
        loggingUserActivities("return_button", "click");
    })
    document.getElementById("Send_another_user_button").addEventListener("click", function () {
        loggingUserActivities("Send_another_user_button", "click");
    })

    // Add an event listener that fires when a user leave form field:
    document.getElementById("setUserRole").addEventListener("change", function () {
        getUserRole()
        loggingUserActivities("setUserRole:", this.value);
    })
    document.getElementById("organization").addEventListener("change", function () {
        loggingUserActivities("organization:", this.value);
    })
    document.getElementById("branch").addEventListener("change", function () {
        loggingUserActivities("branch:", this.value);
    })
    document.getElementById("first-name").addEventListener("change", function () {
        loggingUserActivities("first-name:", this.value);
    })
    document.getElementById("last-name").addEventListener("change", function () {
        loggingUserActivities("last-name:", this.value);
    })
    document.getElementById("nickname").addEventListener("change", function () {
        loggingUserActivities("nickname:", this.value);
    })
    document.getElementById("motivation").addEventListener("change", function () {
        loggingUserActivities("motivation:", this.value);
    })
    document.getElementById("mobile").addEventListener("change", function () {
        loggingUserActivities("mobile:", this.value);
    })
    document.getElementById("email").addEventListener("change", function () {
        loggingUserActivities("email:", this.value);
    })
    document.getElementById("street").addEventListener("change", function () {
        loggingUserActivities("street:", this.value);
    })
    document.getElementById("postal-code").addEventListener("change", function () {
        loggingUserActivities("postal-code:", this.value);
    })
    document.getElementById("city").addEventListener("change", function () {
        loggingUserActivities("city:", this.value);
    })
    document.getElementById("country").addEventListener("change", function () {
        setCountryCode()
        loggingUserActivities("country:", this.value);
    })
    document.getElementById("iban").addEventListener("change", function () {
        loggingUserActivities("iban:", this.value);
    })
    document.getElementById("dob").addEventListener("change", function () {
        loggingUserActivities("Geburtsdatum:", this.value);
    })
}

// Make user activities logging string and send it to backEnd for record to the user_activity.csv file
function loggingUserActivities(objectName, objectValue) {

    var loggingSting = "'" + formatDate(new Date()) + "', '" + objectName + "', '" + objectValue + "'"

    console.log(loggingSting)
    console.log("Send loggingSting to Backend...")
    fetchUserLogging(loggingSting)
}

async function fetchUserLogging(loggingSting) {
    let url = './user_activities'
    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'text/html',
            'Content-Type': 'text/html'
        },
        body: loggingSting
    })
    // waits until the request completes...
    let res = await response.text(); // read response body and parse as JSON
    console.log("Send loggingSting to Backend respond: " + res)
}

// --------------------------------------------------------------------------------------

// Personal data section ----------------------------------------------------------------
function hidePersonalDataFields() {
    hideDiv("address_street")
    hideDiv("address_postal_code")
    hideDiv("address_city")
    hideDiv("user_iban")

    document.getElementById("dob").value = '1900-01-01'
    hideDiv("user_dob")
}

function showPersonalDataFields() {
    showDiv("address_street")
    showDiv("address_postal_code")
    showDiv("address_city")
    showDiv("user_iban")

    document.getElementById("dob").value = null
    showDiv("user_dob")
}

// --------------------------------------------------------------------------------------

// User ROLE section --------------------------------------------------------------------
function setUserRoleListDropdown() {

    let select = document.getElementById("setUserRole")
    let options = langCurrent["user_roles"]

    // Remove all options
    let i, L = select.options.length - 1
    for (i = L; i >= 0; i--) {
        select.remove(i)
    }

    for (let i = 0; i < options.length; i++) {
        // Add relevant options
        let opt = options[i]
        let el = document.createElement("option")
        el.textContent = opt
        el.value = opt
        select.appendChild(el)
    }


    if (currentUserRole.length === 0) {  // Initial PAGE loading ------------------------------
        // Set default Users role dropdown Name & Values
        userRole = langCurrent["user_role_default"]
        userRoleValue = langCurrent["user_role_default_value"]
        select.value = userRole
        getUserRole()

    } else {
        if (currentUserRole === "employee") {
            document.getElementById("setUserRole").selectedIndex = 0
        } else {
            document.getElementById("setUserRole").selectedIndex = 1
        }
    }

    console.log("-----------------------------------------")
    console.log("currentUserRole:", currentUserRole)
    console.log("userRole:", userRole)
    console.log("userRoleValue:", userRoleValue)
    console.log("-----------------------------------------")
}

function getUserRole() {
    let index = langCurrent["user_roles"].indexOf(document.getElementById("setUserRole").value)
    userRole = langCurrent["user_roles"][index]
    userRoleValue = langCurrent["user_roles_values"][index]

    if (userRoleValue[0] === "employee" && userRoleValue.length === 1) {

        currentUserRole = "employee"

        // document.getElementById("personalDataChoiceYes").checked = true
        // document.getElementById("personalDataChoiceNo").checked = false
        // showEmployeeFields()

    } else {
        currentUserRole = "owner"

        // document.getElementById("personalDataChoiceYes").checked = false
        // document.getElementById("personalDataChoiceNo").checked = true
        // hideEmployeeFields()

    }
    console.log("userRole: " + userRole)
    console.log("userRoleValue: " + userRoleValue)
    console.log("currentUserRole: " + currentUserRole)
}

function hideEmployeeFields() {
    hideDiv("nickname_section")
    hideDiv("motivation_section")

    hideDiv("address_street")
    hideDiv("address_postal_code")
    hideDiv("address_city")
    hideDiv("user_iban")

    document.getElementById("dob").value = '1900-01-01'
    hideDiv("user_dob")
}

function showEmployeeFields() {
    showDiv("address_street")
    showDiv("address_postal_code")
    showDiv("address_city")
    showDiv("user_iban")

    document.getElementById("dob").value = null
    showDiv("user_dob")
}

// --------------------------------------------------------------------------------------

function isMobileDevice() {


    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        return true
    } else {
        return false
    }

}

async function getJsonFromBackend(url) {

    async function getJsonRespond(url) {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'text/html',
                'Content-Type': 'application/json'
            }
        })

        // Waits until the request completed... then read response body and parse as JSON
        let responseJson = await response.text()
        return JSON.parse(responseJson)
    }

    return await getJsonRespond(url)
}

async function callBackendWithPromiseJsonRespond(url) {

    const response = await fetch(url, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })

    // Waits until the request completed... then read response as JSON
    return await response.json()

}

function resize() {
    console.log('resized...')
}

async function callBackendWithPromiseUrlAndBody(url, bodyJson) {

    console.log("callBackendWithPromiseUrlAndBody(" + url + ", " + bodyJson + ")")

    let response = await fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }, body: JSON.stringify(bodyJson)
    });

    let res = await response.json() // read response body and parse as JSON
    console.log("Backend respond: " + res)

    return res
}

async function callBackendWithPromiseLogging(json_obj) {

    console.log("callBackendWithPromise()")

    let url = './log';
    let response = await fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }, body: JSON.stringify(json_obj)
    });

    let res = await response.text(); // read response body and parse as JSON
    //console.log(JSON.stringify(resJson));


}

async function callBackendWithPromiseRegistration(json_obj) {

    let url = './data';
    let response = await fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }, body: JSON.stringify(json_obj)
    });

    return await response.json()

}

async function callBackendWithPromiseAssignToTeam(requestBodyJson, requestUrl) {

    let response = await fetch(requestUrl, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }, body: JSON.stringify(requestBodyJson)
    })

    return await response.text()
}

function setNoteMandatory(fieldName) {
    document.getElementById(fieldName + "_i").innerHTML = "<span style='color: red'><i>" +
        langCurrent["mandatory_alert"] + "</i><span>"
}

function setNoteMandatoryDOB(fieldName) {
    document.getElementById(fieldName + "_i").innerHTML = "<span style='color: red'><i>" +
        langCurrent["mandatory_alert_dob"] + "</i><span>"
}

function setNoteMandatoryEmail(fieldName) {
    document.getElementById(fieldName + "_i").innerHTML = "<span style='color: red'><i>" +
        langCurrent["mandatory_alert_email"] + "</i><span>"
}

function setNoteMandatoryMobilePhoneExist() {
    document.getElementById("mobile" + "_ii").innerHTML = "<span style='color: red'><i>" +
        langCurrent["mandatory_alert_mobile_phone_exist"] + "</i><span>"
}

function setNoteMandatoryMobile(fieldName) {
    document.getElementById(fieldName + "_i").innerHTML = "<span style='color: red'><i>" +
        langCurrent["mandatory_alert_mobile"] + "</i><span>"
}

function clearAllNoteMandatory() {

    document.getElementById("organization_i").innerHTML = ""
    document.getElementById("first-name_i").innerHTML = ""
    document.getElementById("last-name_i").innerHTML = ""
    document.getElementById("mobile_i").innerHTML = ""
    document.getElementById("mobile_ii").innerHTML = ""
    document.getElementById("email_i").innerHTML = ""
    document.getElementById("street_i").innerHTML = ""
    document.getElementById("postal-code_i").innerHTML = ""
    document.getElementById("city_i").innerHTML = ""
    document.getElementById("iban_i").innerHTML = ""
    document.getElementById("dob_i").innerHTML = ""
    document.getElementById("sms_code_i").innerHTML = ""
}

function getAgeFromDate(DOB) {
    let today = new Date()
    let birthDate = new Date(DOB)
    let age = today.getFullYear() - birthDate.getFullYear()
    let m = today.getMonth() - birthDate.getMonth()
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--
    }
    return age
}

function validateEmailAddress(email) {

    const isEmailCorrect = email.match(
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    )

    return isEmailCorrect
}

function validateMobilePhone(mobile) {

    let isMobileCorrect

    // Check if mobile more than 11 digits (plus "+" character) = 12
    isMobileCorrect = mobile.replace(/\s+/g, '').length >= 12

    return isMobileCorrect
}

function validateDOB() {
    let dob = document.getElementById("dob").value

    console.log("validateDOB() working...")
    console.log("getAgeFromDate(dob):", getAgeFromDate(dob))

    // Check if DOB less than 16 years
    if (getAgeFromDate(dob) < 16) {
        document.getElementById("dob").focus()
        setNoteMandatoryDOB("dob")
        return false
    }

    // Check if DOB more than 91 years
    if (getAgeFromDate(dob) > 91) {
        document.getElementById("dob").focus()
        setNoteMandatoryDOB("dob")
        return false
    }
    return true
}

function validateFieldIsNotBlank(fieldName) {
    let isFieldValid = true
    let fieldValue = document.getElementById(fieldName).value
    if (!fieldValue) {
        document.getElementById(fieldName).focus()
        setNoteMandatory(fieldName)
        isFieldValid = false
    }
    return isFieldValid
}

async function validateIBAN(iban) {

    let url = "./iban?iban=" + iban
    console.log('url:', url)

    let validationRespond = await fetch(url).then((response) => response.text())
    console.log('iban check response:', validationRespond)
    return validationRespond === "ok"
}

function removeLeadSpacesInFormFields() {
    document.getElementById("organization").value = document.getElementById("organization").value.trim()
    document.getElementById("branch").value = document.getElementById("branch").value.trim()
    document.getElementById("first-name").value = document.getElementById("first-name").value.trim()
    document.getElementById("last-name").value = document.getElementById("last-name").value.trim()
    document.getElementById("street").value = document.getElementById("street").value.trim()
    document.getElementById("city").value = document.getElementById("city").value.trim()
    document.getElementById("nickname").value = document.getElementById("nickname").value.trim()
    document.getElementById("motivation").value = document.getElementById("motivation").value.trim()
    document.getElementById("email").value = document.getElementById("email").value.trim()
    document.getElementById("postal-code").value = document.getElementById("postal-code").value.trim()
}

function clearAllFormFields() {

    clearAllNoteMandatory()

    // Not need to clean Company or Branch
    // document.getElementById("organization").value = ""
    // document.getElementById("branch").value = ""

    document.getElementById("first-name").value = ""
    document.getElementById("last-name").value = ""
    document.getElementById("nickname").value = ""
    document.getElementById("motivation").value = ""

    document.getElementById("mobile").value = ""
    document.getElementById("email").value = ""
    document.getElementById("street").value = ""
    document.getElementById("postal-code").value = ""
    document.getElementById("city").value = ""

    document.getElementById("iban").value = ""
    document.getElementById("dob").value = ""

    document.getElementById("file-name").value = ""

    // Clear Croppie Avatar data
    croppieResultBase64Str = "N/A"
    destroyCroppie()
    initializeCroppie()
}

function getAllFormFields() {

    return {
        "organization": document.getElementById("organization").value,
        "branch": document.getElementById("branch").value,
        "first_name": document.getElementById("first-name").value.trim(),
        "last_name": document.getElementById("last-name").value.trim(),
        "nickname": document.getElementById("nickname").value,
        "motivation": document.getElementById("motivation").value,
        "mobile": document.getElementById("mobile").value,
        "email": document.getElementById("email").value,
        "street": document.getElementById("street").value,
        "postal_code": document.getElementById("postal-code").value,
        "city": document.getElementById("city").value,
        "country": document.getElementById("country").value,
        "iban": document.getElementById("iban").value,
        "dob": document.getElementById("dob").value
    }
}

function showAwaitLoader() {
    showDiv("awaitLoader_checkMandatoryFields")
    hideDiv("Weiter_step_2_button")
}

function hideAwaitLoader() {
    hideDiv("awaitLoader_checkMandatoryFields")
    showDiv("Weiter_step_2_button")
}

async function checkMandatoryFields(formFields) {

    showAwaitLoader()

    if (!formFields["organization"]) {
        hideAwaitLoader()
        document.getElementById("organization").focus()
        setNoteMandatory("organization")
        return false
    }

    if (!formFields["first_name"]) {
        hideAwaitLoader()
        document.getElementById("first-name").focus();
        setNoteMandatory("first-name")
        return false
    }

    if (!formFields["last_name"]) {
        hideAwaitLoader()
        document.getElementById("last-name").focus();
        setNoteMandatory("last-name")
        return false
    }

    // Check if mobile is not empty
    if (!formFields["mobile"]) {
        hideAwaitLoader()
        document.getElementById("mobile").focus();
        setNoteMandatory("mobile")
        return false
    }
    // Check if mobile phone is correct
    if (!validateMobilePhone(formFields["mobile"])) {
        hideAwaitLoader()
        document.getElementById("mobile").focus()
        setNoteMandatoryMobile("mobile")
        return false
    }
    // Check is Mobile phone already present in Cognito
    let bodyJson = {
        "mobile": formFields["mobile"]
    }
    let url = "./check_mobile_in_cognito"
    let checkMobileResult = await callBackendWithPromiseUrlAndBody(url, bodyJson).then((respond) => {
        console.log('mobileCheckResult:', respond)
        if (respond["api_respond"] === "Mobile exist") {
            hideAwaitLoader()
            document.getElementById("mobile").focus()
            setNoteMandatoryMobilePhoneExist()
            return false
        } else {
            return true
        }
    })
    if (!checkMobileResult) {
        return false
    }

    // Check if email is not empty
    if (!formFields["email"]) {
        hideAwaitLoader()
        document.getElementById("email").focus()
        setNoteMandatory("email")
        return false
    }
    // Check if email address is correct!
    if (!validateEmailAddress(formFields["email"])) {
        hideAwaitLoader()
        document.getElementById("email").focus()
        setNoteMandatoryEmail("email")
        return false
    }

    if (!formFields["street"] && PersonalDataChoice === "Yes") {
        hideAwaitLoader()
        document.getElementById("street").focus();
        setNoteMandatory("street")
        return false
    }

    if (!formFields["postal_code"] && PersonalDataChoice === "Yes") {
        hideAwaitLoader()
        document.getElementById("postal-code").focus();
        setNoteMandatory("postal-code")
        return false
    }

    if (!formFields["city"] && PersonalDataChoice === "Yes") {
        hideAwaitLoader()
        document.getElementById("city").focus();
        setNoteMandatory("city")
        return false
    }

    if (!formFields["country"]) {
        hideAwaitLoader()
        document.getElementById("country").focus();
        setNoteMandatory("country")
        return false
    }

    // IBAN is not blank
    if (!formFields["iban"] && PersonalDataChoice === "Yes") {
        hideAwaitLoader()
        document.getElementById("iban").focus()
        setNoteMandatory("iban")
        return false
    }

    // Validate if IBAN is correct
    if (PersonalDataChoice === "Yes") {
        let IBANCheckResult = await validateIBAN(formFields["iban"])
        if (!IBANCheckResult) {
            hideAwaitLoader()
            document.getElementById("iban").focus()
            document.getElementById("iban_i").innerHTML =
                "<span style='color: red'><i>" + langCurrent["IBAN_not_correct"] + "</i><span>"
            return false
        }
    }

    // Validate DOB
    if (PersonalDataChoice === "Yes") {
        // Check if field is not blank and if blank: focus, notify, exit
        if (!validateFieldIsNotBlank("dob")) {
            hideAwaitLoader()
            return false
        }

        // Check if DOB entered correctly >16 years <91
        console.log("Check if DOB entered correctly >16 years <91:")
        if (!validateDOB()) {
            hideAwaitLoader()
            return false
        }
    }

    // All Good!
    hideAwaitLoader()
    return true
}

function sendDataForLogging() {

    let data = {
        "action": "data",
        "organization": document.getElementById("organization").value,
        "branch": document.getElementById("branch").value,
        "last-name": document.getElementById("last-name").value,
        "first-name": document.getElementById("first-name").value,
        "nickname": document.getElementById("nickname").value,
        "motivation": document.getElementById("motivation").value,
        "mobile": document.getElementById("mobile").value,
        "email": document.getElementById("email").value,
        "street": document.getElementById("street").value,
        "postal-code": document.getElementById("postal-code").value,
        "city": document.getElementById("city").value,
        "country": document.getElementById("country").value,
        "iban": document.getElementById("iban").value,
        "dob": document.getElementById("dob").value,
        "file-name": document.getElementById("file-name").value,
        "imageBase64": croppieResultBase64Str

    };

    callBackendWithPromiseLogging(data)
}

async function registerUser() {

    let userRegistrationUrl = window.location.href
    console.log("userRegistrationUrl:", userRegistrationUrl)

    let data = {
        "action": "data",
        "userInitialUrl": userInitialUrl,
        "userRegistrationUrl": userRegistrationUrl,
        "admin_password": adminPassword,
        "sms_code": document.getElementById("sms_code").value,
        "user-roles": userRoleValue,
        "organization": document.getElementById("organization").value,
        "branch": document.getElementById("branch").value,
        "last-name": document.getElementById("last-name").value,
        "first-name": document.getElementById("first-name").value,
        "nickname": document.getElementById("nickname").value,
        "motivation": document.getElementById("motivation").value,

        // Remove ALL spaces from mobile field
        "mobile": document.getElementById("mobile").value.replace(/\s+/g, ''),

        // Remove ALL spaces from email field
        "email": document.getElementById("email").value.replace(/\s+/g, ''),

        "street": document.getElementById("street").value,
        "postal-code": document.getElementById("postal-code").value,
        "city": document.getElementById("city").value,
        "country": document.getElementById("country").value,

        // Remove ALL spaces from iban field
        "iban": document.getElementById("iban").value.replace(/\s+/g, ''),

        "dob": document.getElementById("dob").value,
        "file-name": document.getElementById("file-name").value,
        "imageBase64": croppieResultBase64Str,
        "countryCode": countryCode,
        "initialTeamId": initialTeamId,
        "initialTeamName": initialTeamName,
        "initialCompanyName": initialCompanyName
    }

    return await callBackendWithPromiseRegistration(data)
}

function assignUserToTeam(teamId, userPhoneNumber, user_id) {

    if (initialTeamName !== "") {
        console.log("Try to assign user to Team, teamId: " + teamId + " userPhoneNumber: " + userPhoneNumber)

        let requestUrl = "/admin_dashboard_assign_user_to_team?password=" + adminPassword
        let requestBodyJson = {
            "team_id": teamId,
            "user_phone_number": userPhoneNumber,
            "user_id": user_id
        }

        callBackendWithPromiseAssignToTeam(requestBodyJson, requestUrl).then(function (backendRespond) {
            console.log("Assigned QR-Code: " + backendRespond)
        })

    } else {
        console.log("No initial CORRECT TeamId found - assignment to Company/Team is not possible")
    }


}

function goToStep1CleanValues() {

    window.location.reload();

    // hideDiv("step-1-1")
    // hideDiv("step-2")
    // hideDiv("step-3")
    // hideDiv("step-4")
    // clearAllFormFields()
    // showDiv("step-1")

}

function goToStep1_1() {

    hideDiv("step-1")
    hideDiv("step-2")
    hideDiv("step-3")
    hideDiv("step-4")

    showDiv("step-1-1")

}

function goToStep2() {

    hideDiv("step-1")
    hideDiv("step-1-1")
    hideDiv("step-3")
    hideDiv("step-4")

    showDiv("step-2")

}

function goToStep2_change_phone() {
    hideDiv("step-1")
    hideDiv("step-1-1")
    hideDiv("step-3")
    hideDiv("step_check_phone_by_sms")
    hideDiv("step-4")

    showDiv("step-2")
    document.getElementById("mobile").focus()
}

function remove_spaces_from_Form_fields() {
    document.getElementById("first-name").value = document.getElementById("first-name").value.trim()
    document.getElementById("last-name").value = document.getElementById("last-name").value.trim()
}

async function goToStep3() {

    // Remove spaces from Form_fields
    remove_spaces_from_Form_fields()

    // Check is Admin mode
    if (adminPasswordConfirm) {
        showDiv("step-3_buttons_admin")
    } else {
        showDiv("step-3_buttons")
    }

    // Get all form fields values
    let formFields = getAllFormFields()

    // Remove spaces with trim() from ALL text fields in Registration form
    removeLeadSpacesInFormFields()

    // Clear Mandatory notes that appear in previous check
    clearAllNoteMandatory()

    // Check and validate if all mandatory fields is OK
    let checkMandatoryFieldsResult = await checkMandatoryFields(formFields)
    if (!checkMandatoryFieldsResult) {
        return
    }

    // send Croppie result image to Backend (async, but it is not impact on below code...)
    sendCroppieResultToBackend()

    // get Croppie Result image as Base64 string to croppieResultBase64Str variable
    // Attention - async Croppie function inside!
    // so you can't get croppieResultBase64Str outside .then immediately or use await =
    getCroppieResultBase64().then(() => {
        console.log("Get croppieResultBase64Str as resulted image...")
        //console.log(croppieResultBase64Str)
    })

    // Make STEP_3 html confirmation page
    let confContent = ""

    // Check if Admin mode
    if (adminPasswordConfirm) {
        confContent = langCurrent["step_3_conf_form_header_admin"] + "<br><br>"
    } else {
        confContent = langCurrent["step_3_conf_form_header"] + "<br><br>"
    }

    confContent += langCurrent["step_3_conf_form_organization"] + "<b>" + formFields["organization"] + "</b><br>"
    confContent += langCurrent["step_3_conf_form_branch"] + "<b>" + formFields["branch"] + "</b><br>"
    confContent += langCurrent["step_3_conf_form_first_name"] + "<b>" + formFields["first_name"] + "</b><br>"
    confContent += langCurrent["step_3_conf_form_last_name"] + "<b>" + formFields["last_name"] + "</b><br>"
    confContent += langCurrent["step_3_conf_form_nickname"] + "<b>" + formFields["nickname"] + "</b><br>"
    confContent += langCurrent["step_3_conf_form_motivation"] + "<b>" + formFields["motivation"] + "</b><br>"
    confContent += langCurrent["step_3_conf_form_mobile"] + "<b>" + formFields["mobile"] + "</b><br>"
    confContent += langCurrent["step_3_conf_form_email"] + "<b>" + formFields["email"] + "</b><br>"
    confContent += langCurrent["step_3_conf_form_country"] + "<b>" + formFields["country"] + "</b><br>"

    if (PersonalDataChoice === "Yes") {
        confContent += langCurrent["step_3_conf_form_street"] + "<b>" + formFields["street"] + "</b><br>"
        confContent += langCurrent["step_3_conf_form_postal_code"] + "<b>" + formFields["postal_code"] + "</b><br>"
        confContent += langCurrent["step_3_conf_form_city"] + "<b>" + formFields["city"] + "</b><br>"
        confContent += langCurrent["step_3_conf_form_iban"] + "<b>" + formFields["iban"] + "</b><br>"
        confContent += langCurrent["step_3_conf_form_dob"] + "<b>" + formFields["dob"] + "</b><br>"
    }

    document.getElementById("entered-values").innerHTML = confContent

    // Validate IBAN - not need to check IBAN again - already done this on STEP2
    // checkIban(formFields["iban"])

    hideDiv("step-1")
    hideDiv("step-1-1")
    hideDiv("step-2")
    hideDiv("step-4")

    showDiv("step-3")

    sendDataForLogging()

}

function goToStep4Admin() {
    // Check if Admin mode then go to User registration process
    if (adminPasswordConfirm) {
        hideDiv("step-3_buttons_admin")
        showDiv("registration_loader_admin")

        goToStep4()

    }
}

function goToStep_check_sms_code() {

    // Get section header
    let mobile = document.getElementById("mobile").value
    if (mobile) {  // If not undefined
        document.getElementById("step_check_phone_by_sms_header").innerHTML =
            langCurrent["step_check_phone_by_sms_header"] + mobile
    } else {  // If undefined
        document.getElementById("step_check_phone_by_sms_header").innerHTML =
            langCurrent["step_check_phone_by_sms_header"]
    }

    hideDiv("step-3_buttons")
    showDiv("sending_sms_loader")

    send_sms_code().then(function (response) {

        console.log("Backend respond for send sms code:" + JSON.stringify(response, null, 2))

        if (response["sms_code"]) {
            hideDiv("sending_sms_loader")
            showDiv("step-3_buttons")
            hideDiv("step-3")
            showDiv("step_check_phone_by_sms")

        } else {
            hideDiv("sending_sms_loader")
            showDiv("step-3_buttons")
        }
    })

}

async function send_sms_code() {
    // Remove ALL spaces from mobile field
    let payload = {
        "mobile_phone": document.getElementById("mobile").value.replace(/\s+/g, '')
    }
    return await callBackendWithPromiseSendSmsCode(payload)
}

async function callBackendWithPromiseSendSmsCode(payload) {

    let url = './send_sms_code';
    let response = await fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }, body: JSON.stringify(payload)
    });

    return await response.json()

}

function goToStep4() {

    if (!adminPasswordConfirm) {
        // SMS confirmation section
        let sms_code = document.getElementById("sms_code").value
        console.log("sms_code.length: ", sms_code.length)
        // Blank sms_code field
        if (!sms_code) {

            document.getElementById("sms_code").focus()
            document.getElementById("sms_code_i").innerHTML =
                "<span style='color: red'><i>" + langCurrent["mandatory_alert_sms_code"] + "</i><span>"
            return false

        }
        // Not enough numbers in sms_code field
        if (sms_code.length < 6) {
            document.getElementById("sms_code").focus();
            document.getElementById("sms_code_i").innerHTML =
                "<span style='color: red'><i>" + langCurrent["mandatory_alert_sms_code"] + "</i><span>"
            return false
        }

        hideDiv("register_user_buttons")
        showDiv("registration_loader")
    }

    registerUser().then(function (respond) {

        console.log("Backend respond for registration event:" + JSON.stringify(respond, null, 2))

        if (respond["result"] === "registration_ok") {

            document.getElementById("upload-result").innerHTML = langCurrent["registration_ok"]

            assignUserToTeam(
                initialTeamId,
                document.getElementById("mobile").value.replace(/\s+/g, ''),
                respond["user_id"])

            hideDiv("registration_loader_admin")
            hideDiv("step-3")

            hideDiv("registration_loader")
            hideDiv("step_check_phone_by_sms")
            showDiv("step-4")
        }

        if (respond["user_id"] === "sms code is wrong!") {
            hideDiv("registration_loader")
            showDiv("register_user_buttons")
            // document.getElementById("sms_code").value = ""
            smsCodeIMask.value = ""  // Clear IMask object value
            document.getElementById("sms_code").focus()
            document.getElementById("sms_code_i").innerHTML =
                "<span style='color: red'><i>" + langCurrent["mandatory_alert_sms_code"] + "</i><span>"
            return false
        }

        if (respond["result"] === "registration_error") {
            document.getElementById("upload-result").innerHTML = langCurrent["registration_error"]

            hideDiv("registration_loader_admin")
            hideDiv("step-3")

            hideDiv("registration_loader")
            hideDiv("step_check_phone_by_sms")
            showDiv("step-4")
        }
    })

}

function hideDiv(id) {
    document.getElementById(id).style.display = "none";

}

function showDiv(id, type = "block") {
    document.getElementById(id).style.display = type;

}

function getTs() {

    let d = new Date();
    return String(d.getTime())

}

function onFileUploadChange(e) {
    var file = e.target.files[0];
    var fr = new FileReader();

    // Comment this to use Croppie object preview against old image preview
    // fr.onload = onFileReaderLoad;

    // ---------------------------- Croppie BIND to the uploaded file ------------------------------------
    if (file) {  // If file exist
        fr.onload = function (e) {

            // !!! Croppie has a very strict requirement that all elements need to be visible before calling bind!!!
            showDiv("croppie-circle")

            console.log("Binding image to Croppie...")
            // console.log(e.target.result)

            croppie_circle.bind({
                // url: 'upload/' + fileName
                url: e.target.result

            }).then(function () {

                console.log('Croppie bind complete')
                // Display initial preview
                showDiv("croppie-circle")

                console.log('Make Croppie Preview...')
                imagePreview()
            })
        }

        fr.readAsDataURL(file);
        // -----------
        let fileSelect = document.getElementById("imageUpload");

        let formData = new FormData();

        // file-name
        let fileName = getTs() + '-' + file.name
        document.getElementById("file-name").value = fileName

        formData.append('files[]', file, fileName);
        console.log("added initial file !!! ")

        let xhr = new XMLHttpRequest();
        xhr.open('POST', './files', true);

        xhr.onload = function () {
            if (xhr.status === 200) {

                document.getElementById("info").innerHTML = langCurrent["photo_loaded"]
            } else {

                document.getElementById("info").innerHTML = langCurrent["photo_loading_failed"]
            }
        };

        xhr.send(formData);
        document.getElementById("imageUpload").value = []
    }

}

function checkIban(iban) {

    if (currentUserRole === "employee") {
        let url = "./iban?iban=" + iban

        console.log('url:', url);

        fetch(url).then((response) => response.text()).then((data) => {
            console.log('iban check response:', data);
            if (data === "ok") {
                // nothing
                document.getElementById("iban-result").innerHTML = ""
            } else {
                document.getElementById("iban-result").innerHTML = langCurrent["IBAN_not_correct"]
            }
        })
    }

}

// for REWE signup we would need to make it possible to set a nickname
// but allow only one word with characters and no special characters or numbers etc.

function checkReweNickname() {
    if (initialTeamId) {
        for (let i = 0; i < rewe_teams.length; i++) {
            if (initialTeamId === rewe_teams[i]["id"]) {
                allowOneWordAndNoSpecialChar()
                break
            }
        }
    }
}

// Function to allow only one word with characters
function allowOneWordAndNoSpecialChar() {
      const inputField = document.getElementById('nickname');
      const value = inputField.value;

      // Use a regular expression to allow only alphabetic characters
      const cleanedValue = value.replace(/[^a-zA-Z]/g, '');

      // Update the input field value to the cleaned value (letters only)
      inputField.value = cleanedValue;
    }

function hideReweFields() {
    // hideDiv("nickname_section")
    hideDiv("motivation_section")
    hideDiv("croppie_section")
}

function checkIsReweTeamAndHideFields(rewe_teams) {
    console.log(rewe_teams);
    if (initialTeamId) {
        // console.log("teamId: " + initialTeamId)
        for (let i = 0; i < rewe_teams.length; i++) {
            // console.log(rewe_teams[i]["id"]);
            if (initialTeamId === rewe_teams[i]["id"]) {
                hideReweFields()
                break
            }
        }
    }
}

function showFooterSection(sectionName) {

    if (sectionName === "TermsAndConditionsSection") {
        hideDiv("TermsAndConditionsLink")
        showDiv("TermsAndConditionsSection")
    }

    if (sectionName === "PrivacyPolicySection") {
        hideDiv("PrivacyPolicyLink")
        showDiv("PrivacyPolicySection")
    }

}

function hideFooterSection(sectionName) {

    if (sectionName === "TermsAndConditionsSection") {
        showDiv("TermsAndConditionsLink")
        hideDiv("TermsAndConditionsSection")
    }

    if (sectionName === "PrivacyPolicySection") {
        showDiv("PrivacyPolicyLink")
        hideDiv("PrivacyPolicySection")
    }

}

// MAIN function -> Preparing SignUp Form -----------------------------------------------------
(async function prepareSignUpForm() {

    //Show loader while page is loading all data
    showDiv("awaitLoader_LoadAllPageContent")

    initializeCroppie()

    await getLangFiles()

    updateAllPagesContent()

    formEventListener()

    let goToStep2Page = await grabUrlParams()

    //Hide loader
    hideDiv("awaitLoader_LoadAllPageContent")

    // Show page content
    showDiv("main-spacer")

    // Go to page with User's registration attributes and focus on First Name field
    if (goToStep2Page) {
        goToStep2()
        document.getElementById("first-name").focus()
    }

    // Get Rewe Team json rewe_teams from index.html script and hide relevant form fields if Rewe found
    checkIsReweTeamAndHideFields(rewe_teams)
})()
// ---------------------------------------------------------------------------