@model IEnumerable<Fab2ApprovalSystem.Models.Role>

@{
    ViewBag.Title = "Roles Assignment";
}
@{
    Layout = "_AdminLayout.cshtml";
}


<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.arctic.css" type="text/css" />
<link rel="stylesheet" href="/Content/kendo/kendo.blueopal.min.css" />
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxtree.js"></script>

@*<nav class="navbar navbar-default" role="navigation" style="font-size: 11px">
    <div class="container-fluid">

        <ul class="nav navbar-nav" id="myTab">           
            <li><a href=@Url.Action("Index", "Admin")>Manage Users</a></li>
        </ul>

        <!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>*@

<div class="row">
    <div class="col-md-2">
        <div class="control-group">
            <label for="jqxTreeWidget">WorkFlow Roles</label>
            <div class="controls">
                <div id='jqxTreeWidget'>
                </div>
            </div>
            <input type="checkbox" id="chkShowInactive"/><label for="chkShowInactive">Show Inactive Roles?</label>
        </div>
    </div>
    <div class="col-md-2">
        <div class="control-group">
            <label for="lstUserRoles" id="selectionlog" style="font-size: 10px; font-family: Verdana; font-weight: bold; color:crimson">Current Users:</label>
            
            <div class="controls">
                <div id='lstUserRoles'>
                </div>
            </div>
            <input style="margin-top: 20px;" type="button" id='jqxButtonRemove' value="Remove selected items" />
        </div>
    </div>
    <div class="col-md-8">
        <div class="control-group">
            <label for="lstAllUsers">All Users</label>
            <div style="font-size: 10px; font-family: Verdana; font-weight: bold; color:crimson" ></div>
            <div class="controls">
                <div id='lstAllUsers'>
                </div>
                <input style="margin-top: 20px;" type="button" id='jqxButtonAdd' value="Add selected items" />
        </div>
        </div>
    </div>
