@model EnVisage.Models.RoleModel
@using EnVisage.Code.HtmlHelpers

@{
    ViewBag.Title = (Model.Id != Guid.Empty) ? "Edit " + Model.Name : "Add New Role"; 
}

@section Scripts
{
    <link rel="stylesheet" href="~/Content/stylesheets/jquery.treegrid.css">
    <script type="text/javascript" src="~/Scripts/jquery.treegrid.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.treegrid.bootstrap3.js"></script>
    <script type="text/javascript">
        emulateNavUrl = "/Role";

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

            $('.tree').treegrid();

            getProjectTree();

            $("input[name='areaswrite']").click(function() {
                var val = $(this).val();
                var read = $("input[value='" + val + "'][name='areasread']");
                if (read.length > 0 && this.checked)
                    setChecked(read);
            });
            $('#btnsave').click(function () {
                if ($(this).parents('form').valid())
                    blockUI();
            });
        });

        function setChecked(o) {
            o.prop("checked", "checked");
        }

        function getProjectTree() {
        	$.post('@Url.Action("GetProjectAccessTree", "Role")?roleId=@Model.Id', null, function (data) {
        		if (data != undefined) {
        			ProjectTree.data = data;
        			ProjectTree.initData();
        			var table = $('<table class="tree"></table>');
        			$(table).append('<tr class="treegrid-1" style="border-top:0;"><td style="font-weight:600;border-top-width:0">Projects</td><td style="border-top-width:0;text-align: center;">&nbsp;R&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;W</td></tr>');
        			for (var i = 0; i < data.length; i++) {
        				var company = data[i];
        				var cmp = ProjectTree.getDataObjectById(data[i].Id);
        				var tr = buildProjectTreeNode(company.Id, company.Name, 'company', company.Clients.length > 0, cmp.Read, cmp.Write);
        				$(table).append(tr);
        				for (var c = 0; c < company.Clients.length; c++) {
        					var client = company.Clients[c];
        					var clt = ProjectTree.getDataObjectById(client.Id);
        					var tr = buildProjectTreeNode(client.Id, client.Name, 'client', client.Projects.length > 0, clt.Read, clt.Write);
        					$(table).append(tr);
        					for (var p = 0; p < client.Projects.length; p++) {
        						var project = client.Projects[p];
        						var tr = buildProjectTreeNode(project.Id, project.Name, 'project', false, project.Read, project.Write);
        						$(table).append(tr);
        					}
        				}
        			}

        			$('#projectTree').append(table);

        			$('.tree > tbody > tr > td > input').click(function (event) {
        				var id = $(event.target).parent().parent()[0].id;
        				var attrName = $(event.target).attr('name');
        				var type = (attrName == 'projectlistread' || attrName == 'clientread' || attrName == 'companyread') ? 'read' : 'write';
        				ProjectTree.changeDataValue(id, type);
        			});

        			$('span.glyphicon').click(function (event) {
        				var id = $(event.target).parent().parent().attr('id');
        				ProjectTree.showHideTree(id);
        				if ($(event.target).hasClass('glyphicon-chevron-down')) {
        					$(event.target).removeClass('glyphicon-chevron-down');
        					$(event.target).addClass('glyphicon-chevron-right');
        				} else {
        					$(event.target).removeClass('glyphicon-chevron-right');
        					$(event.target).addClass('glyphicon-chevron-down');
        				}
        			});
        		}
        	});
        }

        function buildProjectTreeNode(id, name, type, hasChilds, readVal, writeVal) {
        	var tr = $('<tr class="treegrid-' + id + '" id="' + id + '"></tr>');
        	if (hasChilds)
        		$(tr).addClass('treegrid-expanded');

        	var nameCol = '<td style="border-width=0px;">';
        	if (type == 'client')
        		nameCol += '<span class="treegrid-indent"></span>';
        	if (type == 'project')
        		nameCol += '<span class="treegrid-indent"></span><span class="treegrid-indent"></span>';
        	nameCol += '<span class="treegrid-expander ';
        	if (hasChilds)
        		nameCol += 'glyphicon glyphicon-chevron-down';
        	nameCol += '"></span>' + name + '</td>';
        	$(tr).append(nameCol);

        	var permCol = $('<td style="border-width=0px;"></td>');
        	var input = $('<input type="checkbox" class="custominput" autocomplete="off" value="' + id + '">');
        	var hidden = $('<input type="hidden" name="overriden"/>');

        	var obj = ProjectTree.getDataObjectById(id);
        	if (obj.Type == 'company') {
        		$(input).attr('name', 'companyread');
        	} else if (obj.Type == 'client') {
        		$(input).attr('name', 'clientread');
        		$(input).attr('companyr', obj.Parent);
        	} else if (obj.Type == 'project') {
        		$(input).attr('name', 'projectlistread');
        		$(input).attr('clientr', obj.Parent);
        		var client = ProjectTree.getDataObjectById(obj.Parent);
        		$(input).attr('companyr', client.Parent);
        	}

        	if (readVal == 1) {
        		$(input).prop('checked', 'checked');
        	}

        	$(permCol).append(input);
        	$(permCol).append(hidden);

        	var input = $('<input type="checkbox" class="custominput" autocomplete="off" value="' + id + '"/>');

        	if (obj.Type == 'company') {
        		$(input).attr('name', 'companywrite');
        	} else if (obj.Type == 'client') {
        		$(input).attr('name', 'clientwrite');
        		$(input).attr('companyw', obj.Parent);
        	} else if (obj.Type == 'project') {
        		$(input).attr('name', 'projectlistwrite');
        		$(input).attr('clientw', obj.Parent);
        		var client = ProjectTree.getDataObjectById(obj.Parent);
        		$(input).attr('companyw', client.Parent);
        	}

			if (writeVal == 1) {
        		$(input).attr('checked', 'checked');
        	}

        	$(permCol).append(input);
        	$(permCol).append(hidden);
        	$(tr).append(permCol);

        	return tr;
        }

        var ProjectTree = new Object();
        ProjectTree.dataObjects = new Array();

        ProjectTree.initData = function () {
        	if (ProjectTree.data != undefined) {
        		for (var i = 0; i < ProjectTree.data.length; i++) {
        			var company = ProjectTree.data[i];
        			var cmp = new Object();
        			cmp.Id = company.Id;
        			cmp.Type = 'company';
        			cmp.Parent = undefined;
        			cmp.Childs = new Array();
        			var isAllClientsReadEnabled = true;
        			var isAllClientsWriteEnabled = true;
        			for (var c = 0; c < company.Clients.length; c++) {
        				var client = company.Clients[c];
        				cmp.Childs.push(client.Id);
        				var clt = new Object();
        				clt.Id = client.Id;
        				clt.Type = 'client';
        				clt.Parent = cmp.Id;
        				clt.Childs = new Array();
        				var isAllProjectsReadEnabled = true;
        				var isAllProjectsWriteEnabled = true;
        				for (var p = 0; p < client.Projects.length; p++) {
        					var project = client.Projects[p];
        					clt.Childs.push(project.Id);
        					var prg = new Object();
        					prg.Id = project.Id;
        					prg.Type = 'project';
        					prg.Parent = clt.Id;
        					prg.Childs = new Array();
        					prg.Read = project.Read;
        					prg.Write = project.Write;

        					if (prg.Read == 0)
        						isAllProjectsReadEnabled = false;
        					if (prg.Write == 0)
        						isAllProjectsWriteEnabled = false;

        					ProjectTree.dataObjects.push(prg);
        				}

        				if (isAllProjectsReadEnabled) {
        					clt.Read = 1;
        				} else {
        					clt.Read = 0;
        					isAllClientsReadEnabled = false;
        				}
        				if (isAllProjectsWriteEnabled) {
        					clt.Write = 1;
        				} else {
        					clt.Write = 0;
        					isAllClientsWriteEnabled = false;
        				}

        				ProjectTree.dataObjects.push(clt);
        			}

        			cmp.Read = isAllClientsReadEnabled ? 1 : 0;
        			cmp.Write = isAllClientsWriteEnabled ? 1 : 0;
        			ProjectTree.dataObjects.push(cmp);
        		}
        	}
        }

        ProjectTree.getDataObjectById = function (id) {
        	for (var i = 0; i < ProjectTree.dataObjects.length; i++) {
        		var item = ProjectTree.dataObjects[i];
        		if (item.Id == id)
        			return item;
        	}

        	return undefined;
        }

        ProjectTree.changeDataValue = function (id, type) {
        	var obj = ProjectTree.getDataObjectById(id);
        	var val = undefined;
        	if (type == 'read') {
        		val = obj.Read;
        	} else if (type == 'write') {
        		val = obj.Write;
        	}

        	var nextVal = ProjectTree.getNextVal(obj.Type, val);
        	obj = ProjectTree.setDataValue(id, type, nextVal);
        	ProjectTree.setParentValues(obj);

        }

        ProjectTree.getNextVal = function (type, val) {
        	if (val == 0)
        		return 1;
        	if (val == 1)
        		return 0;
        }

        ProjectTree.getReadWriteValById = function (id) {
        	var obj = ProjectTree.getDataObjectById(id);
        	var readWrite = new Object();
        	if (obj != undefined) {
        		readWrite.Read = obj.Read;
        		readWrite.Write = obj.Write;
        	}

        	return readWrite;
        }

        ProjectTree.setDataValue = function (id, valType, val) {
        	var obj = ProjectTree.getDataObjectById(id);

        	if (valType == 'read') {
        		obj.Read = val;
        	}
        	else if (valType == 'write') {
        		obj.Write = val;
        		if (val == 1 && obj.Read != 1) {
        			obj.Read = val;
        			ProjectTree.setCheckboxValue(obj, 'read', val);
        		}
        	}
        	ProjectTree.setCheckboxValue(obj, valType, val);

        	if (obj.Type != 'project') {
        		for (var i = 0; i < obj.Childs.length; i++) {
        			var ch = obj.Childs[i];
        			ProjectTree.setDataValue(ch, valType, val);
        		}
        	}

        	return obj;
        }

        ProjectTree.setParentValues = function (obj) {
        	if (obj.Parent != undefined) {
        		var parent = ProjectTree.getDataObjectById(obj.Parent);
        		var v = ProjectTree.checkIsAllChecked(obj.Parent, 'read') ? 1 : 0;
        		parent.Read = v;
        		ProjectTree.setCheckboxValue(parent, 'read', v);

        		v = ProjectTree.checkIsAllChecked(obj.Parent, 'write') ? 1 : 0;
        		parent.Write = v;
        		ProjectTree.setCheckboxValue(parent, 'write', v);

        		if (parent.Parent != undefined)
        			ProjectTree.setParentValues(parent);
        	}
        }

        ProjectTree.setCheckboxValue = function (obj, permissionType, permissionVal) {
        	var input = undefined;
        	if ('read' == permissionType) {
        		if ('project' == obj.Type) {
        			input = $($('tr#' + obj.Id).children('td')[1]).children('input[name="projectlistread"]');
        		}
        		else if ('client' == obj.Type) {
        			input = $($('tr#' + obj.Id).children('td')[1]).children('input[name="clientread"]');
        		}
        		else if ('company' == obj.Type) {
        			input = $($('tr#' + obj.Id).children('td')[1]).children('input[name="companyread"]');
        		}
        	}
        	else if ('write' == permissionType) {
        		if ('project' == obj.Type) {
        			input = $($('tr#' + obj.Id).children('td')[1]).children('input[name="projectlistwrite"]');
        		}
        		else if ('client' == obj.Type) {
        			input = $($('tr#' + obj.Id).children('td')[1]).children('input[name="clientwrite"]');
        		}
        		else if ('company' == obj.Type) {
        			input = $($('tr#' + obj.Id).children('td')[1]).children('input[name="companywrite"]');
        		}
        	}

        	if (input != undefined) {
        		$(input).prop('checked', (permissionVal == 1 || permissionVal == 2))
        	}
        }

        ProjectTree.checkIsAllChecked = function (id, type) {
        	var obj = ProjectTree.getDataObjectById(id);
        	var allChecked = true;
        	for (var i = 0; i < obj.Childs.length; i++) {
        		var child = ProjectTree.getDataObjectById(obj.Childs[i]);
        		if (type == 'read' && child.Read == 0)
        			allChecked = false;
        		if (type == 'write' && child.Write == 0)
        			allChecked = false;
        	}

        	return allChecked;
        }

        ProjectTree.showHideTree = function (id) {
        	var obj = ProjectTree.getDataObjectById(id);
        	for (var i = 0; i < obj.Childs.length; i++) {
        		var child = ProjectTree.getDataObjectById(obj.Childs[i]);
        		if (child.Childs.length > 0) {
        			ProjectTree.showHideTree(child.Id);
        		}
        		var isHide = $('.treegrid-' + child.Id).css('display') == 'none';
        		if (isHide)
        			$('.treegrid-' + child.Id).css('display', 'table-row');
        		else
        			$('.treegrid-' + child.Id).css('display', 'none');
        	}
        }
    </script>
}

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

