@using EnVisage.Code
@using Prevu.Core.Main
@model EnVisage.Models.SkillsMatrixPageLoadModel
@{
	ViewBag.Title = "Skills Matrix";
}
@section stylesheets
{
    @Styles.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_STYLES_BASE_PATH, "prevu-skillmatrixstyles"))
}
@section Scripts
{
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-angularservices"))
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-skillsmatrix"))
	<script>
		function initSwitchers() {
			$('[name=groupMode]').switcher({
				on_state_content: 'Teams',
				off_state_content: 'None'
			});
			$('[name=groupMode]').parent().css("width", "93px");

			$('[name=barGroupMode]').switcher({
			    on_state_content: 'Groups',
			    off_state_content: 'Skills'
			});
			$('[name=barGroupMode]').parent().css("width", "83px");
		}

		var _editSkillsChanged = false;
		function onEditSkillsChanged() {
			_editSkillsChanged = true;
		}
		function resetEditSkillsChanged() {
			_editSkillsChanged = false;
		}
		function isEditSkillsChanged() {
			return _editSkillsChanged;
		}
		function showSaveMatrixDialog() {
			if (!$('#skills-header-form').valid())
				return;
			$('#save-matrix-modal').modal();
		}

		function canSaveSkillsMatrix() {
			return $('#skills-header-form').valid() && $('#save-matrix-form').valid();
		}

		function isValidHeader() {
			if ($('#skills-header-form').valid()) {
				$('#skills-header-form .validation-summary-errors')
                    .addClass('validation-summary-valid')
                    .removeClass('validation-summary-errors');
				return true;
			}
			return false;
		}

		function switchTeamGrouppingMode() {
			var smElement = $('#skillsMatrixPlaceholder').find('.skills-matrix-div');
			angular.element(smElement).scope().switchTeamGroupingMode();
		}

		function switchGraphGroupMode() {
		    var smElement = $('#skillsMatrixPlaceholder').find('.skills-matrix-div');
		    angular.element(smElement).scope().switchBarGraphGroupingMode();
		}

		function printPDF(a) {
			@*if ("@Request["id"]" == "") {
				alert("Please save the Skills Matrix first, only saved data will be exported to PDF");
				return false;
			}*@
			$(a).parent().parent().parent().removeClass('open');
			return true;
		}

		init.push(function () {
			saveLastPageVisited(window.location.pathname + window.location.search);

			initSwitchers();
			$(document).on('skills.Changed', function (e) {
				onEditSkillsChanged();
			}).on('skills.open-edit-skills-modal', function (e) {
				$('#edit-skills-dialog').modal('show');
			}).on('skills.close-edit-skills-modal', function (e) {
				$('#edit-skills-dialog').modal('hide');
            }).on('hide.bs.modal', '#edit-skills-dialog', function (e) {
				// skip modal hide event from datepickers
				if ($(e.target).attr('id') != 'edit-skills-dialog')
					return true; // close modal form
				if (isEditSkillsChanged()) {
                    bootbox.confirm("@Resources.Messages.Skill_Edit_UnsavedChanges", function (result) {
				        if (result) {
                            if (typeof resetEditSkillsChanged === 'function') {
                                resetEditSkillsChanged();
				            }
                            $('#edit-skills-dialog').modal('hide');
				        }
				    });

					return false; // DO NOT close modal form
				}
				return true;
			}).on('show.bs.modal', '#edit-skills-dialog', function (e) {
				resetEditSkillsChanged();
			});
		});

		function OpenActivityCalendarWindow() {
			var smElement = $('#skillsMatrixPlaceholder').find('.skills-matrix-div');
			angular.element(smElement).scope().openActivityCalendar();
		}
	</script>
}
@section pagemenu
{
	<ul class="nav navbar-nav navbar-right">
		<li class="dropdown" id="divSkillsMenu">
			<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
				<i class="fa fa-bars"></i><span>Page Options</span>&nbsp;<i class="fa fa-caret-down"></i>
			</a>
			<ul class="dropdown-menu dropdown-menu-right" id="skillsMenu">
                <li class="padding-xs-hr"><label><span class="switcherLbl">Group Charts by</span><input type="checkbox" data-key="barGroupMode" name="barGroupMode" class="switcher px" onclick="switchGraphGroupMode()" /></label></li>
                <li class="padding-xs-hr"><label><span class="switcherLbl">Group Matrix by</span><input type="checkbox" data-key="teamGroupMode" name="groupMode" class="switcher px" onclick="switchTeamGrouppingMode()" checked /></label></li>
			</ul>
		</li>
	</ul>
}
@{
    var userId = SecurityManager.GetUserPrincipal();
    var userManager = DependencyResolver.Current.GetService<IUserManager>();
    var pagePreferences = userManager.GetPagePreferences(Url.Action("Index", "Skills"), "skillsMatrix", userId);

    var json = Newtonsoft.Json.JsonConvert.SerializeObject(new
    {
        prefs = pagePreferences,
        model = Model
    });
}
<div id="erorMsgPlaceholder"></div>
<div class="panel" data-section="skillsMatrix">
	<div class="panel-body" style="border: 0;" ng-controller="skillsMatrixController" ng-init="init(@json)">
