var tmpNestableObj;

$(document).ready(function () {
    loadKolMakeupList();
    loadKolStyleList();
    loadFansTypeList();
    loadCooperateTypeList();
    loadMediaList();

    $('#optionItemDialogSaveBtn').click(function () {
        var method = $('#method').val();
        var option_uid = $('#option_uid').val();
        var optionItem_uid = $('#optionItem_uid').val();
        var optionItem_name = $('#optionItem_name').val();

        if (method == 'add') {
            if (optionItem_name == '') {
                alert('請輸入項目名稱!');
                return;
            }

            var formData = {
                option_uid: option_uid,
                optionItem_name: optionItem_name,
                method: method
            }

            $.ajax({
                url: "/AuthApi/addEditDelItem",
                type: "post",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret == "yes") {
                        var obj = data.optionItem;

                        tmpNestableObj.children().append(optionItemHtml(obj));

                        $('#optionItemModal').modal('toggle');

                    } else {
                        alert(data.message);

                        if (data.err_code == "99999") {
                            location.href = "/Root/Login";
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('網路或伺服器發生錯誤，請稍後重試!');
                }
            });
        }
    });
});

//$(document).on('theme:init', function () {
//    //loadKolMakeupList();
//    //loadKolStyleList();
//});
function loadMediaList() {
    var formData = {
        option_uid: 'media'
    }

    $.ajax({
        url: "/AuthApi/optionItemList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.optionItems;
                var items = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                });

                //items = '<ol class="dd-list">' + items + '</ol >';

                $('#nestable05').children().html(items);

                $('#nestable05').nestable();

                $('#nestable05').on('change', function () {
                    nestableChange(this);
                });

            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}
function loadCooperateTypeList() {
    var formData = {
        option_uid: 'cooperateType'
    }

    $.ajax({
        url: "/AuthApi/optionItemList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.optionItems;
                var items = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                });

                //items = '<ol class="dd-list">' + items + '</ol >';

                $('#nestable04').children().html(items);

                $('#nestable04').nestable();

                $('#nestable04').on('change', function () {
                    nestableChange(this);
                });

            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}
function loadFansTypeList() {
    var formData = {
        option_uid: 'fansType'
    }

    $.ajax({
        url: "/AuthApi/optionItemList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.optionItems;
                var items = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                });

                //items = '<ol class="dd-list">' + items + '</ol >';

                $('#nestable03').children().html(items);

                $('#nestable03').nestable();

                $('#nestable03').on('change', function () {
                    nestableChange(this);
                });

            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}
function loadKolStyleList() {
    var formData = {
        option_uid: 'kolStyle'
    }

    $.ajax({
        url: "/AuthApi/optionItemList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.optionItems;
                var items = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                });

                //items = '<ol class="dd-list">' + items + '</ol >';

                $('#nestable02').children().html(items);

                $('#nestable02').nestable();

                $('#nestable02').on('change', function () {
                    nestableChange(this);
                });

            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}
function nestableChange(obj) {
    alert($(obj).attr("data-type"));
    alert(window.JSON.stringify($(obj).nestable('serialize')));
}
function loadKolMakeupList() {
    var formData = {
        option_uid: 'kolMakeup'
    }

    $.ajax({
        url: "/AuthApi/optionItemList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.optionItems;
                var items = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                });

                //items = '<ol class="dd-list">' + items + '</ol >';

                $('#nestable01').children().html(items);

                $('#nestable01').nestable();

                $('#nestable01').on('change', function () {
                    nestableChange(this);
                });
            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}

function optionItemHtml(item) {
    var html = "<li class=\"dd-item\" data-id=\"".concat(item.optionItem_uid, "\">\n      <div class=\"dd-handle\">\n        <span class=\"drag-indicator\"></span>\n        <div data-name=\"option_name\">").concat(item.optionItem_name, "</div>\n        <div class=\"dd-nodrag btn-group ml-auto\">\n          <button class=\"btn btn-sm btn-secondary\" data-parent-uid=\"").concat(item.option_uid, "\" data-uid=\"").concat(item.optionItem_uid, "\" onclick=\"editBtnClick(this);\">Edit</button>\n          <button class=\"btn btn-sm btn-secondary\"  data-parent-uid=\"").concat(item.option_uid, "\" data-uid=\"").concat(item.optionItem_uid, "\" onclick=\"delBtnClick(this);\" ><i class=\"far fa-trash-alt\"></i></button>\n        </div>\n      </li>");
    return html;
}

function editBtnClick(obj) {

    var optionItem_name = $(obj).parent().parent().find("[data-name='option_name']").text();
    var option_name = $(obj).parent().parent().parent().parent().parent().parent().find('.card-header.border-bottom-0').text();
 
    $('#method').val('edit');
    $('#option_name').val();
    $('#option_uid').val($(obj).attr("data-parent-type"));
    $('#optionItem_uid').val($(obj).attr("data-uid"));
    $('#optionItemModal').modal('toggle');

    

    $('#optionItem_name').val(optionItem_name).trigger("change");

    $('#optionItemModal').modal('toggle');
}

function delBtnClick(obj) {
    alert($(obj).attr("data-parent-uid"));
}

function addItem(obj) {
    //alert($(obj).attr("data-type"));

    $('#option_name').val($(obj).parent().parent().find('.card-header.border-bottom-0').text());
    $('#method').val('add');
    $('#option_uid').val($(obj).attr("data-type"));
    $('#optionItemModal').modal('toggle');

    tmpNestableObj = $(obj).parent().parent().find('.dd');
}