@using GheyasPlusShop.Utils;
@using Utils;
@section styles
{
    <link href="~/App_Css/app/cropper.min.css" rel="stylesheet" />
    <style>

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

        .dropdown-toggle::after {
            display: none !important;
        }

        .menu-item {
            height: 62px;
            margin-top: 10px;
            padding: 0 4px !important;
            cursor: pointer;
            line-height: 22px;
        }

        .menu-item-select {
            background-color: #37474f;
        }

        #dvTools {
            width: 50px;
            height: 500px;
            float: right;
            text-align: center;
            background-color: #0f70a9;
            z-index: 11000;
        }

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

        #dvImage {
            width: calc(100% - 50px);
            height: 460px;
            float: right;
            text-align: center;
            background: #808080;
        }
    </style>
}

<div class="container-fluid">
    <div class="row">
        <div class="col-1 no-padding-right-left py-4" style="background-color:#455a64;height:100vh;overflow:auto;color:#fff;">
            <div class="d-flex align-items-center justify-content-center menu-item menu-item-select" data-target="Layouting">
                <span>صفحه اول</span>
            </div>
            <div class="d-flex align-items-center justify-content-center menu-item" data-target="Vitrine">
                <span>ویترین</span>
            </div>
            <div class="d-flex align-items-center justify-content-center  menu-item" data-target="Setting">
                <span>تنظیمات</span>
            </div>
            <div class="d-flex align-items-center justify-content-center  menu-item" data-target="ProductCategoryList">
                <span>دسته بندی محصولات</span>
            </div>
            <div class="d-flex align-items-center justify-content-center  menu-item" data-target="ContactUsList">
                <span>لیست تماسها</span>
            </div>
            <div class="d-flex align-items-center justify-content-center menu-item" data-target="PrivacyContext">
                <span>متن حریم خصوصی</span>
            </div>
            <div class="d-flex align-items-center justify-content-center menu-item" data-target="AboutUsContext">
                <span>متن درباره ما</span>
            </div>
            <div class="d-flex align-items-center justify-content-center menu-item" data-target="FaqList">
                <span>سوالات متداول</span>
            </div>
        </div>

        <div class="col-11 no-padding-right-left">

            <div class="d-flex justify-content-between align-items-center" style="height:56px;border-bottom:1px solid #ccc;">
                <div>
                    @if (StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.IsNotEmpty())
                    {
                        <a href="@Html.GetHref("")"><img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" style="height: 48px;max-width: 128px;cursor: pointer;"></a>
                    }
                </div>
                <div>
                    <img src="~/App_Images/logOut.svg" style="cursor:pointer;width:32px;" title="خروج از پنل مدیریتی" onclick="exitLoginAdmin()" />
                </div>
            </div>


            <div style="height:calc(100vh - 56px);background-color:#f6f6f6;">
                <iframe src="" id="iframeAdmin" style="border: 0;width: 100%;height:calc(100vh - 65px);"></iframe>
            </div>

        </div>
    </div>
</div>

