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

$(function () {

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

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

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

        console.log(formFields);

        //Remove the alert classes
        $('.check-alert').removeClass('show');
        $('.input-rows .alert').removeClass('alert');
        $('.check-alert.temp').remove();

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

        //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){
        $('#subscribeForm').submit();
        }

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

    //Turn all selects into selectric input
    $('.select-element select').selectric({
        onInit: function(){
            $('.select-element .icon').remove();
        }
    });

});


/**
 * 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
    $('#subscribeForm input, #subscribeForm textarea').removeClass('alert');
    $('#subscribeForm .form-element').removeClass('alert');
    $('#subscribeForm .error-message').removeClass('active').html('');
    $('#subscribeForm .error').removeClass('active').html('');

    //The fields we are going to validate
    var fields = ['first_name',
        'last_name',
        'phone',
        'date',
        'address',
        'zip',
        'city',
        'email'
    ];

    //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
        $('#subscribeForm #' + key).addClass('alert');
        //console.log(key);

    });

    // Validate sport checkboxes
    if ($('#sport.checkboxes input:checked').length === 0) {
        send = false;
        $('#sport.checkboxes').addClass('alert');
        $('#sport.checkboxes .error-message').html($('#sport.checkboxes').data('error')).addClass('active');
    }

    // Validate photo consent checkbox
    if (!$('#photo_consent').is(':checked')) {
        send = false;
        $('#photo_consent').closest('.photo_consent').addClass('alert');
        var $el = $('#photo_consent').closest('.photo_consent');
        $el.find('.error-message').html($el.data('error')).addClass('active');
    }

    //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: $('#subscribeForm').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
                var $el = $('#subscribeForm .form-element.' + key);
                if ($el.length == 0) $el = $('#subscribeForm .' + key);
                if ($el.length == 0) $el = $('#subscribeForm #' + key).closest('.form-element');
                
                $el.find('.error-message').html(msg[key][0]).addClass('active');
                $el.find('.error').html(msg[key][0]).addClass('active');
            }
            console.log(msg);
            //Exit the function
            return
        }

        //All was good
        //Remove the contactForm
        $('#subscribeForm').remove();
        //Show the thanks block
        $('.contact-form .thanks').removeClass('hide');
    });
}

/**
 * Return an object of form fields
 * Add the secretCode.
 *
 * @returns object
 */
function setFormFields() {

    var sports = '';

    $('#sport.checkboxes input:checked').each(function() {
        sports = sports + $(this).val() + ',';
    });


    return {
        first_name: $('#subscribeForm #first_name').val(),
        last_name: $('#subscribeForm #last_name').val(),
        phone: $('#subscribeForm #phone').val(),
        date: $('#subscribeForm #date').val(),
        address: $('#subscribeForm #address').val(),
        zip: $('#subscribeForm #zip').val(),
        city: $('#subscribeForm #city').val(),
        email: $('#subscribeForm #email').val(),
        photo_consent: $('#subscribeForm #photo_consent').is(':checked') ? 1 : 0,
        formMessage: $('#subscribeForm #formMessage').val(),
        sport: sports,
        secretCode: 'isHuman'
    };
}