@{
    ViewBag.Title = "تعریف دسته بندی محصولات";
    Layout = "~/Views/Shared/_NonHeaderFooter.cshtml";
}
@model GheyasPlusShop.Models.Admin.PictureModel
@using Utils
@section styles
{
    <style>
        body {
            background-color: #f0f8f9 !important;
        }

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

        #deletePicCategory, #getPicCategory {
            width: 70px;
            height: 22px;
            font-size: 11px;
        }

        .section-error {
            height: 20px;
            color: red;
            margin-bottom: 15px;
            overflow: hidden;
            font-size: 12px;
        }
    </style>
}

<div style="padding:15px">
    <div class="has-float-label">
        <span class="label-value-readonly">@(Request.QueryString["parentName"])</span>
        <span>نام پدر</span>
    </div>
    <div class="has-float-label" style="margin:20px 0;">
        <input type="text" class="text-control" value="@(Request.QueryString["name"])" data-required="true" id="categoryName" autocomplete="off" />
        <span>عنوان</span>
    </div>

    @if (Request.QueryString["depth"] == "3")
    {
        <div>
            <div style="margin-bottom:6px;">تصویر</div>
            <div class="d-flex align-items-center justify-content-center flex-column">
                <div id="picCategory" style="@(Model.Picture!=null?"background-image:url("+Model.Picture.ToBase64File()+")":""); width: 100% !important;">
                </div>
                <div>
                    <label class="label-cancel no-margin" id="getPicCategory">دریافت تصویر</label>
                    <input type="file" style="display:none;" id="fuPicCategory" />
                    <label class="label-cancel no-margin" id="deletePicCategory" style="margin-right: 15px!important;">حذف تصویر</label>
                </div>
            </div>
        </div>
    }

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

@section scripts{
    <script>
        closeLoading();
        function SaveProductCategory() {
            var error = checkValidation();
            if (error)
                return;
            var picture = "";
            if ($("#picCategory").length === 1)
                picture = $("#picCategory").css("background-image").replace("url(\"", "").replace("\")", "");
            picture = (picture === "none" ? "" : picture);
            if (Number(getQuery("code")) > 0) {
                ajax({
                    loading: true,
                    url: "Admin/EditCategory",
                    data: JSON.stringify({ name: $("#categoryName").val(), code: getQuery("code"), picture: picture }),
                    success: function (result) {
                        window.parent.location.reload();
                        $(".label-cancel.end").click();
                    },
                    error: function (err) {
                        var errorMsg;
                        if (err.responseJSON)
                            errorMsg = err.responseJSON.Message;
                        else
                            errorMsg = err.responseText;

                        $('#spCategoryError').text(errorMsg);
                    }
                });
            }
            else {
                ajax({
                    loading: true,
                    url: "Admin/SaveCategory",
                    data: JSON.stringify({ name: $("#categoryName").val(), parentCode: getQuery("parentCode"), picture: picture }),
                    success: function (result) {
                        window.parent.location.reload();
                        $(".label-cancel.end").click();
                    },
                    error: function (err) {
                        var errorMsg;
                        if (err.responseJSON)
                            errorMsg = err.responseJSON.Message;
                        else
                            errorMsg = err.responseText;

                        $('#spCategoryError').text(errorMsg);
                    }
                });
            }

        }

        $("#getPicCategory").on("click", function () {
            $("#fuPicCategory").click();
        });

        $("#fuPicCategory").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;
                    $("#picCategory").css('background-image', 'url(' + base64 + ')');
                };
            }
        });


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