$(function () {
    var autoField = function () {
        $('.autofield').autocomplete({
            source: {source: 1},
            select: function (event, ui) {
                var parent = $(this).parent().parent();
                var data = ui.item.data;

                parent.find('input[name*="display_as"]').val(data.display_as);
                parent.find('select[name*="callback"]').val(data.callback);
                if (data.not_null == '1') {
                    parent.find('input[name*="not_null"]').prop('checked', true);
                }
                if (data.in_column == '1') {
                    parent.find('input[name*="in_column"]').prop('checked', true);
                }
            }
        });
    };
    var template = $('.item').eq(0);
    var container = $('#crud_items');
    var itemCount = container.find('tr').length - 1;
    $('.add_btn').click(function () {
        itemCount++;
        var html = template.html().replace(/\[0\]/g, '[' + itemCount + ']');
        var item = template.clone().html(html);
        container.append(item);

        autoField();

        return false;
    });
    $(document).on('click', '.remove_btn', function () {
        $(this).parents('.item').remove();

        return false;
    });

    autoField();

    // Ctrl+enter add new line
    $('#crud_items').bind("keydown", function (e) {
        if (e.keyCode === 13 && e.ctrlKey) {
            $(this).find('.add_btn').click();
            $(this).find('input[name*="field"]:last').focus();
        }
    });
});