
var tempSMTPprovider = 0;
var tempEmailEnabled = [];
function settingsEmail() {  // draw email settings screen
    printHeaderTitle("EMAIL SETTINGS", "email2.png", "#00b610");  // name and file

    removeFooter();
    tempEmailEnabled[1] = email2Enabled[0];
    tempEmailEnabled[2] = email3Enabled[0];

    document.getElementById('content').innerHTML +=
        "<div class='cleanScreen' id='cleanScreen'>\
            <div class='settingsContainer' id='emailsContainer'></div>\
            <div class='widgetButtonBox'>\
                <button class='button _wide' type='button' onclick='saveSMTPDetails()'>Save & Exit</button>\
            </div>\
            <div class='widgetButtonBox'>\
                <button class='button _48 back_48' style='margin-top:10px;' type='button' onclick='viewSettingsMenu()'></button>\
                <button class='button _48 home_48' style='margin-top:10px;' type='button' onclick='loadLayout()'></button>\
            </div>\
        </div>";

    document.getElementById('emailsContainer').innerHTML +=
        '<div class="settingsTitle">Select the email provider you would like to use to send email alerts.</div>';

    document.getElementById('emailsContainer').innerHTML +=
        '<div class="emailsSMTPiconsContainer">\
            <label>\
                <input type="radio" name="emailProvider" class="smtpRadioButton" id="outlook" value="small">\
                <img class="emailsImage" id="image" src="images/icons/outlook.png" onclick="updateSMTPprovider(0)">\
            </label>\
            <label>\
                <input type="radio" name="emailProvider" class="smtpRadioButton" id="gmail" value="small">\
                <img class="emailsImage" id="image" src="images/icons/gmail.png" onclick="updateSMTPprovider(1)">\
            </label>\
            <label>\
                <input type="radio" name="emailProvider" class="smtpRadioButton" id="other" value="small">\
                <img class="emailsImage" id="image" src="images/icons/email3.png" onclick="updateSMTPprovider(2)">\
            </label>\
        </div>\
        <div class="emailsSMTPcontainer" id="emailsSMTPcontainer"></div>';


    document.getElementById('emailsSMTPcontainer').innerHTML +=
        '<div class="emailsFieldContainer">\
            <div class="emailLabel" style="padding-right:5px;">Enable or Disable Emails</div>\
            <label class="switch" style="top:4px; margin-left:20px;">\
                <input type="checkbox" id="enableEmail" onclick="enableEmails()">\
                <span class="sliderSwitch round"></span>\
            </label>\
        </div>';

    if (smtpProvider == 2) {  // if SMTP provider is other draw server and port fields
        document.getElementById('emailsSMTPcontainer').innerHTML +=
            '<div class="" id="smtpDetails0">\
                <div class="emailsFieldContainer">\
                    <div class="emailLabel" style="padding-right:5px;">SMTP Server</div>\
                    <input class="emailField" type="text" id="smtpServer" value="' + smtpServer + '" autocomplete="off">\
                    <div class="fieldError" id="serverError"></div>\
                </div>\
                <div class="emailsFieldContainer">\
                    <div class="emailLabel" style="padding-right:5px;">SMTP Port</div>\
                    <input class="emailField" type="text" id="smtpPort" value="' + smtpPort + '" autocomplete="off">\
                    <div class="fieldError" id="portError"></div>\
                </div>\
            </div>';
    }

    document.getElementById('emailsSMTPcontainer').innerHTML +=
        '<div class="" id="smtpDetails1">\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" style="padding-right:5px;">From Email Address</div>\
                <input class="emailField" type="text" id="smtpUser" value="' + smtpUser + '" autocomplete="off">\
                <div class="fieldError" id="userError"></div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" style="padding-right:5px;">Email Address Password</div>\
                <input class="emailField" type="password" id="smtpPass" value="" placeholder="Password is Hidden" autocomplete="off">\
                <div class="fieldError" id="passError"></div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" style="padding-right:5px;">Administrator Email</div>\
                <input class="emailField" type="text" id="adminEmail" value="' + adminEmail[0] + '" autocomplete="off">\
                <div class="fieldError" id="adminError"></div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" id="email0Label" style="padding-right:5px;">Alerts Recipient 1</div>\
                <input class="emailField" type="text" id="email0" value="' + email1[0] + '" autocomplete="off">\
                <div class="fieldError" id="r1Error"></div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" id="email1Label" style="padding-right:5px;">Alerts Recipient 2</div>\
                <div class="emailsFieldBox">\
                    <input class="emailField" type="text" id="email1" disabled value="' + email2[0]+ '" autocomplete="off">\
                    <div class="fieldError" id="r2Error"></div>\
                    <label class="switch" style="top:4px; margin-left:20px;">\
                        <input type="checkbox" id="r1" onclick="enableRecipient(1)">\
                        <span class="sliderSwitch round"></span>\
                    </label>\
                </div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" id="email2Label" style="padding-right:5px;">Alerts Recipient 3</div>\
                <div class="emailsFieldBox">\
                    <input class="emailField" type="text" id="email2" name="email2" disabled value="' + email3[0] + '" autocomplete="off">\
                    <div class="fieldError" id="r3Error"></div>\
                    <label class="switch" style="top:4px; margin-left:20px;">\
                        <input type="checkbox" id="r2" onclick="enableRecipient(2)">\
                        <span class="sliderSwitch round"></span>\
                    </label>\
                </div>\
            </div>\
        </div>';

    tempSMTPprovider = smtpProvider;
    if (smtpProvider == 0) {
        document.getElementById("outlook").checked = true;
    }
    else if (smtpProvider == 1) {
        document.getElementById("gmail").checked = true;
    }
    else if (smtpProvider == 2) {
        document.getElementById("other").checked = true;
    }

    for (var i=1; i < 3; i++) {
        if (tempEmailEnabled[i] == 0) {
            document.getElementById('r' + i).checked = false; 
            document.getElementById('email' + i).style.backgroundColor = "#686767";
            document.getElementById('email' + i + 'Label').style.color = "#686767";
            document.getElementById('email' + i).disabled = true;
        }
        else {
            document.getElementById('r' + i).checked = true; 
            document.getElementById('email' + i).style.backgroundColor = "#FFF";
            document.getElementById('email' + i + 'Label').style.color = "#FFF";
            document.getElementById('email' + i).disabled = false;
        }
    }

    if (emailEnabled == 0) {
        document.getElementById('enableEmail').checked = false;
        var myElem = document.getElementById('smtpDetails0');
        if (myElem != null) {document.getElementById('smtpDetails0').style.display = "none";}
        document.getElementById('smtpDetails1').style.display = "none";
    }
    else {
        document.getElementById('enableEmail').checked = true;
        var myElem = document.getElementById('smtpDetails0');
        if (myElem != null) {document.getElementById('smtpDetails0').style.display = "block";}
        document.getElementById('smtpDetails1').style.display = "block";
    }
}

