@using GheyasPlusShop.Utils
@using Utils
@model GheyasPlusShop.Controllers.AdminController.IndexViewModel
@section styles
{
    <style>

        button.close {
            background-color: unset !important;
            border: none !important;
        }

        body {
            background-color: #f6f6f6;
        }

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

        .slide-btn-arrow {
            width: 15px;
            height: 15px;
            cursor: pointer;
        }

        .slide-btn-circle {
            width: 12px;
            height: 12px;
            border-radius: 100%;
            background-color: #808080;
            border: 1px solid #424242;
            /*margin: 8px 0 0 16px;*/
            /*cursor: pointer;*/
        }

            .slide-btn-circle.active {
                background-color: #fff;
            }

        .select-item-box {
            background-color: #eceff1;
            border: 1px dashed #ccc;
            border-radius: 4px;
            height: 360px;
        }

            .select-item-box .select-item {
                padding: 45px 15px;
            }

            .select-item-box button {
                margin: 30px auto 0;
                width: 126px;
                height: 34px;
            }


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

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

        .content-operation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.74);
            z-index: 555;
        }
    </style>
}


<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 style="font-weight:700;margin-top: 4px;">چیدمان صفحه اول</span>
    <div>
        <button type="button" class="button-accept" onclick="save();">تایید و ذخیره</button>
        <button type="button" class="button-default" onclick="window.location.reload();">انصراف</button>
    </div>
</div>
<div class="p-3 mb-3" style="margin-top:80px;">
    <div style="font-size:16px;font-weight:700;">@*تصویر بنر صفحه اول*@</div>
    <span style="font-size:14px;margin-top:30px;">جهت افزودن بنر شماره یک صفحه، بر روی دکمه "افزودن بنر" کلیک کنید.</span>
    <button id="btnAddBanner" type="button" class="button-accept">افزودن بنر</button>
</div>
<input type="file" style="display:none;" id="fuSlide" />
<input type="file" style="display:none;" id="fuBanner" />
<div class="p-3 mb-3 position-relative">
    <div class="select-item-box slide-show">
        @for (var i = 0; i < Model.SlideShow.Count; i++)
        {
            <div data-url="@Model.SlideShow[i].Url" data-alt="@Model.SlideShow[i].Alt" class="slide-show-picture" style="display:@(i==0?"block":"none");height: 360px; background-repeat: no-repeat; background-size: cover; background-position:center;background-image: url('@(Model.SlideShow[i].BannerImage.ToBase64File())')"></div>
        }

    </div>
    <div class="d-flex align-items-center flex-row-reverse" style="position:absolute;bottom:30px;right:30px;">
        <div class="text-center" title="حذف بنر" style="width:30px;height:30px;background-color:#8d8e90;border-radius:8px;margin-right:8px;cursor:pointer;">
            <img src="~/App_Images/admin/delete.svg" id="deleteBanner" style="display:none;width: 18px;margin-top:6px;" />
        </div>
        <div class="d-flex align-items-center justify-content-between mx-2" style="width:60px;height:30px;background-color:#8d8e90;border-radius:8px;padding:7px;">
            <div class="slide-prev" title="قبلی">
                <img src="~/App_Images/index/prev.svg" class="slide-btn-arrow prev svg " />
            </div>
            <div class="slide-next" title="بعدی">
                <img src="~/App_Images/index/next.svg" class="slide-btn-arrow next svg " />
            </div>
        </div>
        <div class="slide-bullet">
            @for (var i = 0; i < Model.SlideShow.Count; i++)
            {
                <div class="slide-btn-circle @(i==0?"active":"")"></div>
            }
        </div>
    </div>
</div>

<div id="vitrineList" class="p-3 mb-3">
    @foreach (var vitrine in Model.Vitrine)
    {
        if (vitrine.BannerCode > 0)
        {
            <div data-url="@vitrine.VitrinUrl" data-alt="@vitrine.VitrinName" class="position-relative vitrine-item vitrine-image" style="margin-bottom:20px;" data-code="@vitrine.BannerCode">
                <img src="@vitrine.BannerImage.ToBase64File()" style="width:100%;" />
            </div>
        }
        else
        {
            <div class="vitrine-item position-relative vitrine-pattern" data-code="@vitrine.VitrinCode" data-text="@vitrine.VitrinName" style="margin-bottom: 20px; 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" style="padding: 4px 2px; background-color: #eaedef;">
                    @Html.Partial("_Pattern" + vitrine.Template)
                </div>
            </div>
        }
    }
</div>

<div class="addVitrin p-3 mb-3">
    <div class="select-item-box">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="d-flex flex-column align-items-center justify-content-center col-6 select-item h-100" style="border-left:1px dashed #9e9c9c;">
                    <div>جهت افزودن ویترین به این بخش، بر روی دکمه "انتخاب ویترین" کلیک کنید.</div>
                    <button type="button" class="button-accept select-vitrine">انتخاب ویترین</button>
                </div>
                <div class="d-flex flex-column align-items-center justify-content-center col-6 select-item h-100">
                    <div>جهت افزودن بنر به این بخش، بر روی دکمه "افزودن بنر" کلیک کنید.</div>
                    <button type="button" class="button-accept select-banner">افزودن بنر</button>
                </div>
            </div>
        </div>
    </div>
