//  The contact us button (last button in the navbar) is being altered according to width of the screen
// and if there is a sticky-header. This function was created instead of a media query because of the
// sticky header which is triggered by the screen's width and scrolling down.

/// If video autoplayed once, we do not trigger autoplay again on scroll
var autoplayOnce = false;

/// Utilised for tracking google analytics for one video play per entry to the wesbite
var videoPlayed = false;

function applyStylingChanges() {
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    var header = document.getElementById('header');
    var contactus = document.getElementById('contactus');
    var primaryMenu = document.getElementById('primary-menu');

    if (header && header.classList.contains('sticky-header')) {
        if (width > 991) {
            if(contactus) contactus.style.setProperty('padding', '2px', 'important');
            if(primaryMenu) primaryMenu.style.setProperty('margin-top', '22px', 'important');
        }
    }
    else {
        if (width && width > 991) {
            if(contactus) contactus.style.setProperty('padding', '20px 15px', 'important');
            if(primaryMenu) primaryMenu.style.setProperty('margin-top', '0px', 'important');
        }
        else {
            if(contactus) contactus.style.setProperty('padding', '4px 0px 20px 0px', 'important');
        }
    }

    var video = document.getElementById('vidFootage');
    if (video) {
        var bounding = video.getBoundingClientRect();

        if (!autoplayOnce &&
            bounding.top >= 0 &&
            bounding.left >= 0 &&
            bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
            bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
        ) {
            video.play();
            autoplayOnce = true;
        }
    }
}

// Populates select element with telephone prefixes for each country
function populatePrefixSelect() {

    // Options String
    var options = "";
    // Boolean to prevent redundant if checks
    var selected = false;
    // Select DOM Object
    var selectPrefix = document.getElementById('template-contactform-default-select');

    for (var i = 0; i < countryCodes.length; i++) {

        if (!selected && countryCodes[i].dial_code === "mt") {
            options += `<option value='${countryCodes[i].dial_code}' selected>${countryCodes[i].dial_code}</option>`;
            selected = true;
        }
        else {
            options += `<option value='${countryCodes[i].dial_code}'>${countryCodes[i].dial_code}</option>`;
        }

        // Populate selecft statement
        selectPrefix.innerHTML = options;
    }
}

// Loading Home Page
function loadHomePage() {

    // Populate the select country code statements
    populatePrefixSelect();
    // Footer changes according to screen width
    resizeHomePage();
    // Populate brands
    getBrands();
}

// Resizing collective function
function resizeHomePage() {
    resizeFooter();
    applyStylingChanges();
}

