@model Guid
@using Microsoft.AspNet.Identity

<script type="text/javascript" src="~/Scripts/calendarMethods.js"></script>
<script type="text/javascript">
    function reInitFields() {
        angular.element(window).resize(function () {
            resizeFreez('master-scenario-table');
        });
    }

    function initSwitchers() {
        $("#uomMode").switcher({
            on_state_content: '# Hours',
            off_state_content: '# Resources'
        });
        $("#uomMode").parent().css("width", "100px").css("float", "right");

        $("#chMode").switcher({
            on_state_content: 'Quantity',
            off_state_content: 'Cost'
        });
        $("#chMode").parent().css("width", "90px").css("float", "right");

        $("#monthWeekMode").switcher({
            on_state_content: 'Month',
            off_state_content: 'Week'
        });
        $("#monthWeekMode").parent().css("width", "80px").css("float", "right");

        $('#actualsMode').switcher({
            on_state_content: 'Actuals',
            off_state_content: 'Projected'
        });
        $('#actualsMode').parent().css({"width": "80px", "float": "right"});
    };

    init.push(function () {
        reInitFields();
        initSwitchers();
    });

    function savePagePreferences() {
        var dataSection = getDataSection($("#master-scenario-table"));
        var url = '@(Url.Action("Edit", "Project"))';
        url = generalizeUrl(url);

        var prefs = collectPreferences(dataSection);
        saveUserPagePreferences(prefs, dataSection, url);
    }
</script>
<div id="modalGraph" class="modal fade" data-width="900" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Expenditure Graph by Scenario</h4>
            </div>
            <div class="modal-body">
                <div id="DetailsGraphContainer" class="graph-container">
                    <div id="divDetailsGraph" style="min-width:10px;"></div>
                </div>
            </div>
        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
