@model EnVisage.Models.TeamboardModel
@using EnVisage.Code;
@using EnVisage.Code.HtmlHelpers;
@using EnVisage.Models;
@using Microsoft.AspNet.Identity;
@{
    ViewBag.Title = Model.SelectedTeamName;
}
@section stylesheets
{
    <link href="~/Content/stylesheets/xeditable.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        #teamResourcesNewBtn:after {content: ""!important}
    </style>
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
    <script src="@Url.Content("~/Scripts/CustomValidation.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/sliders.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/calendarMethods.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Plugins/ScenarioDetailsGrid.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Plugins/PageState.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Plugins/TeamResourcesBrowser.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/forecastDashboardScripts.js")" type="text/javascript"></script>
    @Scripts.Render("~/bundles/angular-app-modules")
    <script src="@Url.Content("~/Scripts/Angular/app.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/scenarioDetailController.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/costSavingController.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/activityCalendarController.js")"></script>
    <script src="@Url.Content("~/Scripts/URIjs.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/teamDetailsCalendarController.js")"></script>
    <script src="@Url.Content("~/Scripts/Angular/Controllers/slidersGroupController.js")"></script>
    <script type="text/javascript">
        var teamId = '@(!Model.SelectedTeamId.Equals(Guid.Empty) ? Model.SelectedTeamId.ToString() : "")';
        var _teamPageState = null;
        // SA. Forecast Graph panel collapse state preferences
        var forecastGraphDataSection = "ForecastGraphWidget";
        var teamResourcesDataSection = "TeamResourcesWidget";
        var capacityPlanningDataSection = "CapacityPlanningWidget";
        var forecastGraphPrefKey = "ForecastGraphCollapsed";
        var teamResourcesPrefKey = "TeamResourcesCollapsed";
        var capacityPlanningPrefKey = "CapacityPlanningCollapsed";
        var fired = false;

        function getSelectedTeamId() {
            return teamId;
        }

        function noTeamSelected() {
            return (!teamId || (teamId.length < 1));
        }

        function initPanels() {
            initTeamForecastWidgets();
            initTeamResourcesWidget();            
            initActivityCalendar();
            initCapacityPlanner();
            
        }

        function initTeamResourcesWidget() {     
            var chevron = $("#teamResources").find(".panel.collapsible-horizontal").find("a");
            $(chevron).on('click', function () {
                toggleHorizontalResourcesPanelCollapse(this, false);
            });

            // Loading preferences
            var prefs = loadUserPagePreferences(teamResourcesDataSection);
            if (prefs && (prefs.length > 0)) {
                for(var index = 0; index < prefs.length; index++) {
                    if (prefs[index].Key == teamResourcesPrefKey) {
                        var prefValue = prefs[index].Value;
                        if (prefValue !== undefined) {
                            var isCollapsed = isHorizontalPanelCollapsed(chevron);
                            
                            if (prefValue != isCollapsed) {
                                toggleHorizontalResourcesPanelCollapse(chevron, true);
                            }
                        }
                        break;
                    }
                }
            }

            var teamId = getSelectedTeamId();

            $("#TeamInfo").teamResourcesBrowser({
                teamId: teamId,
                createItemButtonPlaceholder: 'teamResourcesNewBtn',
                allowCreateItem: @(SecurityManager.CheckSecurityObjectPermission(Areas.Resources, AccessLevel.Write) ? "true" : "false"),
                createItemUrl: '@Url.Action("Edit", "PeopleResource")',
                viewItemUrl: '@Url.Action("Details", "PeopleResource")',
                editItemUrl: '@Url.Action("Edit", "PeopleResource")',
                deleteItemUrl: '@Url.Action("Delete", "PeopleResource")',
            });
        }

        function initTeamForecastWidgets() {
            var chevron = $("#teamForecastGraphPlaceholder").find(".panel.collapsible-vertical").find("a");
            $(chevron).on('click', function () {
                toggleVerticalPanelCollapse(this, false);
            });

            // Loading preferences
            var prefs = loadUserPagePreferences(forecastGraphDataSection);
            var CPprefs = loadUserPagePreferences(capacityPlanningDataSection);
            var cPCollapsed= false;
            if (CPprefs && (CPprefs.length > 0)) {
                for(var index = 0; index < CPprefs.length; index++) {
                    if (CPprefs[index].Key == capacityPlanningPrefKey) {
                        cPCollapsed = CPprefs[index].Value;
                        break;
                    }
                }
            }
 

            if (prefs && (prefs.length > 0)) {
                for(var index = 0; index < prefs.length; index++) {
                    if (prefs[index].Key == forecastGraphPrefKey) {
                        var prefValue = prefs[index].Value;
                        if (prefValue !== undefined) {
                            var chevron = $("#teamForecastGraphPlaceholder").find(".panel.collapsible-vertical").find("a");
                            var isCollapsed = isHorizontalPanelCollapsed(chevron);
                            if (prefValue != isCollapsed) {
                                $(chevron).toggleClass("collapsed");
                                if (cPCollapsed){
                                    //   $('#capacityPlanner').find('.panel-body').slideUp();
                                   
                                    isZone2Row1Collapsed=true;
                                }
                                $(chevron).parents('.panel').find(".row.padding-sm").slideUp();
                                isZone1Row1Collapsed=true;
                            }
                        }
                        break;
                    }
                }
            }
            reAlignDivs();
        }
        function initCapacityPlanner() {
            var chevron = $("#capacityPlanner").find(".otherside").find("a");
            console.log(chevron.length);
            $(chevron).on('click', function () {
                toggleHorizontalCapacityPanelCollapse(this, false);
            });

            var prefs = loadUserPagePreferences(capacityPlanningDataSection);
            if (prefs && (prefs.length > 0)) {
                for(var index = 0; index < prefs.length; index++) {
                    if (prefs[index].Key == capacityPlanningPrefKey) {
                        var prefValue = prefs[index].Value;

                        if (prefValue !== undefined) {
                            var isCollapsed = isHorizontalPanelCollapsed(chevron);
                            if (prefValue != isCollapsed) {
                                toggleHorizontalCapacityPanelCollapse(chevron, true);
                            }
                        }
                        break;
                    }
                }
            }
        }

        function initActivityCalendar() {
                if (teamId && (teamId.length > 0)) {
                    angular.element(document.getElementById('controller1')).scope().calendarFilters.TeamId = teamId;
                } else {
                    angular.element(document.getElementById('controller1')).scope().data = null;
                }
            }

            function isHorizontalPanelCollapsed(activeA) {
                return $(activeA).hasClass("collapsed");
            }

            function toggleHorizontalCapacityPanelCollapse (activeA, noDelay) {
                $(activeA).toggleClass("collapsed");
                var isCollapsed = $(activeA).hasClass("collapsed");
                var graphChevron = $("#teamForecastGraphPlaceholder").find(".panel.collapsible-vertical").find("a");
                var graphCollapsed = $(graphChevron).hasClass("collapsed");
                if (isCollapsed) {
                    var panelBody = $(activeA).closest(".panel-compact").find(".panel-body")
                    var panelBodyHeight = panelBody.height();
                    $('#capacityPlanner').removeClass("col-lg-5").addClass("col-lg-1");
                    $('#teamForecastGraphPlaceholder').removeClass("col-lg-7").addClass("col-lg-11");
                    $(activeA).closest(".panel-compact").find(".row.padding-sm").fadeOut(noDelay ? 0 : 600, function () {
                        panelBody.height(panelBodyHeight);
                        
                        $(activeA).find("span, i").fadeOut(noDelay ? 0 : 300, function () {
                            $(activeA).closest(".panel-heading").css("padding-bottom", "28px");
                            
                            $(activeA).closest(".panel-compact").find(".vertical-text").closest("div")
                                .width(panelBodyHeight - 20 - 20).show();
                            $('#jq-flot-graph-FD').width($('#teamForecastGraphPlaceholder').width() -20);
                            $("#capacity-container").height($("#graph-container").height()+1);
                            if(graphCollapsed){
                             //   $('#capacityPlanner').find('.panel-body').slideUp();
                                isZone2Row1Collapsed=true;
                            }

                        });
                    });

                }
                else
                {
                    // Panel should be expanded
                    $(activeA).closest(".panel-compact").find(".vertical-text").closest("div").fadeOut(noDelay ? 0 : 200, function() {
                        $('#teamForecastGraphPlaceholder').removeClass("col-lg-11").addClass("col-lg-7");
                        $('#capacityPlanner').removeClass("col-lg-1").addClass("col-lg-5");
                        
                        setTimeout(function () {
                            $(activeA).closest(".panel-compact").find(".row.padding-sm").show(function () {
                                $('#capacityPlanner').find('.panel-body').slideDown();
                                isZone2Row1Collapsed=false;
                                $(activeA).closest(".panel-heading").css("padding-bottom", "");
                                $(activeA).find("i, span").fadeIn(noDelay ? 0 : 400);
                                
                                $('#jq-flot-graph-FD').width($('#teamForecastGraphPlaceholder').width() -20);
                                $('#arrowHolder').find('i').show();
                                setTimeout(function () {
                                    if($('#simpleModeForm').height() == 0)
                                        $("#capacity-container").height(275);
                                    
                                    else $("#capacity-container").height($('#simpleModeForm').height() + $('#simpleModeGrid').height() + 10);
                                    
                                }, 800);
                                
                            });
                        }, noDelay ? 0 : 400);
                    });
                }

                if (typeof redrawFreezeColumn === "function") {
                    // Redraw freeze column for forecast table (see _forecastDashboard)
                    redrawFreezeColumn();
                }

                // Saveing preferences
                var prefs = [];
                prefs.push({
                    Key: capacityPlanningPrefKey,
                    Value: isCollapsed
                });

                saveUserPagePreferences(prefs, capacityPlanningDataSection); //reactivate this
            }


            function toggleHorizontalResourcesPanelCollapse (activeA, noDelay) {
                $(activeA).toggleClass("collapsed");
                var isCollapsed = $(activeA).hasClass("collapsed");
                if (isCollapsed) {
                    var panelBody = $(activeA).closest(".panel-compact").find(".panel-body")
                    var panelBodyHeight = panelBody.height();

                    $(activeA).closest(".panel-compact").find(".row").fadeOut(noDelay ? 0 : 600, function () {
                        panelBody.height(panelBodyHeight);

                        $(activeA).find("span, i").fadeOut(noDelay ? 0 : 300, function () {
                            $('#teamResourcesNewBtn').hide();
                            $('#TeamInfo').hide();
                            $(activeA).closest(".panel-heading").css("padding-bottom", "28px");
                            $('#teamResources').removeClass("col-lg-4").addClass("col-lg-1");
                            $('#teamCalendar').removeClass("col-lg-8").addClass("col-lg-11");
                            $(activeA).closest(".panel-compact").find(".vertical-text").closest("div")
                                .width(panelBodyHeight - 20 - 20).show();
                            $("#teamResources-container").height(190);
                        });
                    });

                }
                else
                {
                    // Panel should be expanded
                    $(activeA).closest(".panel-compact").find(".vertical-text").closest("div").fadeOut(noDelay ? 0 : 200, function() {
                        $('#teamCalendar').removeClass("col-lg-11").addClass("col-lg-8");
                        $('#teamResources').removeClass("col-lg-1").addClass("col-lg-4");
                        setTimeout(function () {
                            $(activeA).closest(".panel-compact").find(".row").show(function () {
                                $(activeA).closest(".panel-heading").css("padding-bottom", "");
                                $(activeA).find("i, span").fadeIn(noDelay ? 0 : 400);
                                $(activeA).closest(".panel-compact").find(".row").css('padding-top', '0!important');
                            });
                        }, noDelay ? 0 : 400);
                        $('#teamResourcesNewBtn').show();
                        $('#TeamInfo').show();
                        setTimeout(function () {
                            $("#teamResources-container").height($('#TeamInfo').height());
                        }, 800);
                   
                    });
                    //$("#teamResources-container").height($('.resourceTable').height() + 15);
                }

                //if (typeof redrawFreezeColumn === "function") {
                //    // Redraw freeze column for forecast table (see _forecastDashboard)
                //    redrawFreezeColumn();
                //}

                // Saveing preferences
                var prefs = [];
                prefs.push({
                    Key: teamResourcesPrefKey,
                    Value: isCollapsed
                });

                saveUserPagePreferences(prefs, teamResourcesDataSection);
            }
            var isZone1Row1Collapsed = false;
            var isZone2Row1Collapsed = false;
            var isZone2Row2Collapsed = false;
                  
            var Zone1Row1= $(".zone1row1");
            var Zone1Row1Control= $(".zone1row1control");
                
            var Zone2Row1=$(".zone2row1");
            var Zone2Row1Control=$(".zone2row1control");

            var Zone1Row2=$(".zone1row2");
            var Zone1Row2Control=$(".zone1row2control");
                
            var Zone2Row2=$('.zone2row2');
            var Zone2Row2Control=$('.zone2row2control');

            var Zone1Row3=$('.zone1row3');
            var Zone1Row3Control=$('.zone1row3control');

            function setDivHomes(){
                Zone1Row1Control.appendTo(Zone1Row1);
                Zone2Row1Control.appendTo(Zone2Row1);
                Zone1Row2Control.appendTo(Zone1Row2);
                Zone2Row2Control.appendTo(Zone2Row2);
                Zone1Row3Control.appendTo(Zone1Row3);

            }
            function reAlignDivs(){
               
                setDivHomes();
                // move all zone1 controls up 1
                if (isZone1Row1Collapsed )
                {
                    Zone1Row2Control.appendTo(Zone1Row1);
                    Zone1Row3Control.appendTo(Zone1Row2);
                }


            }
            function toggleVerticalPanelCollapse (activeA, noDelay) {
                var isCollapsed = !$(activeA).hasClass("collapsed");
                $(activeA).toggleClass("collapsed");
           
                
                console.log(isCollapsed);
                if (isCollapsed) {
                    var panelBody = $(activeA).closest(".panel-compact").find(".panel-body")
                    var panelBodyHeight = panelBody.height();
                    $(activeA).parents('.panel').find(".row.padding-sm").slideUp();
                    // $('#capacityPlanner').find('.panel-body').slideUp();
                    isZone1Row1Collapsed=true;
                }
                else
                {
                    // Panel should be expanded
                    $(activeA).parents('.panel').find(".row.padding-sm").slideDown();
                    $('#capacityPlanner').find('.panel-body').slideDown();
                    isZone2Row1Collapsed=false;
                    isZone1Row1Collapsed=false;
                }

                // Saveing preferences
                var prefs = [];
                prefs.push({
                    Key: forecastGraphPrefKey,
                    Value: isCollapsed
                });

                saveUserPagePreferences(prefs, forecastGraphDataSection);
                reAlignDivs(activeA,isCollapsed);
            }

            function loadData() {
                loadTeamResourcesData();
                loadActivityCalendar();
                loadCapacityPlanner();
                loadForecastPanel();
            }

            function loadActivityCalendar() {
                if (teamId && (teamId.length > 0)) {
                    angular.element(document.getElementById('controller1')).scope().loadCalendarData();
                }
            }

            function loadTeamResourcesData() {
                $('#teamResourcesLoader').show();
                $("#TeamInfo").html('');

                if (noTeamSelected()) {
                    // No team id specified
                    //initTeamResourcesWidget();
                    $("#TeamInfo").teamResourcesBrowser('setData', null);
                    $('#teamResourcesLoader').hide();
                    return;
                }

                var teamResourcesLoadUrl = '@Url.Action("GetTeamResources", "Team")';
                $.post(teamResourcesLoadUrl, { teamId: teamId }, function (data) {
                    if (data) {
                        var dataPackage = {};
                        dataPackage.resources = data;
                        //initTeamResourcesWidget();
                        $("#TeamInfo").teamResourcesBrowser('setData', dataPackage);
                        $('#teamResourcesLoader').hide();
                    }
                });

            }

            init.push(function () {
                // Capacity planner controls
                var options = {
                    format: 'm/d/yyyy',
                    startDate: '@Constants.MIN_SELECTABLE_DATE', // SA. ENV-1235. Disable incorrect dates input
                    endDate: '@Constants.MAX_SELECTABLE_DATE'    // SA. ENV-1235. Disable incorrect dates input
                };
                $('#bs-datepicker-from').datepicker(options);
                $('#bs-datepicker-to').datepicker(options);
                $('#fs-datepicker-range').datepicker(options);
                $('#bs-datepicker-rangePlanSimple').datepicker(options);

                $('#percentage_container').slider({
                    'range': 'min',
                    'min': 0,
                    'max': 100,
                    'value': 100,
                    change: function (event, ui) {
                        onPercentageChange(event, ui, $(this));
                        changeScope(ui.value);
                    },
                    slide: function (event, ui) {
                        onPercentageSlide(event, ui, $(this));
                        changeScope(ui.value);
                    }
                });

                $('#capacityExpCat').select2();

                $('#visibilitydropdown2').click(function (event) {
                    event.stopPropagation();
                });

                initPanels();
                loadData();
            });

            function formatPCDate(jsonDate) {
                if (jsonDate == null || jsonDate == "")
                    return "";
                var dt = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10));
                return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
            }

            function loadCapacityPlanner() {
                if (!teamId || (teamId.length < 1))
                    return;

                $('#capacityPlannerLoader').show;
                $('#capacityPlannerContent').hide();

                var id = teamId;
                var expCatDropDown = $('#capacityExpCat');
                var tbl = $("#simpleModeGrid");
                var noPositions = true;
                $.ajax({
                    url: '/Team/GetPlanCapacitySimpleMode',
                    type: 'post',
                    data: { teamId: id },
                    success: function (data) {
                        expCatDropDown.empty();
                        var positionsExist = false;
                        tbl.empty();
                        tbl.append($("<thead><tr><th class=\"autowidth\">Expenditure Category</th><th class=\"autowidth\">Start Date</th><th class=\"autowidth\">End Date</th><th class=\"smallCol\"></th></tr></thead>"));
                        var selInPlanHtml = $('<optgroup />').prop('label', "Categories in Plan").appendTo(expCatDropDown);
                        var selAddHtml = $('<optgroup />').prop('label', "Add Category").appendTo(expCatDropDown);
                        $.each(data["data"], function () {
                            $("<option />").val(this.Id).text(this.Name).appendTo(this.InPlan == true ? selInPlanHtml : selAddHtml);
                            if (this.Positions != null) {
                                for (var ctr = 0; ctr < this.Positions.length; ctr++) {
                                    var categoryId = this.Id;
                                    var pos = this.Positions[ctr];
                                    var row = $('<tr></tr>');
                                    row.append($("<td></td>").text(this.Name));
                                    row.append($("<td></td>").text(formatPCDate(pos.StartDate)));
                                    row.append($("<td></td>").text(formatPCDate(pos.EndDate)));
                                    var newResourceHrefTemplate = '@Html.Raw(Url.Action("Edit", "PeopleResource", new { @resourceId = Guid.Empty, @teamId = "_rpT_", @categoryId = "_rpC_", @noAdjust = "true" }))';

                                    var btnsTD = "";
                                    if (pos.Need > 0) {
                                        btnsTD += "<a class=\"btn btn-xs btn-success\" title=\"Fill Position\" href=\"_rplcmnt_\"><i class=\"fa fa-plus\"></i></a>".
                                            replace(/_rplcmnt_/g, newResourceHrefTemplate.replace(/_rpT_/g, id).replace(/_rpC_/g, categoryId));
                                        btnsTD += "&nbsp;";
                                        btnsTD += "<a class=\"btn btn-xs btn-danger\" title=\"Remove Position\" onclick=\"_rplcmnt_\"><i class=\"fa fa-times\"></i></a>".
                                            replace(/_rplcmnt_/g,
                                                "changeCapacity('" + formatPCDate(pos.StartDate) + "', '" + formatPCDate(pos.EndDate) + "', '" + categoryId + "', -1, " + (pos.EndDate == null) + ")");
                                    } else {
                                        btnsTD += "<a class=\"btn btn-xs btn-info\" title=\"Fill Decrease\" onclick=\"_rplcmnt_\"><i class=\"fa fa-minus\"></i></a>".
                                            replace(/_rplcmnt_/g,
                                                "showFillDecrease('" + categoryId + "', '" + formatPCDate(pos.StartDate) + "')");
                                        btnsTD += "&nbsp;";
                                        btnsTD += "<a class=\"btn btn-xs btn-danger\" title=\"Remove Position\" onclick=\"_rplcmnt_\"><i class=\"fa fa-times\"></i></a>".
                                            replace(/_rplcmnt_/g,
                                                "changeCapacity('" + formatPCDate(pos.StartDate) + "', '" + formatPCDate(pos.EndDate) + "', '" + categoryId + "', 1, " + (pos.EndDate == null) + ")");
                                    }
                                    row.append($("<td>" + btnsTD + "</td>"));

                                    tbl.append(row);
                                    noPositions = false;
                                }
                            }
                        });
                        if (noPositions == true) {
                            tbl.append($("<tr><td colspan=\"4\">No open positions</td></tr>"));
                        }

                        $('#capacityExpCat').select2({
                            allowClear: true
                        });

                        $('#capacityPlannerLoader').hide();
                        $('#capacityPlannerContent').show();
                    },
                    error: function (ret) {
                        $('#capacityPlannerLoader').hide();
                        $('#capacityPlannerContent').show();
                        showErrorModal("@EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE", ret.statusText);
                    }
                });
            }

            function showFillDecrease(categoryId, dateToFire) {
                $("#fillCapacityDecreaseResourceId").empty();
                console.log("cat:" + categoryId + "; dateToFire:" + dateToFire);
                $('#fillCapacityDecreaseModal').modal('show');
                blockUI();

                $.ajax({
                    url: "/Team/GetResourcesForFillDecrease" + '?teamId=' + getSelectedTeamId() + '&categoryId=' + categoryId + '&dateToFire=' + dateToFire,
                    type: 'post',
                    data: {},
                    success: function (data) {
                        $("#fillCapacityDecreaseEndDate").text(dateToFire);

                        var resourcesExist = false;
                        $.each(data["data"], function () {
                            resourcesExist = true;
                            $("<option />").val(this.Id).text(this.Name + (this.EndDate == null ? " (permanent)" : " (contract till " + formatPCDate(this.EndDate) + ")")).appendTo($("#fillCapacityDecreaseResourceId"));
                        });
                        $('#fillCapacityDecreaseResourceId').select2({
                            allowClear: true
                        });
                        if (resourcesExist == true)
                            $("#dvNoResourcesWarning").hide();
                        else
                            $("#dvNoResourcesWarning").show();
                        unblockUI();
                    },
                    error: function (ret) {
                        console.log(ret);
                        unblockUI();
                        showErrorModal("@EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE", ret.statusText);
                    }
                });
            }

            function fillDecreaseSubmit() {
                if ($("#fillCapacityDecreaseForm").valid() == false)
                    return;
                blockUI();

                $.ajax({
                    url: "/Team/FillDecreaseSubmit" + '?resourceId=' + $("#fillCapacityDecreaseResourceId").val() + '&endDate=' + $("#fillCapacityDecreaseEndDate").text(),
                    type: 'post',
                    data: {},
                    success: function (data) {
                        $('#fillCapacityDecreaseModal').modal('hide');

                        $.post('/Team/GetTeamResourcesInfo', { 'teamId': getSelectedTeamId() }, function (data) {
                            if (data != undefined) {
                                loadTeamResourcesData();
                            }
                        });

                        loadForecastPanel();
                        loadCapacityPlanner();
                        unblockUI();
                        loadActivityCalendar();
                    },
                    error: function (ret) {
                        console.log(ret);
                        unblockUI();
                        showErrorModal("@EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE", ret.statusText);
                    }
                });
            }

            function increaseCapacity() {
                if ($("#simpleModeForm").valid() == false)
                    return;
                blockUI();

                changeCapacity($('#capacityStartDate').val(), $('#capacityEndDate').val(), $('#capacityExpCat').val(), $('#capacityAmount').val(), $('#permanent').prop('checked'));
            }

            function decreaseCapacity() {
                if ($("#simpleModeForm").valid() == false)
                    return;
                blockUI();

                changeCapacity($('#capacityStartDate').val(), $('#capacityEndDate').val(), $('#capacityExpCat').val(), -$('#capacityAmount').val(), $('#permanent').prop('checked'));
            }

            function changeCapacity(startDate, endDate, expenditureCategory, value, permanent) {
                console.log("changing capacity: startDate:" + startDate + "; endDate:" + endDate + "; expenditureCategory:" + expenditureCategory + "; value:" + value + "; permanent:" + permanent);
                $.ajax({
                    url: "/Team/ChangeCapacity" + '?startDate=' + startDate + '&endDate=' + endDate + '&expCat=' + expenditureCategory + '&capacityValue=' + value + '&teamId=' + getSelectedTeamId() + '&permanent=' + permanent,
                    type: 'post',
                    data: {},
                    success: function (data) {
                        loadCapacityPlanner();
                        loadForecastPanel();
                        unblockUI();
                        loadActivityCalendar();
                    },
                    error: function (ret) {
                        console.log(ret);
                        unblockUI();
                        showErrorModal("@EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE", ret.statusText);
                    }
                });
            }

            function resetCapacity() {
                if ($("#simpleModeForm").valid() == false)
                    return;
                blockUI();
                $.ajax({
                    url: "/Team/ResetCapacity" + '?startDate=' + $('#capacityStartDate').val() + '&endDate=' + $('#capacityEndDate').val() + '&expCat=' + $('#capacityExpCat').val() + '&teamId=' + getSelectedTeamId() + '&permanent=' + $('#permanent').prop('checked'),
                    type: 'post',
                    data: {},
                    success: function (ret) {
                        if (ret.Result != true) {
                            showErrorModal("@EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE", ret.data);
                            unblockUI();
                        } else {
                            loadCapacityPlanner();
                            loadForecastPanel();
                            unblockUI();
                            loadActivityCalendar();
                        }
                    },
                    error: function (ret) {
                        console.log(ret);
                        unblockUI();
                        showErrorModal("@EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE", ret.statusText);
                    }
                });
            }

            function resetEntireCapacity() {
                if ($("#simpleModeForm").valid() == false)
                    return;

                bootbox.dialog({
                    title: "Reset Planned Capacity",
                    message: '<div class="row">  ' +
                        '<div class="col-md-12"> ' +
                        '<p> Are you sure you want to reset Planned Capacity and make it equal to Actual Capacity? </p> ' +
                        '</div>' +
                        '<div class="col-md-10 col-md-offset-1"> ' +
                        '<div class="radio"> <label for="resetAllDates-0"> <input type="radio" name="resetAllDates" id="resetAllDates-0" value="0" checked="checked"> Use currently selected date range </label> </div>' +
                        '<div class="radio"> <label for="resetAllDates-1"> <input type="radio" name="resetAllDates" id="resetAllDates-1" value="1"> Reset entire capacity  </label> </div> ' +
                        '</div>' +
                        '</div>',
                    buttons: {
                        cancel: {
                            label: "Cancel",
                            className: "btn-default",
                            callback: function () {
                            }
                        },
                        main: {
                            label: "Reset",
                            className: "btn-primary",
                            callback: function () {
                                var answer = $("input[name='resetAllDates']:checked").val() == "1";
                                var stDate = answer == true ? "1/1/1753" : $('#capacityStartDate').val();
                                var enDate = answer == true ? "1/1/2100" : $('#capacityEndDate').val();
                                var prmt = answer == true ? "true" : $('#permanent').prop('checked');
                                blockUI();
                                $.ajax({
                                    url: "/Team/ResetCapacity" + '?startDate=' + stDate + '&endDate=' + enDate + '&expCat=&teamId=' + getSelectedTeamId() + '&permanent=' + prmt,
                                    type: 'post',
                                    data: {},
                                    success: function (ret) {
                                        if (ret.Result != true) {
                                            showErrorModal("@EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE", ret.data);
                                            unblockUI();
                                        } else {
                                            loadCapacityPlanner();
                                            loadForecastPanel();
                                            unblockUI();
                                            loadActivityCalendar();
                                        }
                                    },
                                    error: function (ret) {
                                        console.log(ret);
                                        unblockUI();
                                        showErrorModal("@EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE", ret.statusText);
                                    }
                                });
                            }
                        }
                    }
                });
            }

            function switchPermanent(id) {
                if ($('#permanent').prop('checked')) {
                    $('#simpleModeForm .enddate').css('visibility', 'hidden');
                    $('#simpleModeForm .enddatespan').hide();
                } else {
                    $('#simpleModeForm .enddate').css('visibility', 'visible');
                    $('#simpleModeForm .enddatespan').show();
                }

            }

            function onPercentageSlide(event, ui, obj) {
                var value = ui.value;
                obj.children(".sliderValue").val(value);
                obj.children(".sliderTitle").html(value + '%');
            }

            function onPercentageChange(event, ui, obj) {
                var value = ui.value;
                obj.children(".sliderValue").val(value);
                obj.children(".sliderTitle").html(value + '%');
            }

            function changeScope(value) {
                //var scope = angular.element(document.getElementById('controller-team-board')).scope();
                //scope.onPercentageChange(value);
            }

            function showWarningModal(title, message) {
                var modal = $("#modal-warning");
                if (modal != null) {
                    var divTitle = $("#modal-warning .modal-title");
                    if (divTitle != null)
                        divTitle.text(title);
                    var divMessage = $("#modal-warning .modal-body");
                    if (divMessage != null) {
                        divMessage.text($.trim(message));
                        if (divMessage.text().length > 0) {
                            $("#modal-warning").modal();
                        }
                    }
                }
            }

            function loadForecastPanel() {
                if (!teamId || (teamId.length < 1))
                    return;

                $('#forecastTableLoader').show();
                $("#forecastBlock").html('');

                //reset forecast block menu
                var paramsObj = {
                    teamId: teamId,
                    mode: 'team'
                };
                var id = teamId;
                var pageModel = '@Model.GetType().Name';
                var loadUrl = '@Url.Action("Index", "ForecastDashboard")?menuId=visibilitydropdown&pageModel=' + pageModel + '&additionalFilters=' + JSON.stringify(paramsObj);
                $("#forecastBlock")
                    .load(loadUrl, function (response, status, xhr) {
                        if (status == "error") {
                            $('#forecastTableLoader').hide();
                            showErrorModal('Loading error', 'We are sorry but there was an error, please try again later.');
                        } else {
                            $(".fcboard-criteria-select2").select2();
                            $('#forecastTableLoader').hide();
                            initForecastDashboard();
                        }
                    });
            }

            function OpenInNewWindow() {
                var url = '@Url.Action("Index", "CapacityManagement")' + '?id=' + getSelectedTeamId();
                window.open(url);
            }
    </script>
}