// Resizing footer on the 991px width threshold
function resizeFooter() {

    // Retrieve width
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

    // Retrieve elements
    var footer_col_1 = document.getElementById('footer_col_1');
    var footer_col_2 = document.getElementById('footer_col_2');
    var footer_col_3 = document.getElementById('footer_col_3');
    var footer_col_4 = document.getElementById('footer_col_4');
    var col_1_footer = document.getElementById('col_1_footer');
    var socialContainer = document.getElementById('socialContainer');
    var copyrights = document.getElementById('copyrights');
    var copyrightDiv = document.getElementById('copyrightDiv');
    var socialmediaDiv = document.getElementById('socialmediaDiv');
    var socialMedia = document.getElementById('socialMedia');

    // Switch footer to one column
    if (width <= 991) {

        if (footer_col_1 !== null) {
            footer_col_1.classList.remove("col_one_fourth");
            footer_col_1.style.setProperty('display', 'block', 'important');
            footer_col_1.classList.add("col_full");
            footer_col_1.style.setProperty('margin-bottom', '50px', 'important');
        }

        if (col_1_footer !== null) { col_1_footer.style.setProperty('margin-left', '9%', 'important'); }

        if (footer_col_2 !== null) {
            footer_col_2.classList.remove("col_one_fourth");
            footer_col_2.style.setProperty('display', 'block', 'important');
            footer_col_2.classList.add("col_full");
            footer_col_2.style.setProperty('padding-left', '9%', 'important');
            footer_col_2.style.setProperty('margin-bottom', '50px', 'important');
        }

        if (footer_col_3 !== null) {
            footer_col_3.classList.remove("col_one_fourth");
            footer_col_3.style.setProperty('display', 'block', 'important');
            footer_col_3.classList.add("col_full");
            footer_col_3.style.setProperty('padding-left', '9%', 'important');
            footer_col_3.style.setProperty('margin-bottom', '50px', 'important');
        }

        if (footer_col_4 !== null) {
            footer_col_4.classList.remove("col_one_fourth");
            footer_col_4.classList.remove("col_last");
            footer_col_4.style.setProperty('display', 'block', 'important');
            footer_col_4.classList.add("col_full");
            footer_col_4.style.setProperty('padding-left', '9%', 'important');
        }

        if (socialContainer !== null) {
            socialContainer.style.setProperty('display', 'flex', 'important');
            socialContainer.style.setProperty('flex-direction', 'column-reverse', 'important');
        }

        if (copyrights !== null) { copyrights.style.setProperty('margin-left', '8.5%', 'important'); }

        if (copyrightDiv !== null) {

            copyrightDiv.classList.remove("col_half");
            copyrightDiv.classList.add("col_full");
            copyrightDiv.style.setProperty('padding-top', '20px', 'important');
        }

        if (socialmediaDiv !== null) {
            socialmediaDiv.classList.remove("col_half");
            socialmediaDiv.classList.remove("col_last");
            socialmediaDiv.classList.remove("tright");
            socialmediaDiv.classList.add("col_full");
        }

        if (socialMedia !== null) {
            socialMedia.classList.remove('fright');
            socialMedia.classList.add('fleft');
        }
    }
    else {

        if (footer_col_1 !== null) {
            footer_col_1.classList.remove("col_full");
            footer_col_1.classList.add("col_one_fourth");
            footer_col_1.style.setProperty('display', 'flex', 'important');
            footer_col_1.style.setProperty('margin-bottom', 'unset', 'important');
        }

        if (col_1_footer !== null) {
            col_1_footer.style.setProperty('margin-left', '23%', 'important');
        }

        if (footer_col_2 !== null) {
            footer_col_2.classList.remove("col_full");
            footer_col_2.classList.add("col_one_fourth");
            footer_col_2.style.setProperty('display', 'flex', 'important');
            footer_col_2.style.setProperty('padding-left', 'unset', 'important');
            footer_col_2.style.setProperty('padding-bottom', 'unset', 'important');
        }

        if (footer_col_3 !== null) {
            footer_col_3.classList.remove("col_full");
            footer_col_3.classList.add("col_one_fourth");
            footer_col_3.style.setProperty('display', 'flex', 'important');
            footer_col_3.style.setProperty('padding-left', 'unset', 'important');
            footer_col_3.style.setProperty('padding-bottom', 'unset', 'important');
        }

        if (footer_col_4 !== null) {
            footer_col_4.classList.remove("col_full");
            footer_col_4.classList.add("col_one_fourth");
            footer_col_4.classList.add("col_last");
            footer_col_4.style.setProperty('display', 'flex', 'important');
            footer_col_4.style.setProperty('padding-left', 'unset', 'important');
        }

        if (socialContainer !== null) {
            socialContainer.style.setProperty('display', 'block', 'important');
            socialContainer.style.setProperty('flex-direction', 'none', 'important');
        }

        if (copyrights !== null) { copyrights.style.setProperty('margin-left', '6.5%', 'important'); }

        if (copyrightDiv !== null) {
            copyrightDiv.classList.remove("col_full");
            copyrightDiv.classList.add("col_half");
            copyrightDiv.style.setProperty('padding-top', 'unset', 'important');
        }

        if (socialmediaDiv !== null) {
            socialmediaDiv.classList.remove("col_full");
            socialmediaDiv.classList.add("col_half");
            socialmediaDiv.classList.add("tright");
            socialmediaDiv.classList.add("col_last");
        }

        if (socialMedia !== null) {
            socialMedia.classList.remove('fleft');
            socialMedia.classList.add('fright');
        }
    }
}