function enableEmails() {  // enabled or disable a recipient
    // console.log('enableRecipient');
    if (emailEnabled == 1) {
        document.getElementById('enableEmail').checked = false;
        var myElem = document.getElementById('smtpDetails0');
        if (myElem != null) {document.getElementById('smtpDetails0').style.display = "none";}
        document.getElementById('smtpDetails1').style.display = "none";
        emailEnabled = 0;
    }
    else {
        document.getElementById('enableEmail').checked = true;
        var myElem = document.getElementById('smtpDetails0');
        if (myElem != null) {document.getElementById('smtpDetails0').style.display = "block";}
        document.getElementById('smtpDetails1').style.display = "block";
        emailEnabled = 1;
    }
    
}

function enableRecipient(recipient) {  // enabled or disable a recipient
    // console.log('enableRecipient');
    if (tempEmailEnabled[recipient] == 1) {
        document.getElementById('r' + recipient).checked = false; 
        document.getElementById('email' + recipient).style.backgroundColor = "#686767";
        document.getElementById('email' + recipient + 'Label').style.color = "#686767";
        document.getElementById('email' + recipient).disabled = true;
        tempEmailEnabled[recipient] = 0;
    }
    else {
        document.getElementById('r' + recipient).checked = true; 
        document.getElementById('email' + recipient).style.backgroundColor = "#FFF";
        document.getElementById('email' + recipient + 'Label').style.color = "#FFF";
        document.getElementById('email' + recipient).disabled = false;
        tempEmailEnabled[recipient] = 1;
    }
}

