@using EnVisage.Code
@using EnVisage.Models
@model CreateScenarioModel
@{
    var userId = SecurityManager.GetUserPrincipal();
    var projectId = Model.Step1.PartId ?? Model.Step1.ProjectId;
    var scenarioUIManager = DependencyResolver.Current.GetService<ScenarioUIManager>();
    var detailsModel = scenarioUIManager.CreateScenarioDetailsCalendarModel(userId, ScenarioDetailsCalendarModel.ScenarioCalendarOpener.CreateScenarioWizard);
}
<script type="text/javascript">
    var _detailsController;
    var _saveSuccessCallbackFn;
    var _scenarioDataChanged = false;
    var projectHasDependencies = @Model.Step1.ProjectHasDependencies.ToString().ToLower();
    function onScenarioDataChanged() {
        _scenarioDataChanged = true;
    }
    function resetScenarioDataChanged() {
        _scenarioDataChanged = false;
    }
    function isScenarioDataChanged() {
        return _scenarioDataChanged;
    }

    @if (Model.CanSaveDraft)
    {
        <text>
        function saveAsDraft() {
            $("#@Html.IdFor(model => model.SaveAsDraft)").val(true);
            @if (!Model.Step3.IsRevenueGenerating)
            {
                <text>
                $('#finStep #ProjectedExpense').val(0);
                </text>
            }
            $('#@Html.IdFor(m => m.Action)').val('Save');
            $('#generalStepForm').submit();
        }
        </text>
    }

    function moveToFinancials() {
        var curStep = $('#@Html.IdFor(m => m.CurrentStep)').val();
        if ('Step2a' === curStep) {
            if (!_detailsController.isValidAllocation()) {
                console.log('cannot save provided allocation');
                return;
            }
            displayStep3Blocks();
            refreshGraph(null, _detailsController.getTotalCostsByMonthes());
        }
        else {
            validateDependenciesWrapper(function(valid) {
                if (!valid)
                    return;
                if ($('#create-scenario-dialog-content #EndDate').val()) {
                    $('#create-scenario-dialog-content #EndDate').trigger('changeDate');
                };
                $('#@Html.IdFor(m => m.Action)').val('GoToFin');
                $('#generalStepForm').submit();
            });
        }
    }

    function moveToDetails() {
        var curStep = $('#@Html.IdFor(m => m.CurrentStep)').val();
        if ('Step2' === curStep) {
            $('#@Html.IdFor(m => m.Action)').val('GoToDetails');
            $('#finStepForm').submit();
        }
        else {
            validateDependenciesWrapper(function(valid) {
                if (!valid)
                    return;
                $('#@Html.IdFor(m => m.Action)').val('GoToDetails');
                $('#generalStepForm').submit();
            });
        }
    }

    function moveToGeneral() {
        var scenarioDetailsData = _detailsController.getScenarioDetailsData();
        var curStep = $('#@Html.IdFor(m => m.CurrentStep)').val();
        if (curStep === 'Step2a' || curStep === 'Step2') {
            if (scenarioDetailsData) {
                if (scenarioDetailsData.AvailableExpenditures) {
                    var expCats = scenarioDetailsData.AvailableExpenditures.map(function (ec) {
                        return ec.Id;
                    });
                    // we should trigger change event manually because select2 widget does not do it when we set new value programmatically
                    $('#SelectedExpenditures').select2('val', expCats).trigger('change');

                    // Shows fact team allocation on sliders
                    var slidersGroupContainer = $("#teamsContainer").find('*[data-slider-group]');
                    var slidersController = slidersGroupContainer ? angular.element(slidersGroupContainer.get(0)).scope() : undefined;

                    if (slidersController) {
                        slidersController.$apply(function () {
                            slidersController.addItems(scenarioDetailsData.TeamsInScenario);
                        });

                        slidersController.$apply(function () {
                            slidersController.setAllocation(scenarioDetailsData.TeamsInScenario);
                            slidersController.setReadonly();
                        });
                    }
                }
            }
            if (curStep === 'Step2a') {
                displayStep1Blocks(true);
            } else if ('Step2' === curStep) {
                $('#@Html.IdFor(m => m.Action)').val('GoToGeneral');
                $('#finStepForm').submit();
            }
        } else if ('Step1a' === curStep) {
            displayStep1Blocks(false);
        }
    }
    function submitResolveConflictsForm(fnCallback) {
        var form = $('form[name=frmResolveConflicts]');
        if (!form.valid())
        {
            if (typeof fnCallback === 'function')
                fnCallback(false);
            return;
        }
        var txtStartDate = $("#fsGeneral #StartDate");
        var txtEndDate = $("#fsGeneral #EndDate");
        $('#dependency-container').resolveForm('validate', [txtStartDate.val(), txtEndDate.val(), function(valid, hasConflicts) {
            if ((hasConflicts && !valid) || !form.valid())
            {
                if (typeof fnCallback === 'function')
                    fnCallback(valid, hasConflicts);
                return;
            }
            var data = $('#dependency-container').data('resolveForm').getData();
            triggerBroadcastFromRootScope('dependenciesvalidated', data);
            if (typeof fnCallback === 'function')
                fnCallback(valid, hasConflicts);
        }]);
    }
    function validateDependenciesWrapper(fnCallback)
    {
        if (!$('#generalStepForm #ScenarioName').val() || !$('#generalStepForm #StartDate').val() ||
            !$('#generalStepForm #EndDate').val() || !$('#generalStepForm #SelectedExpenditures').select2('val').length)
        {
            if (typeof fnCallback === 'function')
                fnCallback(true);
            return;
        }
        if (!projectHasDependencies)
        {
            if (typeof fnCallback === 'function')
                fnCallback(true);
            return;
        }
        var isActive = $("#fsGeneral #CreateAsActive").prop('checked');
        if (!isActive)
        {
            if (typeof fnCallback === 'function')
                fnCallback(true);
            return;
        }
        var curStep = $('#@Html.IdFor(m => m.CurrentStep)').val();
        submitResolveConflictsForm(function(valid, hasConflicts) {
            if ((hasConflicts && ('Step1' === curStep)) || !valid) {
                displayStep1aBlocks();
                if (typeof fnCallback === 'function')
                    fnCallback(false);
            }
            else {
                if (typeof fnCallback === 'function')
                    fnCallback(true);
            }
        });
    }

    function onSaveScenario() {
        var isBottomUp = $('#IsBottomUp').is(':checked');
        var curStep = $('#@Html.IdFor(m => m.CurrentStep)').val();
        validateDependenciesWrapper(function(valid) {
            if (!valid)
                return;
            if (isBottomUp || _detailsController.isValidAllocation()) {
                $("#@Html.IdFor(model => model.SaveAsDraft)").val(false);
                if ('Step1' === curStep || 'Step1a' === curStep) {
                    @if (!Model.Step3.IsRevenueGenerating)
                    {
                        <text>
                        $('#finStep #ProjectedExpense').val(0);
                        </text>
                    }
                    $('#Action').val('Save');
                    $('#generalStepForm').submit();
                } else if ('Step2' === curStep) {
                    $('#Action').val('Save');
                    $('#finStepForm').submit();
                } else if ('Step2a' === curStep) {
                    $('#Action').val('Save');
                    stepSubmitCallback();
                }
            } else {
                bootbox.alert('@Resources.Messages.Scenario_Save_CategoriesAreOverallocated_Error');
            }
        });
    }

    function stepSubmitCallback() {
        var action = $('#Action').val();
        if ('Save' === action) {
            // gather all entered info from all steps
            var finInfo = $('#finStep #SerializedModel').val();
            var asDraft = $("#@Html.IdFor(model => model.SaveAsDraft)").val();
            _detailsController.setFinInfo(finInfo);
            if (!!_saveSuccessCallbackFn && typeof _saveSuccessCallbackFn === 'function') {
                _saveSuccessCallbackFn(_detailsController.getData4Saving());
            }
            else {
                // 1 - save as new
                _detailsController.saveChanges(asDraft, 1);
            }
            //$('#createScenario').modal('hide');
        } else if ('GoToGeneral' === action) {
            displayStep1Blocks(true);
        } else if ('GoToDetails' === action) {
            displayStep2Blocks();
        } else if ('GoToFin' === action) {
            displayStep3Blocks();
        }

        $('#Action').val('');
    }

    function displayStep1Blocks(readOnly) {
        $('#@Html.IdFor(m => m.CurrentStep)').val('Step1');
        $('#@Html.IdFor(m => m.Action)').val('');
        $("#fsGeneral").show();
        if (!$('#IsBottomUp').is(':checked')) {
            $("#fsCategories").show();
        }
        $("#fsTeamAllocation").show();
        $('#dates-constraints-warning').hide();
        $("#generalStepForm").show();
        $("#fsFinancial").hide();
        $("#fsDetails").hide();
        $("#nextDetailsButton").show();
        $('#fsDependencies').hide();

        $("#backButton").hide();
        $("#nextDetailsButton").show();
        $("#nextButton").show();
        @if (!Model.Step3.IsRevenueGenerating)
		{
            <text>
            $("#saveButton").show();
            </text>
		}
		else
		{
            <text>
            $("#saveButton").hide();
            </text>
		}
        $("#saveDraftButton").show();
        $("#backDetailsButton").hide();
        lockGeneralForm(readOnly);
    }
    function displayStep2Blocks() {
        if (typeof onActivateScenarioDetails === 'function') {
            onActivateScenarioDetails();
        }

        $('#@Html.IdFor(m => m.CurrentStep)').val('Step2a');
        $('#@Html.IdFor(m => m.Action)').val('');
        $("#fsGeneral").hide();
        $("#fsCategories").hide();
        $("#fsTeamAllocation").hide();
        $('#dates-constraints-warning').hide();
        $("#fsFinancial").hide();
        $("#fsDetails").show();
        $('#fsDependencies').hide();

        //FIREFOX HACK - IT DOES NOT ADD SCROLL FOR OVERFLOW
        $("#details_grid").css("max-width", "880px");

        $("#backButton").show();
        $("#nextDetailsButton").hide();
        $("#nextButton").show();
        $("#saveButton").show();
        $("#saveDraftButton").hide();
        $("#backDetailsButton").hide();
    }
    function displayStep3Blocks() {
        $('#@Html.IdFor(m => m.CurrentStep)').val('Step2');
        $('#@Html.IdFor(m => m.Action)').val('');
        $("#fsGeneral").hide();
        $("#fsCategories").hide();
        $("#fsTeamAllocation").hide();
        $('#dates-constraints-warning').hide();
        $("#fsFinancial").show();
        $("#fsDetails").hide();
        $('#fsDependencies').hide();

        $("#backButton").show();
        $("#nextDetailsButton").hide();
        $("#nextButton").hide();
        $("#saveButton").show();
        $("#saveDraftButton").hide();
        $("#backDetailsButton").show();
    }
    function displayStep1aBlocks() {
        $('#@Html.IdFor(m => m.CurrentStep)').val('Step1a');
        $('#@Html.IdFor(m => m.Action)').val('');
        $("#fsGeneral").hide();
        $("#fsCategories").hide();
        $("#fsTeamAllocation").hide();
        $('#dates-constraints-warning').hide();
        $("#generalStepForm").hide();
        $("#fsFinancial").hide();
        $("#fsDetails").hide();
        $('#fsDependencies').show();

        $("#backButton").show();
        $("#nextDetailsButton").show();
        $("#nextButton").show();
        $("#saveButton").show();
        $("#saveDraftButton").show();
        $("#backDetailsButton").hide();
    }

    function initScenario(callbackFn) {
        compileDynamicAngularHtml($('#controller-details-grid'));
        $('#controller-details-grid').on('$destroy', destroyAngularForm);
        initMainJS();
        _detailsController = angular.element(document.getElementById('controller-details-grid')).scope();
        initStep1(false, '@projectId');
        initDependenciesStep();
        initScenarioDetails();
        initStep3();
        displayStep1Blocks(false);

        _saveSuccessCallbackFn = callbackFn;
    }
    function initDependenciesStep() {
        $('#dependency-container').resolveForm({
            projectId: '@projectId',
            minStartDate: '@Constants.MIN_SELECTABLE_DATE',
            maxEndDate: '@Constants.MAX_SELECTABLE_DATE'
        });
    }
    $(function () {
        //fix modal force focus
        $.fn.modal.Constructor.prototype.enforceFocus = function () {
            var that = this;
            $(document).on('focusin.modal', function (e) {
                if ($(e.target).hasClass('select2-input')) {
                    return true;
                }
                if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                    that.$element.focus();
                }
            });
        };
    });
