/*
@TODO Needs Refactored to reduce code smell and optimize jquery
@TODO Some JS adds classes that should really be added by the markup
 */
function updateBoxFieldsOnDrop(field_wrap) {
    let bn = parseInt(jQuery(field_wrap).attr('id').replace(/form_box_field_wrap-form_box_/, ''));
    jQuery('.edit-form-container-outer label')
        .filter(function () {
            // Get all labels for this field
            let regExp = new RegExp('form_box_' + bn + '-[a-z_]+[0-9]+');
            console.log(jQuery(this).attr('for').match(regExp));
            return jQuery(this).attr('for').match(regExp)
        })
        .each(function (i, e) {
            let currentfn; // current field count
            let newNum; // new number for the field
            // Get current object
            let eObj = jQuery(e);
            // Get current text
            let eText = eObj.text();

            function get_removed_field_count() {
                // Get current removed fields count
                matches = eObj.parent().attr('name').match(/:[0-9]+/);
                // console.log(matches);
                currentfn = parseInt(matches[0].replace(':', ''));
                return currentfn;
            }

            // Only use the description field
            if (eText.search('Description') !== -1) {
                // Update this field with order it is on screen
                console.log(i);
                updateFieldNumbers(eObj, eText, i);
            }

        });
}

function updateFieldNumbers(eObj, eText, newNum) {
    // Update description label
    eObj.text(eText.replace(/[0-9]+/, newNum));
    // Update description div
    eObj.parent().attr('name', eObj.parent().attr('name').replace(/:[0-9]+/, ':' + newNum));
    eObj.parent().attr('id', eObj.parent().attr('id').replace(/_[0-9]+$/, '_' + newNum));
    // Update the wrapping div (not 'inner')
    eObj.parent().parent().parent().attr('name', eObj.parent().attr('name').replace(/_[0-9]+$/, ':' + newNum));
    eObj.parent().parent().parent().attr('id', eObj.parent().attr('id').replace(/_[0-9]+$/, '_' + newNum));
    // Update description textarea field
    eObj.next().attr('name', eObj.next().attr('name').replace(/:[0-9]+/, ':' + newNum));
    eObj.next().attr('id', eObj.next().attr('id').replace(/_[0-9]+$/, '_' + newNum));
    // Update name div
    eObj.parent().prev().attr('name', eObj.parent().prev().attr('name').replace(/:[0-9]+/, ':' + newNum));
    eObj.parent().prev().attr('id', eObj.parent().prev().attr('id').replace(/_[0-9]+$/, '_' + newNum));
    // Update name label
    eObj.parent().prev().find('label').text(eObj.parent().prev().find('label').text().replace(/[0-9]+/, newNum));
    eObj.parent().prev().find('label').attr('for', eObj.parent().prev().find('label').attr('for').replace(/_[0-9]+$/, '_' + newNum));
    // Update name text field
    eObj.parent().prev().find('input[type="text"]').attr('name', eObj.parent().prev().find('input[type="text"]').attr('name').replace(/:[0-9]+/, ':' + newNum));
    eObj.parent().prev().find('input[type="text"]').attr('id', eObj.parent().prev().find('input[type="text"]').attr('id').replace(/_[0-9]+$/, '_' + newNum));
    // Update Remove Button
    eObj.parent().next().attr('id', eObj.parent().next().attr('id').replace(/_[0-9]+$/, '_' + newNum));
}

function updateBoxFieldsOnRemove(form_box_count, matches, removeNum) {
    jQuery('.edit-form-container-outer label')
        .filter(function () {
            // Get all labels for this field
            let regExp = new RegExp('form_box_' + form_box_count + '-[a-z_]+[0-9]+');
            console.log(jQuery(this).attr('for').match(regExp));
            return jQuery(this).attr('for').match(regExp)
        })
        .each(function (i, e) {
            let currentfn; // current field count
            let newNum; // new number for the field
            // Get current object
            let eObj = jQuery(e);
            // Get current text
            let eText = eObj.text();
            console.log(currentfn);

            function get_removed_field_count() {
                // Get current removed fields count
                matches = eObj.parent().attr('name').match(/:[0-9]+/);
                // console.log(matches);
                currentfn = parseInt(matches[0].replace(':', ''));
                return currentfn;
            }

            // Only use the description field
            if (eText.search('Description') !== -1) {
                // Get current removed fields count
                currentfn = get_removed_field_count();

                // If currentfn is less than removed field do nothing,
                // else subtract 1 and change html
                if (removeNum < currentfn) {
                    newNum = currentfn - 1;
                    updateFieldNumbers(eObj, eText, newNum);
                }
            }
        });
    return matches;
}

/**
 * @param button
 * @param form_box_count
 */