function updateSMTPprovider(provider) {  //     
    tempSMTPprovider = provider;  // use a temperory variable until saved

    if (provider == 0) {  // outlook
        document.getElementById("outlook").checked = true;
        document.getElementById("gmail").disabled = true;
        document.getElementById("other").disabled = true;
    }
    else if (provider == 1) {  // gmail
        document.getElementById("outlook").disabled = true;
        document.getElementById("gmail").checked = true;
        document.getElementById("other").disabled = true;
    }
    else if (provider == 2) {  // other
        document.getElementById("outlook").disabled = true;
        document.getElementById("gmail").disabled = true;
        document.getElementById("other").checked = true;
    }

    $('#emailsSMTPcontainer').empty();

    document.getElementById('emailsSMTPcontainer').innerHTML +=
        '<div class="emailsFieldContainer">\
            <div class="emailLabel" style="padding-right:5px;">Enable or Disable Emails</div>\
            <label class="switch" style="top:4px; margin-left:20px;">\
                <input type="checkbox" id="enableEmail" onclick="enableEmails()">\
                <span class="sliderSwitch round"></span>\
            </label>\
        </div>';

    if (tempSMTPprovider == 2) {
        document.getElementById('emailsSMTPcontainer').innerHTML +=
            '<div class="" id="smtpDetails0">\
                <div class="emailsFieldContainer">\
                    <div class="emailLabel" style="padding-right:5px;">SMTP Server</div>\
                    <input class="emailField" type="text" id="smtpServer" value="' + smtpServer + '" autocomplete="off">\
                    <div class="fieldError" id="serverError"></div>\
                </div>\
                <div class="emailsFieldContainer">\
                    <div class="emailLabel" style="padding-right:5px;">SMTP Port</div>\
                    <input class="emailField" type="text" id="smtpPort" value="' + smtpPort + '" autocomplete="off">\
                    <div class="fieldError" id="portError"></div>\
                </div>\
            </div>';
    }

    document.getElementById('emailsSMTPcontainer').innerHTML +=
        '<div class="" id="smtpDetails1">\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" style="padding-right:5px;">From Email Address</div>\
                <input class="emailField" type="text" id="smtpUser" value="' + smtpUser + '" autocomplete="off">\
                <div class="fieldError" id="userError"></div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" style="padding-right:5px;">Email Address Password</div>\
                <input class="emailField" type="password" id="smtpPass" placeholder="Password is Hidden" autocomplete="off">\
                <div class="fieldError" id="passError"></div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" style="padding-right:5px;">Administrator Email</div>\
                <input class="emailField" type="text" id="adminEmail" value="' + adminEmail[0] + '" autocomplete="off">\
                <div class="fieldError" id="adminError"></div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" id="email0Label" style="padding-right:5px;">Alerts Recipient 1</div>\
                <input class="emailField" type="text" id="email0" value="' + email1[0] + '" autocomplete="off">\
                <div class="fieldError" id="r1Error"></div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" id="email1Label" style="padding-right:5px;">Alerts Recipient 2</div>\
                <div class="emailsFieldBox">\
                    <input class="emailField" type="text" id="email1" disabled value="' + email2[0]+ '" autocomplete="off">\
                    <div class="fieldError" id="r2Error"></div>\
                    <label class="switch" style="top:4px; margin-left:20px;">\
                        <input type="checkbox" id="r1" onclick="enableRecipient(1)">\
                        <span class="sliderSwitch round"></span>\
                    </label>\
                </div>\
            </div>\
            <div class="emailsFieldContainer">\
                <div class="emailLabel" id="email2Label" style="padding-right:5px;">Alerts Recipient 3</div>\
                <div class="emailsFieldBox">\
                    <input class="emailField" type="text" id="email2" name="email2" disabled value="' + email3[0] + '" autocomplete="off">\
                    <div class="fieldError" id="r3Error"></div>\
                    <label class="switch" style="top:4px; margin-left:20px;">\
                        <input type="checkbox" id="r2" onclick="enableRecipient(2)">\
                        <span class="sliderSwitch round"></span>\
                    </label>\
                </div>\
            </div>\
        </div>';

    for (var i=1; i < 3; i++) {
        // var disabled = document.getElementById('email' + i).disabled;
        if (tempEmailEnabled[i] == 0) {
            document.getElementById('r' + i).checked = false; 
            document.getElementById('email' + i).style.backgroundColor = "#686767";
            document.getElementById('email' + i + 'Label').style.color = "#686767";
            document.getElementById('email' + i).disabled = true;
        }
        else {
            document.getElementById('r' + i).checked = true; 
            document.getElementById('email' + i).style.backgroundColor = "#FFF";
            document.getElementById('email' + i + 'Label').style.color = "#FFF";
            document.getElementById('email' + i).disabled = false;
        }
    }

    if (emailEnabled == 0) {
        document.getElementById('enableEmail').checked = false;
        var myElem = document.getElementById('smtpDetails0');
        if (myElem != null) {document.getElementById('smtpDetails0').style.display = "none";}
        document.getElementById('smtpDetails1').style.display = "none";
    }
    else {
        document.getElementById('enableEmail').checked = true;
        var myElem = document.getElementById('smtpDetails0');
        if (myElem != null) {document.getElementById('smtpDetails0').style.display = "block";}
        document.getElementById('smtpDetails1').style.display = "block";
    }
}

