@section styles
{
    <style>
        body {
            background-color: #f6f6f6;
        }

        .button-default, .button-accept {
            width: 80px;
        }

        .radio-control {
            margin-top: 12px;
        }

        .vitrin-temp-box {
            width: calc((100% - 80px) /5);
            margin: 0 8px;
        }

        .vitrin-temp {
            padding: 8px 4px;
            height: 120px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .vitrine-temp-select {
            border: 1px solid #2ca9b5;
        }

        .vitrine-temp-item {
            padding: 0 2px;
        }

            .vitrine-temp-item > div {
                height: 36px;
                background-color: #ccc;
                border: 1px solid #b3b3b3;
            }

        .img-opr {
            width: 36px;
            cursor: pointer;
            margin: 6px auto;
        }
    </style>
}
@*vitrin-list*@
<div id="vitrin-list" style="padding:15px;">
    <div class="d-flex justify-end flex-row-reverse" style="margin-bottom:10px;height: 28px;">
        <button type="button" class="button-default float-left" onclick="deleteVitrineList()">حذف</button>
        <button type="button" class="button-default float-left" onclick="openVitrineDefine('edit')">ویرایش</button>
        <button type="button" class="button-accept float-left" onclick="openVitrineDefine('new')">جدید</button>
    </div>
    <div class="col-12 no-padding grid" id="gridVitrineList" style="height: calc(100vh - 78px);position: relative;">
        <table>
            <thead>
                <tr>
                    <td data-id="code" style="min-width:50px;width:50px;">کد</td>
                    <td data-id="name" style="min-width:230px;width:230px;">نام ویترین</td>
                    <td data-id="orderview" style="min-width:100px;width:100px;">ترتیب نمایش</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

@*vitrin-define*@
<div id="vitrin-define" style="display:none;">
    <div class="w-100 d-flex align-items-center justify-content-between position-fixed" style="top: 0;background-color: #eceff1;height: 60px;padding: 0 34px;z-index:666;box-shadow: 0 0 16px #51515154;">
        @*<span class="float-right" style="font-weight:700;margin-top: 4px;text-decoration:underline;margin-left:10px;" onclick="openVitrinList()">بازگشت</span>*@
        <span style="font-weight:700;">تعریف ویترین</span>
        <div>
            <button type="button" class="button-accept" onclick="SaveVitrineList()">تایید و ذخیره</button>
            <button type="button" class="button-default" onclick="openVitrinList()">انصراف</button>
        </div>
    </div>

    @*step1  vitrin*@
    <div class="p-3" style="margin-top: 56px;">
        <div class="form-card no-margin" style="padding: 20px 20px 12px;">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-4 has-float-label">
                        <input type="text" class="text-control" data-required="true" id="nameVitrine" autocomplete="off" />
                        <span>عنوان ویترین</span>
                    </div>
                    <div class="col-4 has-float-label">
                        <input type="text" class="text-control" id="url" autocomplete="off" />
                        <span>آدرس صفحه</span>
                    </div>
                    <div class="col-2 has-float-label">
                        <input type="text" class="text-control" data-required="true" data-mask="num" id="orderView" autocomplete="off" />
                        <span>ترتیب نمایش</span>
                    </div>
                    <div class="col-2">
                        <input type="checkbox" class="checkbox-control" data-required="true" id="isActive" autocomplete="off" />
                        <span>فعال است؟</span>
                    </div>
                </div>
            </div>
            <div class="col-12 no-padding" style="font-weight:700;margin:16px 0 10px;">انتخاب الگو</div>
            <div class="col-12" style=" border: 1px solid #6666; padding: 20px 8px; border-radius: 4px; background-color: #eceff1;">
                <div class="row">
                    <div class="vitrin-temp-box">
                        <div class="col-12 vitrin-temp vitrine-temp-select" data-template="4,4,4,4,4,4">
                            @Html.Partial("_Pattern4,4,4,4,4,4")
                            <div class="col-12 no-padding text-center">
                                <input type="radio" class="radio-control" name="vitrin-temp" checked />
                            </div>
                        </div>
                    </div>
                    <div class="vitrin-temp-box">
                        <div class="col-12 vitrin-temp" data-template="8,4,4,4,4">
                            @Html.Partial("_Pattern8,4,4,4,4")
                            <div class="col-12 no-padding text-center">
                                <input type="radio" class="radio-control" name="vitrin-temp" />
                            </div>
                        </div>
                    </div>
                    <div class="vitrin-temp-box">
                        <div class="col-12 vitrin-temp" data-template="4,8,4,4,4">
                            @Html.Partial("_Pattern4,8,4,4,4")
                            <div class="col-12 no-padding text-center">
                                <input type="radio" class="radio-control" name="vitrin-temp" />
                            </div>
                        </div>
                    </div>
                    <div class="vitrin-temp-box">
                        <div class="col-12 vitrin-temp" data-template="4,4,4,8,4">
                            @Html.Partial("_Pattern4,4,4,8,4")
                            <div class="col-12 no-padding text-center">
                                <input type="radio" class="radio-control" name="vitrin-temp" />
                            </div>
                        </div>
                    </div>
                    <div class="vitrin-temp-box">
                        <div class="col-12 vitrin-temp" data-template="4,4,4,4,8">
                            @Html.Partial("_Pattern4,4,4,4,8")
                            <div class="col-12 no-padding text-center">
                                <input type="radio" class="radio-control" name="vitrin-temp" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @*step2 vitrinDetails*@
    <div class="col-12" style="margin:25px 0;display:none" id="step2">
        <div class="col-12 form-card no-margin" style="padding: 20px 20px 12px;">
            <div class="col-12 no-padding" style="font-weight:700;margin-bottom:16px;">انتخاب کالا</div>
            <div class="col-12 no-padding">
                <div class="row">
                    <div class="col-5 no-padding grid" id="gridUnSelectedKalaVitrine" style="height:400px;position: relative;">
                        <table>
                            <thead>
                                <tr>
                                    <td style="min-width:60px;width:60px;" data-id="code">کد کالا</td>
                                    <td style="min-width:280px;width:280px;" data-id="name">نام</td>
                                    <td style="min-width:70px;width:70px;" data-id="codepartproperty">ویژگی</td>
                                    <td style="min-width:70px;width:70px;" data-id="price">قیمت</td>
                                    <td style="min-width:70px;width:70px;" data-id="mojodi">موجودی</td>
                                    <td style="min-width:70px;width:70px;" data-id="shenasehkala">شناسه</td>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-2 center-vertical" style="height: 400px;">
                        <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 no-padding grid" id="gridSelectedKalaVitrine" style="height:400px;position: relative;">
                        <table>
                            <thead>
                                <tr>
                                    <td style="min-width:60px;width:60px;" data-id="code">کد کالا</td>
                                    <td style="min-width:280px;width:280px;" data-id="name">نام</td>
                                    <td style="min-width:70px;width:70px;" data-id="codepartproperty">ویژگی</td>
                                    <td style="min-width:70px;width:70px;" data-id="price">قیمت</td>
                                    <td style="min-width:70px;width:70px;" data-id="mojodi">موجودی</td>
                                    <td style="min-width:70px;width:70px;" data-id="shenasehkala">شناسه</td>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @*step3  نمایش چیدمان*@
    <div class="col-12" id="step3" style="display:none">
        <div class="col-12 form-card no-margin" style="padding: 20px 20px 12px;">
            <div class="col-12 no-padding" style="font-weight:700;margin-bottom:16px;">نمایش چیدمان</div>
            <div class="col-12" style="height:600px;border:1px solid #6666;padding:20px;border-radius:4px;background-color:#eceff1;">
            </div>
        </div>
    </div>

</div>

@section scripts{
    <script>
        closeLoading();
        var mode = "new", codeVitrine = -1;
        loadGrid("gridVitrineList");
        $("#gridVitrineList").gridBuilder().setCaption(" لیست ویترین ها ");
        $("#gridSelectedKalaVitrine").gridBuilder().setCaption(" لیست کالاهای انتخاب شده ");
        $("#gridUnSelectedKalaVitrine").gridBuilder().setCaption(" لیست کالاهای انتخاب نشده ");

        function loadGrid(gridId) {
            var url = "";
            if (gridId === "gridVitrineList")
                url = "LoadGridVitrineList";
            else if (gridId === "gridUnSelectedKalaVitrine")
                url = "LoadGridUnSelectedKalaVitrine";
            else if (gridId === "gridSelectedKalaVitrine")
                url = "LoadGridSelectedKalaVitrine";

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

        function openVitrineDefine(state, code) {
            if (state === "edit") {
                mode = "edit";
                codeVitrine = code ? code : Number($("#gridVitrineList").gridBuilder().getActiveRowCellValue("Code"));
                SetDataVitrineList();
                $("#step2").show();
            }
            $("#isActive").prop("checked", false);
            $("#vitrin-list").hide();
            $("#vitrin-define").show();
        }

        function openVitrinList() {
            mode = "new";
            codeVitrine = -1;
            $("input[type='text']").val("");
            $(".vitrin-temp:first").click();
            $("#gridSelectedKalaVitrine").gridBuilder().clearRows();
            $("#gridUnSelectedKalaVitrine").gridBuilder().clearRows();
            $("#step2").hide();

            $("#vitrin-define").hide();
            $("#vitrin-list").show();
        }

        $(".vitrin-temp").on("click", function () {
            $(".vitrin-temp").removeClass("vitrine-temp-select");
            $(this).addClass("vitrine-temp-select");
            $(".vitrin-temp").find(".radio-control").prop("checked", false);
            $(this).find(".radio-control").prop("checked", true);
        });

        function SetDataVitrineList() {
            ajax({
                loading: true,
                url: "Admin/SetDataVitrineList",
                data: JSON.stringify({ code: codeVitrine }),
                success: function (result) {
                    $("#nameVitrine").val(result.AdminVitrin.Name);
                    $("#url").val(result.AdminVitrin.Url);
                    $("#orderView").val(result.AdminVitrin.OrderView);
                    $("#isActive").prop("checked", result.AdminVitrin.IsActive);
                    $(".vitrin-temp[data-template='" + result.AdminVitrin.Template + "']").click();
                    loadGrid("gridUnSelectedKalaVitrine");
                    loadGrid("gridSelectedKalaVitrine");
                }
            });
        }

        function SaveVitrineList() {
            var error = checkValidation();
            if (error)
                return;

            var template = $(".vitrine-temp-select").attr("data-template");
            var name = $("#nameVitrine").val();
            var url = $("#url").val();
            var orderView = $("#orderView").val();
            var isActive = $("#isActive").prop("checked");
            if (mode === "new") {
                ajax({
                    loading: true,
                    url: "Admin/AddVitrineList",
                    data: JSON.stringify({ name: name, template: template, orderView: orderView, url: url, isActive: isActive }),
                    success: function (result) {
                        openVitrineDefine("edit", result);
                    }
                });
            }
            else {
                ajax({
                    loading: true,
                    url: "Admin/EditVitrineList",
                    data: JSON.stringify({ code: codeVitrine, name: name, template: template, orderView: orderView, url: url, isActive: isActive }),
                    success: function () {
                        window.location.reload();
                    }
                });
            }

        }

        function deleteVitrineList() {
            if (!confirm("آیا برای حذف این ویترین مطمئن هستید؟"))
                return;

            codeVitrine = Number($("#gridVitrineList").gridBuilder().getActiveRowCellValue("Code"));
            ajax({
                loading: true,
                url: "Admin/DeleteVitrineList",
                data: JSON.stringify({ code: codeVitrine }),
                success: function () {
                    loadGrid("gridVitrineList");
                }
            });
        }

        function addKala(single) {
            var codeKala = -1;
            var codePartProperty = -1;
            if (single) {
                codeKala = Number($("#gridUnSelectedKalaVitrine").gridBuilder().getActiveRowCellValue("Code"));
                codePartProperty = Number($("#gridUnSelectedKalaVitrine").gridBuilder().getActiveRowCellValue("CodePartProperty"));
            }
            ajax({
                loading: true,
                url: "Admin/AddVitrineDetails",
                data: JSON.stringify({ codeVitrine: codeVitrine, codeKala: codeKala, codePartProperty: codePartProperty }),
                success: function () {
                    loadGrid("gridUnSelectedKalaVitrine");
                    loadGrid("gridSelectedKalaVitrine");
                }
            });
        }

        function removeKala(single) {
            var codeKala = -1;
            var codePartProperty = -1;
            if (single) {
                codeKala = Number($("#gridSelectedKalaVitrine").gridBuilder().getActiveRowCellValue("Code"));
                codePartProperty = Number($("#gridSelectedKalaVitrine").gridBuilder().getActiveRowCellValue("CodePartProperty"));
            }
            ajax({
                loading: true,
                url: "Admin/RemoveVitrineDetails",
                data: JSON.stringify({ codeVitrine: codeVitrine, codeKala: codeKala, codePartProperty: codePartProperty }),
                success: function () {
                    loadGrid("gridUnSelectedKalaVitrine");
                    loadGrid("gridSelectedKalaVitrine");
                }
            });
        }

    </script>
}
