@using EnVisage.Code
@model EnVisage.Models.SupplyDemandReportFilterResponseModel
@{
    ViewBag.Title = "Supply and Demand Report";
}
@section stylesheets
{
    @Styles.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_STYLES_BASE_PATH, "prevu-acstyles"))
}
@section scripts
{
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-angularservices"))
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-supplydemandreport"))

    <script>
        init.push(function () {
            saveLastPageVisited(window.location.pathname);
        });
    </script>
}
@section pagemenu
{
        <ul class="nav navbar-nav navbar-right" style="display: none;">
            <li class="dropdown">
                <a href="javascript:void(0);" class="dropdown-toggle user-menu" data-toggle="dropdown">
                    <i class="fa fa-bars"></i><span>Page Options</span>&nbsp;<i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-menu-right calendar-options-menu" id="visibilitydropdown_calendar"></ul>
            </li>
        </ul>

        <div id="menuCalendarOptionsPrint" style="display:none;">
            <ul>
                <!--<li><a onclick="_printDoc();$(this).parent().parent().parent().removeClass('open');"><i class="dropdown-icon fa fa-print"></i> Print Page</a></li>-->
                <li><a href="@Url.Action("ExportToPDF")" onclick="$(this).parent().parent().parent().removeClass('open');"><i class="dropdown-icon fa fa-file-text-o"></i> Save Page as PDF</a></li>
                <li class="divider"></li>
            </ul>
        </div>
    }
    @{
        var model = new
        {
            DisplayMode = new
            {
                MenuId = "visibilitydropdown_calendar",
                DataSection = "reportView",
                PageKey = "/SupplyDemandReport",
                BackUrlTitle = "calendar"
            }
        };
        var json = Newtonsoft.Json.JsonConvert.SerializeObject(model);
    }
    <div id="srqBody">
        <div id="erorMsgPlaceholder"></div>
        <div ng-controller="supplyDemandReportController" ng-init="init(@json)">
            <div ng-show="::false" ng-cloak>
                <ul menu-id="DisplayMode.MenuId" change-page-option-value="onPageOptionChange" ng-widget-options-menu data-section="reportView">
                    <li class="padding-xs-hr" ng-show="!DisplayMode.CapacityMode.Hide" style="padding-bottom:3px;">
                        <span class="switcherLbl">Resource Totals as</span>
                        <select ng-select2 ng-model="DisplayMode.CapacityMode.Value" data-key="showOption" minimumResultsForSearch="-1" width="180px"
                                ng-change="changeCapacityMode()" ng-disabled="DisplayMode.CapacityMode.Disabled">
                            <option value="1">Allocated/Capacity</option>
                            <option value="2">Need/Capacity</option>
                            <option value="3">Allocated/Need</option>
                            <option value="4">Remaining/Capacity</option>
                        </select>
                    </li>
                    <li class="padding-xs-hr" ng-show="!DisplayMode.GroupBy.Hide" style="padding-bottom:3px;">
                        <span class="switcherLbl">Group by</span>
                        <select ng-select2 ng-model="DisplayMode.GroupBy.Value" data-key="groupBy" minimumResultsForSearch="-1" width="180px"
                                ng-change="changeGroupBy()" ng-disabled="DisplayMode.GroupBy.Disabled">
                            <option ng-repeat="item in DisplayMode.GroupByItems track by $index" value="{{item.value}}">{{item.text}}</option>
                        </select>
                    </li>
                    <li class="padding-xs-hr">
                        <span class="switcherLbl">Mode</span>
                        <input type="checkbox" ng-switcher ng-model="DisplayMode.IsUOMHours" data-key="uomMode" class="switcher px"
                               ng-sw-on_state_content="# Hours" ng-sw-off_state_content="# Resources" ng-sw-width="93px" />
                    </li>
                    <li class="padding-xs-hr">
                        <span class="switcherLbl">Projects Displayed as</span>
                        <input type="checkbox" ng-switcher ng-model="DisplayMode.IsBarMode" data-key="capBarMode" class="switcher px"
                               ng-sw-on_state_content="Colors" ng-sw-off_state_content="Values" ng-sw-width="73px" />
                    </li>
                    <li class="padding-xs-hr">
                        <span class="switcherLbl">Default View</span>
                        <input type="checkbox" ng-switcher ng-model="DisplayMode.IsViewModeMonth" data-key="defaultView" class="switcher px"
                               ng-sw-on_state_content="Month" ng-sw-off_state_content="Week" ng-sw-width="93px" />
                    </li>
                    <li class="padding-xs-hr" ng-show="!DisplayMode.IsCapacityModeActuals.Hide">
                        <span class="switcherLbl">Use Capacity</span>
                        <input type="checkbox" ng-switcher ng-model="DisplayMode.IsCapacityModeActuals.Value" data-key="capacityView" class="switcher px"
                               ng-sw-on_state_content="Actual" ng-sw-off_state_content="Planned" ng-sw-width="93px" ng-disabled="DisplayMode.IsCapacityModeActuals.Disabled" />
                    </li>
                    <li class="padding-xs-hr" ng-show="!DisplayMode.ShowParts.Hide">
                        <span class="switcherLbl">Parts</span>
                        <input type="checkbox" ng-switcher ng-model="DisplayMode.ShowParts.Value" data-key="showParts" class="switcher px"
                               ng-sw-on_state_content="Show" ng-sw-off_state_content="Hide" ng-sw-width="93px" ng-disabled="DisplayMode.ShowParts.Disabled" />
                    </li>
                    <li class="divider"></li>
                    <li class="padding-xs-hr" style="padding-bottom:3px;">
                        <span class="switcherLbl" style="padding-top:6px;">Sort By </span>
                        <select ng-select2 ng-model="DisplayMode.SortBy" data-key="sortBy" minimumResultsForSearch="-1" dropdownAutoWidth="false" width="104px">
                            <option ng-repeat="item in SortByItems track by item.value" value="{{item.value}}">{{item.text}}</option>
                        </select>
                    </li>
                    <li class="padding-xs-hr">
                        <span class="switcherLbl">Sort Order</span>
                        <input type="checkbox" ng-switcher ng-model="DisplayMode.SortOrder" data-key="sortOrder" class="switcher px"
                               ng-sw-on_state_content="Asc" ng-sw-off_state_content="Desc" />
                    </li>
                    <li class="padding-xs-hr" ng-show="!DisplayMode.ShowUpper.Hide">
                        <span class="switcherLbl">Show Projects</span>
                        <input type="checkbox" ng-switcher ng-model="DisplayMode.ShowUpper.Value" data-key="showChart" class="switcher px"
                               ng-disabled="DisplayMode.ShowUpper.Disabled" ng-change="switchUpperPart()" />
                    </li>
                    <li class="padding-xs-hr" ng-show="!DisplayMode.ShowLower.Hide">
                        <span class="switcherLbl">Show Resources</span>
                        <input type="checkbox" ng-switcher ng-model="DisplayMode.ShowLower.Value" data-key="showCriteria" class="switcher px"
                               ng-disabled="DisplayMode.ShowLower.Disabled" ng-change="switchLowerPart()" />
                    </li>
                </ul>
            </div>
            <div class="form-inline panel-body" ng-cloak>
                <form class="form-horizontal" name="filterForm" id="filterForm" ng-if="Filter.ShowFilters">
                    <div class="visible-lg">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label"><span style="color: red;">*</span> Project Status(es):</label>
                                    <select ng-select2 ng-model="Filter.ProjectStatuses.Value" allowClear="true" data-key="filteredStatuses"
                                            placeholder="Select option(s)" minimumResultsForSearch="5" multiple="multiple"
                                            ng-change="SelectedFilterStatusesChanged()" ng-disabled="Filter.ProjectStatuses.Disabled"
                                            option-class-expr="CSSClass" data-val="true" ng-data-val-required="Field value is required">
                                        <option ng-repeat="option in FilterOptions.ProjectStatuses track by $index" value="{{option.Id}}">{{option.Name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label">Client(s):</label>
                                    <select ng-select2 ng-model="Filter.Clients.Value" allowClear="true" data-key="filteredClients"
                                            placeholder="All available clients" minimumResultsForSearch="5" multiple="multiple"
                                            ng-change="SelectedFilterClientsChanged()" ng-disabled="Filter.Clients.Disabled"
                                            option-class-expr="CSSClass" data-val="true">
                                        <option ng-repeat="option in FilterOptions.Clients track by $index" value="{{option.Value}}">{{option.Text}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label">Project(s):</label>
                                    <select ng-select2 ng-model="Filter.Projects.Value" allowClear="true" data-key="filteredProjects"
                                            placeholder="All available projects" minimumResultsForSearch="5" multiple="multiple"
                                            ng-change="SelectedFilterProjectsChanged()" ng-disabled="Filter.Projects.Disabled"
                                            option-class-expr="CSSClass" data-val="true">
                                        <option ng-repeat="option in FilterOptions.Projects track by $index" value="{{option.Value}}">{{option.Text}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label">Teams(s):</label>
                                    <select ng-select2 ng-model="Filter.Teams.Value" allowClear="true" data-key="filteredTeams"
                                            placeholder="All available teams" minimumResultsForSearch="5" multiple="multiple" ng-disabled="Filter.Teams.Disabled"
                                            option-class-expr="CSSClass" data-val="true">
                                        <option ng-repeat="option in FilterOptions.Teams track by $index" value="{{option.Value}}">{{option.Text}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group no-margin-hr">
                                    <label class="control-label">Start<span class="enddatespan">/End</span> Date</label>
                                    <div style="overflow: hidden;">
                                        <div class="input-daterange input-group" ng-date-range start-date="Filter.StartDate" end-date="Filter.EndDate"
                                             on-change-start-date="onPageOptionChange" on-change-end-date="onPageOptionChange">
                                            <input class="form-control ng-date-range-start" data-val="true" data-val-date="The field Start Date must be a date."
                                                   data-key="capacityFilterStartDate" ng-model="Filter.StartDate" name="filterStartDate" type="text" />
                                            <div class="input-group-addon">to</div>
                                            <input class="form-control enddate ng-date-range-end" data-val="true" data-val-date="The field End Date must be a date."
                                                   data-val-dategreaterthanorequal="End Date should not be less than Start Date" data-val-dategreaterthanorequal-otherpropertyname="filterStartDate"
                                                   data-key="capacityFilterEndDate" ng-model="Filter.EndDate" name="filterEndDate" type="text">
                                        </div>
                                        <span class="field-validation-valid" data-valmsg-for="filterStartDate" data-valmsg-replace="true"></span>
                                        <span class="field-validation-valid" data-valmsg-for="filterEndDate" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group no-margin-hr">
                                    <label class="control-label">&nbsp;</label><br />
                                    <button class="btn btn-default" ng-disabled="!FilterIsValid" ng-click="rebuildCalendar(true)"><i class="fa fa-refresh"></i> Reload</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="visible-md visible-sm">
                        <div class="row">
                            <div class="col-sm-6 col-md-6">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label"><span style="color: red;">*</span> Project Status(es):</label>
                                    <select ng-select2 ng-model="Filter.ProjectStatuses.Value" allowClear="true" data-key="filteredStatuses"
                                            placeholder="Select option(s)" minimumResultsForSearch="5" multiple="multiple"
                                            ng-change="SelectedFilterStatusesChanged()" ng-disabled="Filter.ProjectStatuses.Disabled"
                                            option-class-expr="CSSClass" data-val="true" ng-data-val-required="Field value is required">
                                        <option ng-repeat="option in FilterOptions.ProjectStatuses track by $index" value="{{option.Id}}">{{option.Name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label">Client(s):</label>
                                    <select ng-select2 ng-model="Filter.Clients.Value" allowClear="true" data-key="filteredClients"
                                            placeholder="All available clients" minimumResultsForSearch="5" multiple="multiple"
                                            ng-change="SelectedFilterClientsChanged()" ng-disabled="Filter.Clients.Disabled"
                                            option-class-expr="CSSClass" data-val="true">
                                        <option ng-repeat="option in FilterOptions.Clients track by $index" value="{{option.Value}}">{{option.Text}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-7 col-md-7">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label">Project(s):</label>
                                    <select ng-select2 ng-model="Filter.Projects.Value" allowClear="true" data-key="filteredProjects"
                                            placeholder="All available projects" minimumResultsForSearch="5" multiple="multiple"
                                            ng-change="SelectedFilterProjectsChanged()" ng-disabled="Filter.Projects.Disabled"
                                            option-class-expr="CSSClass" data-val="true">
                                        <option ng-repeat="option in FilterOptions.Projects track by $index" value="{{option.Value}}">{{option.Text}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-5 col-md-5">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label">Teams(s):</label>
                                    <select ng-select2 ng-model="Filter.Teams.Value" allowClear="true" data-key="filteredTeams"
                                            placeholder="All available teams" minimumResultsForSearch="5" multiple="multiple" ng-disabled="Filter.Teams.Disabled"
                                            option-class-expr="CSSClass" data-val="true">
                                        <option ng-repeat="option in FilterOptions.Teams track by $index" value="{{option.Value}}">{{option.Text}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 col-md-4">
                                <div class="form-group no-margin-hr">
                                    <label class="control-label">Start<span class="enddatespan">/End</span> Date</label>
                                    <div style="overflow: hidden;">
                                        <div class="input-daterange input-group" ng-date-range start-date="Filter.StartDate" end-date="Filter.EndDate"
                                             on-change-start-date="onPageOptionChange" on-change-end-date="onPageOptionChange">
                                            <input class="form-control ng-date-range-start" data-val="true" data-val-date="The field Start Date must be a date."
                                                   data-key="capacityFilterStartDate" ng-model="Filter.StartDate" name="filterStartDate" type="text" />
                                            <div class="input-group-addon">to</div>
                                            <input class="form-control enddate ng-date-range-end" data-val="true" data-val-date="The field End Date must be a date."
                                                   data-val-dategreaterthanorequal="End Date should not be less than Start Date" data-val-dategreaterthanorequal-otherpropertyname="filterStartDate"
                                                   data-key="capacityFilterEndDate" ng-model="Filter.EndDate" name="filterEndDate" type="text">
                                        </div>
                                        <span class="field-validation-valid" data-valmsg-for="filterStartDate" data-valmsg-replace="true"></span>
                                        <span class="field-validation-valid" data-valmsg-for="filterEndDate" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3 col-md-2">
                                <div class="form-group no-margin-hr">
                                    <label class="control-label">&nbsp;</label><br />
                                    <button class="btn btn-default" ng-disabled="!FilterIsValid" ng-click="rebuildCalendar(true)"><i class="fa fa-refresh"></i> Reload</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="visible-xs">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label"><span style="color: red;">*</span> Project Status(es):</label>
                                    <select ng-select2 ng-model="Filter.ProjectStatuses.Value" allowClear="true" data-key="filteredStatuses"
                                            placeholder="Select option(s)" minimumResultsForSearch="5" multiple="multiple"
                                            ng-change="SelectedFilterStatusesChanged()" ng-disabled="Filter.ProjectStatuses.Disabled"
                                            option-class-expr="CSSClass" data-val="true" ng-data-val-required="Field value is required">
                                        <option ng-repeat="option in FilterOptions.ProjectStatuses track by $index" value="{{option.Id}}">{{option.Name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label">Client(s):</label>
                                    <select ng-select2 ng-model="Filter.Clients.Value" allowClear="true" data-key="filteredClients"
                                            placeholder="All available clients" minimumResultsForSearch="5" multiple="multiple"
                                            ng-change="SelectedFilterClientsChanged()" ng-disabled="Filter.Clients.Disabled"
                                            option-class-expr="CSSClass" data-val="true">
                                        <option ng-repeat="option in FilterOptions.Clients track by $index" value="{{option.Value}}">{{option.Text}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label">Project(s):</label>
                                    <select ng-select2 ng-model="Filter.Projects.Value" allowClear="true" data-key="filteredProjects"
                                            placeholder="All available projects" minimumResultsForSearch="5" multiple="multiple"
                                            ng-change="SelectedFilterProjectsChanged()" ng-disabled="Filter.Projects.Disabled"
                                            option-class-expr="CSSClass" data-val="true">
                                        <option ng-repeat="option in FilterOptions.Projects track by $index" value="{{option.Value}}">{{option.Text}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group select2-primary no-margin-hr" style="width: 100%;">
                                    <label class="control-label">Teams(s):</label>
                                    <select ng-select2 ng-model="Filter.Teams.Value" allowClear="true" data-key="filteredTeams"
                                            placeholder="All available teams" minimumResultsForSearch="5" multiple="multiple" ng-disabled="Filter.Teams.Disabled"
                                            option-class-expr="CSSClass" data-val="true">
                                        <option ng-repeat="option in FilterOptions.Teams track by $index" value="{{option.Value}}">{{option.Text}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="form-group no-margin-hr">
                                    <label class="control-label">Start<span class="enddatespan">/End</span> Date</label>
                                    <div style="overflow: hidden;">
                                        <div class="input-daterange input-group" ng-date-range start-date="Filter.StartDate" end-date="Filter.EndDate"
                                             on-change-start-date="onPageOptionChange" on-change-end-date="onPageOptionChange">
                                            <input class="form-control ng-date-range-start" data-val="true" data-val-date="The field Start Date must be a date."
                                                   data-key="capacityFilterStartDate" ng-model="Filter.StartDate" name="filterStartDate" type="text" />
                                            <div class="input-group-addon">to</div>
                                            <input class="form-control enddate ng-date-range-end" data-val="true" data-val-date="The field End Date must be a date."
                                                   data-val-dategreaterthanorequal="End Date should not be less than Start Date" data-val-dategreaterthanorequal-otherpropertyname="filterStartDate"
                                                   data-key="capacityFilterEndDate" ng-model="Filter.EndDate" name="filterEndDate" type="text">
                                        </div>
                                        <span class="field-validation-valid" data-valmsg-for="filterStartDate" data-valmsg-replace="true"></span>
                                        <span class="field-validation-valid" data-valmsg-for="filterEndDate" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group no-margin-hr">
                                    <label class="control-label">&nbsp;</label><br />
                                    <button class="btn btn-default" ng-disabled="!FilterIsValid" ng-click="rebuildCalendar(true)"><i class="fa fa-refresh"></i> Reload</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            @* In this case controller will be initialized via broadcasted event from the parent controller *@
            <div ng-include="DisplayMode.CalendarView" onload="ngIncludeLoaded()"></div>
        </div>
    </div>