</div> <!-- / .modal -->
@{
    var currentUser = (new EnVisage.Code.Cache.UsersCache()).Value.FirstOrDefault(x => x.Id == new Guid(User.Identity.GetID()));
    var json = Newtonsoft.Json.JsonConvert.SerializeObject(new
    {
        ProjectId = Model,
        DataSection = "masterScenarioGrid",
        IsUOMHours = !currentUser.PreferredResourceAllocation,
        PagePreferences = currentUser.GetPreferences(Url.Action("Edit", "Project").Substring(0, Url.Action("Edit", "Project").LastIndexOf("/")), "masterScenarioGrid"),
    });
}
<div id="master-scenario-controller" ng-app="app" ng-controller="masterScenarioCalendarController" ng-init="init(@json)" ng-cloak>
    <div class="panel-body" id="buttons-container" ng-show="data != null">
        <div class="col-sm-12">
            <span class="text-bold text-bg">Master Scenario</span>
            <div class="btn-group" id="masterScenarioDiv">
                <button class="btn btn-info dropdown-toggle lockable" 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" style="width: 200px;">
                    <li class="padding-xs-hr">
                        <label>
                            <span class="switcherLbl">Quantity as</span>
                        </label>
                        <input type="checkbox" id="uomMode" data-key="uomMode" class="switcher px" ng-model="calendarFilters.IsUOMHours" />
                    </li>
                    <li class="padding-xs-hr">
                        <label>
                            <span class="switcherLbl">Grid Mode</span>
                        </label>
                        <input type="checkbox" id="chMode" data-key="chMode" class="switcher px" ng-model="calendarFilters.IsTableModeQuantity" />
                    </li>
                    <li class="padding-xs-hr">
                        <label>
                            <span class="switcherLbl">Default View</span>
                        </label>
                        <input type="checkbox" id="monthWeekMode" data-key="monthWeekMode" class="switcher px" ng-model="calendarFilters.IsViewModeMonth" />
                    </li>
                    <li class="padding-xs-hr">
                        <label>
                            <span class="switcherLbl">Actuals Mode</span>
                        </label>
                        <input type="checkbox" id="actualsMode" data-key="actualsMode" class="switcher px" ng-model="calendarFilters.ShowActuals" />
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#" ng-click="showGraph()" ng-disabled="getDisabledShowGraph()">
                            <i class="fa fa-tasks"></i> Show Graph
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="table-light table-responsive very-big-table freezeTable" ng-if="data != null">
        <table class="table table-striped table-bordered dataTable" id="master-scenario-table">
            <thead>
                <tr>
                    <th style="width: 20px; left:24px;" class="headcol"></th>
                    <th style="width: 300px; left:62px;" class="headcol">Name</th>
                    <th style="width: 100px; left:379px;" class="headcol">Grand Totals</th>
                    <th ng-repeat="header in (data.Headers | filter : {IsMonth:true})" style="text-decoration:underline;color:#4083a9;cursor:pointer;" ng-click="onMonthHeaderClick(header)"
                        colspan="{{header.Collapsed ? 1 : header.Weeks.length}}">
                        <i class="fa" ng-class="header.CollapsedClass" style="margin-right: 5px;"></i>{{header.Title}}
                    </th>
                </tr>
                <tr>
                    <th style="width: 20px; left:24px;" class="headcol"><input type="checkbox" ng-model="data.ScenarioCalendar[0].Checked" ng-click="checkAll()" /></th>
                    <th style="width: 300px; left:62px;" class="headcol"></th>
                    <th style="width: 100px; left:379px;" class="headcol"></th>
                    <th ng-repeat="header in data.Headers" ng-show="header.Show">
                        {{ header.IsMonth ? '' : header.Title}}
                    </th>
                </tr>
            </thead>
            <tbody ng-repeat="row in data.ScenarioCalendar" ng-if="$index > 0">
                <tr>
                    <td style="width: 20px; left:24px;" class="headcol">
                        <input type="checkbox" class="cb_checked" ng-model="row.Checked" ng-click="collectchecked(row)" />
                    </td>
                    <td style="width: 300px;left:62px;text-decoration:underline;color:#4083a9;cursor:pointer;" class="headcol" ng-click="onExpCatClick(row)" resize-freez>
                        <a href="javascript:;">
                            <i class="fa" ng-class="row.CollapsedClass" ng-if="!calendarFilters.ShowActuals" style="margin-right: 5px;"
                               ng-attr-title="{{row.Collapsed ? 'Expande' : 'Collapse'}}">
                            </i>
                            {{ row.ExpCatName || 'empty' }}
                        </a>
                    </td>
                    <td style="width: 100px;left:379px;" class="headcol">
                        <span>{{ calendarFilters.IsTableModeQuantity ? (row.GrandTotalQuantity || 0 | number:2) : (row.GrandTotalCost || 0 | currency) }}</span>
                    </td>
                    <td ng-repeat="col in (calendarFilters.IsTableModeQuantity ? row.QuantityValues : row.CostValues) track by $index" ng-show="data.Headers[$index].Show">
                        <span>
                            {{ calendarFilters.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
                        </span>
                    </td>
                </tr>
                <tr ng-repeat="res in row.Resources" ng-show="!row.Collapsed">
                    <td style="width: 20px; left:24px;" class="headcol">&nbsp;</td>
                    <td ng-style="{'width': res.width || '300px', 'left': '62px'}" class="headcol">
                        <div class="restbl">
                            {{res.Name}}
                        </div>
                    </td>
                    <td ng-style="{'width': '100px', 'left': res.left || '379px'}" class="headcol">
                        <span>{{ calendarFilters.IsTableModeQuantity ? (res.GrandTotalQuantity || 0 | number:2) : (res.GrandTotalCost || 0 | currency) }}</span>
                    </td>
                    <td ng-class="{cellequal : !data.Headers[$index].IsMonth && calendarFilters.IsTableModeQuantity && row.RestQuantity[$index] == 0,
                        cellover : !data.Headers[$index].IsMonth && calendarFilters.IsTableModeQuantity && (row.RestQuantity[$index] < 0 || res.QuantityValues[$index] > res.CapacityQuantityValues[$index])}"
                        ng-repeat="col in (calendarFilters.IsTableModeQuantity ? res.QuantityValues : res.CostValues) track by $index" ng-show="data.Headers[$index].Show"
                        ng-attr-title="{{res.QuantityValues[$index]}}/{{res.CapacityQuantityValues[$index]}}">
                        <span>
                            {{ calendarFilters.IsTableModeQuantity ? (col || 0 | number:2) : "N/A" }}
                        </span>
                    </td>
                </tr>
                <tr ng-show="!row.Collapsed && row.Resources.length <= 0">
                    <td style="width:20px; left:24px;" class="headcol">&nbsp;</td>
                    <td colspan="2" style="width:417px; left:62px;" class="headcol">
                        There are no resources in this category
                    </td>
                    <td colspan="{{data.ScenarioCalendar[0].QuantityValues.length}}"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2" style="width: 338px; left:24px; text-align: right;" class="headcol">{{data.ScenarioCalendar[0].ExpCatName}}</td>
                    <td style="width: 100px; left: 379px;" class="headcol">{{calendarFilters.IsTableModeQuantity ? (data.ScenarioCalendar[0].GrandTotalQuantity || 0 | number:2) : (data.ScenarioCalendar[0].GrandTotalCost || 0 | currency)}}</td>
                    <td ng-repeat="col in (calendarFilters.IsTableModeQuantity ? data.ScenarioCalendar[0].QuantityValues : data.ScenarioCalendar[0].CostValues) track by $index" ng-show="data.Headers[$index].Show">
                        {{ calendarFilters.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>