function removeFieldClickEvent(button, form_box_count)  {
    var confirmed = confirm('Are you sure you want to remove this field?  Hit "Cancel" to keep the field or "OK" to delete the field.');
    if (confirmed) {
        // Modify all other fields by lowering field count
        let matches;
        let removeNum; // field count being removed
        if (jQuery(button).attr('id').match(/select/g)) {
            // Get current removed fields count
            matches = jQuery(button).prev().prev().find('textarea').attr('name').match(/:[0-9]+/);
            removeNum = matches[0].replace(':', '');
        } else {
            // Get current removed fields count
            matches = jQuery(button).prev().attr('name').match(/:[0-9]+/);
            removeNum = parseInt(matches[0].replace(':', ''));
        }
        console.log(removeNum);
        console.log(form_box_count);
        // Update all existing fields for this box
        matches = updateBoxFieldsOnRemove(form_box_count, matches, removeNum);
        // Remove the field container
        jQuery(button).parent().parent().remove();
    }
}

function getBoxTotalFieldCount(bn) {
    let fields = jQuery('#form_box_field_wrap-form_box_' + bn.toString()).children();
    let box_total_field_count = fields.length;
    return box_total_field_count;
}

/**
 * @param button
 * @param form_box_count
 * @returns {*}
 */
function removeBoxEvent(button, form_box_count) {
    var confirmed = confirm('Are you sure you want to remove this box?  Removing the box removes all fields it contains!  Hit "Cancel" to keep the box or "OK" to delete the box.');
    if (confirmed) {
        // Get this removed box number
        var rbn = parseInt(jQuery(button).attr('id').replace(/remove_this_box-form_box_/, ''));
        console.log(rbn);

        jQuery(button).parent().parent().remove();
        // Grab all the boxes
        jQuery('[id^="box-form_box_"]').each(
            function (iter, box) {
                // Get the current box number we are working with
                var bn = parseInt(jQuery(box).attr('id').replace(/box-form_box_/, ''));
                var nbn = bn - 1;
                var nbnd = 'form_box_' + nbn.toString();
                console.log(bn);
                /*************************************************
                 * Grab all the form box html elements and remove 1 for the "box count"
                 ***************************************************/
                // If not the first box and greater than removed box
                if (bn !== 1 && bn > rbn) {
                    jQuery('[id*="form_box_' + bn + '"]').each(
                        function () {
                            // Build regex
                            let regExp = new RegExp('form_box_' + bn);
                            // Change id fields
                            jQuery(this).attr('id', jQuery(this).attr('id').replace(regExp, nbnd));

                            if (!jQuery.isEmptyObject(jQuery(this).attr('name'))) {
                                // Change name fields
                                jQuery(this).attr('name', jQuery(this).attr('name').replace(regExp, nbnd));
                            }

                            if (!jQuery.isEmptyObject(jQuery(this).attr('for'))) {
                                console.log(jQuery(this).text());
                                // Change for fields
                                jQuery(this).attr('for', jQuery(this).attr('for').replace(regExp, nbnd));
                                jQuery(this).text('Form Box ' + nbn);
                            }
                        });
                    // Remove all click events from box
                    jQuery('body').off('click', '#add_text-form_box_' + bn);
                    jQuery('body').off('click', '#add_img-form_box_' + bn);
                    jQuery('body').off('click', '#add_file-form_box_' + bn);
                    jQuery('body').off('click', '#add_textarea-form_box_' + bn);
                    jQuery('body').off('click', '#add_select-form_box_' + bn);
                    let box_total_field_count = getBoxTotalFieldCount(nbn);
                    setAddClickEvent(nbn, box_total_field_count);
                }
            });
        // Take 1 from the overall box count
        form_box_count--;
    }
    return form_box_count;
}

