@section styles
{
    <link href="~/App_Css/app/jstree.min.css" rel="stylesheet" />
    <style>
        body {
            background-color: #f6f6f6;
        }

        .button-default, .button-accept {
            width: 80px;
        }
        button.close {
            background-color: unset !important;
            border: none !important;
        }

        .dropdown-menu li {
            padding-right: 5px;
            cursor: pointer;
        }

            .dropdown-menu li:hover {
                background-color: #eee;
            }

        .img-opr {
            width: 36px;
            cursor: pointer;
            margin: 6px auto;
        }
    </style>
}

<div style="padding:15px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <div class="d-flex align-items-center justify-content-between px-2" style="height:40px;background-color:#e0e0e0;">
                    <div class="w-100 d-flex justify-content-between align-items-center">
                        <span style="font-size:14px;font-weight:700;">لیست گروه‌ها</span>
                        <div class="dropdown">
                            <button id="dropdownMenuButton1" class="button-accept dropdown-toggle no-margin" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                عملیات<span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" style="padding: 5px; min-width: 90px;" aria-labelledby="dropdownMenuButton1">
                                <li onclick="openModalCategory('insert');"><a class="dropdown-item">جدید</a></li>
                                <li onclick="openModalCategory('edit');"><a class="dropdown-item">ویرایش</a></li>
                                <li onclick="deleteCategory();"><a class="dropdown-item">حذف</a></li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
                <div style="border:2px solid #ccc;height: calc(100vh - 90px);overflow:auto;padding:15px;">
                    <div id="jstree" class="tree"></div>
                </div>
            </div>
            <div class="col-9">
                <div class="center-vertical text-center" style="height:40px;margin-bottom:10px;background-color:#e0e0e0;">
                    <span style="font-weight:700;" id="spanDepth">توجه فرمایید که فقط در سطح آخر گروه، مجاز به اضافه کردن کالا هستید</span>
                    <span style="font-weight:700;display:none;" id="spanKalaNoPrice">توجه فرمایید که تنها کالاهای دارای قیمت، در سایت فروشگاه نمایش داده می‌شوند</span>
                </div>
                <div class="container-fluid" id="div-grid" style="display:none;">
                    <div class="row">
                        <div class="col-5 grid" id="gridUnSelectedKala" style="height: calc(100vh - 90px);position: relative;">
                            <table>
                                <thead>
                                    <tr>
                                        <td style="min-width:60px;width:60px;" data-id="codepart">کد کالا</td>
                                        <td style="min-width: 280px;width: 280px;" data-id="namekala">نام کالا</td>
                                        <td style="min-width: 280px;width: 280px;" data-id="price">قیمت</td>
                                        <td style="min-width: 280px;width: 280px;" data-id="mojodi">موجودی</td>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-2 center-vertical" style="height: calc(100vh - 90px);">
                            <img onclick="addKala(true)" src="~/App_Images/vitrin/addSingle.svg" class="img-opr">
                            <img onclick="addKala(false)" src="~/App_Images/vitrin/addAll.svg" class="img-opr">
                            <img onclick="removeKala(true)" src="~/App_Images/vitrin/removeSingele.svg" class="img-opr" style="margin-top: 34px;">
                            <img onclick="removeKala(false)" src="~/App_Images/vitrin/removeAll.svg" class="img-opr">
                        </div>
                        <div class="col-5 grid" id="gridSelectedKala" style="height: calc(100vh - 90px);position: relative;">
                            <table>
                                <thead>
                                    <tr>
                                        <td style="min-width:60px;width:60px;" data-id="codepart">کد کالا</td>
                                        <td style="min-width: 280px;width: 280px;" data-id="namekala">نام کالا</td>
                                        <td style="min-width: 280px;width: 280px;" data-id="price">قیمت</td>
                                        <td style="min-width: 280px;width: 280px;" data-id="mojodi">موجودی</td>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@*فرم تعریف دسته بندی*@
