@using EnVisage.Code
@using EnVisage.Models
@model ScenarioDetailsCalendarModel

<div id="erorMsgPlaceholder"></div>

<script type="text/javascript">
    var sidebarStateSet = false;
    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 onActivateScenarioDetails() {
        // Set collapsed / expanded state for scenario details grid sidebar (first column on the left).
        // Performs this action once: on entering details grid tab for the first time
        if (!sidebarStateSet) {
            var isBottomUp = $('#IsBottomUp').is(':checked');
            if (isBottomUp) {
                $('#controller-details-grid').scenarioDetailsGrid('showSidebar', !isBottomUp);
            }
            sidebarStateSet = true;
        }
    }

    function initScenarioDetails() {
        $('#controller-details-grid').scenarioDetailsGrid();
        _scenarioCalendarInitSwitchers();
        _scenarioCalendarInitDatepickers();
        var options = {
            format: 'm/d/yyyy',
            startDate: '@Constants.MIN_SELECTABLE_DATE',
            endDate: '@Constants.MAX_SELECTABLE_DATE'
        };
        $('#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({
            minimumResultsForSearch: -1
        });

        $('#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();
        });

        $(document).on('date-for-start-of-change-changed', function (e, date) {
            $('#scenarioCalendarDate4StartOfChanges').data('datepicker').setDate(date);
        });
        @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()) {
                    var msg = "Reallocator form contains unsaved changes, do you really want to close the form?";
                    bootbox.confirm(msg, function (result) {
                        if (result) {
                            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()) {
                    var msg = "Change Curve form contains unsaved changes, do you really want to close the form?";
                    bootbox.confirm(msg, function (result) {
                        if (result) {
                            _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()) {

                    var msg = "Push/Pull form contains unsaved changes, do you really want to close the form?";
                    bootbox.confirm(msg, function (result) {
                        if (result) {
                            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()) {
                    var msg = "@Resources.Messages.RoundExpenditure_Close_UnsavedChanges";
                    bootbox.confirm(msg, function (result) {
                        if (result) {
                            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()) {
                        bootbox.confirm("@Resources.Messages.Scenario_Close_UnsavedChanges", function (result) {
                            if (result) {
                                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>
        }
        @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.RMO)
        {
            <text>
            initRMOProjectDependencies(GetDependencyData);
            </text>
        }

    }
    function _scenarioCalendarInitDatepickers() {

        var datePickerOptions = {
            format: 'mm/dd/yyyy',
            autoclose: true,
            orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
            startDate: '@(Model.StartDateConstraint.HasValue ? Model.StartDateConstraint.Value.AddDays(1).ToString("MM/dd/yyyy") : Constants.MIN_SELECTABLE_DATE)' ,
            @*endDate: '@(Constants.MAX_SELECTABLE_DATE)'*@
            //endDate:'@(Model.ProjectDeadline.HasValue ? Model.ProjectDeadline.Value.AddDays(-1).ToString("MM/dd/yyyy") : Constants.MAX_SELECTABLE_DATE)'
            endDate:'@(Model.EndDateConstrantWithDeadline.HasValue ? Model.EndDateConstrantWithDeadline.Value.AddDays(-1).ToString("MM/dd/yyyy") : Constants.MAX_SELECTABLE_DATE)'
        };

        $('#scenarioCalendarDate4StartOfChanges').datepicker(datePickerOptions);
        $('#bs-datepicker-scenario-calendar-range').datepicker(datePickerOptions).on('changeDate', function (evt) {
            if (evt.target.id === 'scenarioCalendarStartDate' && !$('#scenarioCalendarEndDate').val()) {
                $('#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(3)');
        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);
    }

    // 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();
    };

    var rtime;
    var timeout = false;
    var delta = 500;
    init.push(function () {
        $(window).resize(function () {
            rtime = new Date();
            if (timeout === false) {
                timeout = true;
                setTimeout(resizeend, delta);
            }
        });
    });


    function resizeend() {
        if (new Date() - rtime < delta) {
            setTimeout(resizeend, delta);
        } else {
            timeout = false;
            DrawGraph();
        }
    }
    function DrawGraph() {
        var scope = angular.element($("#controller-details-grid")).scope();
        scope.initGraph();
    }
    function initRMOProjectDependencies(dataFunction) {
        var projectHasDepenencies = @(Model.ProjectHasDependencies ? "true" : "false");

        if (projectHasDepenencies) {
            var elem = $('div.date-dependency-constraints');

            if (elem && elem.length) {
                elem.scenarioDependencyInformer({
                    projectId: "@(Model.ParentId.ToString())",
                    //dataUrl: '@Url.Action("GetDependencies", "Project")',
                    externalDataFunction: dataFunction && (typeof dataFunction === 'function') ? dataFunction : undefined,
                    debug: true,
                });
            }
        }
    }
    function GetDependencyData(){
        var deferred = new $.Deferred();
        deferred.resolve(@Html.Raw(Json.Encode(Model.DependencyListModel)));
        return deferred.promise();
    }
</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="applyGridFilter()" 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" ng-model="data.CalendarFilter.ShowActuals" title="Show Actuals" />
            <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">
            <form id="scenario-calendar-edit-form">
                <div class="row">
                    <div class="col-sm-5">
                        <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-model-options="{ updateOn: 'change' }"
                                       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}}"
                                       data-val-dategreaterthan-otherpropertyname />
                            </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-model-options="{ updateOn: 'change' }"
                                       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>
                        <div class="date-dependency-constraints"></div>
                        <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-4">
                        <label class="control-label">Date for start of change</label>
                        <div class="input-group date datepicker">
                            <input type="text" class="form-control" id="scenarioCalendarDate4StartOfChanges" name="scenarioCalendarDate4StartOfChanges"
                                   ng-model="data.ScenarioGeneralInfoEditModel.DateForStartOfChanges" ng-model-options="{ updateOn: 'change' }" ng-change="scenarioEditModelChanged()"
                                   data-val="true"
                                   data-val-date="The field Date for Start of Change must be a date."
                                   data-val-required="The Date for Start of Change field is required."
                                   data-val-dateforstartofchange=""
                                   data-val-dateforstartofchange-actualsenddate="{{data.ScenarioGeneralInfoEditModel.ActualEndDate}}"
                                   data-val-dateforstartofchange-hasactuals="{{data.ScenarioGeneralInfoEditModel.HasActuals}}"
                                   data-val-dateforstartofchange-scenariostartdateproperty="scenarioCalendarStartDate"
                                   data-val-dateforstartofchange-scenarioenddateproperty="scenarioCalendarEndDate" />
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                        <span class="help-block field-validation-valid" data-valmsg-for="scenarioCalendarDate4StartOfChanges" data-valmsg-replace="true"></span>
                    </div>
                    <div class="col-sm-3 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 class="row pull-right">
                <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 class="table-light table-responsive very-big-table freezeTable fixedTable">
        <table class="table table-striped table-bordered dataTable" id="table" ng-show="data != null">
            <thead>
                <tr>
                    <th class="headcol">
                        @*<a href="#" class="clpsd-btn"><i class="navbar-icon fa fa-bars icon"></i></a>*@
                    </th>
                    <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 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>
            @Html.Partial("~/Views/Scenarios/_gridTopDown.cshtml")
            @Html.Partial("~/Views/Scenarios/_gridBottomUp.cshtml")
        </table>
    </div>
    <div class="panel-body form-horizontal">
        @if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.CreateScenarioWizard || Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
        {
            <div class="col-sm-8">
                @* hide expenditure categories if scenario is BU one *@
                <div class="form-group" ng-show="!data.Scenario.IsBottomUp">
                    <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>
                @* show teams list only for BU scenario because for TD there is a list under each category *@
                <div class="form-group" ng-show="data.Scenario.IsBottomUp">
                    <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.Id as team.Name for team in RestTeams | orderBy: 'Name'"></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="!canSaveScenario()" data-target="#saveScenarioModal" data-toggle="modal" ng-click="prepareWorkFlowOptionsBeforeSaving($event)" ><i class="fa fa-save"></i> @Resources.Buttons.Common_Save</button>
                <button type="button" class="btn btn-primary lockable" ng-disabled="!canSaveScenario()" data-target="#saveScenarioModal" data-toggle="modal" ng-click="prepareWorkFlowOptionsBeforeSaving($event, true)"><i class="fa fa-save"></i> @Resources.Buttons.Common_SaveAs</button>
                <button type="button" class="btn btn-warning lockable" ng-disabled="!gridWasChanged()" onclick="window.location.reload(true);">Cancel</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="!canSaveScenario()" ng-click="saveScenarioDetails($event)"><i class="fa fa-save"></i> @Resources.Buttons.Common_SaveChanges</button>
                <button type="button" class="btn btn-warning lockable" ng-click="cancelScenarioDetails($event)">@Resources.Buttons.Common_Cancel</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="(key, category) in data.Calendar.Expenditures" ng-if="data.Calendar.Expenditures" class="padding-xs-hr">
                            <div class="checkbox">
                                <label>
                                    <input class="ecVisibilityTrigger px" type="checkbox" ng-click="toggleGraphExpCat(key)" checked="checked">
                                    <span class="lbl">{{ category.ExpenditureCategoryName || '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 -->
    <div id="editTotal" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
        <form name="editTotalForm">
            <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()">@Resources.Buttons.Common_Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">@Resources.Buttons.Common_Cancel</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </form>
    </div> <!-- /.modal -->
    <!-- / Modal -->
    <!-- Modal -->
    <div id="reallocator" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
        <form name="reallocatorForm">
            <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 | filter:{ AllowResourceAssignment: true }" 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 | filter:{ AllowResourceAssignment: true }" 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">@Resources.Buttons.Common_Cancel</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </form>
    </div> <!-- /.modal -->
    <!-- / Modal -->
    <!-- Modal -->
    <div id="push_pull" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
        <form name="pushPullForm">
            <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 than 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()">@Resources.Buttons.Common_Ok</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="hidePushPull()">@Resources.Buttons.Common_Cancel</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </form>
    </div> <!-- /.modal -->
    <!-- / Modal -->

    <div id="modalFormatCells" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
        <form name="formatCellsForm">
            <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 | filter:{ AllowResourceAssignment: true } 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()">@Resources.Buttons.Common_Ok</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </form>
    </div> <!-- / .modal -->
    @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>
                                    <div class="form-group" style="display:none">
                                        <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" ng-show="data.Scenario.SaveAs == 0">
                                        <div class="row" ng-hide="data.WorkFlowActions.length <= 1">
                                            <div class="col-sm-offset-1 col-sm-3">
                                                <label class="control-label">Workflow Status: </label>
                                            </div>
                                            <div class="col-sm-6">
                                                <select id="_WFCmdSelect" class="form-control" ng-options="cmd as cmd.command for cmd in data.WorkFlowActions" ng-model="x.Selected" ng-change="updateWorkFlowAction(x.Selected)"></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group" style="display:none">
                                        <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-3">
                                               <label class="control-label">Name: </label>
                                           </div>
                                           <div class="col-sm-6">
                                               <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-3">
                                               <label class="control-label">Status: </label>
                                           </div>
                                           <div class="col-sm-6">
                                               <input type="checkbox" ng-model="data.Scenario.IsActiveScenario" id="is-active-scenario" name="is-active-scenario" class="form-control" />
                                           </div>
                                       </div>
                                       <div class="row" ng-hide="data.WorkFlowActions.length == 0"> 
                                           <div class="col-sm-offset-1 col-sm-3">
                                               <label class="control-label">Workflow State: </label>
                                           </div>
                                           <div class="col-sm-6">
                                               <select id="_WFCmdSelect" class="form-control"  ng-options="st as st.state for st in data.WorkFlowStates" ng-model="x.Selected" ng-change="updateWorkFlowState(x.Selected)"></select>  
                                          </div>
                                       </div>
                                   </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" ng-click="saveScenarioForm.$valid && saveChanges()">@Resources.Buttons.Common_Ok</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">@Resources.Buttons.Common_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>