@using EnVisage.Code
@{
    ViewBag.Title = "Teams";
}
@section scripts
{
    <script type="text/javascript">
        var ctr = 0;
        var CompanyesArr = new Array();
        init.push(function () {
            $('#teams').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "bAutoWidth": false,
                "sAjaxSource": document.URL,
                "sServerMethod": "POST",
                "aoColumns": [
                { "mDataProp": "Name" },
                { "mDataProp": "Company" },
                {
                    "mData": function (data, type, full) {
                        return (data.Users || []).join("; ");
                    },
                    "bSortable": false
                },
                { "mDataProp": "ColumnCostCenter" },
                { "mDataProp": "ReportTo" },
                {
                    "bSortable": false,
                    "mData": function (data, type, full) {
                        @if (SecurityManager.CheckSecurityObjectPermission(Areas.Teams, AccessLevel.Write))
						{
						    <text>
                            ctr++;
                            var text = '<a id="btnEdit' + ctr + '" onclick="return editTeam(this.id, \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' + 'class="btn btn-sm btn-primary popover-warning popover-dark"><i class="fa fa-edit"></i> Edit</a> ' +
                                    (data.IsResourcesAttached ? '' : '<a id="btnDelete' + ctr + '" onclick="return deleteTeam(this.id, \'_rplcmnt_\', \'_rplcmnt1_\')" data-toggle="popover" data-placement="left" class="btn btn-sm btn-danger popover-warning popover-dark"><i class="fa fa-trash-o"></i> Delete</a>');
                            return text.replace(/_rplcmnt_/g, data.Id).replace(/_rplcmnt1_/g, data.Name);
                            </text>
						}
						else
					    {
						    <text>
                            return "";
                            </text>
						    }
                        }
                }]
            }).columnFilter({
                "aoColumns": [
                    { "type": "null" },
                    { "type": "null" },
                    { "type": "select" }
                ]
            });
            @if (SecurityManager.CheckSecurityObjectPermission(Areas.Teams, AccessLevel.Write))
			{
			<text>
            $('#teams_wrapper .table-caption').html('<a class="btn btn-primary" onclick="return editTeam(this.id, null);"><i class="fa fa-plus"></i> Add Team</a>');
            </text>
			}
            $('#teams_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
            $('#teams_wrapper .dataTables_processing').addClass("table-caption");
            $('#teams_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');
        });

        function loadTeam(teamId) {
            blockUI();
            if (teamId != null)
                StartEdit('Team', teamId, null, null, 'erorMsgPlaceholder');
            var url = teamId != null ? "?Id=" + teamId : "";
            $('#editReload').html("");
            $.ajax({
                url: '@Url.Action("Edit", "Team")' + url,
                cache: false,
                dataType: "html",
                success: function (data) {
                    $('#editReload').html(data);
                    $('#editTeam')
                        .on('hidden.bs.modal', function () {
                            if (teamId != null) {
                                StopEdit();
                                RemoveLock('View', teamId);
                            }
                        })
                        .on('shown.bs.modal', function () {
                            //initView();
                        })
                        .modal('show');

                    initTeam();
                },
                error: function () {
                    showErrorModal();
                },
                complete: function () {
                    unblockUI();
                },
            });
        }

        function editTeam(aId, Id) {
            if (!CheckLock(aId, 'Team', Id))
                return false;
            loadTeam(Id);
            return true;
        }

        function deleteTeam(aId, Id, name) {

            if (!CheckLock(aId, 'Team', Id))
                return false;
            if (Id != null)
                StartEdit('Team', Id, null, null, 'erorMsgPlaceholder');
            $("#deleteTeamId").val(Id);
            $("#deleteTeamCaption").text("Do you want to delete \"" + name + "\" team?");
            $('#modal-warning').on('hidden.bs.modal', function () {
                if (Id != null) {
                    StopEdit();
                    RemoveLock('Team', Id);
                }
            }).modal('show');
            return true;
        }

        function onFailureDeleteTeam(xhr) {
            showErrorModal();
        }

        function onSuccessDeleteTeam(result) {
            handleAjaxResponse(result, function () {
                // TODO: change to reloadDataTable function when issue with confirm dialog is fixed
                reloadPage();
            }, null, null, $('#deleteTeamForm'));
        }

        //fix modal force focus
        $.fn.modal.Constructor.prototype.enforceFocus = function () {
            var that = this;
            $(document).on('focusin.modal', function (e) {
                if ($(e.target).hasClass('select2-input')) {
                    return true;
                }

                if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                    that.$element.focus();
                }
            });
        };
        $(document).on('hide.bs.modal', '#editTeam', function (e) {
            // skip modal hide event from datepickers
            if ($(e.target).attr('id') !== 'editTeam')
                return true; // close modal form
            // check that form has been changed
            if (typeof isTeamDataChanged === 'function')
                // if form has been changed
                if (isTeamDataChanged()) {
                    // ask user for confirmation of form close
                    var msg = "Editing Team form contains unsaved changes, do you really want to close the form?";
                    bootbox.confirm(msg, function (result) {
                        if (result) {
                            if (typeof resetTeamDataChanged === 'function') {
                                resetTeamDataChanged();
                            }
                            $('#editTeam').modal('hide');
                        }
                    });
                    return false; // DO NOT close modal form
                }
            return true; // close modal form
        });

    </script>
}
<div id="erorMsgPlaceholder"></div>
<div class="table-light table-responsive">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="teams">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Business Unit
                </th>
                <th>
                    Contributors
                </th>
                <th>
                    Cost Center
                </th>
                <th>
                    Report to
                </th>
                <th>
                </th>
            </tr>
        </thead>
        <tfoot style="display: none;">
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
    </table>
</div>
<!-- Modal -->
<div id="editTeam" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" id="editReload">

        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
<!-- / Modal -->
<!-- Warning modal alert -->
<div id="modal-warning" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog">
        @using (Ajax.BeginForm("Delete", "Team", new AjaxOptions() { OnBegin = "blockUI", OnComplete = "unblockUI", OnSuccess = "onSuccessDeleteTeam", OnFailure = "onFailureDeleteTeam" }, new { id = "deleteTeamForm" }))
        {
            @Html.AntiForgeryToken()
            <input type="hidden" id="deleteTeamId" name="deleteTeamId" />
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title">Delete Team</h4>
                </div>
                <div class="modal-title"></div>
                <div class="modal-body">
                    <strong id="deleteTeamCaption"></strong>
                    @Html.ValidationSummary(false, "Team cannot be deleted due to the following errors:")
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">OK</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div> <!-- / .modal-content -->
        }
    </div> <!-- / .modal-dialog -->
</div> <!-- / .modal -->
<!-- Modal -->