@using EnVisage.Code
@using EnVisage.Models
@using Microsoft.AspNet.Identity
@model ScenarioDetailsCalendarModel

<div id="erorMsgPlaceholder"></div>
<script type="text/javascript" src="~/Scripts/calendarMethods.js"></script>
<script type="text/javascript">
    var _editTotalDataChanged = false;
    function onETDataChanged() {
        _editTotalDataChanged = true;
    }
    function resetETDataChanged() {
        _editTotalDataChanged = false;
    }
    function isETDataChanged() {
        return _editTotalDataChanged;
    }

    var _reallocatorDataChanged = false;
    function onRTDataChanged() {
        _reallocatorDataChanged = true;
    }
    function resetRTDataChanged() {
        _reallocatorDataChanged = false;
    }
    function isRTDataChanged() {
        return _reallocatorDataChanged;
    }

    var _pushPullDataChanged = false;
    function onPPDataChanged() {
        _pushPullDataChanged = true;
    }
    function resetPPDataChanged() {
        _pushPullDataChanged = false;
    }
    function isPPDataChanged() {
        return _pushPullDataChanged;
    }

    var _formatCellsDataChanged = false;
    function onFCDataChanged() {
        _formatCellsDataChanged = true;
    }
    function resetFCDataChanged() {
        _formatCellsDataChanged = false;
    }
    function isFCDataChanged() {
        return _formatCellsDataChanged;
    }

    @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
    {
        <text>
    var _saveScenarioDataChanged = false;
    function onSSDataChanged() {
        _saveScenarioDataChanged = true;
    }
    function resetSSDataChanged() {
        _saveScenarioDataChanged = false;
    }
    function isSSDataChanged() {
        return _saveScenarioDataChanged;
    }
    </text>
    }
    function _scenarioCalendarInitSwitchers() {
        var container = $('#controller-details-grid');
        $(container).find('#uomMode').switcher({
            on_state_content: '# Hours',
            off_state_content: '# Resources'
        });
        $(container).find('#uomMode').parent().attr('title', $(container).find('#uomMode').attr('title'));

        $(container).find('#tableMode').switcher({
            on_state_content: 'Quantity',
            off_state_content: 'Cost'
        });
        $(container).find('#tableMode').parent().attr('title', $(container).find('#tableMode').attr('title'));

        $(container).find('#viewMode').switcher({
            on_state_content: 'Month',
            off_state_content: 'Week'
        });
        $(container).find('#viewMode').parent().css("width", "80px").attr('title', $(container).find('#viewMode').attr('title'));

        $(container).find('#actualsMode').switcher({
            on_state_content: 'Actuals',
            off_state_content: 'Projected'
        });
        $(container).find('#actualsMode').parent().css("width", "80px").attr('title', $(container).find('#actualsMode').attr('title'));

        $(container).find('#dragNDropReplaceValues').switcher({
            on_state_content: 'Replace values',
            off_state_content: 'Sum values'
        });
        $(container).find('#dragNDropReplaceValues').parent().css("width", "110px").attr('title', $(container).find('#dragNDropReplaceValues').attr('title'));

        $(container).find('#actualsModeGraph').switcher({
            on_state_content: 'On',
            off_state_content: 'Off'
        });
        $(container).find('#actualsModeGraph').parent().css("width", "80px");

        $(container).find('#totalGraph').switcher({
            on_state_content: 'Total',
            off_state_content: 'EC\'s'
        });
        $(container).find('#totalGraph').parent().css("width", "80px");

        $(container).find('#timeGraph').switcher({
            on_state_content: 'Quantity',
            off_state_content: 'Cost'
        });
        $(container).find('#timeGraph').parent().css("width", "80px");

        $(container).find('#quantityGraph').switcher({
            on_state_content: '# Hours',
            off_state_content: '# Resources'
        });
        $(container).find('#quantityGraph').parent().css("width", "90px");

        $(container).find('#is-active-scenario').switcher({
            on_state_content: 'Active',
            off_state_content: 'Inactive'
        });
        $(container).find('#is-active-scenario').parent().css('width', '100px');
    }

    function initScenarioDetails() {
        $('#controller-details-grid').scenarioDetailsGrid();
        _scenarioCalendarInitSwitchers();
        _scenarioCalendarInitDatepickers();
        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);
        $('#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);
            }
        });
        $('#visibilitydropdown_graph').click(function (event) {
            event.stopPropagation();
        });
        //$('select[name=selCategoryFrom]').val($("select[name=selCategoryFrom] option:first").val());

        //set minimal height to the container div to make sure options drop down menu does not get clipped
        $("#content-wrapper").css("min-height", "750px");

        $("#pushPullExpCats").select2();
        $("#roundExpCats").select2();
        $("#formatCellsDecimalPlaces").select2({
            minimumResultsForSearch: -1
        });
        $("#selSelectedExpCats").select2();
        $("#selExpCats2Add").select2();
        $('#selTeams2Add').select2();
        $('#distributionType').select2();


        $('#editTotal').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
            if (typeof onETDataChanged === 'function')
                onETDataChanged();
        });

        $('#reallocator').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
            if (typeof onRTDataChanged === 'function')
                onRTDataChanged();
        });

        $('#push_pull').find('input[type=number],select,input[type=radio]').on("change", function () {
            if (typeof onPPDataChanged === 'function')
                onPPDataChanged();
        });

        $('#modalFormatCells').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
            if (typeof onFCDataChanged === 'function')
                onFCDataChanged();
        });

        @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
        {
            <text>
        $('#saveScenarioModal').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
            if (typeof onSSDataChanged === 'function')
                onSSDataChanged();
        });
        </text>
        }
        $(document).on('hide.bs.modal', '#reallocator', function (e) {
            if ($(e.target).attr('id') != 'reallocator') {
                $("#reallocator").focus();
                return true; // close modal form
            }
            if (typeof isRTDataChanged === 'function')
                if (isRTDataChanged()) {
                    if (confirm("Reallocator form contains unsaved changes, do you really want to close the form?")) {
                        if (typeof resetRTDataChanged === 'function') {
                            resetRTDataChanged();
                            $('#reallocator').modal('hide');
                        }
                    }
                    $("#reallocator").focus();
                    return false; // DO NOT close modal form
                }
            $("#reallocator").focus();
            return true; // close modal form
        }).on('shown.bs.modal', '#reallocator', function (e) {
            if ($(e.target).attr('id') == 'reallocator') {
                if (typeof resetRTDataChanged === 'function')
                    resetRTDataChanged();
            }
        });
        $(document).on('hide.bs.modal', '#editTotal', function (e) {
            if ($(e.target).attr('id') != 'editTotal') {
                $("#editTotal").focus();
                return true; // close modal form
            }
            if (typeof isETDataChanged === 'function')
                if (isETDataChanged()) {
                    if (confirm("Change Curve form contains unsaved changes, do you really want to close the form?")) {
                        _editTotalDataChanged = false;
                        $('#editTotal').modal('hide');
                    }
                    $("#editTotal").focus();
                    return false; // DO NOT close modal form
                }
            $("#editTotal").focus();
            return true; // close modal form
        }).on('shown.bs.modal', '#editTotal', function (e) {
            if ($(e.target).attr('id') == 'editTotal') {
                if (typeof resetETDataChanged === 'function')
                    resetETDataChanged();
            }
        });
        $(document).on('hide.bs.modal', '#push_pull', function (e) {
            if ($(e.target).attr('id') != 'push_pull') {
                $("#push_pull").focus();
                return true; // close modal form
            }
            if (typeof isPPDataChanged === 'function')
                if (isPPDataChanged()) {
                    if (confirm("Push/Pull form contains unsaved changes, do you really want to close the form?")) {
                        if (typeof resetPPDataChanged === 'function') {
                            resetPPDataChanged();
                            $('#push_pull').modal('hide');
                        }
                    }
                    $("#push_pull").focus();
                    return false; // DO NOT close modal form
                }
            $("#push_pull").focus();
            return true; // close modal form
        }).on('shown.bs.modal', '#push_pull', function (e) {
            if ($(e.target).attr('id') == 'push_pull') {
                if (typeof resetPPDataChanged === 'function')
                    resetPPDataChanged();
            }
        });
        $(document).on('hide.bs.modal', '#modalFormatCells', function (e) {
            if ($(e.target).attr('id') != 'modalFormatCells') {
                $("#modalFormatCells").focus();
                return true; // close modal form
            }
            if (typeof isFCDataChanged === 'function')
                if (isFCDataChanged()) {
                    if (confirm("Round Expenditures form contains unsaved changes, do you really want to close the form?")) {
                        if (typeof resetFCDataChanged === 'function') {
                            resetFCDataChanged();
                            $('#modalFormatCells').modal('hide');
                        }
                    }
                    $("#modalFormatCells").focus();
                    return false; // DO NOT close modal form
                }
            $("#modalFormatCells").focus();
            return true; // close modal form
        }).on('shown.bs.modal', '#modalFormatCells', function (e) {
            if ($(e.target).attr('id') == 'modalFormatCells') {
                if (typeof resetFCDataChanged === 'function')
                    resetFCDataChanged();
            }
        });
        @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
        {
            <text>
        $(document).on('hide.bs.modal', '#saveScenarioModal', function (e) {
            if ($(e.target).attr('id') != 'saveScenarioModal') {
                $("#saveScenarioModal").focus();
                return true; // close modal form
            }
            if (typeof isSSDataChanged === 'function')
                if (isSSDataChanged()) {
                    if (confirm("Scenario Save form contains unsaved changes, do you really want to close the form?")) {
                        if (typeof resetSSDataChanged === 'function') {
                            resetSSDataChanged();
                            $('#saveScenarioModal').modal('hide');
                        }
                    }
                    $("#saveScenarioModal").focus();
                    return false; // DO NOT close modal form
                }
            $("#saveScenarioModal").focus();
            return true; // close modal form
        });
        </text>
        }
    }
    function _scenarioCalendarInitDatepickers() {
        
        var datePickerOptions = {
            format: 'mm/dd/yyyy',
            autoclose: true,
            orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
            startDate: '@(Constants.MIN_SELECTABLE_DATE)', // SA. ENV-1235
            endDate: '@(Constants.MAX_SELECTABLE_DATE)'    // SA. ENV-1235
        };
        
        $('#bs-datepicker-scenario-calendar-range').datepicker(datePickerOptions).on('changeDate', function (evt) {
            if (evt.target.id === 'scenarioCalendarStartDate' && !$('#scenarioCalendarEndDate').val()) {
                // SA. ENV-1235
                $('#bs-datepicker-scenario-calendar-range').data('datepicker').pickers[1].prepopulate(evt.date);
            }
        });
        @if(Model.Pinned)
        {
            <text>
        readonlyDatepicker($('#bs-datepicker-scenario-calendar-range'), true);
            </text>
        }
    }

    function readonlyDatepicker (picker, makeReadonly) {

        $(picker).each(function () {

            //find corresponding hidden field
            $.each($(this).find("input[type='text']"), function (i, o) {

                var name = $(o).attr('name');
                var $hidden = $('input[name="' + name + '"][type="hidden"]');

                //if it doesn't exist, create it
                if ($hidden.length === 0) {
                    $hidden = $('<input type="hidden" name="' + name + '"/>');
                    $hidden.insertAfter($(o));
                }

                if (makeReadonly) {
                    $hidden.val($(o).val());
                    $(this).unbind('change.readonly');
                    $(this).attr('disabled', true);
                    $(o).attr('disabled', true);
                }
                else {
                    $(this).bind('change.readonly', function () {
                        $hidden.val($(o).val());
                    });
                    $(this).attr('disabled', false);
                    $(o).attr('disabled', false);
                }
            });
        });
    };

    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-details-grid')).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 savePagePreferences() {
        var dataSection = getDataSection($("#controller-details-grid"));
        var prefs = collectPreferences(dataSection);
        saveUserPagePreferences(prefs, dataSection, '/Scenarios/Details');
    }

    @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
    {
        <text>
    function hideModals() {
        $('#saveScenarioModal').modal('hide');
    }

    function refreshScenarioStatus(isActiveScenario) {
        if (isActiveScenario)
            $('#is-active-scenario').switcher('on');
        else
            $('#is-active-scenario').switcher('off');
    }
    </text>
    }

    function scrollGrid(mouseCoords) {
        if (!mouseCoords)
            return;

        var threshold = 40;
        var grandTotalCell = $('#table thead tr:eq(0) th.headcol:eq(2)');
        var grandTotalCellOffset = grandTotalCell.offset();
        var grandTotalCellEndX = grandTotalCellOffset.left + grandTotalCell.width();

        var tableContainer = $('#table').parent();
        var tableContainerEndX = tableContainer.offset().left + tableContainer.outerWidth();
        var mouseGrandTotalCellDistance = mouseCoords.x - grandTotalCellEndX;
        var mouseTableContainerEndDistance = tableContainerEndX - mouseCoords.x;

        if (mouseGrandTotalCellDistance <= threshold) {
            var newScrollPosition = Math.max(tableContainer.scrollLeft() - Math.abs(mouseGrandTotalCellDistance) - threshold, 0);
            scrollWithAnimation(tableContainer, newScrollPosition, 300);
        }
        if (mouseTableContainerEndDistance <= threshold) {
            var newScrollPosition = tableContainer.scrollLeft() + Math.abs(mouseGrandTotalCellDistance) + threshold;
            scrollWithAnimation(tableContainer, newScrollPosition, 300);
        }
    }

    function scrollWithAnimation(container, position, duration) {
        container.stop(true, false);
        container.animate({
            scrollLeft: position
        }, duration);
    }

    // SA. ENV-574. Time point tooltips for Expenditure Graph
    function formatDateMY(val) {
        if (!val || (val.length < 1))
            return '';

        var monthes = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var date = new Date(val);
        var day = date.getDate();
        var month = date.getMonth();
        var year = date.getFullYear();
        var monthText = monthes[month];

        return day + ' ' + monthText + ' ' + year;
    };

    function scenarioDetailsEditFormIsValid() {
        $.validator.unobtrusive.parseDynamicContent('#scenario-calendar-edit-form');
        return $('#scenario-calendar-edit-form').valid();
    };
