@model EnVisage.Models.ViewBoardModel
@using EnVisage.Code
@{
    ViewBag.Title = "Department Dashboard";
}
@section stylesheets
{
    <link href="~/Content/stylesheets/xeditable.css" rel="stylesheet" type="text/css">
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/forecastDashboardScripts.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    @Scripts.Render("~/bundles/angular-app-modules")
    <script src="~/Scripts/Angular/app.js"></script>
    <script src="~/Scripts/Angular/Controllers/activityCalendarController.js"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/slidersGroupController.js")"></script>
    <script src="~/Scripts/jquery.collapsiblepanel.js"></script>
    <script type="text/javascript">
		$().ready(function () {
			$('.collapsible').collapsiblePanel();

			selectDepartment('@(Model.Views.Count > 0 ? Model.Views.First().Id : Guid.Empty)');
			
		    var header = $('#panelCalendar').parent().find('.panel-heading'); //$('#panelTeamCalendar').find('.ui-widget-header').first();
		    header.click(function () {
		        var val = $('#list').val();
                @if(Model.Views.Count == 1){
                    <text>
		        val = '@Model.Views.First().Id';
                    </text>
                }
		        if (angular.element(document.getElementById('controller1')).scope().data == null) {
		            angular.element(document.getElementById('controller1')).scope().calendarFilters.ViewId = $('#list').val();
		            angular.element(document.getElementById('controller1')).scope().getCalendar();
		        }
		    });
		    $('#panelForecast').on('hidden.bs.collapse', function () {
		        $('#divForecastMenu').hide();
		    });
		    $('#panelForecast').on('shown.bs.collapse', function () {
		        $('#divForecastMenu').show();
		        if ($('#forecastBlock').children().length == 0)
		            loadForecastPanel($('#list').val());
		    });
		});

		function selectDepartment(id) {
		    if (id != '@Guid.Empty') {
		        $('#SelectedDepartmentId').val(id);
		        $('#indicator').show();
		    	//expand panels with charts and tricky tables or they will be messed up
		        if ($("#panelCalendar").hasClass("collapse in")) {
		            angular.element(document.getElementById('controller1')).scope().calendarFilters.ViewId = id;
		            angular.element(document.getElementById('controller1')).scope().getCalendar(); 
		        } else {
		            angular.element(document.getElementById('controller1')).scope().data = null;
		        }

		        $.post('/GLAccount/GetTeams', { 'departmentId': id }, function (data) {
					if (data != undefined) {
						$('div#DepartmentInfo').html(data);
						$('#indicator').hide();
					}
				});
		        if ($("#panelForecast").hasClass("collapse in")) {
		            loadForecastPanel(id);
		        } else {
		            $('#forecastBlock').html('');
		        }
            }
		}

        function loadForecastPanel(id) {
            //reset forecast block menu
            var paramsObj = {
                departmentId: id,
                mode: 'department'
            };
            var loadUrl = '@Url.Action("Index", "ForecastDashboard")?menuId=visibilitydropdown&additionalFilters=' + JSON.stringify(paramsObj);
            $("#forecastBlock")
                .load(loadUrl, function (response, status, xhr) {
                    if (status == "error") {
                        showErrorModal('Loading error', 'We are sorry but there was an error, please try again later.');
                    } else {
                        initForecastDashboard();
                    }
                });
        }
</script>
}
<style type="text/css">
	#capacity-table .headcol {
		left : -3px;
	}
</style>

<div class="table-light table-responsive">
    <input type="hidden" id="SelectedDepartmentId" name="SelectedDepartmentId" />
<div class="panel">
	<div class="panel-body" ng-app="app">
		@if (Model.Views.Count > 1)
		{
			<div class="form-group">
				<label class="col col-sm-1 control-label" style="margin-top: 5px;margin-right:5px;">Department</label>
				<div class="col col-sm-2">
					@Html.DropDownList("list", 
					Model.Views.Select(x => 
						new SelectListItem() { Value = x.Id.ToString(), Text = x.Name }),
			            new { @onchange = "selectDepartment($(event.target).val())", @class = "form-control" })
				</div>
				<div class="col col-sm-2">
					<span id="indicator" class="control-label" style="margin-left: 10px; display: none;"><img src="~/Content/images/load.gif" /> loading...</span>
				</div>
			</div>
		}

		<div id="DepartmentInfo">
			@if (Model.Views.Count > 0)
			{
                //Resources (Grouped by Team)
                Html.Partial("~/Views/GLAccount/_resourcesList.cshtml", Model);
            }
            else
            {
				<label class="label">You do not have access to any department</label>
			}
		</div>

        <div class="panel">
			<div class="panel-heading">
				<span class="panel-title ui-expander">
					<a data-toggle="collapse" data-target="#panelSkills" class="collapsed">
						<i class="panel-title-icon fa fa-wrench"></i>Skills
					</a>
				</span>
			</div>
			<div id="panelSkills" class="panel-collapse collapse">
				<div class="panel-body padding-sm">
					Skills info placeholder
				</div>
			</div>
        </div>

        
		<div class="panel">
			<div class="panel-heading">
				<span class="panel-title ui-expander">
					<a data-toggle="collapse" data-target="#panelCalendar" class="collapsed">
						<i class="panel-title-icon fa fa-calendar"></i>Department Calendar
					</a>
				</span>
			</div>
			<div id="panelCalendar" class="panel-collapse collapse">
				<div class="panel-body padding-sm">
					@Html.Partial("../CapacityManagement/_capacityManagement", Model)
				</div>
			</div>
		</div>

		<div class="panel widget-messages-alt">
			<div class="panel-heading">
				<span class="panel-title ui-expander">
					<a data-toggle="collapse" data-target="#panelForecast" class="collapsed">
						<i class="panel-title-icon fa fa-bar-chart-o"></i>Department Forecast
					</a>
				</span>
				<span class="pull-right">&nbsp;&nbsp;</span>
				<div class="btn-group btn-group-xs pull-right" id="divForecastMenu" style="display: none;">
					<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-bars"></i>&nbsp;<i class="fa fa-caret-down"></i></button>
					<ul class="dropdown-menu dropdown-menu-right" id="visibilitydropdown">
					</ul>
				</div>
			</div>
			<div id="panelForecast" class="panel-collapse collapse">
				<div class="panel-body padding-sm">
					<div class="messages-list" id="forecastBlock"></div>
				</div>
			</div>
		</div>

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