</script>
@Html.HiddenFor(m => m.SaveAsDraft)
@Html.HiddenFor(m => m.CurrentStep)
@Html.HiddenFor(m => m.Action)
<div id="wizard-container">
    <div class="modal-header" id="createScenarioHeader">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">New Scenario</h4>
    </div>
    <div class="modal-body">
        <div id="generalStep">
            @{ Html.RenderPartial("_generalStep", Model.Step1); }
        </div>
        <fieldset id="fsDetails" style="display: none;">
            <legend class="text-bold small-bottom-margin">Scenario Details</legend>
            <div class="row" id="details_grid" data-section="scenarioCalendar">
                @{
                    Html.RenderPartial("_scenarioCalendar", detailsModel);
                }
            </div>
        </fieldset>
        <fieldset id="fsDependencies" style="display: none;">
            <legend class="text-bold small-bottom-margin">Resolve Dependency conflicts</legend>
            <form class="form-horizontal" name="frmResolveConflicts" id="frmResolveConflicts" action="#" method="post" novalidate="novalidate">
                <div id="dependency-container">
                    <input type="hidden" name="StartDate" class="start-date" />
                    <input type="hidden" name="EndDate" class="end-date" />
                </div>
            </form>
        </fieldset>
        <div id="finStep">
            @{ Html.RenderPartial("_finStep", Model.Step3); }
        </div>
      </div>
    <div class="modal-footer">
        <div class="pull-left">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
        <div class="pull-right">
            @if (Model.CanSaveDraft)
            {
                <button type="submit" class="btn btn-warning lockable" id="saveDraftButton" onclick="saveAsDraft();"><i class="fa fa-save"></i> @Resources.Buttons.Common_SaveAsDraft</button>
            }
            <button type="submit" class="btn btn-success lockable" id="backButton" onclick="moveToGeneral();"><i class="fa fa-backward"></i> @Resources.Buttons.Scenario_BackToInfo</button>
            <button type="submit" class="btn btn-success lockable" id="nextDetailsButton" onclick="moveToDetails();"><i class="fa fa-forward"></i> @Resources.Buttons.Common_ContinueToDetails</button>
            <button type="submit" class="btn btn-success lockable" id="backDetailsButton" onclick="moveToDetails();"><i class="fa fa-backward"></i> @Resources.Buttons.Common_BackToDetails</button>
            <button type="submit" class="btn btn-success lockable" id="nextButton" onclick="moveToFinancials();"><i class="fa fa-forward"></i> @Resources.Buttons.Common_ContinueToFinancials</button>
            <button type="submit" class="btn btn-warning lockable" id="saveButton" onclick="onSaveScenario();"><i class="fa fa-save"></i> @Resources.Buttons.Scenario_Save</button>
        </div>
    </div>
</div>
<div id="project_parts_@Model.ScenarioId" style="display:none;"></div>