@using boilerplate.Models
@using Newtonsoft.Json
@model Setting
@{
    ViewBag.Title = "تنظیمات";
    Layout = "~/Views/_PanelSideBar.cshtml";
    var Socials = JsonConvert.DeserializeObject<List<SocialModel>>(Model.Setting_Social);
}
<style>
    .dataTables_scrollHeadInner, .select2-container {
        width: 100% !important;
    }
</style>
<div class="card card-custom">
    <div class="card-header card-header-tabs-line">
        <div class="card-toolbar">
            <ul class="nav nav-tabs nav-bold nav-tabs-line">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#Tab_Panel_1">
                        <span class="nav-text">عمومی</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#Tab_Panel_2">
                        <span class="nav-text">تصاویر</span>
                    </a>
                </li>
                @*<li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#Tab_Panel_3">
                <span class="nav-text">سئو</span>
            </a>
        </li>*@
                @*<li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#Tab_Panel_4">
                <span class="nav-text">فوتر سایت</span>
            </a>
        </li>*@
                @*<li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#Tab_Panel_5">
                <span class="nav-text">شبکه های اجتماعی</span>
            </a>
        </li>*@
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#Tab_Panel_6">
                        <span class="nav-text">اس ام اس</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#Tab_Panel_7">
                        <span class="nav-text">اطلاعات فاکتور</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="card-toolbar">
            <a class="btn btn-success font-weight-bold" onclick="Save()" id="btnSave">ذخیره</a>
        </div>
    </div>
    <div class="card-body">
        <form autocomplete="off">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="Tab_Panel_1" role="tabpanel" aria-labelledby="Tab_Panel_1">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label for="txtName">نام سایت:</label>
                            <input class="form-control" id="txtName" value="@Model.Setting_Name" />
                        </div>
                        <div class="col-md-6 form-group"></div>
                        <div class="col-md-6 form-group">
                            <label for="txtTitle">عنوان سایت:</label>
                            <input class="form-control" id="txtTitle" value="@Model.Setting_Title" />
                        </div>
                        <div class="col-md-6 form-group"></div>
                        <div class="col-md-6 form-group">
                            <label for="txtHeader">تگ های اضافی هدر (استایل، اسکریپت، ...):</label>
                            <textarea class="form-control" id="txtHeader" rows="7" dir="ltr">@HttpUtility.UrlDecode(Model.Setting_Header)</textarea>
                        </div>
                        <div class="col-md-6 form-group"></div>
                        <div class="col-md-6 form-group">
                            <label for="txtFooter">تگ های اضافی فوتر (اسکریپت، ...):</label>
                            <textarea class="form-control" id="txtFooter" rows="7" dir="ltr">@HttpUtility.UrlDecode(Model.Setting_Footer)</textarea>
                        </div>
                        
                    </div>
                </div>
                <div class="tab-pane fade" id="Tab_Panel_2" role="tabpanel" aria-labelledby="Tab_Panel_2">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label for="fuImage">لوگو:</label>
                            <input class="form-control" id="fuImage" type="file" accept=".png" />
                        </div>
                        <div class="col-md-6 form-group">
                            <a class="mt-2 float-left" href="~/Media/logo.png?v=1" target="_blank">
                                <img src="~/Media/logo.png?v=1" class="img-thumbnail" style="width: 200px; background-color: #222222;" />
                            </a>
                        </div>
                        <div class="col-md-6 form-group">
                            <label for="fuIcon">فاوآیکون:</label>
                            <input class="form-control" id="fuIcon" type="file" accept=".ico" />
                        </div>
                        <div class="col-md-6 form-group">
                            <a class="mt-2 float-left" href="~/Media/favicon.ico?v=1" target="_blank">
                                <img src="~/Media/favicon.ico?v=1" class="img-thumbnail" style="width: 50px;" />
                            </a>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="Tab_Panel_3" role="tabpanel" aria-labelledby="Tab_Panel_3">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label for="txtDescription">توضیحات سئو:</label>
                            <textarea class="form-control" id="txtDescription" rows="3" placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است">@Model.Setting_Description</textarea>
                        </div>
                        <div class="col-md-6 form-group"></div>
                        <div class="col-md-6 form-group">
                            <label for="ddlKeywords">کلمات کلیدی سئو:</label>
                            <select class="form-control w-100" id="ddlKeywords" multiple>
                                @if (!string.IsNullOrEmpty(Model.Setting_Keywords))
                                {
                                    foreach (var item in Model.Setting_Keywords.Split(','))
                                    {
                                        <option value="@item" selected>@item</option>
                                    }
                                }
                            </select>
                        </div>
                        <div class="col-md-6 form-group"></div>
                    </div>
                </div>
                @*<div class="tab-pane fade" id="Tab_Panel_4" role="tabpanel" aria-labelledby="Tab_Panel_4">
            <div class="row">
                <div class="col-md-6 form-group">
                    <label for="txtDescriptionFooter">توضیحات فوتر:</label>
                    <textarea class="form-control" id="txtDescriptionFooter" rows="3" placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است">@Model.DescriptionFooter</textarea>
                </div>
                <div class="col-md-6 form-group"></div>
            </div>
        </div>*@
                <div class="tab-pane fade" id="Tab_Panel_5" role="tabpanel" aria-labelledby="Tab_Panel_5">
                    <div class="row">
                        @foreach (var item in Socials)
                        {
                            <div class="col-md-12 form-group">
                                <div class="row form-group">
                                    <label class="col-md-2 col-form-label"><i class="@item.Icon vertical-middle"></i>&nbsp;&nbsp;@item.Value</label>
                                    <div class="col-6 col-md-3">
                                        <input class="form-control placeholder-right" id="txtSocialTitle_@item.Key" placeholder="عنوان را وارد نمایید" value="@item.Title" />
                                    </div>
                                    <div class="col-6 col-md-3">
                                        <input class="form-control placeholder-right" id="txtSocialLink_@item.Key" placeholder="لینک را وارد نمایید" value="@item.Link" />
                                    </div>
                                    <div class="col-2 col-md-1">
                                        <input type="hidden" class="Socials" value="@JsonConvert.SerializeObject(item)" />
                                        <span class="switch switch-sm switch-success">
                                            <label>
                                                <input type="checkbox" id="chkSocial_@item.Key" @(item.Checked ? "checked" : "")>
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
                <div class="tab-pane fade" id="Tab_Panel_6" role="tabpanel" aria-labelledby="Tab_Panel_6">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label for="txtSmsUsername">نام کاربری:</label>
                            <input class="form-control" id="txtSmsUsername" dir="ltr" value="@Model.Setting_Username" />
                        </div>
                        <div class="col-md-6 form-group">
                            <label for="txtSmsPassword">رمز عبور:</label>
                            <input class="form-control" id="txtSmsPassword" dir="ltr" value="@Model.Setting_Password" />
                        </div>
                        <div class="col-md-6 form-group">
                            <label for="txtSmsFromNumber">ارسال سریع از خط:</label>
                            <input class="form-control" id="txtSmsFromNumber" dir="ltr" value="@Model.Setting_FromNumber" />
                            <span class="text-muted" style="font-size: 13px;">برای اتصال به پنل پیامکی، می توانید از <a href="http://sms.avinpayamak.ir" target="_blank">این لینک</a> استفاده کنید</span>
                            <br />
                            <span class="text-muted d-block mt-2" style="font-size: 13px;">ترجیحا از شماره <span class="text-primary" dir="ltr">+983000505</span> برای ارسال استفاده کنید و حتما شماره باید در پنل شما فعال باشد</span>
                        </div>
                        <div class="col-md-6 form-group">
                            <label for="SmsPaternLogin">پترن ارسال کد ورود:</label>
                            <input class="form-control" id="txtSmsPaternLogin" dir="ltr" value="@Model.Setting_PaternLogin" />
                            <span class="text-muted d-block mt-2" style="font-size: 13px;">متن پترن جهت ثبت: کد احراز هویت شما در سایت : %verification-code%</span>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="Tab_Panel_7" role="tabpanel" aria-labelledby="Tab_Panel_6">
                    <div class="row">

                        <div class="col-md-6 form-group">
                            <label for="txtaddress">آدرس شرکت:</label>
                            <input class="form-control" id="txtaddress" value="@Model.Setting_Address" />
                        </div>
                        <div class="col-md-6 form-group"></div>
                        <div class="col-md-6 form-group">
                            <label for="txtpostcode">کد پستی:</label>
                            <input class="form-control" id="txtpostcode" value="@Model.Setting_PostCode" />
                        </div>
                        <div class="col-md-6 form-group"></div>
                        <div class="col-md-6 form-group">
                            <label for="txtphone">شماره تماس:</label>
                            <input class="form-control" id="txtphone" value="@Model.Setting_Phone" />
                        </div>
                        <div class="col-md-6 form-group"></div>
                        <div class="col-md-6 form-group">
                            <label for="txtwebsite">وبسایت:</label>
                            <input class="form-control" id="txtwebsite" value="@Model.Setting_Website" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="card-footer">
        <div class="col-12 form-group d-none" id="ProgressSection">
            <div class="progress">
                <div class="progress-bar progress-bar-striped" id="Progress" role="progressbar" style="width: 0%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">0%</div>
            </div>
        </div>
    </div>
</div>
@section Script {
    <script>
        $("#SettingMenu").addClass("menu-item-active");

        $(document).ready(function () {
            $("#ddlKeywords").select2({ placeholder: 'تایپ کنید و اینتر بزنید ...', tags: true });
            //KTLayoutAsideToggle.getToggle().toggleOn();
        });

        $(window).bind('keydown', function (event) {
            if (event.ctrlKey || event.metaKey) {
                switch (String.fromCharCode(event.which).toLowerCase()) {
                    case 's':
                        event.preventDefault();
                        $("#btnSave").click();
                        break;
                }
            }
        });

        function Save() {

    // Proceed with the rest of the function if validation passes
    let SocialList = [];
    $(".Socials").each(function () {
        let item = JSON.parse($(this).val());
        item.Title = $(`#txtSocialTitle_${item.Key}`).val().trim();
        item.Link = $(`#txtSocialLink_${item.Key}`).val().trim();
        item.Checked = $(`#chkSocial_${item.Key}`).prop("checked");
        SocialList.push(item);
    });

    let model = {
        Auth: { UserId: UserId, Token: Token },
        Id: @Model.Setting_Id,
        Name: $("#txtName").val().trim(),
        Title: $("#txtTitle").val().trim(),
        Description: $("#txtDescription").val().trim(),
        Keywords: $("#ddlKeywords").val().join(','),
        Header: escape($("#txtHeader").val().trim()),
        Footer: escape($("#txtFooter").val().trim()),
        Socials: SocialList,
        SmsUsername: $("#txtSmsUsername").val().trim(),
        SmsPassword: $("#txtSmsPassword").val().trim(),
        SmsFromNumber: $("#txtSmsFromNumber").val().trim(),
        SmsPaternLogin: $("#txtSmsPaternLogin").val().trim(),

        address: $("#txtaddress").val().trim(),
        postcode: $("#txtpostcode").val().trim(),
        phone: $("#txtphone").val().trim(),
        website: $("#txtwebsite").val().trim(),
    };

    $("#btnSave").css("opacity", 0.5);
    $("#btnSave").removeAttr("onclick");

    let formData = new FormData();
    formData.append("Model", JSON.stringify(model));
    formData.append("Logo", $("#fuImage")[0].files[0]);
    formData.append("Icon", $("#fuIcon")[0].files[0]);

    let ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", function (event) {
        let percent = parseInt((event.loaded / event.total) * 100);
        $("#Progress").css("width", `${percent}%`);
        $("#Progress").text(`${percent.toFixed()}%`);
    }, false);

    ajax.addEventListener("load", function (event) {
        $("#ProgressSection").addClass('d-none');
        $("#btnSave").css("opacity", 1);
        let data = JSON.parse(event.target.responseText);
        if (data.Status == "Success") {
            toastr.success("ذخیره سازی با موفقیت انجام شد");
            setTimeout(function () {
                location.reload();
            }, 1500);
        } else {
            $("#btnSave").attr("onclick", "Save()");
            toastr.warning("خطا هنگام ذخیره سازی اطلاعات");
        }
    }, false);

    ajax.addEventListener("error", function () {
        $("#ProgressSection").addClass('d-none');
        $("#btnSave").css("opacity", 1);
        $("#btnSave").attr("onclick", "Save()");
        toastr.error("خطا هنگام برقراری ارتباط با سرور");
    }, false);

    ajax.open("post", "@Url.Action("SaveSettings", "Panel")");
    ajax.send(formData);
    $("#ProgressSection").removeClass('d-none');
}
    </script>
}