@* ROW 2 COL 2 - CARD: SUMMARY --------------------------------- *@
<div class="pv-card pv-layout-row2col2">
    <div class="container no-padding-hr">
        <div class="pv-title">Project Summary</div>
        <div style="margin: 8px 6px 12px 6px; overflow: auto;">
            <table id="pv-projsumm">
                <tr>
                    <td class="summary-table-label-cell summary-table-label-cel-big">Total Number of Projects</td>
                    <td class="summary-table-value-cell summary-table-label-cel-smal" id="txtTotalNumberOfProjects">
						<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
						<a class="projectsSummaryItem" href="javascript:showTotalNumberOfProjects()" style="display:none;">0</a>
					</td>
                </tr>
                <tr>
                    <td class="summary-table-label-cell">Project Weeks</td>
                    <td class="summary-table-value-cell" id="txtProjectWeeks">
						<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
						<a class="projectsSummaryItem" href="javascript:showProjectWeeks()" style="display:none;">0</a>
					</td>
                </tr>

                <tr>
                    <td class="summary-table-label-cell pv-bold">Net Impact</td>
                    <td class="summary-table-value-cell pv-bold" id="txtTotalNetImpact">
						<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
						<a class="projectsSummaryItem" href="javascript:showNetImpact()" style="display:none;">0</a>
					</td>
                </tr>

                <tr>
                    <td class="summary-table-label-cell">Total Projected Revenue</td>
                    <td class="summary-table-value-cell" id="txtTotalProjectedRevenue">
						<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
						<a class="projectsSummaryItem" href="javascript:showTotalProjectedRevenue()" style="display:none;">0</a>
					</td>
                </tr>

                <tr>
                    <td class="summary-table-label-cell">Total Projected Savings</td>
                    <td class="summary-table-value-cell" id="txtTotalProjectedSavings">
						<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
						<a class="projectsSummaryItem" href="javascript:showTotalProjectedSavings()" style="display:none;">0</a>
					</td>
                </tr>

                <tr>
                    <td class="summary-table-label-cell">Total Project Cost</td>
                    <td class="summary-table-value-cell" id="txtTotalProjectCost">
						<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
						<a class="projectsSummaryItem" href="javascript:showTotalProjectCost()" style="display:none;">0</a>
					</td>
                </tr>

                <tr>
                    <td class="summary-table-label-cell pv-bold">Remaining Resource Availability</td>
                    <td class="summary-table-value-cell pv-bold" id="totalResourceAvailability">
						<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
						<a class="projectsSummaryItem" href="javascript:showResourceAvailability()" style="display:none;">0%</a>
					</td>
                </tr>

                <tr>
                    <td class="summary-table-label-cell">Percent Over Allocation</td>
                    <td class="summary-table-value-cell" id="percentOverAllocation">
						<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
						<a class="projectsSummaryItem" href="javascript:showResourceUsageGraphs()" style="display:none;">0%</a>
					</td>
                </tr>

                <tr style="border-bottom: none;">
                    <td class="summary-table-label-cell" style="padding-bottom: 0px;">Percent Under Allocation</td>
                    <td class="summary-table-value-cell" style="padding-bottom: 0px;" id="percentUnderAllocation">
						<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
						<a class="projectsSummaryItem" href="javascript:showResourceUsageGraphs()" style="display:none;">0%</a>
					</td>
                </tr>

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

<script id="loading-template" type="text/x-custom-template">
    <img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
</script>

