@{
    ViewBag.Title = "اولویت نمایش بنرها / ویترین‌ها";
    Layout = "~/Views/Shared/_NonHeaderFooter.cshtml";
}
 
@using Utils;

@section styles
{
    <style>
        body {
            background-color: #f0f8f9 !important;
        }
    </style>
}

<div class="px-3">
    <div style="font-weight:700;">اولویت نمایش بنرها / ویترین‌ها</div>
    <ul id="vitrineList" class="mt-3 no-padding" style="height: calc(100vh - 98px);overflow:auto;list-style: none;">
    </ul>
</div>
<div class="navbar-fixed-bottom header-bar">
    <input type="button" class="button-accept" onclick="saveBanner();" value="تایید">
    <label class="label-cancel" onclick="window.parent.$('#reorderVitrine').modal('hide');">انصراف</label>
</div>

@section scripts{
    <script>
        closeLoading();
        $(document).ready(function () {
            var vitrineList = window.parent.getVitrineList();
            vitrineList.forEach(function (item) {
                $("#vitrineList").append(
                    "<li class='vitrine-item' data-code='" + item.code + "' style='padding:8px 10px;border-bottom:1px solid #ccc;background-color:#eceff1;cursor:grab;margin: 0 3px 3px 3px;'>" +
                    "<div> <img class='img-drag' src='../../App_Images/admin/reorder.svg' style='width: 22px;margin-left: 8px;' />" +
                    (item.image ? "<img style='width:40px;height:40px;border-radius:100%;margin-left: 8px;' src='" + item.image + "' />" : "") +
                    "<span style='font-size:14px;'>" +
                    item.name +
                    "</span>" +
                    "</div> </li>");
            });
            $("#vitrineList").sortable({
                handle: ".img-drag",
                forceHelperSize: true,
                forcePlaceholderSize: true,
                tolerance: "pointer",
                axis: "y",
                update: function () {
                }
            }).disableSelection();
        });


        function saveBanner() {
            var codes = [];
            $("#vitrineList .vitrine-item").each(function () {
                codes.push($(this).attr("data-code"));
            });
            window.parent.setVitrineList(codes.join("|"));
            $(".label-cancel").click();
        }
    </script>
}