@model EnVisage.Models.ViewModel
@using EnVisage.Code
@using EnVisage.Code.Extensions
@{
    ViewBag.Title = Model.Id != Guid.Empty ? "Edit " + Model.Name : "Add View";

    var availableCompanies = Utils.GetCompaniesTreeForCurrentUser();
    var teams = Model.Teams != null ? Model.Teams.GetAsCommaSeparatedList() : "";
    var watchers = Model.Watchers != null ? Model.Watchers.GetAsCommaSeparatedList() : "";
    var companies = Model.Companies != null ? Model.Companies.GetAsCommaSeparatedList() : "";
}
<script type="text/javascript">
    var _viewDataChanged = false;
    function onViewDataChanged() {
        _viewDataChanged = true;
    }
    function resetViewDataChanged() {
        _viewDataChanged = false;
    }
    function isViewDataChanged() {
        return _viewDataChanged;
    }
    emulateNavUrl = "/View";

    function fillSelect2(multik, preselected) {
        var selected = [];
        if (preselected != null)
            selected = preselected;
        multik.select2('val', selected);
    }

</script>
<script type="text/javascript">
    function initView() {
        $("#@Html.IdFor(model=>model.Teams)").select2({
            allowClear: true,
            placeholder: "Select teams"
        });
        var selectedTeams = [@Html.Raw(teams)];
        fillSelect2($("#@Html.IdFor(model=>model.Teams)"), selectedTeams);

        $("#@Html.IdFor(model=>model.Watchers)").select2({
            allowClear: true,
            placeholder: "Select watchers"
        });
        var selectedWatchers = [@Html.Raw(watchers)];
        fillSelect2($("#@Html.IdFor(model=>model.Watchers)"), selectedWatchers);

        // Need to create select2 for Companies, when form is shown, because
        // placeholder displayed incorrect - because of the small initial
        // size of the source select control, while form is invisible
        setTimeout(function () {
            $("#@Html.IdFor(model => model.Companies)").select2({
                allowClear: true,
                placeholder: "Select Business Units"
            }).on("select2-selecting", function (e) {
                if (e && e.val) {
                    filterSelectedCompanies('@Html.IdFor(model => model.Companies)', e.val)
                }
            });

            var selectedCompanies = [@Html.Raw(companies)];
            fillSelect2($("#@Html.IdFor(model => model.Companies)"), selectedCompanies);
        }, 500);

        @if (Model.Id != Guid.Empty)
        {
            <text>
            StartEdit('View', '@Model.Id', "#btnDelete", "#btnsave", "erorMsgPlaceholder");
            </text>
        }

        $('#btnsave').click(function () {
            if ($(this).parents('form').valid()) {
                blockUI();
                saveData();
            }
        });

        $('#editViewForm').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
            if (typeof onViewDataChanged === 'function')
                onViewDataChanged();
        });

        $('#editViewForm').submit(function (evt) {
            evt.preventDefault();
            return false;
        });

        $.validator.unobtrusive.parseDynamicContent("#editViewForm");
    }

    function filterSelectedCompanies(controlId, selectedVal) {
        var controlSelector = "#" + controlId;
        var controlItem = $(controlSelector);
        var selectedOption = $(controlItem).find('[value="' + selectedVal + '"]');
        var parentItemId = $(selectedOption).attr("data-parent-value");

        if (parentItemId) {
            // Child company was selected. Check if it's parent company is already selected.
            // If so, remove parent company from selection
            var currentSelection = controlItem.select2('val');
            var selectionToRemoveIndex = currentSelection.indexOf(parentItemId);

            if (selectionToRemoveIndex >= 0) {
                var newSelection = $.extend([], currentSelection);
                newSelection.splice(selectionToRemoveIndex, 1);
                controlItem.select2('val', newSelection);
            }
        }
        else {
            // Parent company was selected. Check and remove it's child companies from selection
            var childCompaniesForCurrent = [];
            $(controlItem).find('[data-parent-value="' + selectedVal + '"]')
                .each(function (index, item) {
                    var itemValue = $(item).attr('value');
                    childCompaniesForCurrent.push(itemValue);
                });

            if (childCompaniesForCurrent && (childCompaniesForCurrent.length > 0)) {
                var currentSelection = controlItem.select2('val');
                var newSelection = $.extend([], currentSelection);
                var selectionChanged = false;

                for (var index = newSelection.length - 1; index >= 0; index--) {
                    var itemToCheck = newSelection[index];
                    if (childCompaniesForCurrent.indexOf(itemToCheck) >= 0) {
                        newSelection.splice(index, 1);
                        selectionChanged = true;
                    }
                }

                if (selectionChanged) {
                    controlItem.select2('val', newSelection);
                }
            }
        }
    }

    function saveData() {
        var form = $('#editViewForm');
        var id = form.find('input#@(Html.IdFor(model => model.Id))[type=hidden]').val();
        var name = form.find('#@Html.IdFor(model => model.Name)').val();

        var watchersControl = form.find('#@Html.IdFor(model => model.Watchers)');
        var teamsControl = form.find('#@Html.IdFor(model => model.Teams)');
        var companiesControl = form.find('#@Html.IdFor(model => model.Companies)');

        var selectedWatchers = watchersControl.select2('val');
        var selectedTeams = teamsControl.select2('val');
        var selectedCompanies = companiesControl.select2('val');

        var data = {
            Id: id,
            Name: name,
            Watchers: selectedWatchers,
            Teams: selectedTeams,
            Companies: selectedCompanies
        };

        var token = $('input[name="__RequestVerificationToken"]', form).val();
        resetViewDataChanged();

        $.ajax({
            type: "post",
            url: siteRoot + "/View/Edit",
            context: document.body,
            data: { __RequestVerificationToken: token, model: data },
            success: function (result) {
                handleAjaxResponse(result, onSuccess, null, null, form);
            },
            error: function () {
                RemoveLock('View', id);
                StopEdit();
                showErrorModal();
            },
            complete: function () {
                unblockUI();
            }
        });

        return false;
    }

    function onSuccess(result) {
        if (!result || !result.Content || !result.Content.viewId) {
            return;
        }

        RemoveLock('View', result.Content.viewId);
        StopEdit();

        $('#generalModalContainer').modal('hide');
        var redirectToView = result.Content.openView;

        if (redirectToView) {
            @* Perform redirection to created view *@
            var redirectUrlBase = '@(Url.Action("Board", "View"))';
            var url = URI(redirectUrlBase).setQuery("viewId", result.Content.viewId);
            document.location.href = url;
        }
        else {
            // Change name of the edited view in left navigation menu
            var viewItemInMenu = $("#view-menu-root").find("*[data-view-id=" + result.Content.viewId + "]");
            if (viewItemInMenu && viewItemInMenu.length) {
                $(viewItemInMenu).text(result.Content.viewName);
            }
        }
    }