@*فرم برش تصویر*@
<div class="modal fade" id="cropPicture" role="dialog">
    <div class="modal-dialog" style="max-width:900px;">
        <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="background-color: #f0f8f9;">
                <div class="container-fluid">
                    <input type="hidden" id="hfPrevAngle" value="0" />
                    <input type="hidden" id="hfCroppedImage" />
                    <div class="row">
                        <div id="dvTools" class="d-flex align-items-end flex-column" stye="justify-content: flex-start;">
                            <div style="padding: 10px 0; margin: 5px auto; margin-top: 10px; cursor: pointer;">
                                <a onclick="rotateRight()">
                                    <img src="~/App_Images/cropper/rotate-right-scan.png" title="چرخش به راست" />
                                </a>
                            </div>
                            <div style=" padding: 10px 0; margin: 5px auto; cursor: pointer;">
                                <a onclick="rotateLeft()">
                                    <img src="~/App_Images/cropper/rotate-left-scan.png" title="چرخش به چپ" />
                                </a>
                            </div>
                            <div style=" padding: 10px 0; margin: 5px auto; cursor: pointer; border-bottom: 2px solid #fff;">
                                <a onclick="reset()">
                                    <img src="~/App_Images/cropper/undo-scan.png" title="Reset" />
                                </a>
                            </div>
                            <div style=" padding: 10px 0; margin: 5px auto; cursor: pointer;">
                                <a data-method="getCroppedCanvas">
                                    <img src="~/App_Images/cropper/save-scan.png" title="ذخیره" />
                                </a>
                            </div>
                        </div>
                        <div id="dvImage">
                            <div style="width: 50px; height: 400px; position: absolute; right: 60px; top: 50px; z-index: 110000;">
                                <input id="trackBarRotate" type="range" min="-45" max="45" step="1" onchange="rotateImage()" style="transform: rotate(90deg);position: absolute;right: -102px;top: 182px;width: 255px;" />
                            </div>
                            <div id="panelCrop" style="width: 100%; height:460px; padding: 20px; max-height: 460px;">
                                <img id="cropImage" />
                            </div>
                        </div>
                        <div id="divDescription" style="width:100%;position:absolute;bottom:0;left:0;background-color:#ccc;text-align:center;font-size: 14px;font-weight: 700;padding: 10px 0;color:#da2382;">
                            @*سایز مناسب برای تصویر این بنر، 440 * 1263 میباشد.*@
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/App_Scripts/app/cropper.min.js"></script>
    <script type="text/javascript">
        var baseSrc = "@Href("~/")";
        showLoading();
        $(document).ready(function () {
            $("#iframeAdmin").attr("src", baseUrl + "Admin/Layouting");
        });
        $(".menu-item").on("click", function () {
            showLoading();
            $(".menu-item").removeClass("menu-item-select");
            $(this).addClass("menu-item-select");
            var url = $(this).attr("data-target") ? baseUrl + "Admin/" + $(this).attr("data-target") : "";
            $("#iframeAdmin").attr("src", url);
        });
        function exitLoginAdmin() {
            ajax({
                loading: true,
                url: "Admin/ExitLoginAdmin",
                success: function (result) {
                    window.location.href = baseUrl + "Admin/Login";
                }
            });
        }
        var cropper = null;
        var $container;
        function initCropPicture($object, ratio) {
            $container = $object;
            var options = {
                preview: ".img-preview",
                minContainerWidth: 740,
                minContainerHeight: 420,
                aspectRatio: ratio ,
                dragMode: "none"
            };
            cropper = new Cropper($("#cropImage")[0], options);
            var uploadedImageType = "image/jpeg";
            $("[data-method='getCroppedCanvas']").on("click", function (event) {
                if (!cropper) {
                    return;
                }
                var data = {
                    method: $(this).attr("data-method"),
                    option: {}
                };
                try {
                    data.option = JSON.parse(data.option);
                } catch (e) {
                }
                if (uploadedImageType === "image/jpeg") {
                    if (!data.option) {
                        data.option = {};
                    }
                    data.option.fillColor = "#fff";
                }
                var result = cropper[data.method](data.option);
                if (result) {
                    $("#hfCroppedImage").val(result.toDataURL(uploadedImageType));
                    $container.css("background-image", "url(" + $("#hfCroppedImage").val() + ")");
                    $("#cropPicture").modal("hide");
                }
            });
        }
        function rotateRight() {
            if (cropper)
                cropper.rotate(90);
            return false;
        }
        function rotateLeft() {
            if (cropper)
                cropper.rotate(-90);
            return false;
        }
        function reset() {
            if (cropper)
                cropper.reset();
        }
        function rotateImage() {
            if (cropper) {
                var rotate = $("#trackBarRotate").val();
                cropper.rotate(-(parseInt($('#hfPrevAngle').val())));
                cropper.rotate(rotate);
                $('#hfPrevAngle').val(rotate);
            }
        }
    </script>
}