<script>
    init.push(function () {
        loadProjectsSummary();

        $(window).on("resize", function () {
            kendo.resize($("#cardTotalNumberOfProjects"));
        });
    });

    function showResourceUsageGraphs() {
        $('#cardOpt1').optimuse('drawMagnifyGlass', ['magnify-actual-full-screen'], false);
        $('#cardOpt1').optimuse('drawResourceUsageGraph', 'chart-actual-full-screen', false);
        $('#cardOpt1').optimuse('drawMagnifyGlass', ['magnify-planned-full-screen'], true);
        $('#cardOpt1').optimuse('drawResourceUsageGraph', 'chart-planned-full-screen', true);

        pv.chart.menu.maxmizeWin('Optimuse', true);
    }

    function showTotalProjectCost() {
        var fieldsToDisplay = [
            "ProjectName",
            "Name",
            "BUDirectCosts",
            "TDDirectCosts",
            "StrategicGoals",
            "ProjectStatus",
            "Duration"
        ];
        showGrid("TotalProjectCost", fieldsToDisplay, "Total Project Cost");
    }

    function showTotalProjectedSavings() {
        var fieldsToDisplay = [
            "ProjectName",
            "Name",
            "CostSavings",
            "ProjectNetImpact",
            "ROIDate",
            "HardSoftSavings",
            "StrategicGoals"
        ];
        showGrid("TotalProjectedSavings", fieldsToDisplay, "Total Projected Savings");
    }

    function showProjectWeeks() {
        var fieldsToDisplay = [
             "ProjectName",
             "Name",
             "Duration",
             "StartDate",
             "EndDate",
             "ProjectDeadline",
             "ProjectStatus"
        ];
        showGrid("ProjectWeeks", fieldsToDisplay, "Project Weeks");
    }

    function showTotalProjectedRevenue() {
        var fieldsToDisplay = [
            "ProjectName",
            "Name",
            "ProjectedRevenue",
            "ExpectedGrossMargin",
            "CalculatedMargin",
            "UseLMMargin",
            "Duration"
        ];
        showGrid("TotalProjectedRevenue", fieldsToDisplay, "Total Projected Revenue");
    }

    function showTotalNumberOfProjects() {
        var fieldsToDisplay = [
            "ProjectName",
            "Name",
            "StartDate",
            "EndDate",
            "Duration",
            "ProjectDeadline",
            "ProjectType",
            "StrategicGoals",
            "Priority"
        ];
        showGrid("TotalNumberOfProjects", fieldsToDisplay, "Total Number of Projects");
    }

    function showNetImpact() {
        var fieldsToDisplay = [
            "ProjectName",
            "Name",
            "ProjectNetImpact",
            "ProjectedRevenue",
            "CostSavings",
            "BUDirectCosts",
            "Duration"
        ];
        showGrid("NetImpact", fieldsToDisplay, "Net Impact");
    }

    function showResourceAvailability() {
        var fieldsToDisplay = [
            //"ExpenditureCategory",
            //"TeamName",
            "FirstName",
            "LastName",
            "AvailableHours",
            "AllocatedHours",
            "NonProjectTimeHours",
            "ResourceAvailability"
        ];
        showGrid("ResourceAvailability", fieldsToDisplay, "Resource Availability");
    }

    var currentGridName;

    function showGrid(gridName, fieldsToDisplay, title) {
        var grid = getGrid(gridName);
        grid.fieldsToDisplay = fieldsToDisplay;
        currentGridName = gridName;
        grid.bind("dataBound", function (e) {
            var gridName = e.sender.element.attr("id");
            saveGridState(gridName);

            var gridWidth = $("#" + gridName + " .k-grid-content table").width();
            if (gridWidth) {
                $("#" + gridName + " .k-grid-footer-wrap table").width(gridWidth);
            } else {
                $("#" + gridName + " .k-grid-footer-wrap table").width(""); //summary row width fix
            }
        });

        var gridState = getGridState(gridName);
        if (gridState) {
            try {
                var columnOrder = new Array();
                $.each(grid.columns, function (index, column) {
                    var savedColumns = gridState.columns.filter(function (colState) {
                        return column.field == colState.field;
                    });
                    if (savedColumns.length > 0) {
                        var colIndex = gridState.columns.indexOf(savedColumns[0]);
                        columnOrder[colIndex] = column;

                        if (!savedColumns[0].hidden) {
                            column.width = savedColumns[0].width;
                            grid.showColumn(column.field);
                        } else {
                            grid.hideColumn(column.field);
                        }
                    } else {
                        grid.hideColumn(column.field);
                    }
                });
                for (var i = 0; i < columnOrder.length; i++) {
                    grid.reorderColumn(i, columnOrder[i]);
                }

                var options = grid.options;
                options.columns = grid.columns.filter(function (col, index) {
                    var matchedFields = fieldsToDisplay.filter(function (field) {
                        return true;//col.field === field;
                    });

                    return matchedFields.length > 0;
                });

                options.dataSource = grid.dataSource;
                grid.setOptions(options);

                if (gridState.sort || gridState.group) {
                    grid.dataSource.query({
                        aggregate: grid.dataSource.aggregate(),
                        sort: gridState.sort,
                        group: $.map(gridState.group, function (group) {
                            return {
                                aggregates: grid.dataSource.aggregate(),
                                field: group.field,
                                dir: group.dir
                            }
                        }),
                        page: grid.dataSource.page(),
                        pageSize: gridState.pageSize
                    });
                } else {
                    grid.dataSource.read();
                }
            }
            catch (e) {
                console.log('Error loading grid settings.');
            }
        } else {
            $.each(fieldsToDisplay, function (index, field) {
                var matchedColumns = grid.columns.filter(function (col) {
                    return col.field == field;
                });
                grid.showColumn(matchedColumns[0].field);
                //grid.reorderColumn(index, matchedColumns[0]);
            });

            $.each(grid.columns, function (index, column) {
                var matchedFields = fieldsToDisplay.filter(function (field) {
                    return column.field == field;
                });
                if (!matchedFields.length) {
                    grid.hideColumn(column.field);
                }
                //column.width = null; //to allow grid to set best fit for columns
            });

            var gridColumns = getOrderedColumns(grid);
            for (var i = 0; i < gridColumns.length; i++) {
                grid.reorderColumn(i, gridColumns[i]);
            }

            $("#" + gridName + " .k-grid-content").height("");
            $("#" + gridName + " .k-grid-footer-wrap table").width("");
            $("#" + gridName + " .k-grid-content table").width("");
            $("#" + gridName + " .k-grid-header-wrap table").width("");
            grid.dataSource.read();
        }

        $("#grid-options-dropdown").html("");

        var group = grid.dataSource.group() || [];

        $("#grid-options-dropdown").html($("#gridGroupByTeamDropDownItemTemplate").html());
        var groupedByTeam = group.filter(function (g, index) {
            return g.field == "TeamName";
        }).length > 0;
        $("#gridGroupByTeamSwitcher").prop("checked", groupedByTeam);

        if (gridName == "ResourceAvailability") {
            var groupedByExpenditureCategory = group.filter(function (g, index) {
                return g.field == "ExpenditureCategory";
            }).length > 0;
            $("#gridGroupByExpenditureCategorySwitcher input").prop("checked", groupedByExpenditureCategory);
            $("#gridGroupByExpenditureCategorySwitcher").show();

            $("#gridPerformanceMode").hide();
            $("#gridGroupByExpenditureCategorySwitcher input").switcher();
        } else {
            $("#gridGroupByExpenditureCategorySwitcher").hide();
            $("#gridPerformanceMode").show();

            var performanceMode = (!gridState) || gridState.performanceMode;
            $("#gridPerformanceMode input").prop("checked", performanceMode);
            $("#gridPerformanceMode input").switcher();
            setGridPerformanceMode(performanceMode);
        }
        $("#gridGroupByTeamSwitcher").switcher();

        $("#grid-options-dropdown").append($("#gridExport").html());

        var dropDownItemTemplate = kendo.template($("#gridOptionsDropDownItemTemplate").html());
        var gridColumns = getOrderedColumns(grid, true);

        gridColumns = gridColumns.filter(function (col) {
            return col.field != "TeamId" && col.field != "PerformanceColor" && col.field != "ScenarioStatus"
        });

        $.each(gridColumns, function (index, column) {
            var result = dropDownItemTemplate({
                field: column.field,
                title: column.title,
                checked: column.hidden ? "" : "checked"
            });

            $("#grid-options-dropdown").append(result);
        });
        updateColumnFooters(grid);

        pv.chart.menu.maxmizeWin("TotalNumberOfProjects", true, true);

        $("#grid-title").text(title);
        $(grid.element).show();

        $("#cardTotalNumberOfProjects").on("restored", function (e) {
            $(grid.element).hide();
            grid.unbind("dataBound");
            currentGridName = null;
            $("#cardTotalNumberOfProjects").hide();
        });
    }

    function columnResize(e) {
        if (e.column.width < 50) {
            e.column.width = 50;
        }
        $("#" + currentGridName + " colgroup col").each(function () {
            if ($(this).width() < 50) {
                $(this).css("width", "50px");
            }
        });
        setTimeout(function () {
            saveGridState(currentGridName);
        }, 50);
    }

    function columnReorder(e, gridName) {
    	setTimeout(function () {
    		saveGridState(gridName);
   			$('#' + gridName).data('kendoGrid').refresh();
    	}, 50);
    }

    function columnShowHide(e, gridName) {
    	setTimeout(function () {
   			$('#' + gridName).data('kendoGrid').refresh();
    	}, 50);
	}

    function getOrderedColumns(grid, hideServiceFields) {
        var predefinedColumns = getPredefinedColumns(grid.columns, grid.fieldsToDisplay),
            additionalColumns = getAdditionalColumns(grid.columns, grid.fieldsToDisplay);

        return predefinedColumns.concat(additionalColumns);
    }

    function getPredefinedColumns(displayableColumns, fieldsToDisplay) {
        var predefinedColumns = displayableColumns.filter(function (col) {
            var matchedFields = fieldsToDisplay.filter(function (field) {
                return col.field == field;
            });

            return matchedFields.length > 0;
        });
        predefinedColumns = predefinedColumns.sort(function (a, b) {
            if (fieldsToDisplay.indexOf(a.field) < fieldsToDisplay.indexOf(b.field)) return -1;
            if (fieldsToDisplay.indexOf(a.field) > fieldsToDisplay.indexOf(b.field)) return 1;
            return 0;
        })

        return predefinedColumns;
    }

    function getAdditionalColumns(gridColumns, fieldsToDisplay) {
        var additionalColumns = gridColumns.filter(function (col) {
            var matchedFields = fieldsToDisplay.filter(function (field) {
                return col.field == field;
            });

            return matchedFields.length == 0;
        });

        additionalColumns = additionalColumns.sort(function (a, b) {
            if (a.title < b.title) return -1;
            if (a.title > b.title) return 1;
            return 0;
        })

        return additionalColumns;
    }

    function setGroupByTeamMode(checkbox) {
        var grid = getGrid(currentGridName);
        var group = grid.dataSource.group().slice();

        if (currentGridName == "ResourceAvailability") {
            setColumnVisibleByGroup("TeamName", checkbox.checked);
        }

        if (checkbox.checked) {
            group.push({
                aggregates: grid.dataSource.options.aggregate,
                field: "TeamName",
                dir: "asc"
            });
            grid.dataSource.group(group);
        } else {
            group.pop();
            grid.dataSource.group(group);
        }
    }

    function setGroupByExpenditureCategoryMode(checkbox) {
        var grid = getGrid(currentGridName);
        var group = grid.dataSource.group().slice();

        setColumnVisibleByGroup("ExpenditureCategory", checkbox.checked);

        if (checkbox.checked) {
            group.unshift({
                aggregates: grid.dataSource.options.aggregate,
                field: "ExpenditureCategory",
                dir: "asc"
            });
            grid.dataSource.group(group);
        } else {
            group.shift();
            grid.dataSource.group(group);
        }
    }

    function setColumnVisibleByGroup(groupType, groupVaue) {
        var expenditureCategoryColumnVisibleCheckbox = $("input[data-field='" + groupType + "']");
        var expenditureCategoryColumnVisibleCheckboxValue = expenditureCategoryColumnVisibleCheckbox.is(':checked');
        if (groupVaue) {
            if (expenditureCategoryColumnVisibleCheckboxValue) {
                expenditureCategoryColumnVisibleCheckbox.click();
            }
        } else {
            if (!expenditureCategoryColumnVisibleCheckboxValue) {
                expenditureCategoryColumnVisibleCheckbox.click();
            }
        }
    }

    function setGridPerformanceMode(enable) {
        var grid = getGrid(currentGridName);
        if (enable) {
            grid.table.addClass("show-performance");
        } else {
            grid.table.removeClass("show-performance");
        }
        saveGridState(currentGridName);
    }

    function setColumnState(checkbox, field) {
        if (!currentGridName) {
            return;
        }
        var grid = getGrid(currentGridName);

        if (checkbox.checked) {

            var gridColumns = getOrderedColumns(grid);
            var columnToShow;
            for (var i = 0; i < gridColumns.length; i++) {
                if (gridColumns[i].field == field) {
                    columnToShow = gridColumns[i];
                    break;
                }
            }
            grid.reorderColumn(grid.columns.length - 1, columnToShow);
            grid.showColumn(field);

            var columnsToReset = grid.columns.filter(function (col, index) {
                return col.resetTemplate;
            });
            $.each(columnsToReset, function (index, col) {
                col.groupFooterTemplate = null;
                col.footerTemplate = null;
                col.resetTemplate = false;
            });
            grid.refresh();
        } else {
            grid.hideColumn(field);
        }
        $("#" + currentGridName + " .k-grid-content table").width("");
        $("#" + currentGridName + " .k-grid-footer-wrap table").width("");
        $("#" + currentGridName + " .k-grid-header-wrap table").width("");

        saveGridState(currentGridName);
        updateColumnFooters(grid);
    }

    function updateColumnFooters(grid) {
        var firstColumn = grid.columns[0];
        var firstVisibleColumn = getFirstVisibleColumn(grid);
        if (firstVisibleColumn && firstVisibleColumn != firstColumn && !firstVisibleColumn.groupFooterTemplate) {
            firstVisibleColumn.groupFooterTemplate = firstColumn.groupFooterTemplate;
            firstVisibleColumn.footerTemplate = firstColumn.footerTemplate;
            firstVisibleColumn.resetTemplate = true;
            grid.refresh();
        }
    }

    function getFirstVisibleColumn(grid) {
        var columns = grid.columns;
        if (columns.length > 0) {
            for (var i = 0; i < columns.length; i++) {
                if (!columns[i].hidden) {
                    return columns[i];
                }
            }
        }

        return null;
    }

    function exportToPdf() {
        if (!currentGridName) {
            return;
        }
        var grid = getGrid(currentGridName);
        grid.saveAsPDF();
    }

    function exportToExcel() {
        if (!currentGridName) {
            return;
        }
        var grid = getGrid(currentGridName);
        grid.saveAsExcel();
    }