</div>


@*فرم تعریف بنر*@
<div class="modal fade" id="bannerDefine" role="dialog">
    <div class="modal-dialog" style="max-width:500px;width:500px;">
        <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>

@*فرم انتخاب ویترین‌ها*@
<div class="modal fade" id="showAllVitrine" role="dialog">
    <div class="modal-dialog" style="max-width:990px;">
        <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 - 173px);"></iframe>
            </div>
        </div>
    </div>
</div>

@*اولویت نمایش بنرها / ویترین‌ها*@
<div class="modal fade" id="reorderVitrine" role="dialog">
    <div class="modal-dialog" style="max-width:400px;">
        <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 - 173px);"></iframe>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script>
        closeLoading();
        slideShowStatus();
        function save() {
            var slideShow = [];
            var vitrineList = [];
            $(".slide-show-picture").each(function () {
                var image = $(this).css("background-image").replace("url(\"", "").replace("\")", "");
                slideShow.push({ Url: $(this).attr("data-url"), Alt: $(this).attr("data-alt"), BannerImageString: image });
            });
            $("#vitrineList .vitrine-item").each(function () {
                var vitrine, url = null, alt = null;
                if ($(this).hasClass("vitrine-image")) {
                    vitrine = $(this).find("img").attr("src");
                    url = $(this).attr("data-url");
                    alt = $(this).attr("data-alt");
                }
                else
                    vitrine = $(this).attr("data-code");

                vitrineList.push({ Url: url, Alt: alt, BannerImageString: vitrine });
            });
            ajax({
                loading: true,
                url: "Admin/SaveVitrine",
                data: JSON.stringify({ slideShow: slideShow, vitrineList: vitrineList }),
                success: function () {
                    window.location.href = window.location.href;
                },
                error: function (err) {
                    var errorMsg;
                    if (err.responseJSON)
                        errorMsg = err.responseJSON.Message;
                    else
                        errorMsg = err.responseText;

                    alert(errorMsg);
                }
            });
        }

        $(".select-vitrine").on("click", function () {
            showLoading();
            $("#showAllVitrine").modal("show");
        });

        $("#showAllVitrine").on("show.bs.modal", function () {
            $("#showAllVitrine iframe").attr("src", baseUrl + "Admin/ShowAllVitrine");

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

        $("#bannerDefine").on("show.bs.modal", function () {
            $("#bannerDefine iframe").attr("src", baseUrl + "Admin/bannerDefine");

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


        $("#reorderVitrine").on("show.bs.modal", function () {
            $("#reorderVitrine iframe").attr("src", baseUrl + "Admin/ReorderVitrine");

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

        $(".select-banner").on("click", function () {
            showLoading();
            $("#bannerDefine").attr("data-target", "banner");
            $("#bannerDefine").modal("show");
        });

        $("#btnAddBanner").on("click", function () {
            showLoading();
            $("#bannerDefine").attr("data-target", "slider");
            $("#bannerDefine").modal("show");
        });

        function addSlideShow(url, alt, base64) {
            $(".slide-show .slide-show-picture").hide();
            $(".slide-btn-circle").removeClass("active");
            $(".slide-show")
                .append(
                    "<div data-url='" + url + "' data-alt='" + alt + "' class='col-12 slide-show-picture' style='height: 360px;background-repeat: no-repeat;background-size: 100% 100%;background-position:center;background-image:url(\"" +
                    base64 +
                    "\")'></div>");
            $(".slide-bullet").append("<div class='float-left slide-btn-circle active'></div>");
            slideShowStatus();
        }

        function addBanner(url, alt, base64) {
            $("#vitrineList").append("<div data-url='" + url + "' data-alt='" + alt + "' class='vitrine-item vitrine-image position-relative' data-code='-1'>" +
                "<img src='" + base64 + "' style='width:100%;margin-bottom:20px;' /> </div>");
        }


        $("#vitrineList").on({
            mouseenter: function () {
                $(this).append(
                    "<div class='col-12 no-padding content-operation'>" +
                    "<div class='col-12 no-padding text-center center-vertical' style='height:100%;'>" +
                    "<div style='width: 180px;margin: 0 auto;color:#fff;font-size:16px;'>" +
                    "<div onclick='deleteVitrine(this);' style='border-bottom:1px dashed #ccc;padding-bottom: 14px;margin-bottom: 14px;cursor:pointer;' > " +
                    "<img src='../../App_Images/admin/delete.svg' style = 'width:36px;' /> " +
                    "<label>حذف این ویترین</label>" +
                    "</div>" +
                    "<div onclick='changePriority();' style='cursor:pointer;'>" +
                    "<img src='../../App_Images/admin/showPriority.svg' style='width:36px;' />" +
                    "<label>تغییر اولویت نمایش</label>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>"
                );
            },
            mouseleave: function () {
                $(this).find(".content-operation").remove();
            }
        }, ".vitrine-item");


        function deleteVitrine(sender) {
            if (!confirm("آیا برای حذف مطمئن هستید؟"))
                return;
            $(sender).closest(".vitrine-item").remove();
        }


        function changePriority() {
            $("#reorderVitrine").modal("show");
        }

        function getVitrineList() {
            var vitrineList = [];
            $("#vitrineList .vitrine-item").each(function () {
                var vitrine = {};
                if ($(this).hasClass("vitrine-image"))
                    vitrine = { name: "بنر", code: $(this).attr("data-code"), image: $(this).find("img").attr("src") };
                else
                    vitrine = { name: $(this).attr("data-text"), code: $(this).attr("data-code"), image: "" };

                vitrineList.push(vitrine);
            });
            return vitrineList;
        }

        function setVitrineList(orders) {
            if (orders) {
                var items = [];
                orders.split("|").forEach(function (code) {
                    items.push($("#vitrineList .vitrine-item[data-code='" + code + "']")[0].outerHTML);
                });
                $("#vitrineList").empty();
                items.forEach(function (item) {
                    $("#vitrineList").append(item);
                });
            }
            return vitrineList;
        }

        function getActiveVitrine() {
            var templateArray = [];
            $("#vitrineList .vitrine-pattern").each(function () {
                templateArray.push($(this).attr("data-code"));
            });
            return templateArray.join("|");
        }

        function setActiveVitrine(codes, templates) {
            var codeArray = codes.split("|");
            var templateArray = templates.split("|");
            $("#vitrineList .vitrine-pattern").each(function () {
                var code = $(this).attr("data-code");
                if (!codeArray.includes(code)) {
                    $(this).remove();
                } else {
                    var index = codeArray.indexOf(code);
                    codeArray.splice(index, 1);
                    templateArray.splice(index, 1);
                }
            });
            codeArray.forEach(function (code, index) {
                $("#vitrineList").append("<div class='position-relative vitrine-item vitrine-pattern' data-code='" +
                    code +
                    "' style='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='col-12' style='padding: 4px 2px;  background-color: #eaedef;'>" +
                    templateArray[index] +
                    "</div>" +
                    "</div>");
            });
        }


        function slideShowStatus() {
            if ($(".slide-show .slide-show-picture").length < 2) {
                $(".slide-btn-arrow.next").css("fill", "#969696");
                $(".slide-btn-arrow.prev").css("fill", "#969696");
            } else if ($(".slide-btn-circle.active").index() === $(".slide-show .slide-show-picture").length - 1) {
                $(".slide-btn-arrow.next").css("fill", "#969696");
                $(".slide-btn-arrow.prev").css("fill", "#fff");
            } else if ($(".slide-btn-circle.active").index() === 0) {
                $(".slide-btn-arrow.next").css("fill", "#fff");
                $(".slide-btn-arrow.prev").css("fill", "#969696");
            } else {
                $(".slide-btn-arrow.next").css("fill", "#fff");
                $(".slide-btn-arrow.prev").css("fill", "#fff");
            }

            if ($(".slide-show .slide-show-picture").length > 0)
                $("#deleteBanner").show();
            else
                $("#deleteBanner").hide();
        }

        $(".slide-prev").on("click", function () {
            var activeIndex = $(".slide-btn-circle.active").index();
            if (activeIndex === 0)
                return;
            activeIndex--;
            $(".slide-btn-circle").removeClass("active");
            $(".slide-btn-circle:eq(" + activeIndex + ")").addClass("active");
            $(".slide-show .slide-show-picture").hide();
            $(".slide-show .slide-show-picture:eq(" + activeIndex + ")").show();
            slideShowStatus();

        });
        $(".slide-next").on("click", function () {
            var activeIndex = $(".slide-btn-circle.active").index();
            if (activeIndex === $(".slide-show .slide-show-picture").length - 1)
                return;
            activeIndex++;
            $(".slide-btn-circle").removeClass("active");
            $(".slide-btn-circle:eq(" + activeIndex + ")").addClass("active");
            $(".slide-show .slide-show-picture").hide();
            $(".slide-show .slide-show-picture:eq(" + activeIndex + ")").show();
            slideShowStatus();
        });
        $("#deleteBanner").on("click", function () {
            if (!confirm("آیا شما از حذف این بنر مطمئن هستید؟"))
                return;
            var activeIndex = $(".slide-btn-circle.active").index();

            $(".slide-btn-circle:eq(" + activeIndex + ")").remove();
            $(".slide-show .slide-show-picture:eq(" + activeIndex + ")").remove();

            if ($(".slide-show .slide-show-picture").length > 0) {
                if (activeIndex === $(".slide-show .slide-show-picture").length)
                    activeIndex = activeIndex - 1;

                $(".slide-btn-circle:eq(" + activeIndex + ")").addClass("active");
                $(".slide-show .slide-show-picture:eq(" + activeIndex + ")").show();
            }
            slideShowStatus();
        });

    </script>
}