function formInvalid(token) {

    let pageName = "";
    let companyName = "";
    let queryType = "";
    let employees = "";
    let firstName = "";
    let email = "";
    let countryCode = "";
    let phoneNumber = "";
    let message = "";
    let invalid = 0;

    // Retrieve information
    pageName = document.getElementById('pageName').value;
    companyName = document.getElementById('cname').value;
    queryType = document.getElementById('template-contactform-query').value;
    employees = document.getElementById('template-contactform-employees').value;
    firstName = document.getElementById('fname').value;
    email = document.getElementById('email').value;
    countryCode = document.getElementById('template-contactform-default-select').value;
    phoneNumber = document.getElementById('phoneNumber').value;
    message = document.getElementById('message').value;

    // Validation

    // Company Name
    if (companyName != "" && companyName != null) {
        companyName = companyName.trim();
        showformError('cname', 0);
    } else { showformError('cname', 1); invalid = 1; }

    // Query Type
    if (queryType != '' && queryType != null) {
        queryType = queryType.trim();
        showformError('template-contactform-query', 0);
    } else {
        showformError('template-contactform-query', 1); 
        invalid = 1;
    }

    // No. of employees
    if (employees != '' && employees != null) {
        employees = employees.trim();
        showformError('template-contactform-employees', 0);
    } else if (queryType == "corporate") {
        showformError('template-contactform-employees', 1); 
        invalid = 1;
    }

    // First Name
    if (firstName != "" && firstName != null) {
        firstName = firstName.trim();
        showformError('fname', 0);
    } else { showformError('fname', 1); invalid = 1; }

    // Email
    if (email != "" && email != null) {
        email = email.trim();
        var regexValidation = /^(([^<>()[\]\\.,;:\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,}))$/;
        if (regexValidation.test(email)) {
            showformError('email', 0)
        } else { showformError('email', 1); invalid = 1; }
    } else { showformError('email', 1); invalid = 1; }

    // Country Code
    if (countryCode != "" && countryCode != null && (!isNaN(countryCode.substring(1)))) {
        countryCode = countryCode.substring(1);
    } else { invalid = 1; }

    // Phone Number
    if (phoneNumber != "" && phoneNumber != null) {
        phoneNumber = phoneNumber.trim();
        if (isNaN(phoneNumber)) {
            invalid = 1;
            showformError('template-contactform-default-select', 1);
            showformError('phoneNumber', 1);
        }
        else { showformError('template-contactform-default-select', 0); showformError('phoneNumber', 0); }
    } else { showformError('template-contactform-default-select', 1); showformError('phoneNumber', 1); invalid = 1; }

    // Message
    if (message != "" && message != null) {
        message = message.trim();
        showformError('message', 0);
    } else { showformError('message', 1); invalid = 1; }

    return [invalid, pageName, companyName, queryType, firstName, email, phoneNumber, countryCode, message, employees, token];
}

// Calls function to send the API
function submitForm(token) {

    // Retrieve array of information from formInvalid
    let infoArray = formInvalid(token);

    // First value indicates if the form is validated
    if (infoArray[0] == 0) {
        sendEmail(infoArray);
        return true;
    }
    return false;
    
}

// Show/Hide validation according to form input
function showformError(field, notValid) {

    var element = document.getElementById(field);
    var elementLabel = document.getElementById(field + '-error');

    if (notValid) {
        switch (field) {
            case "cname":
            case "fname":
            case "email":
            case "template-contactform-employees":
                element.style.setProperty('border', '1px solid #E6001B', 'important');
                elementLabel.classList.add('fade-in');
                break;
            case "template-contactform-default-select":
                element.style.setProperty('border', '1px solid #E6001B', 'important');
                break;
            case "phoneNumber":
                document.getElementById('phoneNumberDiv').style.setProperty('margin-bottom', '0px', 'important');
                element.style.setProperty('border', '1px solid #E6001B', 'important');
                elementLabel.classList.add('fade-in');
                break;
            case "message":
                document.getElementById(field).style.setProperty('margin-bottom', '0px', 'important');
                element.style.setProperty('border', '1px solid #E6001B', 'important');
                elementLabel.classList.add('fade-in');
                break;
            default:
                break;
        }
    }
    else {
        switch (field) {
            case "cname":
            case "fname":
            case "email":
            case "template-contactform-employees":
                element.style.setProperty('border', '2px solid #CED4DA', 'important');
                elementLabel.classList.remove('fade-in');
                break;
            case "template-contactform-default-select":
                element.style.setProperty('border', '2px solid #CED4DA', 'important');
                break;
            case "phoneNumber":
                document.getElementById('phoneNumberDiv').style.setProperty('margin-bottom', '1rem', 'important');
                element.style.setProperty('border', '2px solid #CED4DA', 'important');
                elementLabel.classList.remove('fade-in');
                break;
            case "message":
                document.getElementById(field).style.setProperty('margin-bottom', '20px', 'important');
                element.style.setProperty('border', '2px solid #CED4DA', 'important');
                elementLabel.classList.remove('fade-in');
                break;
            default:
                break;
        }
    }
}

