/**
 * Created by Pascal on 15/06/16.
 */

$(function () {

    //Set default parameters for auto update username
    var clearedName = '';
    var userName = '';
    var userNameField = $('.trial-form-row .username .sub-text strong');

    clearedName = userNameField.html();


    //Set to true if we want to send the form via AJAX
    var contactFormViaAjax = false;
    $('#trialForm').append('<input type="hidden" name="secretCode" value="isHuman" />')

    $('#trialForm .voucher .redeemVoucher').click(function () {
        $('#trialForm .voucher').toggleClass('show');
    });

    $('#trialForm .submit').click(function () {
        //Set the form fields to an object
        var formFields = setFormFields();

        //Remove the alert classes
        $('.check-alert').removeClass('show');
        $('.input-rows .alert').removeClass('alert');
        $('.check-alert.temp').remove();
        $('.trial-form-row .container .inner>.error-message').remove();

        // console.log(formFields);
        //Validate the fields, and set the send variable
        var send = validateFields(formFields);
        send = true;
        if (send && contactFormViaAjax == false) {

            //Remove the contactForm
            $('#trialForm').hide();
            $('.loading').remove();
            $('.trial-form-row .inner h4').show();

            //show loading icon
            $('.trial-form-row .inner h4').before(
                '<div id="loader-icon" class="loading"><div class="sk-cube-grid"><div class="icon"><div class="line"></div><div class="line"></div><div class="line"></div> </div> <div class="sk-cube sk-cube1"></div><div class="sk-cube sk-cube2"></div><div class="sk-cube sk-cube3"></div><div class="sk-cube sk-cube4"></div><div class="sk-cube sk-cube5"></div><div class="sk-cube sk-cube6"></div><div class="sk-cube sk-cube7"></div><div class="sk-cube sk-cube8"></div><div class="sk-cube sk-cube9"></div></div></div>'
            );

            $('html,body').animate({
                scrollTop: $('.trial-form-row h1').offset().top - 30
            }, 400);

            // $('#trialForm').submit();
        }
        else{
            var firstAlert = $("#trialForm .form-element .alert").first();

            $('html,body').animate({
                scrollTop: $(firstAlert).offset().top - 140
            }, 400);

        }

        //Stop the form from submitting
        return false;
    });

    $('#trialForm #company').focusout(function () {
        if ($('#trialForm #username').val() == '') {
            $('#trialForm #username').val(slugify($('#trialForm #company').val()));
            updateUserNameField($('#trialForm #username').val());
        }
    });

    $('#trialForm #username').focusout(function () {
        updateUserNameField($(this).val())
    });

    var userNameFormField = document.getElementById('username');
    if (userNameFormField) {
        document.getElementById('username').addEventListener("keyup", function () {
            updateUserNameField($(this).val());
        });
    }

    $('.in-use ul li').click(function () {
        $('#trialForm #username').val($(this).find('span').html());
    });

    function updateUserNameField(value) {

        // Log if it used special characters
        if (/^[a-zA-Z0-9- ]*$/.test(value) == false) {
            console.log('Your search string contains illegal characters.');
        }

        //slugify username
        userName = slugify(value);
        $('#trialForm #username').val(userName);

        //If username is empty show default
        if (userName == '') userNameField.html(clearedName);

        else {
            //Remove previous charCheck message
            $('#trialForm .username .charCheck').hide();
            $('#trialForm .username').removeClass('alert');

            //Check if first character is a letter
            var firstLetter = userName.charAt(0).toUpperCase();
            if (!firstLetter.match("[a-zA-Z]")) {

                //Show error message and reset previous text to default
                $('#trialForm .username .charCheck').show();
                $('#trialForm .username').addClass('alert');
                userNameField.html(clearedName)
            }
            else {

                //Update html field
                userNameField.html(userName);
            }

        }

    }

});


/**
 * A quick ajax validation of the fields
 * We only check if certain fields are not empty
 *
 * @param values
 * @returns {boolean}
 */
function validateFields(values) {
    //By default the send value is true
    var send = true;
    //Remove the alert class from the input fields before we validate
    $('#trialForm input, #trialForm textarea').removeClass('alert');
    //The fields we are going to validate
    var fields = ['email', 'company', 'first_name', 'last_name', 'username', 'phone', 'basictype'];

    //Loop trough the fields
    $.each(fields, function (index, key) {

        if (key == 'username') {
            var firstLetter = values[key].charAt(0).toUpperCase();
            if (!firstLetter.match("[a-zA-Z]") && values[key] != '') {
                $('#trialForm .username .charCheck').show();
                $('#trialForm .username').addClass('alert');
                send = false;
            }
            else {
                $('#trialForm .username .charCheck').hide();
                $('#trialForm .username').removeClass('alert');
            }
        }


        //Check the element based on the key is not empty, if true, try next element
        if (values[key] != '') return;

        //If empty
        //Set send to false
        send = false;
        //Add an alert class to the form element of the key
        $('#trialForm #' + key).addClass('alert');

    });

    //Return the send variable
    return send
}


/**
 * Return an object of form fields
 * Add the secretCode.
 *
 * @returns object
 */
function setFormFields() {
    return {
        email: $('#trialForm #email').val(),
        company: $('#trialForm #company').val(),
        username: $('#trialForm #username').val(),

        first_name: $('#trialForm #first_name').val(),
        last_name: $('#trialForm #last_name').val(),
        phone: $('#trialForm #phone').val(),

        basictype: $('#trialForm .trial-packages input[name=basictype]:checked').val(),

        voucher: $('#trialForm #voucher').val(),
        secretCode: 'isHuman'
    };
}

function slugify(text) {
    return text.toString().toLowerCase()
        .replace(/\s+/g, '')           // Replace spaces with -
        .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
        .replace(/\-\-+/g, '')         // Replace multiple - with single -
        .replace(/^-+/, '')             // Trim - from start of text
        .replace(/-+$/, '')            // Trim - from end of text
        .replace(/[`~!@#$ß%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');            // removeSpecialChar
}

$('input').blur(function(e) {
    //console.debug($(this).attr('name'));
    $.post("/storeToSession", { name: $(this).attr('name'), val: $(this).val() } );
});