</script>

<script id="gridOptionsDropDownItemTemplate" type="text/x-kendo-template">
    <li class="padding-xs-hr">
        <div class="checkbox">
            <nobr>
                <label>
                    <input type="checkbox" #=checked# class="columnVisibilityTrigger px" data-field="#=field#" onchange="setColumnState(this, '#=field#')" />
                    <span class="lbl">#= title #</span>
                </label>
            </nobr>
        </div>
    </li>
</script>

<script id="gridGroupByTeamDropDownItemTemplate" type="text/x-kendo-template">
    <li class="padding-xs-hr" id="gridGroupByExpenditureCategorySwitcher">
        <label>
            <span class="switcherLbl">Group by Expenditure Category</span>
            <input type="checkbox" checked class="switcher px" onchange="setGroupByExpenditureCategoryMode(this)" />
        </label>
    </li>
    <li class="padding-xs-hr">
        <label>
            <span class="switcherLbl">Group by Team</span>
            <input type="checkbox" checked id="gridGroupByTeamSwitcher" class="switcher px" onchange="setGroupByTeamMode(this)" />
        </label>
    </li>
    <li class="padding-xs-hr" id="gridPerformanceMode">
        <label>
            <span class="switcherLbl">Performance</span>
            <input type="checkbox" checked class="switcher px" onchange="setGridPerformanceMode(this.checked)" />
        </label>
    </li>
    <li role="separator" class="divider"></li>
    <li class="padding-xs-hr">
        <a href="#" onclick="exportToPdf();" class=""><i class="dropdown-icon fa fa-file-text-o"></i> Save Page as PDF</a>
    </li>
    <li class="padding-xs-hr">
        <a style="cursor:pointer;" onclick="exportToExcel();"><i class="dropdown-icon fa fa-file-o"></i> Export to Excel</a>
    </li>   
    <li role="separator" class="divider"></li>
</script>