jQuery(document).ready(function () {
    /* =============== DEMO =============== */
    // menu items
    var arrayjson = [{"href":"http://home.com","icon":"fas fa-home","text":"Home", "target": "_top", "title": "My Home"},{"icon":"fas fa-chart-bar","text":"Opcion2"},{"icon":"fas fa-bell","text":"Opcion3"},{"icon":"fas fa-crop","text":"Opcion4"},{"icon":"fas fa-flask","text":"Opcion5"},{"icon":"fas fa-map-marker","text":"Opcion6"},{"icon":"fas fa-search","text":"Opcion7","children":[{"icon":"fas fa-plug","text":"Opcion7-1","children":[{"icon":"fas fa-filter","text":"Opcion7-1-1"}]}]}];
    // var arrayjson = $("#menu-string").data("menu");
    // icon picker options
    var iconPickerOptions = {searchText: "Buscar...", labelHeader: "{0}/{1}"};
    // sortable list options
    var sortableListOptions = {
        placeholderCss: {'background-color': "#cccccc"},
        isAllowed: function() { return true; }
    };

    var editor = new MenuEditor('myEditor', {listOptions: sortableListOptions, iconPicker: iconPickerOptions});
    editor.setForm($('#frmEdit'));
    editor.setUpdateButton($('#btnUpdate'));
    

    $.ajax({
        type: 'POST',
        url: 'app/includes/ajax.php',
        data: {action: 'get_menu_items'},
    }).done(function(data){
        try {
            editor.setData(data);
        }
        catch(err) {
            console.log(err);
            console.log(data);
        }
        finally {

        }
    });

    $('#btnSave').on('click', function () {
        var str = editor.getString();
        var text = $(this).html();
        var subBut = $(this);
        $(subBut).html("Submitting...").attr("disabled", true);
        data = {action: 'save_menu_items'};
        $.extend(true, data, JSON.parse(str));
        $('#menuContainer #alert').css('display', 'none');
        $.ajax({
            type: 'POST',
            url: 'app/includes/ajax.php',
            data: data,
        }).done(function(data){
            try {
                data = JSON.parse(data);
                if(data.error == 1) {
                    $('#menuContainer #alert').css('display', '').removeClass("alert-success").removeClass("alert-warning").addClass("alert-danger");
                    $('#menuContainer #alert span').html(data.msg);
                } else if(data.error == 0) {
                    $('#menuContainer #alert').css('display', '').removeClass("alert-danger").removeClass("alert-warning").addClass("alert-success");
                    $('#menuContainer #alert span').html(data.msg);
                }

            }
            catch(err) {
                console.log(err);
                console.log(data);
            }
            finally {
                $(subBut).html(text).attr("disabled", false);
            }
        });
    });

    $("#btnUpdate").click(function(){
        editor.update();
    });

    $('#btnAdd').click(function(){
        editor.add();
    });
    /* ====================================== */

    /** PAGE ELEMENTS **/
    $('[data-toggle="tooltip"]').tooltip();
    $.getJSON( "https://api.github.com/repos/davicotico/jQuery-Menu-Editor", function( data ) {
        $('#btnStars').html(data.stargazers_count);
        $('#btnForks').html(data.forks_count);
    });
});