</script>
<style type="text/css">
        .validation-error {
            color: red;
        }

        #table thead {
            border-collapse: separate;
            border-spacing: 0;
        }

            #table thead tr th {
                -moz-background-clip: padding-box;
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                border-top: 1.1px solid;
                border-right: 1.1px solid;
            }
            .hideView {
        visibility:hidden;
    }
</style>

<div id="controller-details-grid" ng-controller="scenarioDetailsCalendarController" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))" ng-click="clearSelection()" ng-cloak>
    <!-- Large modal -->
    <div id="modalGraph" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <!-- / .modal-content -->
        </div> <!-- / .modal-dialog -->
    </div> <!-- / .modal -->
    <!-- / Large modal -->
    @Html.ValidationSummary("The following errors occurred:")

    <div class="panel-body form-horizontal" id="criteria-container" ng-show="data.CalendarFilter.ShowFilters">
        <div class="col-sm-6">
            @*<div class="form-group">
                <label class="col-sm-4 control-label" for="selCGEFX">Labor / Materials</label>
                <div class="col-sm-8">
                <select ng-model="data.CalendarFilter.LaborMaterials" name="selCGEFX" ng-options="s.Value as s.Text for s in data.CGEFX" class="form-control">
                <option value="">--Select option--</option>
                </select>
                </div>
                </div>
                <div class="form-group">
                <label class="col-sm-4 control-label" for="selIncomeTypes">Income Types</label>
                <div class="col-sm-8">
                <select ng-model="data.CalendarFilter.IncomeType" name="selIncomeTypes" ng-options="s.Value as s.Text for s in data.IncomeTypes" class="form-control">
                <option value="">--Select option--</option>
                </select>
                </div>
                </div>*@
            <div class="form-group">
                <label class="col-sm-4 control-label" for="selGLAccounts">GL Account</label>
                <div class="col-sm-8">
                    <select ng-model="data.CalendarFilter.GLAccount" name="selGLAccounts" ng-options="s.Value as s.Text for s in data.GLAccounts" class="form-control">
                        <option value="">--Select option--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label" for="selCreditDepartments">Cost Center</label>
                <div class="col-sm-8">
                    <select ng-model="data.CalendarFilter.CreditDepartment" name="selCreditDepartments" ng-options="s.Value as s.Text for s in data.CreditDepartments" class="form-control">
                        <option value="">--Select option--</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-4 control-label" for="selCategoryTypes">Category Type</label>
                <div class="col-sm-8">
                    <select ng-model="data.CalendarFilter.CategoryType" name="selCategoryTypes" ng-options="s.Value as s.Text for s in data.CategoryTypes" class="form-control">
                        <option value="">--Select option--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label" for="selSelectedExpCats">Expenditure Categories</label>
                <div class="col-sm-8 select2-primary">
                    <select ng-model="data.CalendarFilter.SelectedExpCats" id="selSelectedExpCats" name="selSelectedExpCats" ng-options="s.Id as s.Name for s in data.AvailableExpenditures"
                            class="form-control" multiple="multiple"></select>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body" id="buttons-container">
        <div class="col-sm-12 scenarioDetailsDiv">
            <button type="button" class="btn btn-default lockable" id="btnReloadCalendar" ng-click="setGridSource()" title="Reload"><i class="fa fa-refresh"></i></button>
            <input type="checkbox" class="switcher px" id="tableMode" data-key="chMode" ng-model="data.CalendarFilter.IsTableModeQuantity" title="Grid Mode" onclick="savePagePreferences()" />
            <input type="checkbox" class="switcher px" id="viewMode" data-key="monthWeekMode" ng-model="data.CalendarFilter.IsViewModeMonth" title="Default View" onclick="savePagePreferences()" />
            <input type="checkbox" class="switcher px" id="actualsMode" data-key="actualsMode" ng-model="data.CalendarFilter.ShowActuals" title="Show Actuals" onclick="savePagePreferences()" />
            <input type="checkbox" class="switcher px" id="uomMode" data-key="uomMode" ng-model="data.CalendarFilter.IsUOMHours" title="Quantity as" onclick="savePagePreferences()" />
            <input type="checkbox" class="switcher px" id="dragNDropReplaceValues" data-key="dragNDropReplaceValues" ng-model="data.CalendarFilter.DragNDropReplaceValues" title="Drag-n-Drop Mode" onclick="savePagePreferences()" />
            <div class="btn-group">
                <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" id="visibilitydropdown" style="width: 200px;">
                    <li class="padding-xs-hr"><div class="checkbox"><label><input type="checkbox" data-key="showFilters" ng-model="data.CalendarFilter.ShowFilters" class="columnVisibilityTrigger px" onclick="savePagePreferences();" /> <span class="lbl">Show Criteria</span></label></div></li>
                    <li class="divider"></li>
                    <li><a href="#" id="btnPushPull" data-toggle="modal" data-target="#push_pull" ng-disabled="data.CalendarFilter.ShowActuals">Push/Pull Category Resource</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel-body form-horizontal" ng-show="showMessagePanel()">
        <div class="alert alert-warning" ng-show="showWarningBlock()">
            <ul>
                @* Only for RMO *@
                <li ng-show="gridWasChanged() && Opener == 2">
                    Your changes to this scenario have not been saved yet. Please click "Save Changes" button and then click "Save this Mix" button to complete this change.
                </li>
                @* Only for scenario details *@
                <li ng-show="gridWasChanged() && Opener == 1">
                    Your changes to this scenario have not been saved. Please click "Save Changes" button to complete this change.
                </li>
                @* Only for create scenario wizard *@
                <li ng-show="gridWasChanged() && Opener == 0">
                    Your changes to this scenario have not been saved yet. Please finish the wizard to complete this change.
                </li>
                <li ng-show="ExpendituresIsUnderAllocated">
                    Some categories are underallocated
                </li>
                <li ng-show="!IsPossibleMarginDesignated">
                    Designated margin is not possible
                </li>
            </ul>
        </div>
        <div class="alert alert-danger" ng-show="!isValidAllocation()">
            <ul>
                <li ng-show="ExpendituresIsOverAllocated">
                    Some categories are overallocated
                </li>
                <li ng-show="TeamsIsOverAllocated">
                    Some teams are overallocated
                </li>
            </ul>
        </div>
    </div>
    @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.RMO)
    {
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-6">
                    <form id="scenario-calendar-edit-form">
                        <div class="row">
                            <div class="col-sm-7">
                                <label class="control-label">Scenario Dates</label>
                                <div class="input-daterange input-group" id="bs-datepicker-scenario-calendar-range">
                                    <div class="input-daterange input-group date floatdaterange" id="scenario-calendar-startDate">
                                        <input type="text" class="form-control" id="scenarioCalendarStartDate" name="scenarioCalendarStartDate"
                                               ng-model="data.ScenarioGeneralInfoEditModel.StartDate" ng-change="scenarioEditModelChanged()"
                                               data-val="true" data-val-date="The field Scenario Start Date must be a date."
                                               data-val-required="The Scenario Start Date field is required."
                                               data-val-scenariostartdate=""
                                               data-val-scenariostartdate-actualsstartdate="{{data.ScenarioGeneralInfoEditModel.ActualStartDate}}"
                                               data-val-scenariostartdate-hasactuals="{{data.ScenarioGeneralInfoEditModel.HasActuals}}" />
                                    </div>
                                    <div class="pull-left floatdaterange-addon">To</div>
                                    <div class="input-daterange input-group date floatdaterange" id="scenario-calendar-endDate">
                                        <input type="text" class="form-control" id="scenarioCalendarEndDate" name="scenarioCalendarEndDate"
                                               ng-model="data.ScenarioGeneralInfoEditModel.EndDate" ng-change="scenarioEditModelChanged()"
                                               data-val="true" data-val-date="The field Scenario End Date must be a date."
                                               data-val-required="The Scenario End Date field is required."
                                               data-val-scenarioenddate=""
                                               data-val-scenarioenddate-actualsenddate="{{data.ScenarioGeneralInfoEditModel.ActualEndDate}}"
                                               data-val-scenarioenddate-hasactuals="{{data.ScenarioGeneralInfoEditModel.HasActuals}}"
                                               data-val-scenarioenddate-projectdeadline="{{data.ScenarioGeneralInfoEditModel.ProjectDeadline}}"
                                               data-val-dategreaterthanorequal="Scenario End Date should not be less than Start Date"
                                               data-val-dategreaterthanorequal-otherpropertyname="scenarioCalendarStartDate" />
                                    </div>
                                </div>
                                <i ng-if="data.ScenarioGeneralInfoEditModel.ProjectDeadline">(<label>Project Deadline</label> {{data.ScenarioGeneralInfoEditModel.ProjectDeadline | date: 'MM/dd/yyyy'}})</i>
                                <span class="help-block field-validation-valid" data-valmsg-for="scenarioCalendarStartDate" data-valmsg-replace="true"></span>
                                <span class="help-block field-validation-valid" data-valmsg-for="scenarioCalendarEndDate" data-valmsg-replace="true"></span>
                            </div>
                            <div class="col-sm-5 select2-primary">
                                <label class="control-label">Distribution Type</label>
                                <select ng-model="data.ScenarioGeneralInfoEditModel.DistributionType" ng-change="scenarioEditModelChanged()"
                                        id="distributionType" name="distributionType">
                                    <option value="0">General</option>
                                    <option value="1">Keep Total</option>
                                    <option value="2">Change Duration</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-sm-6">
                    <button type="button" class="btn btn-default lockable" style="margin-top: 25px;" ng-disabled="!data.ScenarioGeneralInfoEditModel.IsChanged" ng-click="recalculateScenarioDetails()"><i class="fa fa-refresh"></i> Recalculate</button>
                </div>
            </div>
        </div>
    }
    <div class="table-light table-responsive very-big-table freezeTable fixedTable">
        <table class="table table-striped table-bordered dataTable ng-hide" id="table" ng-show="data != null && data.Calendar.Rows.length > 0">
            <thead>
                <tr>
                    <th class="headcol">
                        <a href="#" class="clpsd-btn"><i class="navbar-icon fa fa-bars icon"></i></a>
                    </th>
                    <th class="headcol">Name</th>
                    <th class="headcol">Grand Totals</th>
                    <th ng-repeat="header in (data.Calendar.MonthHeaders) track by $index" class="headcol-week" ng-click="onMonthHeaderClick(header, $index, $event)"
                        colspan="{{header.IsCollapsed ? 1 : header.ColspanValues[data.CalendarFilter.ViewModeName]}}" ng-show="header.Show" nowrap
                        ng-if="header.Initialized">
                        <i class="fa" ng-class="header.CollapsedClass" style="margin-right: 5px;"></i>{{header.Title}}
                    </th>
                </tr>
                <tr>
                    <th class="headcol"></th>
                    <th class="headcol"></th>
                    <th class="headcol"></th>
                    <th ng-repeat="header in data.Calendar.WeekHeaders track by $index" ng-show="header.Show" ng-if="header.Initialized">
                        {{ header.Title}}
                    </th>
                </tr>
            </thead>
            <tbody ng-repeat="row in data.Calendar.Rows track by $index" ng-if="$index > 0" ng-show="row.Visible" ng-init="ExpCatSourceIndex = $index">
                <tr class="dnd-container">
                    <td class="headcol">
                        <div class="grid-actions-div">
                            @*env-843 start*@
                            @*<a href="#" ng-click="onOpenReallocate(row)" data-toggle="modal" data-target="#reallocator" title="Reallocate resource" ng-disabled="!row.IsEditable"><i class="fa fa-random icon black"></i></a>*@
                            <a href="#" ng-click="onOpenReallocate(row)" data-toggle="modal" data-target="#reallocator" title="Reallocate resource" ng-disabled="!row.IsEditable || data.CalendarFilter.VisibleExpCats.length <= 1"><i class="fa fa-random icon black"></i></a>
                            @*env-843 end*@
                            <a href="#" ng-click="removeExpCat(row)" title="Delete Expenditure" ng-disabled="!row.IsEditable || data.CalendarFilter.VisibleExpCats.length <= 1"><i class="fa fa-times-circle icon red"></i></a>
                            <a href="#" ng-click="prefillFormatCells(row)" data-toggle="modal" data-target="#modalFormatCells" title="Round expenditure" ng-disabled="!row.IsEditable"><i class="fa fa-building-o icon black"></i></a>
                            @*env-843 start*@
                            @*<a href="#" ng-click="openChangeCurveModal(row)" data-toggle="modal" data-target="#editTotal" title="Change Curve" ng-disabled="!row.IsEditable"><i class="fa fa-bar-chart-o icon black"></i></a>*@
                            <a href="#" ng-click="openChangeCurveModal(row)" data-toggle="modal" data-target="#editTotal" title="Change Curve" ng-disabled="!row.IsEditable || data.CalendarFilter.VisibleExpCats.length <= 1"><i class="fa fa-bar-chart-o icon black"></i></a>
                            @*env-843 end*@

                        </div>
                        <script type="text/ng-template" id="drag-helper">
                            <div class="drag-helper">
                                <span ng-bind="getSelectedCellsCount(row)"></span>
                                <span>weeks</span>
                            </div>
                        </script>
                    </td>
                    <td class="headcol headcol-week {{data.CalendarFilter.ShowActuals ? row.CSSClass[0] : ''}}" ng-click="onExpCatCollapseClick(row, $event)">
                        <a id="id_exp{{row.ExpCatId}}" href="#">
                            <i class="fa" ng-class="row.CollapsedClass" ng-if="!data.CalendarFilter.ShowActuals" style="margin-right: 5px;"
                               ng-attr-title="{{row.Collapsed ? 'Expande' : 'Collapse'}}">
                            </i>
                            {{ row.ExpCatName || 'empty' }}
                        </a>
                    </td>
                    <td class="headcol {{data.CalendarFilter.ShowActuals ? row.CSSClass[0] : ''}}">
                        <a ng-if="3 != row.UseType && row.IsEditable" ng-show="3 != row.UseType && row.IsEditable" href="#"
                           editable-text="data.CalendarFilter.IsTableModeQuantity ? row.GrandTotalQuantity : row.GrandTotalCost"
                           e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                           onbeforesave="checkTotalValue($data, row, $index)" e-required>
                            {{ data.CalendarFilter.IsTableModeQuantity ? (row.GrandTotalQuantity || 0 | number:2) : (row.GrandTotalCost || 0 | currency) }}
                        </a>
                        <span ng-if="3 != row.UseType && !row.IsEditable" ng-show="3 != row.UseType && !row.IsEditable">
                            {{ data.CalendarFilter.IsTableModeQuantity ? (row.GrandTotalQuantity || 0 | number:2) : (row.GrandTotalCost || 0 | currency) }}
                        </span>
                    </td>
                    <td class="{{row.CSSClass[$index]}}"
                        ng-repeat="col in row.Cells track by $index" @* collection of weeks and months in the row this is the value *@
                        ng-class="{'droppable-active': row.ActiveDroppables[$index], 'draggable-selected': row.SelectedCells[$index]}"
                        ng-show="data.Calendar.WeekHeaders[$index].Show"
                        ng-if="data.Calendar.WeekHeaders[$index].Initialized"
                        dnd-draggable="!data.CalendarFilter.ShowActuals"
                        dnd-draggable-opts="{layer: 'l-ec-{{row.ExpCatId}}', helper: 'drag-helper', useAsPoint: true}"
                        dnd-on-dragstart="dragStart($dragmodel)"
                        dnd-on-drag="drag($api)"
                        dnd-on-dragend="dragEnd($dragmodel)"
                        dnd-on-dragenter="dragEnter($dropmodel, $dragmodel)"
                        dnd-droppable="!data.CalendarFilter.ShowActuals"
                        dnd-droppable-opts="{layer: 'l-ec-{{row.ExpCatId}}'}"
                        dnd-on-drop="drop($dropmodel, $dragmodel)"
                        dnd-containment="'.dnd-container'"
                        dnd-model="{ExpCat: row, ExpCatSourcePosition: ExpCatSourceIndex, Position: $index}"
                        ng-click="selectCell(row, $index, $event)">
                        <!--Editable forecast (non-calculated) columns-->
                        <a ng-if="data.Calendar.WeekHeaders[$index].Editable[data.CalendarFilter.ViewModeName]" href="#" editable-text="col" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit" onbeforesave="checkValue($data, row.ExpCatId, $index)"
                           e-required>
                            {{ data.CalendarFilter.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
                        </a>
                        <!--Readonly actuals or calculated columns-->
                        <span ng-if="!data.Calendar.WeekHeaders[$index].Editable[data.CalendarFilter.ViewModeName]">
                            {{ data.CalendarFilter.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
                        </span>
                    </td>
                </tr>
                <tr ng-repeat-start="team in row.Teams track by $index" ng-show="!row.Collapsed" ng-if="!row.Collapsed && !data.CalendarFilter.ShowActuals">
                    <td class="headcol">
                        <div class="grid-actions-div">
                            <a href="#" ng-click="removeTeam(team)" title="Delete Team" ng-show="team.CanBeDeleted"><i class="fa fa-times-circle icon red"></i></a>
                        </div>
                    </td>
                    <td class="headcol headcol-week" ng-click="onTeamCollapseClick(row.ExpCatId, team, $event)">
                        <div class="restbl" style="padding-left:20px;">
                            <div>
                                <div>
                                    <a title="{{ team.Name || 'empty' }}" href="#" style="display:inline-block;max-width:154px;overflow-x:hidden;text-overflow:ellipsis">
                                        <i class="fa" ng-class="team.CollapsedClass" ng-if="!data.CalendarFilter.ShowActuals" style="margin-right: 5px;" ng-attr-title="{{team.Collapsed ? 'Expande' : 'Collapse'}}"></i>{{ team.Name || 'empty' }}
                                    </a>
                                </div>
                                <div>
                                    <button type="button" title="Fill remaining" class="btn btn-info btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="assignRestForTeam(row, team, $event)"><i class="fa fa-asterisk"></i></button>
                                    <button type="button" title="Take full available capacity" class="btn btn-primary btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="assignAllForTeam(row, team, $event)"><i class=" fa fa-plus"></i></button>
                                    <button type="button" title="Zero this team" class="btn btn-success btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="zeroTeam(row, team, $event)"><i class="fa fa-minus"></i></button>
                                    <button ng-class="{hideView:!team.IsAccessible}" type="button" title="View on Calendar" class="btn btn-primary btn-xs" ng-click="go(team.Id, $event)"><i class="fa fa-calendar"></i></button>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="headcol">
                        <a href="#" editable-text="team.GrandTotalQuantity" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no"
                           blur="submit" onbeforesave="checkTeamTotalValue($data, row, team)" e-required
                           ng-show="data.CalendarFilter.IsTableModeQuantity">
                            {{ team.GrandTotalQuantity || 0 | number:2 }}
                        </a>
                        <span ng-show="!data.CalendarFilter.IsTableModeQuantity">N/A</span>
                    </td>
                    <td class="{{team.CSSClass[$index]}}"
                        ng-class="{'droppable-active': row.ActiveDroppables[$index], 'draggable-selected': row.SelectedCells[$index]}"
                        ng-repeat="col in team.Cells track by $index"
                        ng-if="data.Calendar.WeekHeaders[$index].Initialized"
                        ng-show="data.Calendar.WeekHeaders[$index].Show">
                        <a href="#" editable-text="col" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no"
                           blur="submit" onbeforesave="checkTeamValue(row, team, $index, $data, true)" e-required
                           ng-show="data.CalendarFilter.IsTableModeQuantity">
                            {{ (col || 0 | number:2) }}
                        </a>
                        <span ng-show="!data.CalendarFilter.IsTableModeQuantity">N/A</span>
                    </td>
                </tr>
                <tr ng-repeat="res in team.Resources track by $index" ng-show="!team.Collapsed && !row.Collapsed" ng-if="!team.Collapsed && !data.CalendarFilter.ShowActuals">
                    <td class="headcol"></td>
                    <td class="headcol">
                        <div class="restbl" style="padding-left:40px;">
                            <div>
                                <div>{{res.Name}}</div>
                                <div>
                                    <button type="button" title="Fill remaining" class="btn btn-info btn-xs" ng-disabled="(row.Resources.length <= 1) || !data.CalendarFilter.IsTableModeQuantity" ng-click="assignRestForResource(res, team, row.ExpCatId)"><i class="fa fa-asterisk"></i></button>
                                    <button type="button" title="Take full available capacity" class="btn btn-primary btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="assignAllForResource(res, team, row.ExpCatId)"><i class="fa fa-plus"></i></button>
                                    <button type="button" title="Zero this resource" class="btn btn-success btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="zeroResource(res, team, row.ExpCatId)"><i class="fa fa-minus"></i></button>
                                    <button type="button" title="Remove this resource" class="btn btn-danger btn-xs" ng-disabled="(data.CalendarFilter.IsTableModeQuantity && res.GrandTotalQuantity > 0) || (!data.CalendarFilter.IsTableModeQuantity && res.GrandTotalCost > 0)  || !data.CalendarFilter.IsTableModeQuantity" ng-click="removeResource(res.Id, row.ExpCatId, team, $index)"><i class="fa fa-times"></i></button>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="headcol">
                        <a href="#" editable-text="res.GrandTotalQuantity" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no"
                           blur="submit" onbeforesave="checkResourceTotalValue($data, row, team, res)" e-required
                           ng-show="data.CalendarFilter.IsTableModeQuantity">
                            {{ res.GrandTotalQuantity || 0 | number:2 }}
                        </a>
                        <span ng-show="!data.CalendarFilter.IsTableModeQuantity">N/A</span>
                    </td>
                    <td class="{{res.CSSClass[$index]}}"
                        ng-class="{'droppable-active': row.ActiveDroppables[$index], 'draggable-selected': row.SelectedCells[$index]}"
                        ng-repeat="col in res.Cells track by $index"
                        ng-if="data.Calendar.WeekHeaders[$index].Initialized"
                        ng-show="data.Calendar.WeekHeaders[$index].Show">
                        <a href="#" editable-text="col" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no"
                           blur="submit" onbeforesave="checkResourceValue(row.ExpCatId, team, res, $index, $data, true)" e-required
                           ng-show="data.CalendarFilter.IsTableModeQuantity && !res.ReadOnly[$index]">
                            {{ col || 0 | number:2 }}
                        </a>
                        <span ng-show="res.ReadOnly[$index]">
                            {{ col || 0 | number:2 }}
                        </span>
                        <span ng-show="!data.CalendarFilter.IsTableModeQuantity">N/A</span>
                    </td>
                </tr>
                <tr ng-repeat-end ng-if="3 != row.UseType && !data.CalendarFilter.ShowActuals" ng-show="!team.Collapsed && !row.Collapsed && team.AvailableResources.length > 0" class="resRow">
                    <td class="headcol"></td>
                    <td class="headcol assign" colspan="2">
                        <div class="col-sm-8">
                            <span>Assign a person:</span>
                        </div><br />
                        <div class="col-sm-8 select2-primary">
                            <select ng-model="team.ResourceToAssignId">
                                <option ng-repeat="item in team.AvailableResources track by $index" value="{{item.id}}">{{item.name}}</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="btn btn-sm btn-success"
                                    ng-disabled="team.ResourceToAssignId == null || !data.CalendarFilter.IsTableModeQuantity"
                                    ng-click="assignResource(row, team, $event)">
                                Assign
                            </button>
                        </div>
                    </td>
                    <td colspan="{{data.VisibleCellCount}}"></td>
                </tr>
            </tbody>
            <tfoot ng-show="data.Calendar.Rows[0].Visible">
                <tr>
                    <td colspan="3" style="text-align: right;" class="headcol">{{data.Calendar.Rows[0].ExpCatName}}</td>
                    <td class="headcol">
                        <a href="#" ng-if="data.Calendar.Rows[0].IsEditable" ng-show="data.Calendar.Rows[0].IsEditable"
                           editable-text="data.CalendarFilter.IsTableModeQuantity ? data.Calendar.Rows[0].GrandTotalQuantity : data.Calendar.Rows[0].GrandTotalCost"
                           e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                           onbeforesave="checkGrandTotalValue($data)" e-required>
                            {{ data.CalendarFilter.IsTableModeQuantity ? (data.Calendar.Rows[0].GrandTotalQuantity || 0 | number:2) : (data.Calendar.Rows[0].GrandTotalCost || 0 | currency) }}
                        </a>
                        <span ng-if="!data.Calendar.Rows[0].IsEditable" ng-show="!data.Calendar.Rows[0].IsEditable">
                            {{ data.CalendarFilter.IsTableModeQuantity ? (data.Calendar.Rows[0].GrandTotalQuantity || 0 | number:2) : (data.Calendar.Rows[0].GrandTotalCost || 0 | currency) }}
                        </span>
                    </td>
                    <td ng-repeat="col in data.Calendar.Rows[0].Cells track by $index" ng-if="data.Calendar.WeekHeaders[$index].Initialized" ng-show="data.Calendar.WeekHeaders[$index].Show">
                        {{ data.CalendarFilter.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    <div class="panel-body form-horizontal">
        @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.CreateScenarioWizard ||
             Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
        {
            <div class="col-sm-8">
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="selExpCats2Add">Expenditure Categories</label>
                    <div class="col-sm-6 select2-primary" ng-mouseup="clearSelection()">
                        <select ng-model="data.CalendarFilter.ExpCats2Add" id="selExpCats2Add" name="selExpCats2Add" ng-options="cat.Name group by cat.GroupElement.Name for cat in data.Expenditures2Add | exceptThis:data.AvailableExpenditures | orderBy:['GroupElement.Name','Name']"
                                class="form-control" multiple="multiple"></select>
                    </div>
                    <div class="col-sm-2">
                        <a href="#" ng-click="addExpCats()" class="btn btn-success"><i class="fa fa-plus"></i></a>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="selTeams2Add">Teams</label>
                    <div class="col-sm-6 select2-primary" ng-mouseup="clearSelection()">
                        <select ng-model="data.CalendarFilter.Teams2Add" id="selTeams2Add" name="selTeams2Add" class="form-control"
                                multiple="multiple" ng-options="team.Text for team in RestTeams"></select>
                    </div>
                    <div class="col-sm-2">
                        <a href="#" ng-click="addTeams()" class="btn btn-success"><i class="fa fa-plus"></i></a>
                    </div>
                </div>
            </div>
        }
        @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
        {
            <div class="col-sm-4 text-right">
                <button type="button" class="btn btn-primary lockable" ng-disabled="!gridWasChanged() || !isValidAllocation()" data-target="#saveScenarioModal" data-toggle="modal"><i class="fa fa-save"></i> Save Changes</button>
                <button type="button" class="btn btn-warning lockable" ng-disabled="!gridWasChanged()" onclick="window.location.reload(true);">Cancel Changes</button>
            </div>
        }
        @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.RMO)
        {
            <div class="col-sm-12 text-right">
                <button type="button" class="btn btn-primary lockable" ng-disabled="!gridWasChanged() || !isValidAllocation()" ng-click="saveScenarioDetails()"><i class="fa fa-save"></i> Save Changes</button>
                <button type="button" class="btn btn-warning lockable" ng-click="cancelScenarioDetails()">Cancel Changes</button>
            </div>
        }
    </div>
    @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
    {
        <div class="panel-body form-horizontal" ng-show="gridWasChanged()">
            <div class="alert alert-warning">
                Scenario has been changed. Changes will affect the graph once saved.
            </div>
        </div>

        <div class="panel-body">
            <div class="col-sm-12">
                <div class="btn-group btn-group-xs pull-right" id="divGraphMenu" style="margin-top: 3px; margin-right: 5px;">
                    <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 sd-graph" style="min-width: 200px;" id="visibilitydropdown_graph">
                        <li ng-repeat="row in data.Calendar.Rows track by $index" ng-if="$index > 0" class="padding-xs-hr">
                            <div class="checkbox">
                                <label>
                                    <input class="ecVisibilityTrigger px" type="checkbox" ng-click="toggleGraphExpCat(row.ExpCatId)" checked="checked">
                                    <span class="lbl">{{ row.ExpCatName || 'empty' }}</span>
                                </label>
                            </div>
                        </li>
                        <li class="padding-xs-hr">
                            <span class="switcherLbl">Actuals</span>
                            <input type="checkbox" class="switcher px" id="actualsModeGraph" data-key="actualsModeGraph" ng-model="GraphFilter.Actuals" ng-click="toggleGraphActuals()" title="Show Actuals" />
                        </li>
                        <li class="padding-xs-hr" style="margin-top:6px;">
                            <span class="switcherLbl">Display</span>
                            <input type="checkbox" class="switcher px" id="totalGraph" data-key="totalGraph" ng-model="GraphFilter.ShowTotal" ng-click="toggleGraphTotal()" title="Display as" />
                        </li>
                        @*                <li class="padding-xs-hr" data-key="quantityGraph">
                            <span class="switcherLbl">Value As</span>
                            <input type="checkbox" class="switcher px" id="timeGraph" data-key="timeGraph" ng-model="GraphFilter.ShowTime" ng-click="toggleGraphValue()" title="Value as" />
                            </li>
                            <li class="padding-xs-hr" data-key="quantityGraph">
                            <span class="switcherLbl">Quantity</span>
                            <input type="checkbox" class="switcher px" id="quantityGraph" data-key="quantityGraph" ng-model="GraphFilter.Quantity" ng-click="toggleGraphQuantity()" title="Quantity as" />
                            </li>*@

                    </ul>
                </div>
                <h4 class="modal-title">Expenditure Graph by Scenario</h4>

                <div id="DetailsGraphContainer" class="graph-container" style="min-height: 307px; min-width:200px; width:100%">
                    <div id="divDetailsGraph" style="min-width: 10px;"></div>
                </div>
            </div>
        </div>
    }


    <!-- Modal -->
    <form name="editTotalForm">
        <div id="editTotal" 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">x</button>
                        <h4 class="modal-title">Change Curve</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Use Different Curve</label>
                            <div class="col-sm-8">
                                <select ng-model="editTotal.OtherCurve" name="selCategoryCurve" ng-options="s.Id as s.Name for s in data.CalendarFilter.VisibleExpCats" class="form-control"></select>
                            </div>
                        </div>
                    </div> <!-- / .modal-body -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="changeCurve()">Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </div> <!-- /.modal -->
    </form>
    <!-- / Modal -->
    <!-- Modal -->
    <form name="reallocatorForm">
        <div id="reallocator" 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">x</button>
                        <h4 class="modal-title">Reallocate Resource</h4>
                    </div>
                    <div class="modal-body">
                        <h4>Expenditure Category</h4>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">From</label>
                            <div class="col-sm-8">
                                <select ng-model="reallocator.SourceExpCat" ng-options="s.Id as s.Name for s in data.CalendarFilter.VisibleExpCats" class="form-control"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">To</label>
                            <div class="col-sm-8">
                                <select ng-model="reallocator.TargetExpCat" ng-options="s.Id as s.Name for s in data.CalendarFilter.SecondaryExpCats" class="form-control"></select>
                            </div>
                        </div>
                        <h4>Week Ending</h4>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">From</label>
                            <div class="col-sm-8">
                                <div class="input-group date" id="bs-datepicker-from">
                                    <input type="text" ng-model="reallocator.SourceWeekEnding" name="SourceWeekEnding" class="form-control" ng-value="reallocator.SourceWeekEnding" required><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                </div>
                            </div>
                            <div class="col-sm-offset-4 col-sm-6">
                                <span class="validation-error" ng-show="reallocatorForm.SourceWeekEnding.$error.required">Source WeekEnding is a required field</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">To</label>
                            <div class="col-sm-8">
                                <div class="input-group date" id="bs-datepicker-to">
                                    <input type="text" ng-model="reallocator.TargetWeekEnding" name="TargetWeekEnding" class="form-control" ng-value="reallocator.TargetWeekEnding" required><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                </div>
                            </div>
                            <div class="col-sm-offset-4 col-sm-6">
                                <span class="validation-error" ng-show="reallocatorForm.TargetWeekEnding.$error.required">Target WeekEnding is a required field</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">% to Transfer</label>
                            <div class="col-sm-8">
                                <div id="percentage_container">
                                    <input id="percentage" type="hidden" class="sliderValue" ng-value="reallocator.Percentage" />
                                    <span class="sliderTitle">100%</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Reallocate By</label>
                            <div class="col-sm-8">
                                <select ng-model="reallocator.ReallocateBy" ng-options="option.value as option.name for option in typeOptions" class="form-control"></select>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Use Source Curve</label>
                            <div class="col-sm-8">
                                <input type="radio" ng-model="reallocator.CurveType" value="source">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Use Target Curve</label>
                            <div class="col-sm-8">
                                <input type="radio" ng-model="reallocator.CurveType" value="target">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="selCategoryTypes">Use Different Curve</label>
                            <div class="col-sm-8">
                                <div class="radio">
                                    <input type="radio" ng-model="reallocator.CurveType" value="other">
                                    <select ng-model="reallocator.OtherCurve" name="selCategoryCurve" ng-disabled="!isOtherSelectedReallocator()" ng-options="s.Id as s.Name for s in data.CalendarFilter.VisibleExpCats" class="form-control"></select>
                                </div>
                            </div>
                        </div>
                    </div> <!-- / .modal-body -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="reallocateResource()">Reallocate</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </div> <!-- /.modal -->
    </form>
    <!-- / Modal -->
    <!-- Modal -->
    <form name="pushPullForm">
        <div id="push_pull" 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">x</button>
                        <h4 class="modal-title">Push/Pull</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel-body">
                            <div class="form-group">
                                <div class="col-sm-4"></div>
                                <div class="col-sm-8">
                                    <div class="col-sm-6">
                                        <label class="col-sm-4 control-label" for="sourceType">Push</label>
                                        <input type="radio" ng-model="pushpuller.push" name="sourceType" ng-value="true" checked="checked">
                                    </div>

                                    <div class="col-sm-5">
                                        <label class="col-sm-4 control-label" for="sourceType">Pull</label>
                                        <input type="radio" ng-model="pushpuller.push" name="sourceType" ng-value="false">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="selCategoryTypes">Resources</label>
                                <div class="col-sm-8  select2-primary">
                                    <select id="pushPullExpCats" multiple="multiple" ng-model="pushpuller.resource" class="form-control" ng-options="s.Id as s.Name for s in data.CalendarFilter.VisibleExpCats"></select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="selCategoryTypes">By number of weeks</label>
                                <div class="col-sm-2">
                                    <input ng-model="pushpuller.weeks" style="width: 60px;" type="number" id="weeksNum" name="weeksNum" min="1" ng-max="pushpuller.maxWeeks" max="{{pushpuller.maxWeeks}}" data-bind="value: weeksNum" required />
                                </div>
                                <div class="col-sm-6">
                                    <span class="validation-error" ng-show="pushPullForm.weeksNum.$error.required">Number of weeks is a required field</span>
                                    <span class="validation-error" ng-show="pushPullForm.weeksNum.$error.min">Number of weeks can't be less then 1</span>
                                    <span class="validation-error" ng-show="pushPullForm.weeksNum.$error.ngMax">You cannot set the number of weeks to push/pull that exceeds scenario duration.</span>
                                </div>
                            </div>
                        </div>
                    </div> <!-- / .modal-body -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="pushPullForm.$valid && pushPull()">OK</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="hidePushPull()">Cancel</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </div> <!-- /.modal -->
    </form>
    <!-- / Modal -->

    <form name="formatCellsForm">
        <div id="modalFormatCells" 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">Round Expenditures</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel-body">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="selFormatExpCats">Expenditure Categories</label>
                                <div class="col-sm-8 select2-primary">
                                    <select ng-model="formatCells.SelectedExpCats" name="selFormatExpCats" ng-options="s.Id as s.Name for s in data.CalendarFilter.VisibleExpCats track by s.Id"
                                            id="roundExpCats" multiple="multiple" class="form-control" size="8" style="height: 173px;" required></select>
                                </div>
                                <div class="col-sm-offset-4 col-sm-6">
                                    <span class="validation-error" ng-show="formatCellsForm.selFormatExpCats.$error.required">Expenditure Category is a required field</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="formatStartDate">Week Ending from</label>
                                <div class="col-sm-8">
                                    <div class="input-daterange input-group" style="z-index: 1040;" id="fs-datepicker-range">
                                        <input class="form-control" ng-model="formatCells.StartDate" id="formatStartDate" name="formatStartDate" type="text" required />
                                        <span class="input-group-addon">to</span>
                                        <input class="form-control" ng-model="formatCells.EndDate" id="formatEndDate" name="formatEndDate" type="text" required />
                                    </div>
                                </div>
                                <div class="col-sm-offset-4 col-sm-6">
                                    <span class="validation-error" ng-show="formatCellsForm.formatStartDate.$error.required">Start Date is a required field</span>
                                    <br />
                                    <span class="validation-error" ng-show="formatCellsForm.formatEndDate.$error.required">End Date is a required field</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="formatCellsDecimalPlaces">Decimal Places</label>
                                <div class="col-sm-8 select2-primary">
                                    <select ng-model="formatCells.DecimalPlaces" name="formatCellsDecimalPlaces" ng-options="s.Value as s.Name for s in formatCells.RoundOptions"
                                            id="formatCellsDecimalPlaces" class="form-control"></select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="formatCellsForm.$valid && submitFormatCells()">Ok</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </div> <!-- / .modal -->
    </form>
    @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
    {
        <form name="saveScenarioForm">
            <div id="saveScenarioModal" 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">Save Scenario</h4>
                        </div>
                        <div class="modal-body">
                            <div class="panel-body form-horizontal">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <input id="save-as-update" name="save-as-update" type="radio" ng-model="data.Scenario.SaveAs" value="0" />
                                        <label for="save-as-update" class="control-label">Save Changes to Current Scenario</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <input id="save-as-new" name="save-as-new" type="radio" ng-model="data.Scenario.SaveAs" value="1" />
                                        <label for="save-as-new" class="control-label">Create New Scenario</label>
                                    </div>
                                </div>
                                <div class="form-group" ng-show="data.Scenario.SaveAs == 1">
                                    <div class="row">
                                        <div class="col-sm-offset-1 col-sm-2">
                                            <label class="control-label">Name: </label>
                                        </div>
                                        <div class="col-sm-9">
                                            <input type="text" ng-model="data.Scenario.Name" id="scenarioName" name="scenarioName" class="form-control" ng-required="data.Scenario.SaveAs == 1" />
                                            <span class="validation-error" ng-show="data.Scenario.SaveAs == 1 && saveScenarioForm.scenarioName.$error.required">Scenario Name is a required field</span>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top:5px;">
                                        <div class="col-sm-offset-1 col-sm-2">
                                            <label class="control-label">Status: </label>
                                        </div>
                                        <div class="col-sm-9">
                                            <input type="checkbox" ng-model="data.Scenario.IsActiveScenario" id="is-active-scenario" name="is-active-scenario" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" ng-click="saveScenarioForm.$valid && saveChanges()">Ok</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </div> <!-- / .modal-content -->
                </div> <!-- / .modal-dialog -->
            </div> <!-- / .modal -->
        </form>
    }
    <!-- / Modal -->
    <!-- Warning modal alert -->
    <div id="modal-warning" class="modal modal-alert modal-warning fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <i class="fa fa-times-circle"></i>
                </div>
                <div class="modal-title"></div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>
                </div>
            </div> <!-- / .modal-content -->
        </div> <!-- / .modal-dialog -->
    </div> <!-- / .modal -->

</div>