var tmpNestableObj;
var tmpNestableItem;

$(document).ready(function () {

    loadMediaCard();

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

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

            var formData = {
                optionItem_uid: optionItem_uid,
                mediaItem_name: mediaItem_name,
                method: method
            }

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

                        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('網路或伺服器發生錯誤，請稍後重試!');
                }
            });
        }

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

            var formData = {
                mediaItem_uid: mediaItem_uid,
                optionItem_uid: optionItem_uid,
                mediaItem_name: mediaItem_name,
                method: method
            }

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

                        tmpNestableItem.text(obj.mediaItem_name);

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

                    } else {
                        alert(data.message);

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


    });
});

function loadMediaCard() {
    var formData = {
        option_uid: 'media'
    }

    $.ajax({
        url: "/AuthApi/queryMediaSpecs",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.mediaSpecList;
                var items = "";
                $.each(obj, function (index, item) {
                    $('#card_group').append(cardHtml(item));
                    $('#' + item.optionItem_uid).nestable();

                    $('#' + item.optionItem_uid).on('change', function () {
                         nestableChange(this);
                    });
                });

                //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 cardHtml(mediaOption) {
    var html = "";
    html += "<!-- grid column -->";
    html += "<div class=\"col-lg-6\">";
    html += "    <!-- .card -->";
    html += "    <div class=\"card card-fluid\">";
    html += "        <div class=\"card-header border-bottom-0\"> " + mediaOption.optionItem_name + " </div><!-- .nestable -->";
    html += "        <div id=\"" + mediaOption.optionItem_uid + "\" class=\"dd\" data-toggle=\"sortable\" data-max-depth=\"1\" data-type=\"" + mediaOption.optionItem_uid + "\">";
    html += "            <!-- .dd-list -->";
    html += "            <ol class=\"dd-list\">";
    html += "                <li></li>";                   

    $.each(mediaOption.mediaSpecList, function (index, item) {
        html += optionItemHtml(item);
    });


    html += "            </ol><!-- /.dd-list -->";
    html += "        </div><!-- /.nestable -->";
    html += "        <!-- .card-footer -->";
    html += "        <div class=\"card-footer\">";
    html += "            <a href=\"javascript: void(0);\" onclick=\"addItem(this)\" data-type=\"" + mediaOption.optionItem_uid + "\" class=\"card-footer-item justify-content-start\"><span><i class=\"fa fa-plus-circle mr-1\"></i> Add Menu Item</span></a>";
    html += "        </div><!-- /.card-footer -->";
    html += "    </div><!-- /.card -->";
    html += "</div><!-- /grid column -->";

    return html;
}

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

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

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

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


}

function editBtnClick(obj) {
    tmpNestableItem = $(obj).parent().parent().find("[data-name='option_name']");
    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_name);
    $('#optionItem_uid').val($(obj).attr("data-parent-uid"));
    $('#mediaItem_uid').val($(obj).attr("data-uid"));
    $('#optionItemModal').modal('toggle');



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

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

function delBtnClick(obj) {


    if (confirm('確定刪除此筆資料? 刪掉後，網紅中有勾選此項目的此項目紀錄會消失，新增一筆相同名稱的項目也無法復原!')) {
        if (confirm('再次確認要刪除此筆資料?')) {
            tmpNestableItem = $(obj).parent().parent().find("[data-name='option_name']");
            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();
            var optionItem_uid = $(obj).attr("data-parent-uid");
            var mediaItem_uid = $(obj).attr("data-uid");

            var formData = {
                mediaItem_uid: mediaItem_uid,
                optionItem_uid: optionItem_uid,
                method: 'del'
            }

            $.ajax({
                url: "/AuthApi/addEditDelSpec",
                type: "post",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret == "yes") {
                        tmpNestableItem.parent().remove();

                    } 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')));

    var optionItem_uid = $(obj).attr("data-type");
    var order_json = window.JSON.stringify($(obj).nestable('serialize'));

    var formData = {
        optionItem_uid: optionItem_uid,
        order_json: order_json
    }

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


            } else {
                //alert(data.message);

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