@{
    ViewBag.Title = "افزودن بنر";
    Layout = "~/Views/Shared/_NonHeaderFooter.cshtml";
}
@model GheyasPlusShop.Models.Home.BannerModel
@using Utils
@section styles
{
    <style>
        body {
            background-color: #f0f8f9 !important;
        }

        #picBanner {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        #deletePicBanner, #getPicBanner {
            width: 70px;
            height: 22px;
            font-size: 11px;
        }
    </style>
}

<div class="col-12" style="padding:10px 30px;">
    <div class="col-12 no-padding has-float-label">
        <input type="text" class="text-control" value="@Model.Url" data-required="true" id="bannerUrl" autocomplete="off" />
        <span>URL</span>
    </div>
    <div class="col-12 no-padding has-float-label" style="margin:20px 0;">
        <input type="text" class="text-control" value="@Model.Alt" data-required="true" id="bannerAlt" autocomplete="off" />
        <span>Alt</span>
    </div>
    <div class="col-12 no-padding">
        <div style="margin-bottom:6px;">تصویر</div>
        <div class="col-12 no-padding" id="picBanner" style="@(Model.BannerImage!=null?"background-image:url("+Model.BannerImage.ToBase64File()+")":"");height:136px;width:100%;">
        </div>
        <div class="col-12 no-padding">
            <label class="label-cancel no-margin" id="getPicBanner">دریافت تصویر</label>
            <input type="file" style="display:none;" id="fuPicBanner" />
            <label class="label-cancel no-margin" id="deletePicBanner" style="margin-right: 15px!important;">حذف تصویر</label>
        </div>
    </div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 navbar-fixed-bottom header-bar">
    <input type="button" class="button-accept" onclick="saveBannerInfo()" value="تایید">
    <label class="label-cancel end" onclick="window.parent.$('#bannerDefine').modal('hide');">انصراف</label>
</div>

@section scripts{
    <script>
        closeLoading();
        function saveBannerInfo() {
            var error = checkValidation();
            if (error) {
                alert(error);
                return;
            }

            if ($("#picBanner").css("background-image") === "none") {
                alert("تصویر انتخاب نشده است");
                return;
            }
            var picture = "";
            if ($("#picBanner").length === 1)
                picture = $("#picBanner").css("background-image").replace("url(\"", "").replace("\")", "");
            picture = (picture === "none" ? "" : picture);

            var target = window.parent.$("#bannerDefine").attr("data-target");
            if (target === "slider")
                window.parent.addSlideShow($("#bannerUrl").val(), $("#bannerAlt").val(), picture);
            else
                window.parent.addBanner($("#bannerUrl").val(), $("#bannerAlt").val(), picture);

            $(".label-cancel.end").click();
        }

        $("#getPicBanner").on("click", function () {
            $("#fuPicBanner").click();
        });

        $("#fuPicBanner").on("change", function () {
            if (this.files.length > 0) {
                var file = event.target.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    var base64 = reader.result;
                    if (window.parent.$("#bannerDefine").attr("data-target") === "banner") {
                        var description = "عرض مناسب برای تصویر این بنر،  1360px  میباشد.";
                        var ratio ="none";
                    }
                    else {
                        var description = "سایز مناسب برای تصویر این بنر، 440 * 1360 میباشد.";
                        var ratio = 34 / 11;
                    }

                    savePicture($("#picBanner"), base64, description, ratio);
                };
            }
        });


        $("#deletePicBanner").on("click", function () {
            $("#picBanner").css('background-image', 'unset');
        });
    </script>
}