let questionaryResultHtml;
let questionaryResultHtmlEmpfehlung;
let questionaryResultJson;
let questionaryResultJsonEmpfehlung = {}
let questionaryResultFieldsEmpfehlung = [
    "my_name_empf",
    "my_business_empf",
    "my_email_empf",
    "rec_name_empf",
    "rec_company_empf",
    "rec_ort_empf",
    "rec_phone_empf",
    "rec_comments_empf"
]
let emphelungMandatoryFields = [
    {
        "fieldId": "my_name_empf",
        "minChar": 2,
        "maxChar": 81
    },
    {
        "fieldId": "my_email_empf",
        "minChar": 8,
        "maxChar": 81
    },
    {
        "fieldId": "rec_name_empf",
        "minChar": 2,
        "maxChar": 81
    },
    {
        "fieldId": "rec_company_empf",
        "minChar": 5,
        "maxChar": 81
    }
]

function init() {

    // Get domain name
    let page_url = window.location.href

    // Set proper initial page based on domain name
    if (page_url.includes("messe.tippie.de")) {
        initialPageMesse()
    } else if (page_url.includes("empfehlung.tippie.de")) {
        initialPageEmpfehlung()
    } else {
        initialPageEmpfehlung()
    }
}

function initialPageMesse() {

    showDiv("main_spacer_messe")
    hideDiv("main_spacer_empfehlung")

    showDiv("step_1_messe")
    hideDiv("step_2_messe")
    hideDiv("step_3_messe")

    let ele = document.getElementById("main_spacer_messe")
    if (isMobileDevice()) {
        // mobile
        ele.style.paddingLeft = "5px";
        ele.style.paddingRight = "5px";
    } else {
        // desktop
        console.log("is desktop");
        // ele.style.paddingTop = "25px";
        ele.style.paddingLeft = "20%";
        ele.style.paddingRight = "20%";
    }
}

function initialPageEmpfehlung() {

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

    // Working with Name in URL
    if (urlParams.has("name")) {
        document.getElementById("my_name_empf").value = urlParams.get('name')
        goToInputForm = true
    }

    // Working with Location in URL
    if (urlParams.has("location")) {
        document.getElementById("my_business_empf").value = urlParams.get('location')
        goToInputForm = true
    }

    // Working with Email in URL
    if (urlParams.has("email")) {
        document.getElementById("my_email_empf").value = urlParams.get('email')
        goToInputForm = true
    }

    showDiv("main_spacer_empfehlung")
    hideDiv("main_spacer_messe")

    let ele = document.getElementById("main_spacer_empfehlung")
    if (isMobileDevice()) {
        // mobile
        ele.style.paddingLeft = "5px";
        ele.style.paddingRight = "5px";
    } else {
        // desktop
        console.log("is desktop");
        // ele.style.paddingTop = "25px";
        ele.style.paddingLeft = "20%";
        ele.style.paddingRight = "20%";
    }

    if (goToInputForm) {
        hideDiv("step_1_empfehlung")
        showDiv("step_2_empfehlung")
    } else {
        showDiv("step_1_empfehlung")
        hideDiv("step_2_empfehlung")
    }
    hideDiv("step_3_empfehlung")
}

// Empfehlung functions --------------------------------------------------------------------------------------------
function goToStep2_empfehlung() {

    hideDiv("step_1_empfehlung")
    hideDiv("step_3_empfehlung")
    showDiv("step_2_empfehlung")

}

function setNoteMandatory(fieldName) {
    document.getElementById(fieldName + "_mand").innerHTML =
        "<span style='color: red'><i> (Pflichtfeld)</i><span>"
}

function clearAllNoteMandatory() {
    for (let i = 0; i < emphelungMandatoryFields.length; i++) {
        document.getElementById(emphelungMandatoryFields[i]["fieldId"] + "_mand").innerHTML = ""
    }
}

function checkMandatoryFieldsEmpfehlung() {
    //  let's use: "Dein Name", "Deine Email", "Kontaktperson", "Name Geschäft".
    //  None of these fields can be empty.
    //  You could show an error message telling the user that they need to fill it out.
    // (Pflichtfeld)

    let checkResult = false
    clearAllNoteMandatory()

    function checkMandatoryField(fieldId, minChar, maxChar) {
        let fieldObj = document.getElementById(fieldId)
        if (fieldObj.value.length < minChar || fieldObj.value.length > maxChar) {
            setNoteMandatory(fieldId)
            fieldObj.focus()
            return false
        } else {
            return true
        }
    }

    for (let i = 0; i < emphelungMandatoryFields.length; i++) {
        checkResult = checkMandatoryField(
            emphelungMandatoryFields[i]["fieldId"],
            emphelungMandatoryFields[i]["minChar"],
            emphelungMandatoryFields[i]["maxChar"]
        )
        if (!checkResult) {
            return checkResult
        }
    }

    return checkResult
}

