@model IEnumerable<Fab2ApprovalSystem.Models.LoginModel>

@{
    ViewBag.Title = "Index";
}

@{
    Layout = "_ManagerLayout.cshtml";
}

<link rel="stylesheet" href="/Content/kendo/kendo.blueopal.min.css" />
<link rel="stylesheet" href="~/Content/kendogridcustom.css" />

<style>
    .k-grid-edit-row input {
        width: 100%;
    }

    .k-grid .k-grid-header .k-header .k-link {
        height: auto;
    }

    .k-grid .k-grid-header .k-header {
        white-space: normal;
    }

    .k-grid .k-edit-cell input {
        width: 100%;
    }

    .hiddenDelegate {
        display: none;
    }

    /*InLine Edit Mode*/
</style>

<div id="userListdiv" class="k-content">
    @(Html.Kendo().Grid<Fab2ApprovalSystem.Models.LoginModel>()
                        .Name("userList")
                        .Columns(columns =>
                        {
                            columns.Bound(l => l.UserID).Visible(false);
                            columns.Bound(l => l.FirstName);
                            columns.Bound(l => l.LastName);
                            columns.Bound(l => l.Email);
                            columns.Bound(l => l.IsActive);
                            //columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsActive ? checked='checked':'' # class='chkbx' />");

                            columns.Bound(l => l.LastLogin).Format("{0:MM/dd/yy hh:mm:ss}");

                            // columns.Command(command => { command.Edit(); command.Destroy(); }).Width("200px");


                            columns.Bound(l => l.OOO);
                            columns.Bound(l => l.OOOStartDate).Format("{0:MM/dd/yy hh:mm:ss}").Width("150px");
                            columns.Bound(l => l.OOOExpirationDate).Format("{0:MM/dd/yy hh:mm:ss}").Width("150px");
                            columns.Bound(l => l.DelegatedTo).Visible(false);
                            columns.Bound(l => l.DelegatedToFullName);
                            columns.Bound(p => p.OOOStatusWithUserID).ClientTemplate("#=buildButtons(OOOStatusWithUserID)#").Width(120);
                            //columns.Template(p => { }).HeaderTemplate("").ClientTemplate(@"
                            //<input type='button' value='Approval Groups' class='btn btn-primary btn-xs' onclick='ShowApprovalGroup(" + l => + ")'/>");
                        })
                                        .HtmlAttributes(new { style = "height: 500px;" })
                                        .Scrollable()
                                        .Resizable(resize => resize.Columns(true))
                                        .Groupable()
                                        .Sortable()
                                        .Filterable()
                                        .Pageable(pageable => pageable
                                                .Refresh(true)
                                                .PageSizes(true)
                                                .ButtonCount(5))
                                        .DataSource(dataSource => dataSource

                                                    .Ajax().ServerOperation(false)
                                                    .Events(events => events.Error("error_handler"))
                                                    .Model(model =>
                                                    {
                                                        model.Id(l => l.UserID);
                                                        model.Field(p => p.UserID).Editable(false);
                                                        model.Field(l => l.LastLogin).Editable(false);
                                                        model.Field(l => l.OOO).Editable(false);
                                                        model.Field(l => l.OOOStartDate).Editable(false);
                                                        model.Field(l => l.OOOExpirationDate).Editable(false);
                                                        model.Field(l => l.DelegatedToFullName).Editable(false);


                                                    })
                                                   .PageSize(50)
                                                    .Read(read => read.Action("GetGridUserList", "Admin"))

                                        )

    )
    @*@(Html.Kendo().Grid<Fab2ApprovalSystem.Models.LoginModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(l => l.UserID).Visible(false);
            columns.Bound(l => l.LoginID);
            columns.Bound(l => l.FirstName);
            columns.Bound(l => l.LastName);
            columns.Bound(l => l.IsAdmin);
            columns.Bound(l => l.LastLogin).Format("{0:MM/dd/yy hh:mm:ss}");
            columns.Bound(l => l.OOO);
            columns.Bound(l => l.OOOStartDate).Format("{0:MM/dd/yy hh:mm:ss}").Width("150px");
            columns.Bound(l => l.OOOExpirationDate).Format("{0:MM/dd/yy hh:mm:ss}").Width("150px");
            columns.Bound(l => l.DelegatedTo).Visible(false);
            columns.Bound(l => l.DelegatedToFullName);
            columns.Bound(p => p.OOOStatusWithUserID).ClientTemplate("#=buildButtons(OOOStatusWithUserID)#").Width(120);


        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Navigatable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .PageSize(20)
            .ServerOperation(false)
            //.Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.UserID))
            .Read(read => read.Action("GetGridUserList", "Admin"))
            .Create(update => update.Action("InsertUser", "Admin"))
            .Update(update => update.Action("BatchUpdateUser", "Admin"))
            .Destroy(destroy => destroy.Action("DeleteUser", "Admin"))
        )
        )*@