<div class="modal fade" id="ProductCategoryDefine" role="dialog">
    <div class="modal-dialog" style="max-width:538px;">
        <div class="modal-content">
            <div class="modal-header">
                <label class="modal-title" style="font-size: 14px; font-weight: bold;">تعریف دسته بندی محصولات</label>
                <button type="button" class="close" data-dismiss="modal">
                    <img src="~/App_Images/index/Close.svg" class="close-svg" />
                </button>
            </div>
            <div class="modal-body" style="padding:20px 0 0;background-color: #f0f8f9;">
                <iframe src="" style="border: 0;width: 100%;height: calc(100vh - 230px);"></iframe>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/App_Scripts/app/jstree.min.js"></script>
    <script>
        closeLoading();
        var mode = "new", codeCategory = -1;
        $("#gridSelectedKala").gridBuilder().setCaption(" لیست کالاهای انتخاب شده ");
        $("#gridUnSelectedKala").gridBuilder().setCaption(" لیست کالاهای انتخاب نشده ");

        function loadGrid(gridId) {
            var selected = $("#jstree").jstree(true).get_selected(true);
            codeCategory = selected[0].original.id;

            var url = "";
            if (gridId === "gridSelectedKala")
                url = "LoadGridSelectedKalaCategory";
            else if (gridId === "gridUnSelectedKala")
                url = "LoadGridUnSelectedKalaCategory";

            var gridBuilder = $("#" + gridId).gridBuilder();
            ajax({
                loading: true,
                url: "Admin/" + url,
                data: JSON.stringify({
                    codeCategory: codeCategory,
                    filter: gridBuilder.getFilter(),
                    sort: gridBuilder.getSortFields(),
                    pageNo: gridBuilder.getCurrentPageNumber()
                }),
                success: function (result) {
                    gridBuilder.loadData(result);
                }
            });
        }

        $(document).ready(function () {
            var $tree = $("#jstree");
            var jstree = $tree.jstree(true);
            if (jstree) {
                jstree.refresh();
            } else {
                $tree.jstree({
                    core: {
                        data: {
                            type: "POST",
                            url: window.top.baseUrl + "Admin/GetTreeProduct",
                            success: function () {
                                setTimeout(function () { $tree.jstree("open_node", "-1"); }, 500);
                            }
                        }
                    }
                });
            }

            $tree.on("changed.jstree", function (e, data) {
                var selected = $("#jstree").jstree(true).get_selected(true);
                var depth = selected[0].original.depth;
                if (depth === 4) {
                    $("#div-grid").show();
                    $("#spanDepth").hide();
                    $("#spanKalaNoPrice").show();
                    loadGrid("gridUnSelectedKala");
                    loadGrid("gridSelectedKala");
                }
                else {
                    $("#div-grid").hide();
                    $("#spanDepth").show();
                    $("#spanKalaNoPrice").hide();
                    $("#gridSelectedKala").gridBuilder().clearRows();
                    $("#gridUnSelectedKala").gridBuilder().clearRows();
                }
            });
        });

        var mode = "";
        function openModalCategory(state) {
            mode = state;
            var selected = $("#jstree").jstree(true).get_selected(true);

            if (selected[0].original.depth === 4 && mode === "insert") {
                alert("امکان ایجاد سطح چهارم وجود ندارد");
            }
            else
                $("#ProductCategoryDefine").modal("show");
        }

        $("#ProductCategoryDefine").on("show.bs.modal", function () {
            var selected = $("#jstree").jstree(true).get_selected(true);
            $("#ProductCategoryDefine iframe").attr("src", baseUrl + "Admin/ProductCategoryDefine?name=" + (mode === "insert" ? "" : selected[0].original.text) + "&code=" + (mode === "insert" ? "" : selected[0].original.id) + "&parentCode=" + (mode === "insert" ? selected[0].original.id : selected[0].original.parentId) + "&parentName=" + (mode === "insert" ? selected[0].original.text : (selected[0].original.parentName ? selected[0].original.parentName : "گروه بندی محصولات")) + "&depth=" + (mode === "insert" ? selected[0].original.depth + 1 : selected[0].original.depth));

        });

        $("#ProductCategoryDefine").on("hidden.bs.modal", function () {
            mode = "";
            $("#ProductCategoryDefine iframe").attr("src", "");
        });

        function deleteCategory() {
            if (!confirm("آیا برای حذف مطمئن هستید؟"))
                return;
            var selected = $("#jstree").jstree(true).get_selected(true);

            ajax({
                loading: true,
                url: "Admin/DeleteCategory",
                data: JSON.stringify({ code: selected[0].original.id }),
                success: function (result) {
                    window.location.reload();
                }
            });
        }

        function addKala(single) {
            var codeKala = -1;
            if (single) {
                codeKala = Number($("#gridUnSelectedKala").gridBuilder().getActiveRowCellValue("CodePart"));
            }
            ajax({
                loading: true,
                url: "Admin/AddProductCategory",
                data: JSON.stringify({ codeCategory: codeCategory, codeKala: codeKala }),
                success: function () {
                    loadGrid("gridUnSelectedKala");
                    loadGrid("gridSelectedKala");
                }
            });
        }

        function removeKala(single) {
            var codeKala = -1;
            if (single) {
                codeKala = Number($("#gridSelectedKala").gridBuilder().getActiveRowCellValue("CodePart"));
            }
            ajax({
                loading: true,
                url: "Admin/RemoveProductCategory",
                data: JSON.stringify({ codeCategory: codeCategory, codeKala: codeKala }),
                success: function () {
                    loadGrid("gridUnSelectedKala");
                    loadGrid("gridSelectedKala");
                }
            });
        }
    </script>
}