@using (Html.BeginForm("Edit", "Role", FormMethod.Post, new { @class = "panel form-horizontal", id = "frmEdit" }))
{
	@Html.AntiForgeryToken()
    @Html.HiddenFor(t=>t.Id)
    <div class="panel-body">
		<div class="form-group">
			@Html.LabelFor(model => model.Name, new { @class = "col-sm-2 control-label" })
			<div class="col-sm-10">
				@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
			</div>
		</div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="UserName">Permissions</label>
            <div class="col-sm-10">
                <table cellspacing="0" border="0">
                    <tbody>
                        <tr>
                            <td style="padding-top: 7px; vertical-align:top;">
                                <table>
                                    <tbody>
                                        @Html.GetAreaItemsList(@Url, Model)                            
                                    </tbody>
                                </table>
                            </td>
							<td style="padding-top: 7px;padding-left:50px;vertical-align:top;" id="projectTree">
								@*<table class="tree">
									<tbody>
										@Html.GetProjectTree(@Url, null, Model.Id)
									</tbody>
								</table>*@
							</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
		@Html.ValidationSummary(false, "The role could not be saved due to the following errors:")
		<div class="form-group" style="margin-bottom: 0;">
			<div class="col-sm-offset-2 col-sm-10">
				<a class="btn btn-primary" href="@Url.Action("Index", "Role")"><i class="fa fa-backward"></i> Back to list</a>
                <button type="submit" class="btn btn-success" id="btnsave"><i class="fa fa-save"></i> Save</button>
                @if (Model.Id != Guid.Empty)
                {
                <a id="btnDelete" class="btn btn-danger" href="@Url.Action("Delete", "Role", new {@id = Model.Id})"><i class="fa fa-trash-o"></i> Delete</a>
                }
			</div>
		</div> 
	</div>
}