@if (SecurityManager.CheckSecurityObjectPermission(Areas.Skills, AccessLevel.Write))
{
		<div class="row" ng-controller="skillsEditController" ng-init="init(@json)">
			<div class="col-md-12">
				<div class="form-group no-margin-hr">
					<a class="btn btn-info noprint" ng-click="openEditForm()">
						Skills Administration
					</a>
				</div>
			</div>
			<div>
				@Html.Partial("_editSkills", json)
			</div>
		</div>
}
        <div class="row animated">
            <div class="col-lg-6 zone1row1" id="bg">
                <div class="panel panel-white panel-compact" style="padding:0px!important;">
                    <div class='panel-heading'>
                        <span class='panel-title ui-expander expanded'>
                            <a data-target="#graph-container" ng-class="{'collapsed':Widgets.BarGraphCollapsed}" ng-click="toggleBarGraph()">
                                <i class="panel-title-icon fa fa-bar-chart-o"></i><span>Skills Depth</span>
                            </a>
                        </span>                       
                    </div>
                    <div class='panel-body table-light collapse' id="graph-container" style="padding:20px;">
                        <div class="graph-container form-group-margin" id="skillBarGraphContainer">
			                <div id="skillBarGraph">
			                </div>
		                </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6" id="pc">
                <div class="panel panel-white panel-compact collapsible-horizontal" style="padding:0px!important;">
                    <div class='panel-heading' style="min-height:42px;" id="PCheading">
                        <span class='panel-title ui-expander expanded'>
                            <a data-target="#piePanel" ng-class="{'collapsed':Widgets.PieChartCollapsed}" ng-click="togglePieChart()">
                                <i class="panel-title-icon fa fa-bar-chart-o"></i><span id="pci">Skills Maturity</span>
                            </a>
                        </span>
                    </div>
                    <div class="vertical-text" id="vt" style="display: none; margin-top: 20px; margin-left: 68%; width: 290px; display: block;">
                            
                            <span>Pie Charts</span>
                        </div>
                    <div id="piePanel" class="colapse">
                        
                        <div id="headCont" class='panel-body table-light' style="padding:0;align-content:center;display:none">
                            <div id="psHead" class="col-sm-4 col-md-4" style="text-align:center">
		                        <h3>Past (2015)</h3>
	                        </div>
                            <div id="prHead" class="col-sm-4 col-md-4" style="text-align:center">
		                        <h3>Present (2016)</h3>
	                        </div>
                            <div id="ftHead" class="col-sm-4 col-md-4" style="text-align:center">
		                        <h3>Future (2017)</h3>
	                        </div>
                        </div>
                        <div class='panel-body table-light' id="pie-container" style="padding:20px;align-content:center;">
                            <div id="psCont" class="col-sm-4 col-md-4">
		                        <div class="graph-container form-group-margin" id="skillPieContainerPs">
			                        <div id="skillPiePs"></div>
		                        </div>
	                        </div>

	                        <div id="prCont" class="col-sm-4 col-md-4">
		                        <div class="graph-container form-group-margin" id="skillPieContainerPr">
			                        <div id="skillPiePr">
			                        </div>
		                        </div>
	                        </div>

	                        <div id="ftCont" class="col-sm-4 col-md-4">
		                        <div class="graph-container form-group-margin" id="skillPieContainerFt">
			                        <div id="skillPieFt"></div>
		                        </div>
	                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<div class="row animated">
			<div class="col-sm-12 col-lg-12 zone1row3" id="skillsMatrixPlaceholder">
				<div class="panel panel-white panel-compact zone1row3control">
					<div class='panel-heading'>
						<span class='panel-title'><i class="panel-title-icon fa fa-bar-chart-o"></i>Skills Matrix</span>
						<div class="pull-right" style="padding-right: 20px;"><a class="noShevron" href="javascript:OpenActivityCalendarWindow()" title="Open in Activity Calendar">Open Activity Calendar</a></div>
					</div>
					<div class='panel-body table-light'>
						@Html.Partial("_skillsMatrix", json)
					</div>
				</div>
			</div>

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