@model FaqEditModel
@{
    var nonce = HttpContext.Current.Items["CspNonce"] as string;
}

<!--page bar start-->
<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="@Url.Action("Index","Home")">Home</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="@Url.Action("Index","Model")">模組元件</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="@Url.Action("Index","Model")">選單程式模組管理</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="@Url.Action("Index","Faq")">常見問答</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="@Url.Action("ModelItem","Faq",new { mainid=Model.ModelID})">清單</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">編輯</a>
        </li>
    </ul>

</div>
<!--page bar end-->
<!--message start-->
<div class="title_01">@Model.ModelName</div>

<div class="portlet light bordered">

    <form class="form-horizontal form-bordered" method="Post" id="editform" action='@Url.Action("SaveItem")' enctype="multipart/form-data">
        <!--<div class="search_padding">
            <button type="button" class="btn blue" id="btn_seoshow">進階設定</button>
        </div>-->
        @Html.HiddenFor(Model => Model.ItemID)
        @Html.HiddenFor(Model => Model.ModelID)
        @Html.HiddenFor(Model => Model.UploadFileName)
        @Html.HiddenFor(Model => Model.UploadFilePath)
        @Html.HiddenFor(Model => Model.ImageFileName)
        @Html.HiddenFor(Model => Model.ImageFileOrgName)
        @Html.HiddenFor(Model => Model.RelateImageName)
        @Html.HiddenFor(Model => Model.RelateImageFileOrgName)
        <div class="portlet light form-fit bordered">
            <div class="portlet-body form">
                <div class="form-horizontal form-bordered">
                    <div class="form-body" id="form-body2">
                        <div class="form-group">
                            <div class="col-md-2 col-sm-12 col-xs-12 search_item">@Html.Require() 類別</div>
                            <div class="col-md-10 col-sm-12 col-xs-12 bg-white mobile_white">
                                @Html.DropDownList(@Html.IdFor(m => m.Group_ID).ToString(), (IEnumerable<SelectListItem>)ViewBag.grouplist, new { @class = "form-control w-auto" })
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2 col-sm-12 col-xs-12 search_item">@Html.Require() 發布日期</div>
                            <div class="col-md-10 col-sm-12 col-xs-12 bg-white mobile_white">
                                <div class="date-picker input-daterange" data-date-format="yyyy/mm/dd">
                                    @Html.EditorFor(model => model.PublicshStr, new { htmlAttributes = new { @class = "form-control checkitem input-small", placeholder = "發布日期" } })
                                    <span class="required" id="PublicshStr-error" style="display:none;">發布日期 必須填寫！</span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2 col-sm-12 col-xs-12 bg-grey_1 search_item">顯示日期</div>
                            <div class="col-md-10 col-sm-12 col-xs-12 bg-white mobile_white">
                                <div class="input-group input-large" style="float:left">
                                    <div class="date-picker input-daterange" data-date-format="yyyy/mm/dd">
                                        @Html.EditorFor(model => model.StDateStr, new { htmlAttributes = new { @class = "form-control", placeholder = "開始日期" } })
                                    </div>
                                    <span class="input-group-addon"> to </span>
                                    <div class="date-picker input-daterange" data-date-format="yyyy/mm/dd">
                                        @Html.EditorFor(model => model.EdDateStr, new { htmlAttributes = new { @class = "form-control", placeholder = "結束日期" } })
                                    </div>
                                </div>
                                <div class="" style="float:left; padding-left:5px;">
                                    <button type="button" class="btn blue" id="btn_clear">清空</button>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2 col-sm-12 col-xs-12 search_item">@Html.Require() 標題</div>
                            <div class="col-md-10 col-sm-12 col-xs-12 bg-white mobile_white">
                                <input id="Title" type="text" class="form-control checkitem" value="@Model.Title" />
                                <span class="required" id="Title-error" style="display:none;">標題 必須填寫！</span>
                            </div>
                        </div>
                        @if ((Model.Status.HasValue ? Model.Status.Value : true))
                        {
                            <div class="form-group">
                                <div class="col-md-2 col-sm-12 col-xs-12 search_item">開放類別</div>
                                <div class="col-md-10 col-sm-12 col-xs-12 bg-white mobile_white">

                                    <select class="form-control w-auto" id="Category" name="Category">
                                        <option value="01" @(Model.Category == "01" ? "selected" : "")>官網</option>
                                        <option value="02" @(Model.Category == "02" ? "selected" : "")>農漁會交流網</option>
                                        <option value="03" @(Model.Category == "03" ? "selected" : "")>不拘(皆可)</option>
                                    </select>

                                </div>
                            </div>
                        }
                        else
                        {
                            <input type="hidden" id="Category" name="Category" value="01" />
                        }

                        <div class="form-group">
                            <div class="col-md-2 col-sm-12 col-xs-12 search_item">內容</div>
                            <div class="col-md-10 col-sm-12 col-xs-12 bg-white mobile_white">
                                @if (Model.HtmlContent.IsNullOrEmpty())
                                {
                                    <textarea cols="80" id="HtmlContent" rows="20"></textarea>
                                }
                                else
                                {
                                    <textarea cols="80" id="HtmlContent" rows="20">@HttpUtility.HtmlDecode(Model.HtmlContent)</textarea>
                                }

                            </div>
                        </div>

                        <div class="form-group bg-grey_1">
                            <div class="col-md-2 col-sm-12 search_item">圖片</div>
                            <div class="col-md-10 col-sm-12 bg-white mobile_white">
                                <div class="col-md-12">
                                    <div id="div_oldfile" style="display:none"><a href="@(Model.ImageUrl==null?"":Url.Content(Model.ImageUrl))" target="preview">@Html.Raw(Model.ImageFileOrgName.safeHtmlFragment())</a><label style="color:blue;margin-left:10px;cursor:pointer" id="delimage">刪除</label></div>
                                    <div for="ImageFile" class="col-md-2 py-2">圖片上傳</div>
                                    <div class="col-md-10">
                                        <input id="file_image" type="file" class="display_inline" name="ImageFile" accept="image/*" />
                                        <div class="required">檔案類型jpg、png、gif，建議檔案大小2MB內，尺寸寬度1000px內</div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-2 py-2">圖片說明</div>
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.ImageFileDesc, new { htmlAttributes = new { @class = "form-control mobile_input display_inline", @maxlength = "75" } })
                                        <span class="required" id="ImageFileDesc-error" style="display:none;">圖片說明 必須填寫！</span>
                                        <div class="required">限制輸入75字內</div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-2 py-2">圖片位置</div>
                                    <div class="col-md-10">
                                        <select name="@Html.IdFor(model=>model.ImageFileLocation)" id="@Html.IdFor(model=>model.ImageFileLocation)" class="form-control w-auto"><option value="1">左</option><option value="2">中</option><option value="3">右</option></select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2 col-sm-12 col-xs-12 search_item">相關連結</div>
                            <div class="col-md-10  col-sm-12 col-xs-12 bg-white mobile_white">
                                <div class="col-md-12">
                                    <div class="col-md-2 py-1">相關連結</div>
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.LinkUrl, new { htmlAttributes = new { @class = "form-control", @maxlength = "1000" } })
                                        <div class="required">限制輸入1000字內</div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-2 py-1">連結說明</div>
                                    <div class="col-md-10 margin_bottom">
                                        @Html.EditorFor(model => model.LinkUrlDesc, new { htmlAttributes = new { @class = "form-control", @maxlength = "200" } })
                                        <span class="required" id="LinkUrlDesc-error" style="display:none;">連結說明 必須填寫！</span>
                                        <div class="required">限制輸入200字內</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group bg-grey_1">
                            <div class="col-md-2 col-sm-12 search_item">檔案上傳</div>
                            <div class="col-md-10 col-sm-12 bg-white mobile_white">
                                <div class="col-md-12">
                                    <div id="div_olduploadfile" style="display:none"><a href="@Url.Action("FileDownLoad")?modelid=@Model.ModelID&&itemid=@Model.ItemID" target="preview">@Model.UploadFileName</a><label style="color:blue;margin-left:10px;cursor:pointer" id="delupfile">刪除</label></div>

                                    <div id="div_nofile" style="display:inline">
                                        <div for="UploadFile" class="col-md-2 py-2">檔案上傳</div>
                                        <div class="col-md-10">
                                            <input type="file" id="uploadfile" class="display_inline" name="UploadFile">
                                            <span class="required">建議檔案大小5MB內</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-2 py-2">檔案說明<br>(必須加上副檔名)</div>
                                    <div class="col-md-10 margin_bottom">
                                        @Html.EditorFor(model => model.UploadFileDesc, new { htmlAttributes = new { @class = "form-control mobile_input display_inline", @maxlength = "75" } })
                                        <span class="required" id="UploadFileDesc-error" style="display:none;">檔案說明 必須填寫！</span>
                                        <div class="required">限制輸入75字內，必須加上副檔名</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if (Model.ItemID > 0)
                        {
                            <div class="form-group">
                                <div class="col-md-2 col-sm-12 col-xs-12 search_item">審核狀態</div>
                                <div class="col-md-4 col-sm-12 col-xs-12 mobile_white table_font">
                                    @Model.VerifyStatus
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-2 col-sm-12 col-xs-12 search_item">新增</div>
                                <div class="col-md-10 col-sm-12 mobile_white">
                                    <div class="page_group w-50px">
                                        <div class="item">
                                            <div class="title">人員</div>
                                            <div class="input_font"><span>@Model.CreateDept</span><span>@Model.CreateUser</span></div>
                                        </div>
                                        <div class="item">
                                            <div class="title">時間</div>
                                            <div class="input_font">@Model.CreateDatetime</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-2 col-sm-12 col-xs-12 search_item">最後修改</div>
                                <div class="col-md-10 col-sm-12 mobile_white">
                                    <div class="page_group w-50px">
                                        <div class="item">
                                            <div class="title">人員</div>
                                            <div class="input_font"><span>@Model.UpdateDept</span><span>@Model.UpdateUser</span></div>
                                        </div>
                                        <div class="item">
                                            <div class="title">時間</div>
                                            <div class="input_font">@Model.UpdateDatetime</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-2 col-sm-12 col-xs-12 search_item">最後審核</div>
                                <div class="col-md-10 col-sm-12  mobile_white">
                                    <div class="page_group w-50px">
                                        <div class="item">
                                            <div class="title">人員</div>
                                            <div class="input_font"><span>@Model.VerifyDept</span><span>@Model.VerifyUser</span></div>
                                        </div>
                                        <div class="item">
                                            <div class="title">時間</div>
                                            <div class="input_font">@Model.VerifyDateTime</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center search_padding" id="div_buttons">
            @if (Model.VerifyStatus == "已通過" || Model.ItemID <= 0 || Model.VerifyStatus == "未通過")
            {
                <button type="submit" class="btn blue" id="btn_submit">確認送出</button>
            }
            <button type="button" class="btn grey-mint" id="btn_return">返回列表</button>
            <button type="button" class="btn blue-hoki " id="preview" onclick="callpreview()">預覽</button>
        </div>
    </form>

</div>
@section scripts {
    @*<script src="@Url.Content("~/Scripts/components-date-time-pickers.min.js")"></script>
        <script src="@Url.Content("~/Scripts/bootstrap-datepicker.js")"></script>*@
    <script src="@Url.Content("~/Scripts/custom.js")"></script>
    <script nonce="@nonce" src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")"></script>
    <script src="@Url.Content("~/Scripts/bootbox.min.js")"></script>
    <script src="~/Scripts/_html.js"></script>
    <script src="~/Scripts/Common.js"></script>
    <script>
        $(function () {
            var fileupload = '@Model.UploadFileName';
            var selactiveitem = '@Model.ActiveItemID';

            $('#btn_clear').click(function () {
                $('#StDateStr').val('');
                $('#EdDateStr').val('');
            });
            $('#ImageFileLocation').val('@Model.ImageFileLocation');
            var title = "@HttpUtility.HtmlEncode(Model.Title.Replace("\"","'"))";
            $('#Title').val(title);
            if (fileupload!==""){
                $("#div_olduploadfile").show();
            }
            $("#btn_seoshow").click(function () {
                $("#div_seo").toggle(500);
            });
            $("#btn_return").click(function () { CreatePost('@Url.Action("ModelItem")', { mainid: '@Model.ModelID'});});
           if ('@Model.ItemID'>0 && '@Model.ImageFileName'!='') {
                $('#div_oldfile').show();
            }
              if ('@Model.ItemID'>0 && '@Model.RelateImageName'!='') {
                  $('#div_oldrelatefile').show();
            }
            $('#delimage').click(function () {
                $('#div_oldfile').hide();
                $('#ImageFileName').val('');
            });
            $('#delupfile').click(function () {
                $('#div_olduploadfile').hide();
                $('#UploadFileName').val('');
            });

            $('#delrelateimage').click(function () {
                $('#div_oldrelatefile').hide();
                $('#RelateImageName').val('');
            });

            CKEDITOR.config.versionCheck = false;
            if (CKEDITOR.instances['HtmlContent']) {
                CKEDITOR.instances['HtmlContent'].destroy(true);
            }

            var ckedit = CKEDITOR.replace('HtmlContent', {
                height: 300,
                filebrowserImageUploadUrl: '@Url.Action("Upload")?command=QuickUpload&type=Images',
                filebrowserUploadUrl: '@Url.Action("UploadFile")?command=QuickUpload&type=Files',
                clipboard_handleImages: false,
                enterMode: CKEDITOR.ENTER_BR,
                shiftEnterMode: CKEDITOR.ENTER_P
            });

            ckedit.on('instanceReady', function () {
                this.dataProcessor.writer.setRules('p', {
                    indent: false,
                    breakBeforeOpen: false,
                    breakAfterOpen: false,
                    breakBeforeClose: false,
                    breakAfterClose: false
                });
            });


            $('#editform').submit(function (event) {
                debugger;
               $(".required").hide();
                 var inputval = $("#form-body2 :input").filter(function () { return $(this).val() == "" && $(this).hasClass('checkitem'); });
                for (var idx = 0; idx < inputval.length; idx++) {
                    $("#" + inputval[idx].name + "-error").show();
                }
                if (inputval.length > 0) { return false; }
                var file = $("#file_image");
                var _validFileExtensions = [".jpg", ".png", ".gif", ".jpeg"];
                var sFileName = file.val();
                if (sFileName.length > 0) {
                    var blnValid = false;
                    for (var j = 0; j < _validFileExtensions.length; j++) {
                        var sCurExtension = _validFileExtensions[j];
                        if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                            blnValid = true;
                            break;
                        }
                    }
                    if (!blnValid) {
                        alert("只能上傳Image檔案");
                        file.outerHTML = file.outerHTML;
                        return false;
                    }
                }


               var formData = new FormData();
               var array = $('#editform').serializeArray();
               $.each(array, function () {
                   formData.append(this.name, this.value);
               });
                formData.append("HtmlContent", _html.encode(CKEDITOR.instances.HtmlContent.getData()));
                formData.append("Title", _html.encode($('#Title').val()));
                var iscon = true;
                if ($('#LinkUrl').val() != "" && $('#LinkUrlDesc').val() == "") {
                    $('#LinkUrlDesc-error').show();
                    iscon = false;
                }
                var images = $('#file_image').get(0).files;
                if (images.length > 0) {
                    formData.append("ImageFile", images[0]);
                    if ($('#ImageFileDesc').val() == "") {
                        $('#ImageFileDesc-error').show();
                        iscon = false;
                    }
                } else {
                    formData.append("ImageFile", null);
                    if ($('#ImageFileName').val() != "") {
                        if ($('#ImageFileDesc').val() == "") {
                            $('#ImageFileDesc-error').show();
                            iscon = false;
                        }
                    }
                }


                var uploadfile = $('#uploadfile').get(0).files;
                if (uploadfile.length > 0) {
                    formData.append("UploadFile", uploadfile[0]);
                    if ($('#UploadFileDesc').val() == "") {
                        $('#UploadFileDesc-error').show();
                        iscon = false;
                    }
                } else {
                    formData.append("UploadFile", null);
                    if ($('#UploadFileName').val() != "") {
                        if ($('#UploadFileDesc').val() == "") {
                            $('#UploadFileDesc-error').show();
                            iscon = false;
                        }
                    }
                }

              if (DateBetweenVaild('StDateStr','EdDateStr') == false) {
                    alert('顯示日期_開始日期必須小於結束日期！');
                    return false;
              }

                if (iscon == false) { return false; }

                $.ajax({
                    url: this.action,
                    data: formData,
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        alert(data);
                        CreatePost('@Url.Action("ModelItem")', { mainid: '@Model.ModelID'});
                    }, error: function () {
                        // handle error
                    }
                });
                return false;
            });
            if ('@ViewBag.isview' == 'Y') {
                $('#sel_unit,#editform :input').attr('disabled', 'disabled');
                CKEDITOR.config.readOnly = true;
                $('#delimage,#delupfile,#delrelateimage').hide();
                 var btns = '<button type="button" class="btn grey-mint"  onclick="window.location.href=\'@Url.Action("Verify", "Config")\'">返回列表</button> &nbsp;'
                btns += '<button type="button" class="btn grey-mint" id="preview" onclick="callpreview()">預覽</button> &nbsp;';
                @{
                    Model.CreateUser = Model.UpdateUser.IsNullOrEmpty() ? Model.CreateUser : Model.UpdateUser;
                }
                if ('@CommonRazorFunctions.ThisIdentity().UserName' != '@Model.CreateUser' && '@Model.VerifyStatus' =='審核中'  && '@CommonRazorFunctions.ReviewEnable()' == '1') {
                    btns += '<button type="button" class="btn blue" onclick="VerifyOK(\'4_@(Model.ModelID)_@(Model.ItemID)\')" >通過</button> &nbsp;';
                    btns += '<button type="button" class="btn grey-mint" onclick="SetVerifyRefuse(\'4_@(Model.ModelID)_@(Model.ItemID)\')" onclick="callpreview()">未通過</button>';
                }
                $('#div_buttons').empty().append(btns);
            }
        });

        function callpreview() {
            var htmlcontent = CKEDITOR.instances.HtmlContent.getData();
            if (htmlcontent == "") { htmlcontent = "</br>" }
            bootbox.alert({
                title: "預覽",
                message: htmlcontent,
                size: 'large'
            });
        }
    </script>

}

