function crud(params, url, type, callback) {
    $.ajax({
        type: type,
        async: false,
        data: params,
        url: url,
        success: function (response) {
            callback(response);
        },
    });
}

var level = 0;
var selected;
var all_categories = {};
var promiseForCategory = new Promise(function (resolve) {
    if (categories.length != 0) {
        $.each(categories, function (index, value) {
            crud({'level': level, "cat": categories['cat' + level]}, '/class/ajaxCategory', 'POST', function (callback) {
                // console.log('cat' + (level + 1), categories['cat' + level], callback)
                all_categories['cat' + (level + 1)] = callback;
            })
            level++;
        });
    } else {
        crud({'level': level, "cat": ""}, '/class/ajaxCategory', 'POST', function (callback) {
            all_categories['cat' + (level + 1)] = callback;
        })
        level++;
    }
    resolve(all_categories);
});

promiseForCategory.then(function (categories_list) {
    level = 0;
    $.each(categories_list, function (index, value) {
        level++;
        $('.category-row').append(CategoryField(index, level));
        searchCategoryName(index)
        $.each(value, function (index2, value2) {
            selected = "";
            if (id_list[index] == value2.id) {
                selected = "selected";
            }
            $('.' + index).append("<option value='" + value2.id + "'" + selected + ">" + value2.name + "</option>");
        });
    });
    $('.category-row').append(completedField());
})

function CategoryField(name, level) {
    return '<div class="col-12 col-md-3 category-box p-2" data-level="' + level + '">\n' +
        '                    <div class="col-12 border p-0">\n' +
        '<div class="col-12 p-0">\n' +
        '    <input type="text" id="searchCategory-' + name + '" class="form-control"\n' +
        '           placeholder="' + search + '">\n' +
        '</div>' +
        '                        <select name="' + name + '" class="cat-select w-100 ' + name + '" data-level="'
        + level + '" multiple>\n' +
        '                        </select>\n' +
        '                    </div>\n' +
        '                </div>';
}

function completedField() {
    return '<div class="col-12 col-md-3 category-box py-5 px-2">\n' +
        '                    <div class="col-12 p-0 text-center">\n' +
        '                        <h5>\n' +
        continue_message +
        '                        </h5>\n' +
        '                        <button type="submit" name="action" value="update" class="btn btn-primary btn-lg w-100">\n' +
        continue_btn +
        '                        </button>\n' +
        '                    </div>\n' +
        '                </div>';
}


$(document).ready(function () {

    $(".cat-select").on('change', function (e) {
        if (Object.keys($(this).val()).length > 1) {
            $('option[value="' + $(this).val().toString().split(',')[1] + '"]').prop('selected', false);
        }
    });
    selectedValue()
});


function selectedValue() {
    return $('.cat-select').on('change', function () {
        var value = $(this).val();
        var all_category_box = $('.category-row').find('.category-box');
        var level = parseInt($(this).attr('data-level')) + 1;

        //Remove right select fields
        for (var i = level - 1; i <= all_category_box.length - 1; i++) {
            all_category_box[i].remove();
        }

        scroolToSelect(all_category_box)

        crud({"cat": value[0], 'level': level}, '/class/ajaxCategory', 'POST', function (callback) {
            if (callback.length <= 0) {
                $('.category-row').append(completedField());
            } else {
                $('.category-row').append(CategoryField('cat' + level, level));
                $.each(callback, function (index, value) {
                    $('.cat' + level).append("<option value='" + value.id + "'" + selected + ">" + value.name + "</option>");
                });
            }
            selectedValue().unbind()
            searchCategoryName('cat' + level)
            return selectedValue();
        })
    })
}

function searchCategoryName(name) {
    var searchField = $("#searchCategory-" + name);
    searchField.unbind();
    searchField.on("keyup", function () {
        var value = this.value.toLowerCase().trim();
        $('.' + name + ' option').show().filter(function () {
            return $(this).text().toLowerCase().trim().indexOf(value) == -1;
        }).hide();
    });
}

function scroolToSelect(fields) {
    //Scrool Screen
    $([document.documentElement, document.body]).animate({
        scrollTop: $(fields[fields.length - 1]).offset().top + 300
    }, 1000);
}