</script>


<div id="erorMsgPlaceholder"></div>

@using (Ajax.BeginForm("Edit", "View", new AjaxOptions { HttpMethod = "Post" }, new { id = "editViewForm" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(t => t.Id)
    @Html.HiddenFor(t => t.backController)
    @Html.HiddenFor(t => t.backAction)

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">@(Model.Id != Guid.Empty ? "Edit " + Model.Name : "Add View")</h4>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group no-margin-hr">
                    @Html.LabelFor(model => model.Name, new { @class = "control-label" })
                    @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Name)
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group no-margin-hr select2-primary">
                    @Html.LabelFor(model => model.Teams, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Teams, string.Empty, new { List = Utils.GetTeamsAvailableForUser(Guid.Parse(User.Identity.GetID())) })
                    @Html.ValidationMessageFor(model => model.Teams)
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group no-margin-hr select2-primary">
                    @Html.LabelFor(model => model.Companies, new { @class = "control-label" })
                    <select id='@Html.IdFor(model => model.Companies)' multiple='multiple' class="form-control">
                        @{  foreach (var opt in availableCompanies)
                            {
                                <option value="@opt.Value" class='ddl-level-item-ac@((opt.Group != null) && !String.IsNullOrEmpty(opt.Group.Name) ? " pad-left" : "")'
                                        @((opt.Group != null) && !String.IsNullOrEmpty(opt.Group.Name) ? "data-parent-value=" + opt.Group.Name : "")>
                                    @opt.Text
                                </option>
                            }
                        }
                    </select>
                    @Html.ValidationMessageFor(model => model.Companies)
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group no-margin-hr select2-primary">
                    @Html.LabelFor(model => model.Watchers, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Watchers, string.Empty, new { List = Model.AvailableUsers.Select(x => new SelectListItem() { Value = x.Id.ToString(), Text = x.FirstName + " " + x.LastName }).ToList() })
                    @Html.ValidationMessageFor(model => model.Watchers)
                </div>
            </div>
        </div>
        @Html.ValidationSummary(false, "The View could not be saved due to the following errors:")
    </div> <!-- / .modal-body -->
    <div class="modal-footer">
        <button class="btn btn-success" type="button" id="btnsave"><i class="fa fa-save"></i> Save</button>
        @if (Model != null && Model.Id != Guid.Empty)
        {
            if (Model.TeamCount > 0)
            {
                <a style="display:none;" id="btnDelete" class="btn btn-danger disabled" href="javascript:void(0);"><i class="fa fa-trash-o"></i> Delete</a>
            }
            else
            {
                <a style="display:none;" id="btnDelete" class="btn btn-danger" href="@Url.Action("Delete", "View", new { id = Model.Id })"><i class="fa fa-trash-o"></i> Delete</a>
            }
        }
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
}