@using HeuristicLab.Clients.Hive.WebJobManager.ViewModels.User;
@using HeuristicLab.Clients.Access;
@model UserViewModel

<div class="animated fadeIn">

    @Html.Partial("Navbar", new HeuristicLab.Clients.Hive.WebJobManager.ViewModels.NavbarViewModel("User", Model.User))

    <ul class="nav nav-pills nav-justified">
        <li role="presentation"
            class="">
            <a asp-controller="User"
               asp-action="Index">
                <i class="fa fa-user"></i> Users
            </a>
        </li>
        <li role="presentation"
            class="active">
            <a asp-controller="User"
               asp-action="Groups">
                <i class="fa fa-group"></i> Groups
            </a>
        </li>
        <li role="presentation"
            class="">
            <a asp-controller="User"
               asp-action="Roles">
                <i class="fa fa-gavel"></i> Roles
            </a>
        </li>
    </ul>
    @Html.Partial("_ErrorMessage", Model.message)

    <div class="row"
         style="padding:10px; margin-right:0px!important">
        <div class="col-sm-4">
            <div class="btn-group btn-group-justified btn-block"
                 role="group" style="margin-bottom:-4px">

                <a class="btn btn-info btn-lg btn-block disabled"
                   style="width:6%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                    <i class="fa fa-group"></i> @Model.ugroups.Count Group@(Model.ugroups.Count != 1 ? "s" : "")
                </a>
                <a class="btn btn-success btn-block
                       @(Model.SelectedGroup.Id == Guid.Empty ? "active" : "")
                       "
                   asp-controller="User"
                   asp-action="SelectGroup"
                   asp-route-id="@Guid.Empty"
                   onclick="showGroup()"
                   style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                    <i class="fa fa-plus-circle"></i> 
                </a>
            </div>
            <div class="btn-group-vertical btn-block">
                
                @foreach (var group in Model.ugroups.OrderBy(x => x.Name))
                {
                    <a class="btn  btn-default @( group.Id == Model.SelectedGroup.Id ? "active" : "" )"
                       style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"
                       asp-controller="User"
                       asp-action="SelectGroup"
                       asp-route-id="@group.Id"
                       onclick="showGroup()">
                        @group.Name
                    </a>
                }
            </div>
        </div>
        <p style="display:none"
           id="saver"
           class="text-center">
            <br /><br /><br /><br /><br /><br /><br />
            <i class="fa fa-save fa-spin fa-5x" id="spinner">
            </i>
        </p>
        <p style="display:none"
           id="group"
           class="text-center">
            <br /><br /><br /><br /><br /><br /><br />
            <i class="fa fa-group fa-spin fa-5x" id="spinner">
            </i>
        </p>
        <p style="display:none"
           id="deleter"
           class="text-center">
            <br /><br /><br /><br /><br /><br /><br />
            <i class="fa fa-trash-o fa-spin fa-5x" id="spinner">
            </i>
        </p>

        <div class="col-sm-8"
             id="content"
             style="padding:5px; padding-left:10px;">
            @if (Model.SelectedGroup != null)
            {
                <div class="panel panel-default"
                     style="border-width:2px!important;padding:17px;
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                    <div class="row">
                        <h2 style="padding-left:20px">
                            @if (Model.SelectedGroup.Id != Guid.Empty)
                            {
                                <i class="fa fa-group"></i> @Model.SelectedGroup.Name
                            }
                            else
                            {
                                <i class='fa fa-plus-circle'></i> @("Add new group")

                            }
                        </h2>
                        <form class="form-horizontal"
                              method="post"
                              asp-action="saveGroup"
                              asp-controller="User" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="inpgroupname"
                                       class="col-sm-3 control-label">
                                    Group name
                                </label>
                                <div class="col-sm-8">
                                    <input type="text"
                                           class="form-control"
                                           id="inpgroupname"
                                           name="inpgroupname"
                                           placeholder="Group name"
                                           onkeydown="triggerSave()"
                                           value="@Model.SelectedGroup.Name">
                                </div>
                            </div>
                            <input type="text"
                                   style="display:none"
                                   id="u"
                                   name="u"
                                   value="@Model.SelectedGroup.Id" />

                            @if (Model.SelectedGroup.Id != Guid.Empty)
                            {
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        Group id
                                    </label>
                                    <label class="col-sm-8 control-label" style="text-align:left">
                                        @Model.SelectedGroup.Id
                                    </label>
                                    <input type="text"
                                           style="display:none"
                                           id="u"
                                           name="u"
                                           value="@Model.SelectedGroup.Id" />
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                       @Model.SelectedGroupMembers.Count members
                                    </label>
                                    <div class="col-sm-8 control-label" >

                                        @foreach (var member in Model.SelectedGroupMembers)
                                        {
                                            <div class="row">
                                                <p class="col-sm-10" style="text-align:left">

                                                    @if (member is User)
                                                    {
                                                        var umember = (User)member;
                                                        <i class="fa fa-user"></i> @(umember.UserName + "(" + umember.FullName + ")")


                                                    }
                                                    else if (member is UserGroup)
                                                    {
                                                        var gmember = (UserGroup)member;
                                                        <i class="fa fa-group"></i> @(gmember.Name)

                                                    }

                                                </p>
                                                <p class="col-sm-2">
                                                    <a class="btn btn-danger"
                                                       asp-controller="User"
                                                       asp-action="deleteMember"
                                                       asp-route-g="@Model.SelectedGroup.Id"
                                                       asp-route-m="@member.Id"
                                                       onclick="showDeleter()">
                                                        <i class="fa fa-trash-o"></i>
                                                    </a>
                                                </p>
                                            </div>
                                        }
                                        @if (Model.SelectedGroupMembers.Count == 0)
                                        {
                                            <p style="text-align:left">This group currently has no members</p>

                                        }
                                    </div>
                                </div>
                            }
                            <div class="row" style="margin-left:10px;margin-right:10px;margin-top:-10px">
                                <a class="btn btn-primary"
                                   data-toggle="collapse"
                                   href="#addmembers"
                                   aria-expanded="false"
                                   aria-controls="addmembers"
                                   style="margin:10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                                    Add members
                                </a>
                                <div class="collapse"
                                     id="addmembers">
                                    <div class="panel panel-primary col-sm-6" style="padding:0px">
                                        <div class="panel-heading">
                                            <p>
                                                <i class="fa fa-user"></i> Users
                                                <button class="btn btn-sm btn-default"
                                                        type="button"
                                                        onclick="selectAll('userstoadd'); triggerSave()">
                                                    Select all
                                                </button>
                                                <button class="btn btn-sm btn-default"
                                                        type="button"
                                                        onclick="deselectAll('userstoadd'); triggerSave()">
                                                    Deselect all
                                                </button>
                                            </p>
                                        </div>
                                        <div class="panel-body">
                                            @foreach (var user in Model.users)
                                            {
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox"
                                                               name="userstoadd"
                                                               @(Model.SelectedGroupMembers.Contains(user) ? "checked disabled" : "")
                                                               value="@user.Id"
                                                               onclick="triggerSave()">
                                                        @user.UserName (@user.FullName)
                                                    </label>
                                                </div>

                                            }
                                        </div>
                                    </div>
                                    <div class="panel panel-primary col-sm-6" style="padding:0px">
                                        <div class="panel-heading">
                                            <p>
                                                <i class="fa fa-group"></i> Groups

                                                <button class="btn btn-sm btn-default"
                                                        type="button"
                                                        onclick="selectAll('groupstoadd'); triggerSave()">
                                                    Select all
                                                </button>
                                                <button class="btn btn-sm btn-default"
                                                        type="button"
                                                        onclick="deselectAll('groupstoadd'); triggerSave()">
                                                    Deselect all
                                                </button>
                                            </p>
                                        </div>
                                        <div class="panel-body">
                                            @foreach (var group in Model.ugroups)
                                            {
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox"
                                                               name="groupstoadd"
                                                               @(Model.SelectedGroupMembers.Contains(group) ||
                                                                    Model.SelectedGroup.Id == group.Id ? "checked disabled" : "")
                                                               value="@group.Id"
                                                               onclick="triggerSave()">
                                                        @group.Name @( Model.SelectedGroup.Id == group.Id ? "(selected group)" : "")
                                                    </label>
                                                </div>

                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if (Model.SelectedGroup.Id == Guid.Empty)
                            {//New goup
                                <div class="form-group">
                                    <div class="col-sm-offset-3 col-sm-9">
                                        <button type="submit"
                                                id="inpsaver"
                                                disabled
                                                class="btn btn-default"
                                                onclick="showSaver()">
                                            <i class="fa fa-plus-circle"></i> Add group
                                        </button>
                                    </div>
                                </div>


                            }
                            else
                            {//Changing an existing group

                                <div class="form-group">
                                    <div class="col-sm-offset-3 col-sm-3">
                                        <button type="submit"
                                                id="inpsaver"
                                                disabled
                                                class="btn btn-default"
                                                onclick="showSaver()">
                                            <i class="fa fa-save"></i> Save changes
                                        </button>
                                    </div>
                                    <div class="col-sm-5">
                                        <a class="btn btn-danger pull-right"
                                           asp-controller="User"
                                           asp-action="deleteGroup"
                                           asp-route-id="@Model.SelectedGroup.Id"
                                           onclick="showDeleter()">
                                            <i class="fa fa-trash-o"></i> Delete group
                                        </a>
                                    </div>
                                </div>



                            }
                            <script type="text/javascript">
                                function triggerSave() {
                                    if ($("#inpgroupname").val() != "") {
                                        document.getElementById("inpsaver").className = "btn btn-lg btn-success";
                                        document.getElementById("inpsaver").disabled = false;
                                    }
                                    else {
                                        document.getElementById("inpsaver").className = "btn btn-default";
                                        document.getElementById("inpsaver").disabled = true;

                                    }

                                }
                            </script>
                        </form>

                    </div>
                </div>

            }
        </div>
    </div>
    <script type="text/javascript">
        function showSaver() {
            document.getElementById("content").style.display = "none";
            document.getElementById("saver").style.display = "";

        }
        function showGroup() {
            document.getElementById("content").style.display = "none";
            document.getElementById("group").style.display = "";

        }
        function showDeleter() {
            document.getElementById("content").style.display = "none";
            document.getElementById("deleter").style.display = "";
        }
        function selectAll(name) {
            checkboxes = document.getElementsByName(name);
            for (var i = 0, n = checkboxes.length; i < n; i++) {
                checkboxes[i].checked = true;
            }
        }
        function deselectAll(name) {
            checkboxes = document.getElementsByName(name);
            for (var i = 0, n = checkboxes.length; i < n; i++) {
                if (checkboxes[i].disabled == false)
                    checkboxes[i].checked = false;
            }
        }
    </script>
</div>