function setAddClickEvent(bn, box_total_field_count) {
    /*******************
     * Text Input
     *******************/
    jQuery('#add_text-form_box_' + bn).on('click', function () {
        box_total_field_count++;
        var cloned_field = jQuery('#form_field_text_template').clone(true);
        var field_count = jQuery('[id^="form_box_' + bn + '-text_field_wrap_"]').length + 1;
        var duplicate = jQuery('[id^="form_box_' + bn + '-text_field_wrap_' + field_count + '"]').length;
        // add +1 to field count until duplicate is false
        while (duplicate) {
            if (duplicate) {
                field_count = field_count + 1;
            }
            duplicate = jQuery('[id^="form_box_' + bn + '-text_field_wrap_' + field_count + '"]').length;
        }
        cloned_field.attr('id', 'form_box_' + bn + '-text_field_wrap_' + field_count).attr('name', 'form_box_' + bn + '-text_field_wrap_' + field_count).addClass('cfb-field-container'); // text field div
        cloned_field.find('#form_field_text_template_field_name').attr('id', 'form_box_' + bn + '-text_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-text:' + box_total_field_count + '_name'); // text field name
        cloned_field.find('[for="form_field_text_template_field_name"]').attr('for', 'form_box_' + bn + '-text_field_name_' + field_count).text('Text Field '); // text field name lbl
        cloned_field.find('#form_field_text_template_field_description').attr('id', 'form_box_' + bn + '-text_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-text:' + box_total_field_count + '_description'); // text field description
        cloned_field.find('[for="form_field_text_template_field_description"]').attr('for', 'form_box_' + bn + '-text_field_description_' + field_count).text('Text Description for '); // text field description lbl
        // remove field
        cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-text_field_' + field_count)
            .on('click', function () {
                removeFieldClickEvent(this, bn);
                box_total_field_count--;
            }); // end remove field button;

        jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);
    });
    /*******************
     * Image Input
     *******************/
    jQuery('#add_img-form_box_' + bn).on('click', function () {
        box_total_field_count++;
        var cloned_field = jQuery('#form_field_img_template').clone(true);
        var field_count = jQuery('[id^="form_box_' + bn + '-img_field_wrap_"]').length + 1;
        var duplicate = jQuery('[id^="form_box_' + bn + '-img_field_wrap_' + field_count + '"]').length;
        // add +1 to field count until duplicate is false
        while (duplicate) {
            if (duplicate) {
                field_count = field_count + 1;
            }
            duplicate = jQuery('[id^="form_box_' + bn + '-img_field_wrap_' + field_count + '"]').length;
        }
        cloned_field.attr('id', 'form_box_' + bn + '-img_field_wrap_' + field_count).attr('name', 'form_box_' + bn + '-img_field_wrap_' + field_count).addClass('cfb-field-container'); // image field div
        cloned_field.find('#form_field_img_template_field_name').attr('id', 'form_box_' + bn + '-img_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-image:' + box_total_field_count + '_name'); // image field name
        cloned_field.find('[for="form_field_img_template_field_name"]').attr('for', 'form_box_' + bn + '-img_field_name_' + field_count).text('Image Field '); // image field name lbl
        cloned_field.find('#form_field_img_template_field_description').attr('id', 'form_box_' + bn + '-img_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-image:' + box_total_field_count + '_description'); // image field description
        cloned_field.find('[for="form_field_img_template_field_description"]').attr('for', 'form_box_' + bn + '-img_field_description_' + field_count).text('Image Description for '); // image field description lbl
        // remove field
        cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-img_field_' + field_count)
            .on('click', function(){
                removeFieldClickEvent(this, bn);
                box_total_field_count--;
            }); // end remove field button;
        jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);
    });
    console.log('#add_textarea-form_box_' + bn);
    /*******************
     * File Input
     *******************/
    jQuery('#add_file-form_box_' + bn).on('click', function () {
        box_total_field_count++;
        var cloned_field = jQuery('#form_field_file_template').clone(true);
        var field_count = jQuery('[id^="form_box_' + bn + '-file_field_wrap_"]').length + 1;
        var duplicate = jQuery('[id^="form_box_' + bn + '-file_field_wrap_' + field_count + '"]').length;
        // add +1 to field count until duplicate is false
        while (duplicate) {
            if (duplicate) {
                field_count = field_count + 1;
            }
            duplicate = jQuery('[id^="form_box_' + bn + '-file_field_wrap_' + field_count + '"]').length;
        }
        cloned_field.attr('id', 'form_box_' + bn + '-file_field_wrap_' + field_count).attr('name', 'form_box_' + bn + '-file_field_wrap_' + field_count).addClass('cfb-field-container'); // text field div // file field div
        cloned_field.find('#form_field_file_template_field_name').attr('id', 'form_box_' + bn + '-file_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-file:' + box_total_field_count + '_name'); // file field name
        cloned_field.find('[for="form_field_file_template_field_name"]').attr('for', 'form_box_' + bn + '-file_field_name_' + field_count).text('File Field '); // file field name lbl
        cloned_field.find('#form_field_file_template_field_description').attr('id', 'form_box_' + bn + '-file_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-file:' + box_total_field_count + '_description'); // file field description
        cloned_field.find('[for="form_field_file_template_field_description"]').attr('for', 'form_box_' + bn + '-file_field_description_' + field_count).text('File Description for '); // file field description lbl
        // remove field
        cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-file_field_' + field_count)
            .on('click', function(){
                removeFieldClickEvent(this, bn);
                box_total_field_count--;
            }); // end remove field button;
        jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);
    });
    console.log('#add_file-form_box_' + bn);
    /*******************
     * Text Area Input
     *******************/
    jQuery('#add_textarea-form_box_' + bn).on('click', function () {
        box_total_field_count++;
        var cloned_field = jQuery('#form_field_textarea_template').clone(true);
        var field_count = jQuery('[id^="form_box_' + bn + '-textarea_field_wrap_"]').length + 1;
        var duplicate = jQuery('[id^="form_box_' + bn + '-textarea_field_wrap_' + field_count + '"]').length;
        // add +1 to field count until duplicate is false
            while (duplicate) {
            if (duplicate) {
                field_count = field_count + 1;
            }
            duplicate = jQuery('[id^="form_box_' + bn + '-textarea_field_wrap_' + field_count + '"]').length;
        }
        cloned_field.attr('id', 'form_box_' + bn + '-textarea_field_wrap_' + field_count).attr('name', 'form_box_' + bn + '-textarea_field_wrap_' + field_count).addClass('cfb-field-container'); // textarea field div

        cloned_field.find('#form_field_textarea_template_field_name').attr('id', 'form_box_' + bn + '-textarea_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-textarea:' + box_total_field_count + '_name'); // textarea field name
        cloned_field.find('[for="form_field_textarea_template_field_name"]').attr('for', 'form_box_' + bn + '-textarea_field_name_' + field_count).text('Textarea Field '); // textarea field name lbl

        cloned_field.find('#form_field_textarea_template_field_description').attr('id', 'form_box_' + bn + '-textarea_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-textarea:' + box_total_field_count + '_description'); // textarea field description
        cloned_field.find('[for="form_field_textarea_template_field_description"]').attr('for', 'form_box_' + bn + '-textarea_field_description_' + field_count).text('Textarea Description for '); // textarea field description lbl
        // remove field
        cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-textarea_field_' + field_count)
            .on('click', function(){
                removeFieldClickEvent(this, bn);
                box_total_field_count--;
            }); // end remove field button;
        jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);
    });
    console.log('#add_select-form_box_' + bn);
    /*******************
     * Select Input
     *******************/
    jQuery('#add_select-form_box_' + bn).on('click', function () { // add select button
        box_total_field_count++;
        var select_option_total_field_count = box_total_field_count; // store so our options will have correct select field
        var cloned_field = jQuery('#form_field_select_template').clone(true);
        var field_count = jQuery('[id^="form_box_' + bn + '-select_field_wrap_"]').length + 1;
        var duplicate = jQuery('[id^="form_box_' + bn + '-select_field_wrap_' + field_count + '"]').length;
        // add +1 to field count until duplicate is false
        while (duplicate) {
            if (duplicate) {
                field_count = field_count + 1;
            }
            duplicate = jQuery('[id^="form_box_' + bn + '-select_field_wrap_' + field_count + '"]').length;
        }
        cloned_field.find('#add_form_field_select_button').attr('id', 'form_box_' + bn + '_add_form_field_select_button_' + field_count); // select field option button

        cloned_field.attr('id', 'form_box_' + bn + '-select_field_wrap_' + field_count).addClass('cfb-field-container'); // select field div

        cloned_field.find('#form_field_select_template_field_name').attr('id', 'form_box_' + bn + '-select_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_name'); // select field name
        cloned_field.find('#form_field_select_template_field_name_field').attr('id', 'form_box_' + bn + '-select_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_name'); // select field name

        cloned_field.find('[for="form_field_select_template_field_name_field"]').attr('for', 'form_box_' + bn + '-select_field_name_' + field_count).text('Select Field '); // select field name lbl

        cloned_field.find('#form_field_select_template_field_description').attr('id', 'form_box_' + bn + '-select_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_description'); // select field description
        cloned_field.find('#form_field_select_template_field_description_field').attr('id', 'form_box_' + bn + '-select_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_description'); // select field description

        cloned_field.find('[for="form_field_select_template_field_description_field"]').attr('for', 'form_box_' + bn + '-select_field_description_' + field_count).text('Select Description for '); // select field description lbl
        // select field
        cloned_field.find('#form_field_select_template_field_select_options').attr('id', 'form_box_' + bn + '-select_field_options_field_wrap_' + field_count); // select field options div
        cloned_field.find('#form_field_select_template_field_select_option_field_wrap').attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_1'); // select field option wrap 1
        cloned_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_1').attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_option_fields[]'); // select field option 1
        cloned_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_1').text('Select Field Option'); // select field option
        cloned_field.find('#remove_form_field_select_button').remove(); // remove from template because 1st option must stay
        // remove field
        cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-select_field_' + field_count)
            .on('click', function(){
                removeFieldClickEvent(this, bn);
                box_total_field_count--;
            }); // end remove field button;
        jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);

        jQuery('[id^="form_box_' + bn + '_add_form_field_select_button_' + field_count + '"]').on('click', function () { // add select option button
            var cloned_option_field = jQuery('#form_field_select_template_field_select_option_field_wrap').clone();
            var option_field_count = jQuery('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_"]').length;
            var option_duplicate = jQuery('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
            // add +1 to field count until option duplicate is false
            while (option_duplicate) {
                if (option_duplicate) {
                    option_field_count = option_field_count + 1;
                }
                option_duplicate = jQuery('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
            }
            cloned_option_field.attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count); // select option field div
            cloned_option_field.find('#remove_form_field_select_button').attr('id', 'form_box_' + bn + '_remove_form_field_select_button_' + field_count + '_option_field_' + option_field_count)
                .on('click', function () {
                    jQuery(this).parent().remove();
                }); // remove select option
            cloned_option_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_' + option_field_count).attr('name', 'form_box_' + bn + '-fields-select:' + select_option_total_field_count + '_option_fields[]'); // select field option name
            cloned_option_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_' + option_field_count).text('Select Field Option'); // select field option
            jQuery('#form_box_' + bn + '-select_field_options_field_wrap_' + field_count).append(cloned_option_field).addClass('cfb-field-select-option-container'); // text field div;
        });
    });
    return box_total_field_count;
}