function updateResultedFormJsonEmpfehlung() {
    let i = 0
    while (i < questionaryResultFieldsEmpfehlung.length) {

        let fieldName = questionaryResultFieldsEmpfehlung[i]

        if (!document.getElementById(fieldName).value) {
            questionaryResultJsonEmpfehlung[fieldName] = "n/a"
        } else {
            questionaryResultJsonEmpfehlung[fieldName] = document.getElementById(fieldName).value
        }
        i++
    }
}

function goToStep3_empfehlung() {

    // Check mandatory fields for Empfehlung
    let checkMandatoryFieldsResult = checkMandatoryFieldsEmpfehlung()
    console.log("checkMandatoryFieldsResult:", checkMandatoryFieldsResult)

    // checkMandatoryFieldsResult = false  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!

    if (checkMandatoryFieldsResult) {
        // Update resulted questionaryResultJsonEmpfehlung object --------------------------
        updateResultedFormJsonEmpfehlung()
        // ---------------------------------------------------------------------------------

        console.log(JSON.stringify(questionaryResultJsonEmpfehlung, null, 2))

        // Make questionaryResultHtml
        makeFeedbackResultHtmlEmpf()

        // Save data to json DB
        callBackendWithPromise(questionaryResultJsonEmpfehlung, "./data_json_db_empf").then(function (respond) {
            console.log("Save data to json DB: " + respond)
        })

        // Send email to with recommendation to user and Tippie management - OLD code, now doing this at backend part
        // callBackendWithPromise(questionaryResultHtmlEmpfehlung, "./data_html_send_to_marketing_empf").then(function (respond) {
        //     console.log("Send email to with recommendation to user and Tippie management: " + respond)
        // })

        hideDiv("step_1_empfehlung")
        hideDiv("step_2_empfehlung")
        showDiv("step_3_empfehlung")
    }
}

function makeFeedbackResultHtmlEmpf() {

    // get values from step 2 page content - Make html for email
    let html = "<b>*** Empfehlung erfolgreich an Tippie gesendet ***</b>";

    html += "<br><br>Dein Name: <b>" + questionaryResultJsonEmpfehlung["my_name_empf"] + "</b>";
    html += "<br><br>Name deines Geschäfts: <b>" + questionaryResultJsonEmpfehlung["my_business_empf"] + "</b>";
    html += "<br><br>Deine E-Mail: <b>" + questionaryResultJsonEmpfehlung["my_email_empf"] + "</b>";
    html += "<br><br><b>Empfehlung:</b>";
    html += "<br><br>Kontaktperson: <b>" + questionaryResultJsonEmpfehlung["rec_name_empf"] + "</b>";
    html += "<br><br>Name Geschäft: <b>" + questionaryResultJsonEmpfehlung["rec_company_empf"] + "</b>";
    html += "<br><br>Ort: <b>" + questionaryResultJsonEmpfehlung["rec_ort_empf"] + "</b>";
    html += "<br><br>Telefonnummer: <b>" + questionaryResultJsonEmpfehlung["rec_phone_empf"] + "</b>";
    html += "<br><br>Kommentare: <b>" + questionaryResultJsonEmpfehlung["rec_comments_empf"] + "</b>";

    questionaryResultHtmlEmpfehlung = html
}

function goBackToStep2_empfehlung() {
    hideDiv("step_1_empfehlung")
    hideDiv("step_3_empfehlung")
    showDiv("step_2_empfehlung")
}

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

async function callBackendWithPromise(data, backendUrl) {

    let response
    console.log("callBackendWithPromise()");

    if (backendUrl === "./data_json_db") {

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

    } else {

        response = await fetch(backendUrl, {
            method: 'POST',
            headers: {
                'Accept': '*/*',
                'Content-Type': 'text/html; charset=utf-8'
            },
            body: JSON.stringify(data)
        });
    }
    return await response.text()
}

