@using Sentric.Admin.Models
@using Sentric.Admin.Extensions
@model EmailTemplateUpdateModel

@{
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_SentricLayout.cshtml";

    var emailTypeToDisplay = Model.TemplateType.GetEnumDescription();
    ViewBag.Title = "Update '" + emailTypeToDisplay + "'";
}

@section scripts {
    @Scripts.Render("~/bundles/jqueryajaxval")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/summernote")

    **<script language="javascript" type="text/javascript">
        $(function () {
            $('.summernote').summernote({
                placeholder: 'Content...',
                height: 255, //set editable area's height
                focus: false, //set focus editable area after Initialize summernote
                oninit: function () { },
                onChange: function (contents, $editable) { }
            });**

            $(document).on("click", "#CancelForm", function (e) {
                var uri = '@Html.Raw(Url.Action("EmailTemplateList", "EmailManagement", new
                      {
                          page = Model.PagingInfo.Page,
                          take = Model.PagingInfo.Take,
                          sortBy = Model.PagingInfo.SortPropertyName,
                          sortAsc = Model.PagingInfo.SortAscending
                      }))';

                window.location = uri;
                e.preventDefault();
            });

            $(document).on("click", "#UpdateForm", function (e) {
                // check if in code view mode, as update when in code view mode will
                // by default loose the markup changes
                var isCodeViewMode = $("button[data-event='codeview']").hasClass('active');
                if (isCodeViewMode) {
                    // copy markup change to the content field
                    var htmlContent = $('.summernote').code();
                    $("#Content").val(htmlContent);
                }
                else {
                    var content = $(".note-editor .note-editable").html();
                    $("#Content").val(content);
                }
            });

            $(document).on("click", ".titleInfoButton", function (e) {
                e.preventDefault();

                $.magnificPopup.open({
                    removalDelay: 500, //delay removal by X to allow out-animation,
                    items: {
                        src: $('#legendPopup')
                    },
                    callbacks: {
                        beforeOpen: function (e) {
                            this.st.mainClass = 'mfp-slideUp';
                        }
                    },
                    midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
                });
            });

            $(document).on("click", ".ClosePopup", function () {
                var magnificPopup = $.magnificPopup.instance;
                magnificPopup.close();
            });

            // Copy buttons and copy functionality
            var copySupported = document.queryCommandSupported("copy");
            if (!copySupported) {
                $('.copyButton').addClass('hide');
            }

            $('.copyButton').click(function (e) {
                e.preventDefault();

                if (copySupported) {
                    var text = $(this).parents('tr').find('.placeholderText').text();
                    $('.placeholderCopyTarget').val(text);
                    $(".placeholderCopyTarget").toggleClass('hidden');
                    $('.placeholderCopyTarget').select();
                    document.execCommand("copy");
                    $(".placeholderCopyTarget").toggleClass('hidden');

                    $(this).text('Copied!');
                    $(this).parents('tr').effect('highlight');
                }
                else {
                    // Copy not supported in this browser
                }
            });

            $('.copyButton').mouseout(function (e) {
                $(this).text('Copy');
            });

            // template types and placeholders
            // on load
            var hiddenTemplateType = $('form#updateEmailTemplate').find('input[name=TemplateType]');
            var tempType = parseInt(hiddenTemplateType.val());
            showHideEmailTemplatePlaceholders(tempType);
        });
    </script>
}

@section additionalStyles {
    @Styles.Render("~/Content/summernote")
}

<article class="row">
    <h1 class="pageTitle artistHeader fw200 mb20 mt10">@ViewBag.Title</h1>

    <div class="col-md-1"></div>
    <div id="emailTemplateResults" class="col-md-10">
        @using (Html.BeginForm("UpdateEmailTemplate",
                                "EmailManagement", FormMethod.Post,
                                new { id = "updateEmailTemplate", role = "form", @class = "theme-primary form-horizontal" }))
        {
            @Html.AntiForgeryToken()

            @* None Editable fields *@
            @Html.HiddenFor(m => m.ID)
            @Html.HiddenFor(m => m.IsDeleted)
            @Html.HiddenFor(m => m.RowVersion)
            @Html.HiddenFor(m => m.TenantId)
            @Html.Hidden("TemplateType", (int)Model.TemplateType)

            @* Pagination/ Sorting *@
            @Html.HiddenFor(m => m.PagingInfo.Page)
            @Html.HiddenFor(m => m.PagingInfo.Take)
            @Html.HiddenFor(m => m.PagingInfo.SortPropertyName)
            @Html.HiddenFor(m => m.PagingInfo.SortAscending)

            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title">
                        <i class="glyphicon glyphicon-pencil"></i>&nbsp; Details Of '@emailTypeToDisplay'
                        <a href="#" class="titleInfoButton"><i class="glyphicon glyphicon-info-sign"></i></a>
                    </span>
                </div>

                <fieldset>
                    <legend style="display: none">Update Email Template Form</legend>
                    <div class="panel-body p25 fill bt0">
                        @Html.ValidationSummary(true, "Another user has updated this record while you've been editing. Please reload the record again.", new { @class = "text-danger" })

                        <div class="form-group">
                            @Html.LabelFor(m => m.TemplateType, new { @class = "control-label col-lg-2" })
                            <div class="col-lg-8">
                                <p class="form-control-static text-muted">@emailTypeToDisplay</p>
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.Subject, new { @class = "control-label col-lg-2" })
                            <div class="col-lg-8">
                                @Html.TextBoxFor(m => m.Subject, new { @class = "form-control", id = "Subject", placeholder = "Subject..." })
                                @Html.ValidationMessageFor(m => m.Subject, string.Empty, new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="section row">
                            <div class="col-md-12">
                                <div class="message-reply">
                                    <div class="summernote">@Html.Raw(Model.Content)</div>
                                    @Html.ValidationMessageFor(m => m.Content, string.Empty, new { @class = "text-danger" })
                                </div>
                                <div class="hidden">
                                    @Html.TextAreaFor(m => m.Content, new { @class = "form-control gui-input", id = "Content", placeholder = "Content..." })
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="panel-footer">
                        <div class="text-center">
                            <input type="button" class="btn btn-primary" id="CancelForm" value="Cancel" />
                            <input type="submit" class="btn btn-primary" id="UpdateForm" value="Update" />
                        </div>
                    </div>

                </fieldset>

            </div>

        }

    </div>
    <div class="col-md-1"></div>

</article>

@section modal {
    <div class="legend hidden">
        @Html.Partial("_PlaceholdersLegend")
    </div>
}