</div>
<div class="modal fade" id="OOODialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                @*<h4 class="modal-title" id="myModalLabel">Out Of Office for user:</h4>*@
                <label style="color: #36940a; font-weight: bold; font-size: 16px; " id="currentUser"></label>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="control-group">
                            <div class="controls">
                                <div class="controls">
                                    <label for="AssignDelegate">Assign Delegate?</label>
                                    <input type="checkbox" name="AssignDelegate" id="AssignDelegate" value="false" onclick="toggleDelegate()"/>
                                    <p>*Please assign a delegate if this user will be assigned tasks while Out of Office.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br />

                <div class="row hiddenDelegate" id="delegateLabel">
                    <div class="col-sm-12">
                        <div class="control-group">
                            <div class="controls">
                                <div class="controls">
                                    <label for="CurrentUser">Delegate To:</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row hiddenDelegate" id="delegateControl">
                    <div class="col-sm-12">
                        <div class="control-group">
                            <div class="controls">
                                <div class="controls">
                                    @(Html.Kendo().DropDownList()
                                    .Name("DelegateTo")
                                        .HtmlAttributes(new { style = "width: 250px" })
                                        .DataTextField("FullName")
                                        .DataValueField("UserID")
                                        .DataSource(source =>
                                        {
                                            source.Read(read =>
                                            {
                                                read.Action("GetAllUserList", "Admin");
                                            });
                                        })

                                    )
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <br />
                <div class="row">
                    <div class="col-sm-6">
                        <div class="control-group">
                            <div class="controls">
                                <label for="CurrentUser">Start Date:</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="control-group">
                            <div class="controls">
                                <div class="controls">
                                    <label for="CurrentUser">End Date:</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="control-group">
                            <div class="controls">
                                @(Html.Kendo().DatePicker()
                                    .Name("txtStartDate")
                                        //.Value()
                                )
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="control-group">
                            <div class="controls">
                                @(Html.Kendo().DatePicker()
                                    .Name("txtEndDate")
                                        //.Value()
                                )
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="SaveOOOInfo">Save</button>
            </div>
        </div>
    </div>
</div>