function saveSMTPDetails() {  // save SMTP details to database
    if (tempSMTPprovider == 0) {smtpServer = "smtp.office365.com"; smtpPort = 587;}
    else if (tempSMTPprovider == 1) {smtpServer = "smtp.gmail.com"; smtpPort = 587;}
    else if (tempSMTPprovider == 2) {smtpServer = document.getElementById('smtpServer').value; smtpPort = document.getElementById('smtpPort').value;}
    
    smtpUser = document.getElementById('smtpUser').value;
    smtpPass = document.getElementById('smtpPass').value;
    document.getElementById('smtpPass').value = "";

    smtpProvider = tempSMTPprovider;
    adminEmail[0] = document.getElementById('adminEmail').value;
    email1[0] = document.getElementById('email0').value;
    email2[0] = document.getElementById('email1').value;
    email3[0] = document.getElementById('email2').value;

    email2Enabled[0] = tempEmailEnabled[1];
    email3Enabled[0] = tempEmailEnabled[2];


    // console.log('smtpServer    = ' + smtpServer);
    // console.log('smtpPort      = ' + smtpPort);
    // console.log('smtpUser      = ' + smtpUser);
    // console.log('smtpPass      = ' + smtpPass);
    // console.log('adminEmail[0] = ' + adminEmail[0]);
    // console.log('email1[0]     = ' + email1[0]);
    // console.log('email2[0]     = ' + email2[0]);
    // console.log('email2e[0]    = ' + email2Enabled[0]);
    // console.log('email3[0]     = ' + email3[0]);
    // console.log('email3e[0]    = ' + email3Enabled[0]);

    var myElem = document.getElementById('serverError');
    if (myElem != null) {
        console.log('myElem------ ' + myElem);
        if ((smtpServer == null) || (smtpServer == "")) {
            console.log('smtpServer------ ' + smtpServer);
            document.getElementById('serverError').style.display = "inline-block";  // show error
            document.getElementById('serverError').innerHTML = "You need a server address to send emails from.";
            document.getElementById('smtpServer').style.border = "2px solid rgb(255, 0, 0)";
            document.getElementById('smtpServer').focus();
            return;
        }
        else {
            document.getElementById('serverError').style.display = "none";  // hide error
            document.getElementById('smtpServer').style.border = "";
        }

        if ((smtpPort == null) || (smtpPort == "")) {
            document.getElementById('portError').style.display = "inline-block";  // show error
            document.getElementById('portError').innerHTML = "You need an SMTP port number, typically 587.";
            document.getElementById('smtpPort').style.border = "2px solid rgb(255, 0, 0)";
            document.getElementById('smtpPort').focus();
            return;
        }
        else {
            document.getElementById('portError').style.display = "none";  // hide error
            document.getElementById('smtpPort').style.border = "";
        }
    }

    if ((smtpUser == null) || (smtpUser == "")) {
        document.getElementById('userError').style.display = "inline-block";  // show error
        document.getElementById('userError').innerHTML = "You need a from email address.";
        document.getElementById('smtpUser').style.border = "2px solid rgb(255, 0, 0)";
        document.getElementById('smtpUser').focus();
        return;
    }
    else {
        document.getElementById('userError').style.display = "none";  // hide error
        document.getElementById('smtpUser').style.border = "";
    }

    if ((adminEmail[0] == null) || (adminEmail[0] == "")) {
        document.getElementById('adminError').style.display = "inline-block";  // show error
        document.getElementById('adminError').innerHTML = "You need an admin email address.";
        document.getElementById('adminEmail').style.border = "2px solid rgb(255, 0, 0)";
        document.getElementById('adminEmail').focus();
        return;
    }
    else {
        document.getElementById('adminError').style.display = "none";  // hide error
        document.getElementById('adminEmail').style.border = "";
    }

    if ((email1[0] == null) || (email1[0] == "")) {
        document.getElementById('r1Error').style.display = "inline-block";  // show error
        document.getElementById('r1Error').innerHTML = "You need a recipient email address.";
        document.getElementById('email0').style.border = "2px solid rgb(255, 0, 0)";
        document.getElementById('email0').focus();
        return;
    }
    else {
        document.getElementById('r1Error').style.display = "none";  // hide error
        document.getElementById('email0').style.border = "";
    }

    if (email2Enabled[0] == 1) {
        if ((email2[0] == null) || (email2[0] == "")) {
            document.getElementById('r2Error').style.display = "inline-block";  // show error
            document.getElementById('r2Error').innerHTML = "You need a 2nd recipient email address or disable.";
            document.getElementById('email1').style.border = "2px solid rgb(255, 0, 0)";
            document.getElementById('email1').focus();
            return;
        }
        else {
            document.getElementById('r2Error').style.display = "none";  // hide error
            document.getElementById('email1').style.border = "";
        }
    }
    
    if (email3Enabled[0] == 1) {
        if ((email3[0] == null) || (email3[0] == "")) {
            document.getElementById('r3Error').style.display = "inline-block";  // show error
            document.getElementById('r3Error').innerHTML = "You need a 3rd recipient email address or disable.";
            document.getElementById('email2').style.border = "2px solid rgb(255, 0, 0)";
            document.getElementById('email2').focus();
            return;
        }
        else {
            document.getElementById('r3Error').style.display = "none";  // hide error
            document.getElementById('email2').style.border = "";
        }
    }

    if (email2[0] == "") {email2[0] = "0";}
    if (email3[0] == "") {email3[0] = "0";}
    if (smtpPass == "") {smtpPass = "NULL";}

    var command = "110," + userID[0] + "," + smtpServer + "," + smtpProvider + "," + smtpPort + "," + smtpUser + "," + smtpPass + "," + adminEmail[0] + "," + email1[0] + "," + email2[0] + "," + email3[0] + "," + email2Enabled[0] + "," + email3Enabled[0] + "," + emailEnabled;
    sendToBackend(command);
    console.log('schSaveChanges------ ' + command);

    viewSettingsMenu();
}