function getBrands() {
    var $ = jQuery.noConflict();
    var $brandsModal = $('#brandsModal');
    if ($brandsModal.length < 1) { return true; }

    $brandsModal.each(function () {

        var element = $(this),
        elementLoader = element.find('#brandsLoader'),
        brandsContent = element.find('#brandsContent');

        let html = '';

        elementLoader.fadeIn();

        // Uat
        // var uri = "https://web.api.uat.cloudigo.app/v3/brands/list";
        // let oldBucket = "https://images.uat.cloudigo.app";
        // let newBucket = "https://images.uat.cloudigo.app/brands";

        //Live
        var uri = "https://web.api.cloudigo.app/v3/brands/list";
        let oldBucket = "https://images.cloudigo.app";
        let newBucket = "https://images.cloudigo.app/brands";

        jQuery.ajax({
            url: uri,
            data: "",
            method: 'GET',
            contentType : 'application/json',
            success: function (data) {

                for(var i = 0; i < data.length; i++)  {

                    if (data[i]["logo_url"])  url = `${oldBucket}${data[i]["logo_url"]}`;
                    else  url = `${newBucket}${data[i]["logo"]}`;

                    html += `<div class="col-md-2 col-sm-3 center">
                                        <img src='${url}' alt="${data[i]["title"]}" title="${data[i]["title"]}">
                                    </div>`;
                }

                brandsContent.html(html);
                elementLoader.fadeOut();
            }
            , error: function (data) {
                elementLoader.fadeOut();
                if (typeof data.responseJSON !== 'undefined' && typeof data.responseJSON.message !== 'undefined') { console.log(data.responseJSON.message); }

                html = `<h4 class="modalTitle" style="font-size: 20px !important">Oops. Something went wrong. Check this space later.</h4>`;
                brandsContent.html(html);
            }
        })
    });
}

function onVidPlay() {
    if (!videoPlayed) { 
        gtag('event', 'corp_vid_play');
        videoPlayed = true;
    }
}

function manipulateForm() {
    var employeeSelect = document.getElementById("template-contactform-query");
    if (employeeSelect != null && employeeSelect != undefined) {

        var employeeNo = document.getElementById("employeeNo");
        if (employeeNo != null && employeeNo != undefined) {
            if (employeeSelect.value == "corporate")
                employeeNo.style.setProperty('display', 'block', 'important');
        else 
            employeeNo.style.setProperty('display', 'none', 'important');
        }
    }
}

// window.onload = function () {
//     applyStylingChanges();
//     getBrands();

//     var playDiv = document.getElementById('playDiv');
//     var closeButton = document.getElementById('closeButton');
//     var vidBannerImg = document.getElementById('vidBannerImg');
//     var vidFootage = document.getElementById('vidFootage');

//     if (playDiv) {

//         playDiv.addEventListener('click', () => {
//             if (vidBannerImg)
//                 vidBannerImg.animate([
//                     { transform: 'translateX(0%)' },
//                     { transform: 'translateX(-100%)' }
//                 ],
//                     { duration: 1200, fill: 'forwards' });
//             if (vidFootage)
//                 vidFootage.play();
//         });

//     }
//     if (closeButton) {
//         closeButton.addEventListener('click', () => {
//             if (vidBannerImg)
//                 vidBannerImg.animate([
//                     { transform: 'translateX(-100%)' },
//                     { transform: 'translateX(0%)' }
//                 ],
//                     { duration: 1200, fill: 'forwards' });
//             if (vidFootage)
//                 vidFootage.pause();
//         });
//     }
// }