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

$(function () {

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

    $('#popUpForm .submit').click(function () {

        //Set the form fields to an object
        var formFields = setFormFields();

        //Remove the alert classes
        $('#popUpForm .alert').removeClass('alert');

        //Validate the fields, and set the send variable
        var send = validateFields(formFields);

        //If Send is true and contact is send by ajax, return true, so the form wil submit
        //if (send && contactFormViaAjax == false) return true;

        //If Send is true, Send the contactForm with Ajax
        if (send) sendContactForm(formFields);

        //If .submit isn't a input field but an div, p or other html element
        //if (send && contactFormViaAjax == false){
        //  $('#contactForm').submit();
        //}

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

});


/**
 * 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
    $('#popUpForm input, #popUpForm textarea').removeClass('alert');

    //The fields we are going to validate
    var fields = ['name', 'email', 'part_nr', 'part_title', 'part_price'];

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

        //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
        $('#popUpForm #' + key).closest('.form-element').addClass('alert');


    });
    //Return the send variable
    return send
}

/**
 * Sent the given formFields with Ajax
 *
 * @param formFields
 */
function sendContactForm(formFields) {
    $.ajax({
        //Set method to post
        method: "POST",
        //Add the formFields
        data: formFields,
        //Get the url from the action url
        url: $('#popUpForm').attr('action')
    }).done(function (msg) {
        //What to do when the form is submitted
        //If the return message is not the string "true"
        if (msg != 'true') {
            // Loop trough the message
            for (var key in msg) {
                //Set the first message for every key
                $('#popUpForm .form-element.' + key + ' .error-message').html(msg[key][0]).addClass('active');
                $('#popUpForm .form-element.' + key).addClass('alert');
            }
            console.log(msg);
            //Exit the function
            return
        }

        //All was good
        //Remove the contactForm
        $('#popUpForm').remove();
        //Show the thanks block
        $('.pop-up .thanks').removeClass('inactive');
    });
}

/**
 * Return an object of form fields
 * Add the secretCode.
 *
 * @returns object
 */
function setFormFields() {
    return {
        name: $('#popUpForm #name').val(),
        email: $('#popUpForm #email').val(),
        part_nr: $('#popUpForm #part_nr').val(),
        part_title: $('#popUpForm #part_title').val(),
        part_price: $('#popUpForm #part_price').val(),
        part_place1: $('#popUpForm #part_place1').val(),
        part_place2: $('#popUpForm #part_place2').val(),
        secretCode: 'isHuman'
    };
}