function makeFeedbackResultHtml(user_name, user_phone, user_email, user_organization, user_branch, user_website,
                                qr_code, sales_manager) {

    // get values from step 2 page content
    let par_spaces = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
    let html = "<b>Tippie Messe Angebot formular:</b>";

    // Make html for email
    html += "<br><br>Unternehmen: <b>" + user_organization + "</b>";
    html += "<br><br>Filiale, Ort: <b>" + user_branch + "</b>";
    html += "<br><br>Name: <b>" + user_name + "</b>";
    html += "<br><br>Mobiltelefonnummer: <b>" + user_phone + "</b>";
    html += "<br><br>E-Mail-Adresse: <b>" + user_email + "</b>";
    html += "<br><br>Webseite: <b>" + user_website + "</b>";
    html += "<br><br>QR-Code: <b>" + qr_code + "</b>";
    html += "<br><br>Tippie-Manager: <b>" + sales_manager + "</b>";

    questionaryResultHtml = html
}

function makeFeedbackResultJson() {

    // Get form input value
    let user_name = document.getElementById("user_name").value;
    let user_phone = document.getElementById("user_phone").value;
    let user_email = document.getElementById("email").value;
    let user_organization = document.getElementById("organization").value;
    let user_organization_branch = document.getElementById("branch").value;
    let user_organization_website = document.getElementById("website").value;
    let user_qr_code = document.getElementById("qr_code").value;
    let user_sales_manager = document.getElementById("sales_manager").value;

    // Make data json ********************************************************
    questionaryResultJson = {
        "1_user_name": user_name,
        "2_user_phone": user_phone,
        "3_user_email": user_email,
        "4_user_organization": user_organization,
        "5_user_organization_branch": user_organization_branch,
        "6_user_organization_website": user_organization_website,
        "7_user_qr_code": user_qr_code,
        "8_user_sales_manager": user_sales_manager
    };

}

function clearFormValues() {
    document.getElementById("user_name").value = "";
    document.getElementById("user_phone").value = "";
    document.getElementById("email").value = "";
    document.getElementById("organization").value = "";
    document.getElementById("branch").value = "";
    document.getElementById("website").value = "";
    document.getElementById("qr_code").value = "";
    document.getElementById("sales_manager").value = "";
}

function goToStep2() {

    hideDiv("step_1_messe")
    hideDiv("step_3_messe")
    grabUrlParams();
    showDiv("step_2_messe")

}

function goBackToStep2() {
    hideDiv("step_1_messe")
    hideDiv("step_3_messe")
    showDiv("step_2_messe")
    clearFormValues()
}

function goToStep3() {

    // Check for mandatory fields ---------------------------------------------------------------------------------
    let user_organization = document.getElementById("organization").value;
    if (!user_organization) {
        document.getElementById("organization").focus();
        return;
    }

    let user_name = document.getElementById("user_name").value;
    if (!user_name) {
        // alert("Bitte geben Sie Ihren Namen ein!");
        document.getElementById("user_name").focus();
        return;
    }

    let user_phone = document.getElementById("user_phone").value;
    if (!user_phone) {
        document.getElementById("user_phone").focus();
        return;
    }

    let user_email = document.getElementById("email").value;
    if (!user_email) {
        document.getElementById("email").focus();
        return;
    }
    // -------------------------------------------------------------------------------------------------------------

    // Make questionaryResultHtml
    let user_branch = document.getElementById("branch").value;
    let user_website = document.getElementById("website").value;
    let qr_code = document.getElementById("qr_code").value;
    let sales_manager = document.getElementById("sales_manager").value;
    makeFeedbackResultHtml(user_name, user_phone, user_email, user_organization, user_branch, user_website,
        qr_code, sales_manager)

    // Make questionaryResultJson
    makeFeedbackResultJson()

    // Save data to json DB
    callBackendWithPromise(questionaryResultJson, "./data_json_db")

    // Send email to IT management
    callBackendWithPromise(questionaryResultHtml, "./data_html_send_to_marketing")

    hideDiv("step_1_messe")
    hideDiv("step_2_messe")
    showDiv("step_3_messe")

}

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

}

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

}

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

function grabUrlParams() {
    // ulr parameter
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);

    if (urlParams.has('organization')) {
        document.getElementById("organization").value = urlParams.get('organization')
    }

    if (urlParams.has('organisation')) {
        document.getElementById("organization").value = urlParams.get('organisation')
    }

    if (urlParams.has('company')) {
        document.getElementById("organization").value = urlParams.get('company')
    }
}