@{
    ViewBag.Title = "انتخاب ویترین";
    Layout = "~/Views/Shared/_NonHeaderFooter.cshtml";
}

@model List<GheyasPlusShop.Models.Admin.AdminVitrinModel>
@section styles
{
    <style>
        body {
            background-color: #f0f8f9 !important;
        }

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

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

<div class="container-fluid" style="height: calc(100vh - 62px);overflow:auto;">
    <div id="vitrineList" class="row">
        @foreach (var item in Model)
        {
            <div class="col-3 vitrine-item">
                <div style="height: 155px; margin-bottom: 15px; background-color: #fff; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);">
                    <div class="pattern-item p-3" style="background-color: #eaedef;">
                        @Html.Partial("_Pattern" + item.Template)
                    </div>
                    <div class="p-3">
                        <input type="checkbox" class="checkbox-control" data-template="@item.Template" data-code="@item.Code" />
                        <span style="font-size: 14px;">@item.Name</span>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

<div class="navbar-fixed-bottom header-bar">
    <input type="button" class="button-accept" onclick="saveVitrine();" value="تایید">
    <label class="label-cancel" onclick="window.parent.$('#showAllVitrine').modal('hide');">انصراف</label>
</div>

@section scripts{
    <script>
        closeLoading();
        $(document).ready(function () {
            var templates = window.parent.getActiveVitrine();
            $("#vitrineList .checkbox-control").each(function () {
                var code = $(this).attr("data-code");
                if (templates.includes(code))
                    $(this).prop("checked", true);
            });
        });

        function saveVitrine() {
            var codes = "";
            var templates = "";
            $(".vitrine-item .checkbox-control:checked").each(function () {
                codes += (codes.length > 0 ? "|" : "") + $(this).attr("data-code");
                templates += (templates.length > 0 ? "|" : "") +
                    $(this).closest(".vitrine-item").find(".pattern-item").html();
            });
            window.parent.setActiveVitrine(codes, templates);
            window.parent.$("#showAllVitrine").modal("hide");
        }
    </script>
}