jQuery(document).ready(function () {
    let boxes = jQuery('[id^="box-form_box_"]');
    var form_box_count = boxes.length; // total amount of boxes on the screen
    jQuery(".tablenav select").select2();
    jQuery(".populate").select2();


    /************
     UI Behavior - Static Fields
     ************/
    /*
    See https://stackoverflow.com/questions/17771187/jquery-ui-sortable-drop-event
     */
    jQuery('[id^="form_box_field_wrap-form_box_"]').sortable({
        update: function( ) {
            console.log(this);
            console.log(jQuery(this));
            updateBoxFieldsOnDrop(this);
        }
    });


    // Gather all form boxes currently on the screen
    boxes.each(function () {
        let bn = parseInt(jQuery(this).attr('id').replace(/box-form_box_/, ''));
        let box_total_field_count = getBoxTotalFieldCount(bn);
        let fields = jQuery('#form_box_field_wrap-form_box_' + bn.toString()).children();
        
        // Set Remove Click Event for Box
        jQuery('#remove_this_box-form_box_' + bn).on('click', function () {
            form_box_count = removeBoxEvent(this, form_box_count);
        });
        
        // Set Add Field Click Events
        box_total_field_count = setAddClickEvent(bn, box_total_field_count);

        // Set Add Click event for options of select fields
        jQuery(this).find('.add-select-option-button').on('click', function () { // add select option button
            var matches = jQuery(this).parent().parent().prev().find('textarea').attr('name').match(/:[0-9]/g, '');
            var select_option_total_field_count = parseInt(matches[0].replace(/:/g, ''));
            var field_count = jQuery(this).parent().parent().find('[id^="form_box_' + bn + '-select_field_wrap_"]').length + 1;

            var cloned_option_field = jQuery('#form_field_select_template_field_select_option_field_wrap').clone();

            var option_field_count = jQuery(this).parent().parent().find('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_"]').length;

            var option_duplicate = jQuery(this).parent().parent().find('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;

            // add +1 to field count until option duplicate is false
            while (option_duplicate) {
                if (option_duplicate) {
                    option_field_count = option_field_count + 1;
                }
                option_duplicate = jQuery('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
            }
            cloned_option_field.attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count); // select option field div
            cloned_option_field.find('#remove_form_field_select_button').attr('id', 'form_box_' + bn + '_remove_form_field_select_button_' + field_count + '_option_field_' + option_field_count)
                .on('click', function () {
                    jQuery(this).parent().remove();
                }).addClass('red-highlight'); // remove select option
            cloned_option_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_' + option_field_count).attr('name', 'form_box_' + bn + '-fields-select:' + select_option_total_field_count + '_option_fields[]'); // select field option name
            cloned_option_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_' + option_field_count).text('Select Field Option'); // select field option

            jQuery(this).parent().parent().children().last().append(cloned_option_field).addClass('cfb-field-select-option-container'); // select field div;
        });

        // Gather all box fields on the screen
       fields.each(function () {
           // Set remove click event for field
           box_total_field_count = jQuery(this).find('.red-highlight')
               .on('click', function () {
                   removeFieldClickEvent(this, bn);
                   box_total_field_count--;
                   return box_total_field_count;
               });// end remove field button;

           // Set remove click event for options of select fields
           jQuery(this).find('.red_button')
               .on('click', function () {
                   // Remove option
                   jQuery(this).parent().remove();
               }).addClass('red-highlight'); // end remove field button;
       });
    });

    /************
     UI Behavior - Dynamic Fields
     ************/
    jQuery('[id$="custom_field_builder"]').on('change', function () {
        if (jQuery(this).val() == 'yes') {
            jQuery('#form_box_creator_wrap').slideDown();
            jQuery('#form_box_field_wrap').show();
        } else {
            jQuery('#form_box_creator_wrap').slideUp();
            jQuery('#form_box_field_wrap').hide();
        }
    });
    jQuery('#add_form_box_button').on('click', function () {
        var currentFormBox = jQuery('[id^="box-form_box_"]').length+1; // used for field add append - need local var
        var box_total_field_count = 0;
        var cloned_box = jQuery('#form_box').clone();
        form_box_count++;
        var box_duplicate = jQuery('[id^="box-form_box_' + form_box_count + '"]').length;
        // add +1 to box count until duplicate is false
        while (box_duplicate) {
            if (box_duplicate) {
                form_box_count = form_box_count + 1;
            }
            box_duplicate = jQuery('[id^="box-form_box_' + form_box_count + '"]').length;
        }
        // if(form_box_count === 1) {
            cloned_box.attr('id', 'box-form_box_' + form_box_count); // box
            cloned_box.find('#form_box_name').attr('id', 'box_name-form_box_' + form_box_count); // box name div
            cloned_box.find('#form_box_name_field').attr('id', 'box_name-form_box_' + form_box_count).attr('name', 'form_box_' + form_box_count + '-name'); // box name
            cloned_box.find('#form_box_description_field').attr('id', 'box_description-form_box_' + form_box_count).attr('name', 'form_box_' + form_box_count + '-description'); // box description

            cloned_box.find('[for="form_box_name_field"]').attr('for', 'box_name-form_box_' + form_box_count).attr('id', 'box_name-form_box_' + form_box_count).text('Form Box ' + form_box_count); // box name lbl


            cloned_box.find('#add_form_field_buttons').attr('id', 'add_form_field_buttons-form_box_' + form_box_count).addClass('button-container'); // field buttons div
            cloned_box.find('#add_text').attr('id', 'add_text-form_box_' + form_box_count).attr('name', 'add_text-form_box_' + form_box_count); // add text
            cloned_box.find('#add_img').attr('id', 'add_img-form_box_' + form_box_count).attr('name', 'add_img-form_box_' + form_box_count); // add img
            cloned_box.find('#add_file').attr('id', 'add_file-form_box_' + form_box_count).attr('name', 'add_file-form_box_' + form_box_count); // add file
            cloned_box.find('#add_textarea').attr('id', 'add_textarea-form_box_' + form_box_count).attr('name', 'add_textarea-form_box_' + form_box_count); // add textarea
            cloned_box.find('#add_select').attr('id', 'add_select-form_box_' + form_box_count).attr('name', 'add_select-form_box_' + form_box_count); // add select
            cloned_box.find('#form_box_field_wrap').attr('id', 'form_box_field_wrap-form_box_' + form_box_count)
                .sortable({
                    update: function( ) {
                        console.log(this);
                        console.log(jQuery(this));
                        updateBoxFieldsOnDrop(this);
                }
            }); // field wrap

            cloned_box.find('#remove_this_box').attr('id', 'remove_this_box-form_box_' + form_box_count); // remove box

            jQuery('#form_box_creator_wrap').append(cloned_box); // append new box

            //remove box click event
            jQuery('#remove_this_box-form_box_' + form_box_count).on('click', function () {
                form_box_count = removeBoxEvent(this, form_box_count);
            });
            console.log('#add_text-form_box_' + form_box_count);
            /*******************
             * Text Input
             *******************/
            jQuery('#add_text-form_box_' + form_box_count).on('click', function () {
                box_total_field_count++;
                var cloned_field = jQuery('#form_field_text_template').clone(true);
                var field_count = jQuery('[id^="form_box_' + form_box_count + '-text_field_wrap_"]').length + 1;
                var duplicate = jQuery('[id^="form_box_' + form_box_count + '-text_field_wrap_' + field_count + '"]').length;
                // add +1 to field count until duplicate is false
                while (duplicate) {
                    if (duplicate) {
                        field_count = field_count + 1;
                    }
                    duplicate = jQuery('[id^="form_box_' + form_box_count + '-text_field_wrap_' + field_count + '"]').length;
                }
                cloned_field.attr('id', 'form_box_' + form_box_count + '-text_field_wrap_' + field_count).attr('name', 'form_box_' + form_box_count + '-text_field_wrap_' + field_count).addClass('cfb-field-container'); // text field div
                cloned_field.find('#form_field_text_template_field_name').attr('id', 'form_box_' + form_box_count + '-text_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-text:' + box_total_field_count + '_name'); // text field name
                cloned_field.find('[for="form_field_text_template_field_name"]').attr('for', 'form_box_' + form_box_count + '-text_field_name_' + field_count).text('Text Field '); // text field name lbl
                cloned_field.find('#form_field_text_template_field_description').attr('id', 'form_box_' + form_box_count + '-text_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-text:' + box_total_field_count + '_description'); // text field description
                cloned_field.find('[for="form_field_text_template_field_description"]').attr('for', 'form_box_' + form_box_count + '-text_field_description_' + field_count).text('Text Description for '); // text field description lbl
                // remove field
                cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-text_field_' + field_count)
                    .on('click', function(){
                        removeFieldClickEvent(this, form_box_count);
                        box_total_field_count--;
                    }); // end remove field button;

                jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);
            });
            console.log('#add_img-form_box_' + form_box_count);
            /*******************
             * Image Input
             *******************/
            jQuery('#add_img-form_box_' + form_box_count).on('click', function () {
                box_total_field_count++;
                var cloned_field = jQuery('#form_field_img_template').clone(true);
                var field_count = jQuery('[id^="form_box_' + form_box_count + '-img_field_wrap_"]').length + 1;
                var duplicate = jQuery('[id^="form_box_' + form_box_count + '-img_field_wrap_' + field_count + '"]').length;
                // add +1 to field count until duplicate is false
                while (duplicate) {
                    if (duplicate) {
                        field_count = field_count + 1;
                    }
                    duplicate = jQuery('[id^="form_box_' + form_box_count + '-img_field_wrap_' + field_count + '"]').length;
                }
                cloned_field.attr('id', 'form_box_' + form_box_count + '-img_field_wrap_' + field_count).attr('name', 'form_box_' + form_box_count + '-img_field_wrap_' + field_count).addClass('cfb-field-container'); // image field div
                cloned_field.find('#form_field_img_template_field_name').attr('id', 'form_box_' + form_box_count + '-img_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-image:' + box_total_field_count + '_name'); // image field name
                cloned_field.find('[for="form_field_img_template_field_name"]').attr('for', 'form_box_' + form_box_count + '-img_field_name_' + field_count).text('Image Field '); // image field name lbl
                cloned_field.find('#form_field_img_template_field_description').attr('id', 'form_box_' + form_box_count + '-img_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-image:' + box_total_field_count + '_description'); // image field description
                cloned_field.find('[for="form_field_img_template_field_description"]').attr('for', 'form_box_' + form_box_count + '-img_field_description_' + field_count).text('Image Description for '); // image field description lbl
                // remove field
                cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-img_field_' + field_count)
                    .on('click', function(){
                        removeFieldClickEvent(this, form_box_count);
                        box_total_field_count--;
                    }); // end remove field button;
                jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);
            });
            console.log('#add_textarea-form_box_' + form_box_count);
            /*******************
             * File Input
             *******************/
            jQuery('#add_file-form_box_' + form_box_count).on('click', function () {
                box_total_field_count++;
                var cloned_field = jQuery('#form_field_file_template').clone(true);
                var field_count = jQuery('[id^="form_box_' + form_box_count + '-file_field_wrap_"]').length + 1;
                var duplicate = jQuery('[id^="form_box_' + form_box_count + '-file_field_wrap_' + field_count + '"]').length;
                // add +1 to field count until duplicate is false
                while (duplicate) {
                    if (duplicate) {
                        field_count = field_count + 1;
                    }
                    duplicate = jQuery('[id^="form_box_' + form_box_count + '-file_field_wrap_' + field_count + '"]').length;
                }
                cloned_field.attr('id', 'form_box_' + form_box_count + '-file_field_wrap_' + field_count).attr('name', 'form_box_' + form_box_count + '-file_field_wrap_' + field_count).addClass('cfb-field-container'); // text field div // file field div
                cloned_field.find('#form_field_file_template_field_name').attr('id', 'form_box_' + form_box_count + '-file_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-file:' + box_total_field_count + '_name'); // file field name
                cloned_field.find('[for="form_field_file_template_field_name"]').attr('for', 'form_box_' + form_box_count + '-file_field_name_' + field_count).text('File Field '); // file field name lbl
                cloned_field.find('#form_field_file_template_field_description').attr('id', 'form_box_' + form_box_count + '-file_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-file:' + box_total_field_count + '_description'); // file field description
                cloned_field.find('[for="form_field_file_template_field_description"]').attr('for', 'form_box_' + form_box_count + '-file_field_description_' + field_count).text('File Description for '); // file field description lbl
                // remove field
                cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-file_field_' + field_count)
                    .on('click', function(){
                        removeFieldClickEvent(this, form_box_count);
                        box_total_field_count--;
                    }); // end remove field button;
                jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);
            });
            console.log('#add_file-form_box_' + form_box_count);
            /*******************
             * Text Area Input
             *******************/
            jQuery('#add_textarea-form_box_' + form_box_count).on('click', function () {
                box_total_field_count++;
                var cloned_field = jQuery('#form_field_textarea_template').clone(true);
                var field_count = jQuery('[id^="form_box_' + form_box_count + '-textarea_field_wrap_"]').length + 1;
                var duplicate = jQuery('[id^="form_box_' + form_box_count + '-textarea_field_wrap_' + field_count + '"]').length;
                // add +1 to field count until duplicate is false
                while (duplicate) {
                    if (duplicate) {
                        field_count = field_count + 1;
                    }
                    duplicate = jQuery('[id^="form_box_' + form_box_count + '-textarea_field_wrap_' + field_count + '"]').length;
                }
                cloned_field.attr('id', 'form_box_' + form_box_count + '-textarea_field_wrap_' + field_count).attr('name', 'form_box_' + form_box_count + '-textarea_field_wrap_' + field_count).addClass('cfb-field-container'); // textarea field div

                cloned_field.find('#form_field_textarea_template_field_name').attr('id', 'form_box_' + form_box_count + '-textarea_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-textarea:' + box_total_field_count + '_name'); // textarea field name
                cloned_field.find('[for="form_field_textarea_template_field_name"]').attr('for', 'form_box_' + form_box_count + '-textarea_field_name_' + field_count).text('Textarea Field '); // textarea field name lbl

                cloned_field.find('#form_field_textarea_template_field_description').attr('id', 'form_box_' + form_box_count + '-textarea_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-textarea:' + box_total_field_count + '_description'); // textarea field description
                cloned_field.find('[for="form_field_textarea_template_field_description"]').attr('for', 'form_box_' + form_box_count + '-textarea_field_description_' + field_count).text('Textarea Description for '); // textarea field description lbl
                // remove field
                cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-textarea_field_' + field_count)
                    .on('click', function(){
                        removeFieldClickEvent(this, form_box_count);
                        box_total_field_count--;
                    }); // end remove field button;
                jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);
            });
            console.log('#add_select-form_box_' + form_box_count);
            /*******************
             * Select Input
             *******************/
            jQuery('#add_select-form_box_' + form_box_count).on('click', function () { // add select button
                box_total_field_count++;
                var select_option_total_field_count = box_total_field_count; // store so our options will have correct select field
                var cloned_field = jQuery('#form_field_select_template').clone(true);
                var field_count = jQuery('[id^="form_box_' + form_box_count + '-select_field_wrap_"]').length + 1;
                var duplicate = jQuery('[id^="form_box_' + form_box_count + '-select_field_wrap_' + field_count + '"]').length;
                // add +1 to field count until duplicate is false
                while (duplicate) {
                    if (duplicate) {
                        field_count = field_count + 1;
                    }
                    duplicate = jQuery('[id^="form_box_' + form_box_count + '-select_field_wrap_' + field_count + '"]').length;
                }
                cloned_field.find('#add_form_field_select_button').attr('id', 'form_box_' + form_box_count + '_add_form_field_select_button_' + field_count); // select field option button

                cloned_field.attr('id', 'form_box_' + form_box_count + '-select_field_wrap_' + field_count).addClass('cfb-field-container'); // select field div

                cloned_field.find('#form_field_select_template_field_name').attr('id', 'form_box_' + form_box_count + '-select_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_name'); // select field name
                cloned_field.find('#form_field_select_template_field_name_field').attr('id', 'form_box_' + form_box_count + '-select_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_name'); // select field name

                cloned_field.find('[for="form_field_select_template_field_name_field"]').attr('for', 'form_box_' + form_box_count + '-select_field_name_' + field_count).text('Select Field '); // select field name lbl

                cloned_field.find('#form_field_select_template_field_description').attr('id', 'form_box_' + form_box_count + '-select_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_description'); // select field description
                cloned_field.find('#form_field_select_template_field_description_field').attr('id', 'form_box_' + form_box_count + '-select_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_description'); // select field description

                cloned_field.find('[for="form_field_select_template_field_description_field"]').attr('for', 'form_box_' + form_box_count + '-select_field_description_' + field_count).text('Select Description for '); // select field description lbl
                // select field
                cloned_field.find('#form_field_select_template_field_select_options').attr('id', 'form_box_' + form_box_count + '-select_field_options_field_wrap_' + field_count); // select field options div
                cloned_field.find('#form_field_select_template_field_select_option_field_wrap').attr('id', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_1'); // select field option wrap 1
                cloned_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_1').attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_option_fields[]'); // select field option 1
                cloned_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_1').text('Select Field Option'); // select field option
                cloned_field.find('#remove_form_field_select_button').remove(); // remove from template because 1st option must stay
                // remove field
                cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-select_field_' + field_count)
                    .on('click', function(){
                        removeFieldClickEvent(this, form_box_count);
                        box_total_field_count--;
                    }); // end remove field button;
                jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);

                jQuery('[id^="form_box_' + form_box_count + '_add_form_field_select_button_' + field_count + '"]').on('click', function () { // add select option button
                    var cloned_option_field = jQuery('#form_field_select_template_field_select_option_field_wrap').clone();
                    var option_field_count = jQuery('[id^="form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_"]').length;
                    var option_duplicate = jQuery('[id^="form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
                    // add +1 to field count until option duplicate is false
                    while (option_duplicate) {
                        if (option_duplicate) {
                            option_field_count = option_field_count + 1;
                        }
                        option_duplicate = jQuery('[id^="form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
                    }
                    cloned_option_field.attr('id', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count); // select option field div
                    cloned_option_field.find('#remove_form_field_select_button').attr('id', 'form_box_' + form_box_count + '_remove_form_field_select_button_' + field_count + '_option_field_' + option_field_count)
                        .on('click', function () {
                        jQuery(this).parent().remove();
                    }); // remove select option
                    cloned_option_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_' + option_field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + select_option_total_field_count + '_option_fields[]'); // select field option name
                    cloned_option_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_' + option_field_count).text('Select Field Option'); // select field option
                    jQuery('#form_box_' + form_box_count + '-select_field_options_field_wrap_' + field_count).append(cloned_option_field).addClass('cfb-field-select-option-container'); // text field div;
                });
            });
        // }
    });
    /************
     UI Validation
     ************/
    jQuery('#post').submit(function (event) {
        if (jQuery('[id$="custom_field_builder"] .select2-choice span').text() == 'Yes') {
            jQuery('[id^="box-form"]').each(function () {
                jQuery(this).find(':input').each(function (i, e) {
                    var e_id = jQuery(e).attr('id');
                    //if( i < 6){ // only check the fields for the boxes
                    if (jQuery(e).val() == '') {
                        console.log(jQuery(e).val());
                        jQuery(e).parent().addClass('form-invalid');
                        event.preventDefault();
                    } else {
                        jQuery(e).parent().removeClass('form-invalid');
                    }
                    //}
                });
            });
        }
    });
});