@using EnVisage.Code
@using EnVisage.Models
@model ScenarioTemplateCreationModel
@{
    var templatesStr = string.Empty;
    foreach (var item in Utils.GetTemplateGroups())
    {
        if (!string.IsNullOrEmpty(templatesStr))
        {
            templatesStr += ",";
        }
        templatesStr += "'" + new HtmlString(HttpUtility.JavaScriptStringEncode(item)) + "'";
    }
}
<script type="text/javascript">

    var _templateDataChanged = false;
    function onTemplateDataChanged() {
        _templateDataChanged = true;
    }
    function resetTemplateDataChanged() {
        _templateDataChanged = false;
    }
    function isTemplateDataChanged() {
        return _templateDataChanged;
    }

    var Tmultik;
    init.push(function () {
        Tmultik = $("#@Html.IdFor(model => model.TemplateGroupNames)").select2({
            placeholder: "Select template groups",
            tags: [@Html.Raw(templatesStr)],
            tokenSeparators: [',', ';'],
            onSelect: function (a, b) {
            }
        });

        $('#createTemplateForm').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
            if (typeof onTemplateDataChanged === 'function')
                onTemplateDataChanged();
        });
        $('#btnNewTemplate').on('click', function () {
            $.validator.unobtrusive.parseDynamicContent('#createTemplateForm');
            if ($('#createTemplateForm').valid()) {
                resetTemplateDataChanged();
            }
        });
        $(document).ready(function () {
            $.validator.unobtrusive.parse($(this));
        });
    });


</script>

@using (Ajax.BeginForm("CreateTemplate", "Scenario", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onCreateTemplateSuccess", OnFailure = "onCreateTemplateFailure", OnBegin = "blockUI(); return true;" }, new { id = "createTemplateForm" }))
{
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Create Template</h4>
    </div>
    <div class="modal-body" style="max-height:600px;overflow-y:auto;">
        @Html.ValidationSummary(false, "The Scenario Template could not be saved due to the following errors:")

        @Html.HiddenFor(x => x.Id)
        <div class="panel-body" style="border: 0;">
            <div class="row">
                <div class="form-group">
                    @Html.LabelFor(model => model.TemplateName, new { @class = "col-sm-3 control-label" })
                    <div class="col-sm-9">
                        <div class="input-group" style="width:100%;">
                            @Html.Raw(Html.TextBoxFor(model => model.TemplateName, new { @class = "form-control" }))
                        </div>
                        @Html.ValidationMessageFor(model => model.TemplateName)
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-sm-3 control-label">Expenditure Categories</label>
                    <div class="col-sm-9">
                        <div class="table-light table-responsive" style="overflow-y: auto;" id="expendituresTamplate">
                            <script type="text/javascript">
                                function onTChCheckExpCat(i) {
                                    $("#templateExpCatChecked_" + i).val(document.getElementById("templateExpCatCheckedId_" + i).checked);
                                }
                            </script>
                            <table class="table table-striped dataTable" id="uom" style="margin-top: 0px !important;">
                                <thead style="vertical-align:top;">
                                    <tr>
                                        <th style="width:30px;"></th>
                                        <th>Name</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (Model != null)
                                    {
                                        for (var i = 0; i < Model.Expenditures.Count; i++)
                                        {
                                            <tr>
                                                <td style="text-align: right;">
                                                    <input type="hidden" value="@Model.Expenditures[i].Group" name="expCatGroup[@i]" />
                                                    <input type="hidden" value="@Model.Expenditures[i].Id" name="expCatId[@i]" />
                                                    <input type="hidden" value="@Model.Expenditures[i].Name" name="expCatName[@i]" />
                                                    @if (Model.Expenditures[i].Checked)
                                                    {
                                                        <input type="checkbox" class="expenditueCb" value="@Model.Expenditures[i].Id" checked="checked" name="templateExpCatCheckedId[@i]" @* disabled*@ id="templateExpCatCheckedId_@i" onclick="onTChCheckExpCat(@i); " />
                                                        <input type="hidden" value="true" name="templateExpCatChecked[@i]" id="templateExpCatChecked_@i" />
                                                    }
                                                    else
                                                    {
                                                        <input type="checkbox" class="expenditueCb" value="@Model.Expenditures[i].Id" name="templateExpCatCheckedId[@i]" id="templateExpCatCheckedId_@i" onclick="onTChCheckExpCat(@i); " />
                                                        <input type="hidden" value="false" name="templateExpCatChecked[@i]" id="templateExpCatChecked_@i" />
                                                    }
                                                </td>
                                                <td>@Model.Expenditures[i].Name</td>
                                            </tr>
                                        }
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    @Html.LabelFor(model => model.TemplateGroupNames, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10 select2-primary">
                        @Html.TextBoxFor(model => model.TemplateGroupNames, new { @class = "form-control" })
                        <i>(use comma or semicolon to split groups)</i>
                    </div>
                </div>
            </div>
        </div>
        <button style="float:right;margin-right:10px;" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button style="float:right;margin-right:8px;" type="submit" class="btn btn-primary" id="btnNewTemplate">OK</button>
    </div>

}