<style type="text/css">
    #capacity-table .headcol {
        left: -3px;
    }
</style>

<div class="container-fluid" id="team-container" ng-app="app">
    <div class="row animated">
        
        <div class="col-sm-12 col-lg-7 zone1row1" id="teamForecastGraphPlaceholder">
            <div class="panel panel-white panel-compact otherside collapsible-vertical zone1row1control">
                <div class='panel-heading'>
                    <span class='panel-title ui-expander'>
                        <a data-target="#graph-container">
                            <i class="panel-title-icon fa fa-bar-chart-o"></i><span>Projects by Status</span>
                        </a>
                    </span>
                </div>
                <div class='panel-body table-light' id="graph-container">
                    <div class="row padding-sm" style="padding-left: 20px!important; padding-right: 20px!important;">
                        @{
                            Html.RenderPartial("_chart", Model);
                        }
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-12 col-lg-5 zone2row1" id="capacityPlanner">
            <div class='panel panel-white panel-compact collapsible-horizontal zone2row1control'>
                <div class='panel-heading'>
                    <span class='panel-title ui-expander otherside'>
                        <a data-target="#capacity-container">
                            <i class="panel-title-icon fa fa-tasks"></i><span>Capacity Planning</span>
                        </a>
                    </span>
                </div>
                <div class='panel-body table-light' style="min-height:275px;"  id="capacity-container">
                    <div class="vertical-text" style="display: none; margin-top: 20px; margin-left: 68%">
                        <i class="panel-title-icon fa fa-tasks"></i>
                        <span>Capacity Planning</span>
                    </div>
                    <div class="row padding-sm" style="padding-left: 20px!important; padding-right: 20px!important;">
                    <div id="capacityPlannerContent" style="display:none;min-height:275px;">
                        <form id="simpleModeForm" name="simpleModeForm">
                            <div class="row padding-sm">
                                <div class="col-xs-12 col-sm-12 col-md-5">
                                    <div class="form-group no-margin-hr">
                                        <label class="control-label">Expenditure Category</label>
                                        <select id="capacityExpCat" class="form-control" name="capacityExpCat" data-key="expCategory" data-val="true" data-val-required="Required"></select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-7">
                                    <div class="form-group no-margin-hr">
                                        <label class="control-label">Start<span class="enddatespan">/End</span> Date</label>
                                        <div class="input-daterange input-group" id="bs-datepicker-rangePlanSimple">
                                            <input class="form-control" id="capacityStartDate" name="capacityStartDate" type="text" value="@(new DateTime(DateTime.Today.Year, DateTime.Today.AddMonths(1).Month, 1).ToShortDateString())" data-val="true" data-val-required="Required">
                                            <span class="field-validation-valid" data-valmsg-for="capacityStartDate" data-valmsg-replace="true"></span>
                                            <span class="input-group-addon enddate">to</span>
                                            <input class="form-control enddate" id="capacityEndDate" name="capacityEndDate" type="text" value="@(new DateTime(DateTime.Today.Year + 1, DateTime.Today.AddMonths(1).Month, 1).AddDays(-1).ToShortDateString())" data-val="true" data-val-required="Required">
                                            <span class="field-validation-valid" data-valmsg-for="capacityEndDate" data-valmsg-replace="true"></span>
                                        </div>
                                        <div class="no-margin-hr" style="margin-top:3px;">
                                            <input type="checkbox" name="permanent" id="permanent" onclick="switchPermanent()" />&nbsp;<label for="permanent" class="nonStyled">Permanent</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3 col-sm-3 col-md-2">
                                    <div class="form-group no-margin-hr">
                                        <label class="control-label" title="Number of Resources">Resources</label>
                                        <input id="capacityAmount" name="capacityAmount" class="form-control" data-val="true" data-val-required="Required" data-val-number="Should be a number"
                                                data-val-range="Should be between 1 and 100." data-val-range-max="100" data-val-range-min="1" data-val-integer="Should be an integer" value="1" />
                                        <span class="field-validation-valid" data-valmsg-for="capacityAmount" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                                <div class="col-xs-9 col-sm-9 col-md-10">
                                    <div class="form-group no-margin-hr" id="arrowHolder">
                                        <label class="control-label">&nbsp;</label><br />
                                        <a class="btn btn-success" onclick="increaseCapacity();" title="Increase Capacity"><i class="fa fa-arrow-up"></i></a>
                                        <a class="btn btn-info" onclick="decreaseCapacity();" title="Decrease Capacity"><i class="fa fa-arrow-down "></i></a>
                                        <a class="btn btn-warning" onclick="resetCapacity();" title="Reset Capacity"><i class="fa fa-undo"></i></a>
                                        &nbsp;
                                        <a class="btn btn-danger" onclick="resetEntireCapacity();" title="Reset All Categories">Reset All</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <table id="simpleModeGrid" class="table table-striped dataTable-tight"></table>
                        <form id="fillCapacityDecreaseForm" name="fillCapacityDecreaseForm">
                            <div id="fillCapacityDecreaseModal" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h4 class="modal-title">Fill Capacity Decrease</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p>
                                                Please select the resource to fill decrease in Planned Capacity.
                                                <br />
                                                The resource will be set an End Date of <span id="fillCapacityDecreaseEndDate"></span>
                                            </p>
                                            <div class="alert" id="dvNoResourcesWarning">
                                                There are no resources to fill decrease in Planned Capacity with given date - resources should be active and start at least one week before fill decrease date.
                                            </div>
                                            <select id="fillCapacityDecreaseResourceId" class="form-control" name="fillCapacityDecreaseResourceId" data-val="true" data-val-required="Please select a resource to fill capacity decrease"></select>
                                            <span class="field-validation-valid" data-valmsg-for="fillCapacityDecreaseResourceId" data-valmsg-replace="true"></span>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary" onclick="fillDecreaseSubmit();">Fill Decrease</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    </div>
                    <div id="capacityPlannerLoader" class="loadRotator" style="min-height:275px;">
                        <span>
                            <img class="valign-middle" src="@Url.Content("~/Content/images/loadFA.gif")" />&nbsp;&nbsp;loading...
                        </span>
                    </div>

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

    </div>
    <div class="row" id="controller-team-board">

        <div class="col-sm-12 col-lg-8 zone1row2" id="teamCalendar">
            <div class='panel panel-white panel-compact zone1row2control' data-section="capacityManagementView">
                <div class='panel-heading'>
                    <span class='panel-title'><i class="panel-title-icon fa fa-calendar"></i>Team Calendar</span>
                    <div class="btn-group btn-group-xs pull-right" id="divCalendarMenu">
                        <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-calendar dropdown-menu dropdown-menu-right" id="visibilitydropdown_calendar"></ul>
                    </div>
                    <div class="pull-right" style="padding-right: 20px;"><a class="noshevron no-expand" href="javascript:OpenInNewWindow()">open in new window</a></div>
                </div>
                <div class='panel-body table-light' id="panelTeamCalendar" style="overflow-x: auto;padding: 5px 15px;">
                    @Html.Partial("../CapacityManagement/_capacityManagement", Model)
                </div>
            </div>

        </div>

        <div class="col-sm-12 col-lg-4 zone2row2" id="teamResources">
            <div class="row zone2row2control">
                <div class="col-sm-12">
                    <div class="panel panel-white panel-compact collapsible-horizontal">
                        <div class="panel-heading">
                            <span class='panel-title ui-expander'>
                                <a data-target="#teamResources-container">
                                    <i class="panel-title-icon fa fa-users"></i><span>Team Resources</span>
                                </a>
                            </span>
                            <div id="teamResourcesNewBtn" style="margin-right:10px;"></div>
                        </div>
                        
                        <div class="panel-body table-light" id="teamResources-container">
                            <div class="vertical-text" style="display: none; margin-top: 20px; margin-left: 68%">
                                <i class="panel-title-icon fa fa-users"></i>
                                <span>Team Resources</span>
                            </div>
                            <div class="row" id="resContainer" style="padding-left: 11px!important; padding-right: 11px!important;padding-top: 0px!important;">
                                <div id="teamResourcesLoader" class="loadRotator" style="min-height:275px;">
                                    <span>
                                        <img class="valign-middle" src="@Url.Content("~/Content/images/loadFA.gif")" />&nbsp;&nbsp;loading...
                                    </span>
                                </div>
                                <div id="TeamInfo" style="min-height:180px;overflow-x:auto;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <div class="row animated">
        <div class="col-sm-12 col-lg-12 zone1row3" id="teamForecastTablePlaceholder">
            <div class="panel panel-white panel-compact zone1row3control" data-section="teamForecastView">
                <div class='panel-heading'>
                    <span class='panel-title'><i class="panel-title-icon fa fa-bar-chart-o"></i>Team Forecast</span>
                    <div class="btn-group btn-group-xs pull-right" id="divForecastMenu">
                        <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 class='panel-body table-light' id="forecastBlock"></div>
                <div id="forecastTableLoader" class="loadRotator">
                    <span>
                        <img class="valign-middle" src="@Url.Content("~/Content/images/loadFA.gif")" />&nbsp;&nbsp;loading...
                    </span>
                </div>
            </div>
        </div>
        
    </div>
</div>
<!-- Modal -->
<div id="createScenario" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="reloadForm">
        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
<!-- / Modal -->