</div>

   
    <script language="javascript">

        var currentSubRoleID;

        $("#chkShowInactive").click(function () {
            LoadTree();
        });

        $(document).ready(function () {
            var url = "/Admin/GetAllUserList";
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'UserID' },
                    { name: 'FullName' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create a jqxListBox
            $("#lstAllUsers").jqxListBox({
                multipleextended: true, theme: "arctic", source: dataAdapter, displayMember: "FullName", valueMember: "UserID", width: 200, height: 250
            });



            // POPLUATE THE TREE
            LoadTree();

        });

        function LoadTree() {

            var newurl = "/Admin/AllSubRoles";
            var newsource =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'parentid' },
                    { name: 'text' },
                    { name: 'value' }
                ],
                id: 'id',
                url: newurl,
                data: {
                    showInactiveRoles: $("#chkShowInactive").is(":checked"),
                },
                async: false


            };

            var newdataAdapter = new $.jqx.dataAdapter(newsource);

            // perform Data Binding.
            newdataAdapter.dataBind();
            var records = newdataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);

            $('#jqxTreeWidget').jqxTree({ theme: "arctic", source: records, height: '400px', width: '200px' })
                        
                        .on('select', function (event) {
                            var args = event.args;
                            var item = $('#jqxTreeWidget').jqxTree('getItem', args.element);
                            var parentitem = $('#jqxTreeWidget').jqxTree('getItem', item.parentElement);

                            if (parentitem != undefined) {
                                //$("#selectionlog").children().remove();
                                //$("#selectionlog").text('Current Users:' + parentitem.label + ' (' + item.label + ')');
                                $("#selectionlog").text('Current Users:' + parentitem.label + ' (' + item.label + ')');

                                displayUserRoles(item.id);
                                currentSubRoleID = item.id;

                                //alert(parentitem.label);
                            }

                        });
            ;
            // display an empty list box for the selected user roles Listbox.
            displayUserRoles(-1);

        }



        function onSelectRoles(e) {


            var data = $('#treeRoles').data('kendoTreeView').dataItem(e.node);

            var parent = this.parent(e.node); // `this` refers to the treeview object
            if (parent.length) {
                var parentText = this.text(parent);
                $("#selectionlog").children().remove();
                $("#selectionlog").text(parentText + ' (' + data.text + ')');
                displayUserRoles(data.id);
                currentSubRoleID = data.id
            }

        }



        function displayUserRoles(id) {
            var url = "/Admin/GetAllUserListBySubRole?SubRole=" + id;
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'UserID' },
                    { name: 'FullName' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create a jqxListBox
            $("#lstUserRoles").jqxListBox({
                multipleextended: true, theme: "arctic", source: dataAdapter, displayMember: "FullName", valueMember: "UserID", width: 200, height: 250
            });
            $("#lstUserRoles").on('select', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        var valueelement = $("<div></div>");
                        valueelement.text("Value: " + item.value);
                        var labelelement = $("<div></div>");
                        labelelement.text("Label: " + item.label);

                    }
                }
            });


        }


        $("#jqxButtonAdd").jqxButton({
            theme: 'energyblue'
        });

        $("#jqxButtonRemove").jqxButton({
            theme: 'energyblue'
        });

        $('#jqxButtonAdd').on('click', function () {
            // get selected items.
            var bfound = false;
            var userids;
            var itemsToAdd = $('#lstAllUsers').jqxListBox('getSelectedItems');
            if (itemsToAdd.length > 0) {

                for (var i = 0; i < itemsToAdd.length; i++) {

                    if (itemsToAdd[i].label != undefined) {

                        var tempvalue = itemsToAdd[i].value;
                        var templabel = itemsToAdd[i].label;

                        //if (i < itemsToAdd.length - 1)
                        //{
                        // check if the item exists in the role seleced for the user
                        var itemsAdded = $("#lstUserRoles").jqxListBox('getItems');
                        for (var x = 0; x < itemsAdded.length; x++) {
                            if (itemsAdded[x].label == templabel) {
                                bfound = true;
                                break;
                            };
                        };

                        if (!bfound) {
                            $("#lstUserRoles").jqxListBox('addItem', { label: templabel, value: tempvalue });
                            if (userids == null)
                                userids = tempvalue;
                            else
                                userids += "~" + tempvalue;
                        }

                        bfound = false;

                    }
                };

                // add the selected item into the DB.

                if (currentSubRoleID == undefined) {
                    alert('Please select a SubRole to add the users to');
                    return;
                }


                //
                if (userids != null) {
                    //alert(currentSubRoleID);
                    //alert("UserIds: " + userids);

                    AddRoles(currentSubRoleID, userids)
                }

            }

            // unselect all the selected items
            $("#lstAllUsers").jqxListBox({ selectedIndex: -1 });

        });


        $('#jqxButtonRemove').on('click', function () {
            // get  items.
            var userids;
            var tempValue;
            var items = $("#lstUserRoles").jqxListBox('getSelectedItems');
            if (items.length > 0) {
                for (var i = items.length - 1; i >= 0; i--) {

                    tempValue = items[i].value;
                    $("#lstUserRoles").jqxListBox('removeItem', tempValue);
                    if (userids == null)
                        userids = tempValue;
                    else
                        userids += "~" + tempValue;
                    break;

                };

                if (currentSubRoleID == undefined) {
                    alert('Please select a SubRole to delete the users from Role');
                    return;
                }


                //
                if (userids != null) {
                    //alert(currentSubRoleID);
                    //alert("UserIds: " + userids);

                    DeleteRoles(currentSubRoleID, userids)
                }

            }

        });



        var AddRoles = function (subRoleID, userids) {
            var urlString = '/Admin/AddUserRoles';
            //if (arrayOfValues.length == 0)
            //    return false;

            $.ajax({
                type: "Post",
                url: urlString,
                data: {

                    subRole: subRoleID,
                    Users: userids
                }

            });

            return false;
        };


        var DeleteRoles = function (subRoleID, userids) {
            var urlString = '/Admin/DeleteUserRoles';
            //if (arrayOfValues.length == 0)
            //    return false;

            $.ajax({
                type: "Post",
                url: urlString,
                data: {

                    subRole: subRoleID,
                    Users: userids
                }

            });

            return false;
        };


    </script>