var list = [1, 2, 3, 4, 5];
var items = 1;
$(function () {
    //All attribute validationgroupname that equals "All Validators"
    $('[validationgroupname="AllValidators"]').each(function () {
        //Assigning jquery $(this) to a variable
        var $this = $(this);
        //Check if the current element has the class 'hasonchangeevent'
        if (!$this.hasClass('hasonchangeevent')) {
            $this.on('change', function () {
                //Attach change event on the element with a function custom_validate
                return Custom_Validate($this);
            });
            //If it does not have the class then add then bind
            $this.addClass('hasonchangeevent');
        }
    });
    //On button clicked fire this function
    $("#addItemButton").click(function () {
    //Finding the minimum number in the array list
        var minimum = Math.min.apply(null, list);
        //As long as the list length is larger than 0 keep allowing to add dropdown
        if (list.length > 0) {
            //Appending the container that holds all the Item dropdowns
            $("#ContentPlaceHolder1_AddMealContainer")
                .append(
                    $("<div class='form-group' id='mealItem_" +
                        minimum +
                        "'> " +
                        "<div class='row'>" +
                        "<label ID='addItemLabel_" +
                        minimum +
                        "' class='col-xs-4 control-label'>Item</label>" +
                        "<div class='col-xs-4'>" +
                        "<select ID ='addItemDropdownList_" +
                        minimum +
                        "'class='form-control' validationgroupname='AllValidators' data-describeby='helpBlock_" + minimum + "'></select>" +
                        "<span class='help-block' id='helpBlock_" + minimum + "' style='display:none'>" +
                        "</span>" +
                        "</div>" +
                        "<span class = 'col-xs-4'>" +
                        "<input type='button' value='Remove' id='addMealItemRemove_" +
                        minimum +
                        "' onclick='removeDropdown(" + minimum + ")' class='btn btn-default btn-sm'" +
                        "</span>" +
                        "</div>" +
                        "</div>")
                );
        //Same as above but this will apply to all dynamicly created form-groups.
        $('[validationgroupname="AllValidators"]').each(function () {
            var $this = $(this);
            //This will check for the 'hasonchangeevent' so that it does not double apply the same event
            if (!$this.hasClass('hasonchangeevent')) {
                //Attach change event on the element with a function custom_validate
                $this.on('change', function () {
                    return Custom_Validate($this);
                });
                //If it does not have the class then add then bind
                $this.addClass('hasonchangeevent');
            }
        });
        //Apply tooltips to all the item dropdown fields
        $('#addItemDropdownList_' + minimum).tooltip({
            title: "<span style ='color:red'>*</span> Select a meal for your training",
            html: true
        });
        //Use a get request to gather the data from the web api foods
        $.get("http://localhost:63591/api/foods",
            function (data, status, xhr) {
                //Check to see if the ready state is Done, the status is 200, and that there is data
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 && data) {
                    //Start a for loop to populate the dropdown menu of food
                    for (i = 0; i < data.length; i++) {
                        //Add the default selector --select-- with a option value of 0
                        if (i == 0) {
                            $('#addItemDropdownList_' + minimum).append(
                                "<option value='0'>--Select--</option>"
                            );
                        //After the first element then we add the FoodID as the value and the FoodName as the string
                        } else {
                            $('#addItemDropdownList_' + minimum).append(
                                "<option value = " + data[i].FoodID + ">" + data[i].FoodName + "</option>"
                            );
                        }
                    }
                }
            });
        //Find the index of the minimum in the list
        var index = list.indexOf(minimum);
        //If the index is found we will splice it and remove it from the list, if it is not found it will return -1
        if (index > -1)
            list.splice(index, 1);
        } else {
        //If the length is greater than the amoutn provided then it will throw a javascript error
        alert("You can only add 5 food items to a meal");
    }
    });
    //Append the item button on the asp.net side to be displayed
    $("#addItemButton").append(
        "<input type='button' value='Add Food Item' id='addMealItem' class='btn btn-default btn-sm'>"
    );
});

//When the user clicks on the remove dropdown button and it passes the current element number
function removeDropdown(minimum_value) {
    //Find the closest meal item and remove from it
    $('#addMealItemRemove_' + minimum_value).closest('#mealItem_' + minimum_value)
        .remove('#mealItem_' + minimum_value);
    //Add the minimum value that is attached to the object back in to the list so it can be added again
    list.push(minimum_value);
}

//Function being used to validate on change and on submit
function Custom_Validate(element) {
    //Set the current validate to true
    var validate = true;
    //Checks to see there is an element attached to it so it can check that only event and not every single one, but if there is not it will check everything due to it thinking it is a form submission
    $(element ? element : '[validationgroupname="AllValidators"]').each(function () {
        //Assigns $(this) to a variable
        var $this = $(this);
        //Takes the poroperty tagName and puts it lower case
        switch ($this.prop('tagName').toLowerCase()) {
            case 'input':
                {
                    //This will check to see if the textbox has any value and if not it willput validate to false and show the error
                    if ($this.val().length == 0) {
                        $('#' + $this.data('describeby')).text('Meal Name is Not Valid').show();
                        validate = false;
                        return;

                    }
                    //This will check the regex expression for special characters and show the error if there is some found and set validate to false
                    else if (!/^[a-zA-Z0-9-/ ]*$/.test($this.val())) {
                        $('#' + $this.data('describeby')).text('Meal Name Contains an Invalid Character').show();
                        validate = false;
                        return;
                    }
                    //If both properties do not match then it will hide the error
                    else
                    {
                        $('#' + $this.data('describeby')).hide();
                        return;
                    }
                }
            case 'select':
                {
                    //Checks to see if the value is not 0 which is the orginal select statement. If it is it will show the error and set the validate to false
                    if ($this.val() == 0) {
                        $('#' + $this.data('describeby')).text('Please Choose an Item Category').show();
                        validate = false;
                        return;
                    } else {
                        $('#' + $this.data('describeby')).hide();
                        return;
                    }
                }
        }
    });
    //Return the validate
    return validate;
}

function Form_Validate() {
    //When this is called by the onClientClick button it will send a function call to validate all fields and return the update
    var validated = Custom_Validate();
    //If the update is true, then it will continue to send the ajax call
    if (validated) {
        //Make the postData look similar to the meal food view model
        var postData = {
            MealName: $('#ContentPlaceHolder1_AddMealName').val(),
            MealCategoryID: $('#ContentPlaceHolder1_AddCategoryName').val(),
            FoodID: []
        };
        //Search through each of thsese IDS
        $('#addItemDropdownList_1, #addItemDropdownList_2, #addItemDropdownList_3, #addItemDropdownList_4, #addItemDropdownList_5')
            .each(function () {
                //On each ID push the value with aradix of 10
                postData.FoodID.push(parseInt($(this).val(), 10));
            });
            //Send the ajax call through AddMeal.aspx
            $.ajax({
                url: "http://localhost:63591/AddMeal.aspx",
                method: 'POST',
                data: { data: JSON.stringify(postData) }
            });
    }
    //This will return false on all, to avoid a double submissions of viewstate
    return false;
}