/*
--------------------------------
Ajax Contact Form
--------------------------------
+ https://github.com/mehedidb/Ajax_Contact_Form
+ A Simple Ajax Contact Form developed in PHP with HTML5 Form validation.
+ Has a fallback in jQuery for browsers that do not support HTML5 form validation.
+ version 1.0.1
+ Copyright 2016 Mehedi Hasan Nahid
+ Licensed under the MIT license
+ https://github.com/mehedidb/Ajax_Contact_Form
*/

(function ($, window, document, undefined) {
    'use strict';

    var $form = $('#contact-form');

    $form.submit(function (e) {
        // remove the error class
        $('.form-group').removeClass('has-error');
        $('.help-block').remove();

        // get the form data
        var formData = {
            'name' : $('input[name="form-name"]').val(),
            'zip' : $('input[name="form-zip"]').val(),
            'email' : $('input[name="form-email"]').val(),
            'phone' : $('input[name="form-phone"]').val(),
            'plan' : $('select[name="form-plan"]').val(),
            'members' : $('select[name="form-members"]').val(),
            'message' : $('textarea[name="form-message"]').val()
        };

        // process the form
        $.ajax({
            type : 'POST',
            url  : 'process.php',
            data : formData,
            dataType : 'json',
            encode : true
        }).done(function (data) {
            // handle errors
            if (!data.success) {
                if (data.errors.name) {
                    $('#name-field').addClass('has-error');
                    $('#name-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.name + '</span>');
                }

                if (data.errors.zip) {
                    $('#zip-field').addClass('has-error');
                    $('#zip-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.zip + '</span>');
                }

                if (data.errors.email) {
                    $('#email-field').addClass('has-error');
                    $('#email-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.email + '</span>');
                }

                if (data.errors.phone) {
                    $('#phone-field').addClass('has-error');
                    $('#phone-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.phone + '</span>');
                }

                if (data.errors.plan) {
                    $('#plan-field').addClass('has-error');
                    $('#plan-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.plan + '</span>');
                }

                if (data.errors.members) {
                    $('#members-field').addClass('has-error');
                    $('#members-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.members + '</span>');
                }

                if (data.errors.message) {
                    $('#message-field').addClass('has-error');
                    $('#message-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.message + '</span>');
                }
            } else {
                // display success message
                $form.html('<div class="alert alert-success">' + data.message + '</div>');
            }
        }).fail(function (data) {
            // for debug
            console.log(data)
        });

        e.preventDefault();
    });
}(jQuery, window, document));

//Purpose: toggle the visibility of fields depending on the value of another field
$(document).ready(function () 
{
    toggleFields(); 
    //call this first so we start out with the correct visibility depending on the selected form values
    //this will call our toggleFields function every time the selection value of our underAge field changes
    $("#form-plan").change(function () 
    {
        toggleFields();
    });

});

//Function: this toggles the visibility of the child field depending on the selected value of the parent
function toggleFields() {
    if ($("#form-plan").val() == "Family")
        $("#form-members").show();
    else
        $("#form-members").hide();
}