<script>

    function toggleDelegate() {
        document.getElementById("delegateControl").classList.toggle("hiddenDelegate");
        document.getElementById("delegateLabel").classList.toggle("hiddenDelegate");
    }

    function error_handler(e) {
        alert("Error during the operation");
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    var userid = "";
    function onEdit(e) {

        $(e.container).find("td:last").html("<a href='javascript: void(0)' class='abutton update' onclick='updateRow()' title='button update'>button update</a> " +
            "<a href='javascript: void(0)' class='abutton cancel' onclick='cancelRow()' title='button cancel'>button cancel</a>");
    }

    function cancelRow() {
        grid = $("#userList").data("kendoGrid");
        grid.cancelRow();
    }

    function editRow(element) {
        grid = $("#userList").data("kendoGrid");
        grid.editRow($(element).closest("tr"));
    }

    function updateRow() {
        grid = $("#userList").data("kendoGrid");
        grid.saveRow();
    }

    function deleteRow(element, userId) {
        grid = $("#userList").data("kendoGrid");

        console.log(userId);

        $("#DeletedUserIDHidden").val(userId);
        $("#SubRoleListReAssign").data("kendoGrid").dataSource.read();
        $("#ReAssignApprovalGroups").modal('show');
        //var ds = grid.dataSource;
        //var dataItem = grid.dataItem($(element.target).closest("tr"));
        //var rowViewIndex = $(element).closest("tr").index();
        //var index = ((ds.page() - 1) * ds.pageSize()) + rowViewIndex;

        //var myRowData = $("#userList").data().kendoGrid.dataSource.at(index);
        //console.log(myRowData);

        //grid.data.

        //grid.removeRow($(element).closest("tr"));
    }

    function createRow() {
        grid = $("#userList").data("kendoGrid");
        grid.addRow();
    }

    function buildButtons(oooStatusWithUserID) {

        var uid = oooStatusWithUserID.split('~')[0];
        var oooStatus = oooStatusWithUserID.split('~')[1];
        var userName = oooStatusWithUserID.split('~')[2];

        var template = "";
        if (oooStatus == '0') {

            template = "<input type='button' value='Set OOO   ' class='btn btn-primary btn-xs' id='" + uid + "-" + userName + "'" + "onclick='SetOOOStatus(this)'/>";
        }
        else
        {
            template = "<input type='button' value='Expire OOO' class='btn btn-warning btn-xs' id='" + uid + "-" + userName + "'" + "onclick='Expire(this)'/>";
        }

        return template;
    }

    function buildShowGroupsButton(UserID) {

        var uid = oooStatusWithUserID.split('~')[0];


        var template = "";
        template = "<input type='button' value='Edit Approval Groups   ' class='btn btn-primary btn-xs' id='" + UserID + "' " + "onclick='ShowApprovalGroup(this)'/>";

        return template;
    }


    function SetOOOStatus(e) {
        $("#txtStartDate").val('');
        $("#txtEndDate").val('');


        id = e.id;
        userid = id.split('-')[0];
        var userName = id.split('-')[1];
        $('#currentUser').text("Out Of Office for user:  " + userName);
        $("#OOODialog").modal('show');
        return false;
    }


    $('#SaveOOOInfo').on('click', function () {
        var bfound = false;
        //var currentDate = new Date();
        var delegate = "";
        var isChecked = $("#AssignDelegate").is(":checked");

        if (isChecked === true)
            delegate = $("#DelegateTo").data("kendoDropDownList").value();

        else
            delegate = "0";

        if (userid ==  delegate)
        {
            alert('The OOO person cannot be same as the delegate to person');
            return false;
        }


        var fullDate = new Date()

        //convert month to 2 digits
        var twoDigitMonth = ((fullDate.getMonth().length + 1) === 1) ? (fullDate.getMonth() + 1) : '0' + (fullDate.getMonth() + 1);

        var tempCurrentDate = twoDigitMonth + "/" + fullDate.getDate() + "/" + fullDate.getFullYear();
        var arrCurrDate = tempCurrentDate.split('/');
        var currentDate = new Date(arrCurrDate[2], arrCurrDate[0] - 1, arrCurrDate[1]);


        if (!$("#txtStartDate").val() || !$("#txtEndDate").val()) {
            alert('Start or the End Date cannot be blank');
            return false;
        }

        var stDateEntered = $("#txtStartDate").val();
        var arrStDate = stDateEntered.split('/');
        var stDate = new Date(arrStDate[2], arrStDate[0] - 1, arrStDate[1]);

        var endDateEntered = $("#txtEndDate").val();
        var arrEndDate = endDateEntered.split('/');
        var endDate = new Date(arrEndDate[2], arrEndDate[0] - 1, arrEndDate[1]);


        if (stDate < currentDate) {
            alert("Start Date should be greater than the or equal to Current Date ");
            return false;
        }


        if (endDate <= stDate) {

            alert("The End Date should be greater than the Start Date ");
            return false;
        }

        $("#OOODialog").modal('hide');

        var urlString = '/Admin/EnableOOOStatus';
        $.ajax({
            type: "Post",
            url: urlString,
            data: {
                oooUserID: userid,
                delegatedTo: delegate,
                startDate: $("#txtStartDate").val(),
                endDate: $("#txtEndDate").val(),
            },
            success: function (result) {
                if (result == "3") {
                    alert('The user which you selected for Delegation is already a delegator for another user\n Please select a different user for Delgation')
                }
                else {
                    var grid = $("#userList").data("kendoGrid");
                    grid.dataSource.read();
                }
            },
            error: function (result) {
                alert("Failed " + result);
            }

        });

        return false;

    });

    function Expire(e) {
        id = e.id;
        userid = id.split('-')[0];
        var userName = id.split('-')[1];

        if (confirm('Are you sure you want to expire the OOO setting for user: ' + userName))
        {
            var urlString = '/Admin/ExpireOOOStatus';
            $.ajax({
                type: "Post",
                url: urlString,
                data: {
                    oooUserID: userid
                },
                success: function (result) {
                    var grid = $("#userList").data("kendoGrid");
                    grid.dataSource.read();
                },
                error: function (result) {
                    alert("Failed " + result);
                }

            });
        }

        return false;
    }

    function ShowApprovalGroup(UserId) {

        $("#UserIDHidden").val(UserId);
        $("#SubRoleList").data("kendoGrid").dataSource.read();
        $("#UserApprovalGroupsDialog").modal('show');
    }
    function ShowApprovalGroupReAssign(UserId) {

        $("#DeletedUserIDHidden").val(UserId);
        $("#SubRoleListReAssign").data("kendoGrid").dataSource.read();
        $("#UserApprovalGroupsDialog").modal('show');
    }
    function GetUserID() {
        var userId = $("#UserIDHidden").val();
        return { userId : userId};
    }
    function GetDeletedUserID()
    {
        var userId = $("#DeletedUserIDHidden").val();
        return { userId: userId };
    }
    function ShowUserTasks(UserId) {
        $("#TaskUserIDHidden").val(UserId);
        $("#UserTaskList").data("kendoGrid").dataSource.read();
        $("#UserAssignedTasksDialog").modal('show');
    }
    function GetTaskListUserID() {
        var userId = $("#TaskUserIDHidden").val();
        return { userId: userId };
    }
    function ShowRoleUserSelector(SubRoleID) {
        var userBeingDeleted = $("#DeletedUserIDHidden").val()
        $("#hiddenRoleId").val(SubRoleID);
        $("#RoleReAssignPromptDeletedUserHidden").val(userBeingDeleted)
        $("#RoleReAssignPrompt").modal('show');
    }
    function SubmitRoleAssignment() {
        var userToAssign = $("#selectedUserToReassign").data("kendoDropDownList").value();
        var roleToAssign = $("#hiddenRoleId").val();
        var userBeingDeleted = $("#RoleReAssignPromptDeletedUserHidden").val();


        $.ajax({
            url: "/Admin/ReplaceUserRoles",
            type: "POST",
            datatype: "json",
            data: {
                subRole: roleToAssign,
                users: userToAssign
            },
            success: function (data) {
                alert(data);
                DeleteUserFromRole(roleToAssign, userBeingDeleted);
                $("#RoleReAssignPrompt").modal('hide');

            },
            error: function (result) {
                alert("Failed " + result);
            }
        });


    }
    function DeleteUserFromRole(subRoleId, userId) {
        $.ajax({
            url: "/Admin/DeleteUserRoles",
            type: "POST",
            datatype: "json",
            data: {
                subRole: subRoleId,
                users: userId
            },
            success: function (data) {
                $("#SubRoleListReAssign").data("kendoGrid").dataSource.read();
                return;

            },
            error: function (result) {
                alert("Failed " + result);
            }
        });
    }
    function InactivateUser() {
        if (confirm("Are you sure you wish to de-activate this user?")) {
            var userId = $("#DeletedUserIDHidden").val();
            $.ajax({
                url: "/Admin/DeleteUser",
                type: "POST",
                datatype: "json",
                data: {
                    userId: userId
                },
                success: function (data) {
                    alert(data);
                    $("#ReAssignApprovalGroups").modal('hide');
                    $("#userList").data("kendoGrid").dataSource.read();

                },
                error: function (result) {
                    alert("Failed " + result);
                }
            });
        }
        else {
            return;
        }
    }
</script>