@model EnVisage.Models.CreateScenarioModel.FinInfoModel
<script type="text/javascript">
    function initStep3() {
        compileDynamicAngularHtml("#finStep");
        $('#finStepForm').on('$destroy', destroyAngularForm);
        initCostSaving();
        initFinInfoGraph();

        $(document).off('sd.dataload.completed').on('sd.dataload.completed', refreshGraph);
        $('#@Html.IdFor(x=> x.ProjectedRevenue)').on('change', function(){
            var value = parseFloat($(this).val() || 0);
            updateProjectedRevenueOnFinGraph(value);
        });
        $('#@Html.IdFor(x=> x.ProjectedExpense)').on('change', function(){
            var value = parseFloat($(this).val() || 0);
            updateProjectedExpenseOnFinGraph(value);
        });
        $('#@Html.IdFor(x=> x.CostSavings.CostSavings)').on('change', function(){
            var value = parseFloat($(this).val() || 0);
            updateCostSavingsOnFinGraph(value);
        });

        $.validator.unobtrusive.parseDynamicContent("#finStepForm");
    }
    function onStep3Failure(xhr) {
        showErrorModal();
        $('#Action').val('');
    }
    function onStep3Success(result) {
        handleAjaxResponse(result, function(result) {
            if (!!result && !!result.Html) {
                $('#finStep').html(result.Html);
                initStep3();
                stepSubmitCallback();
            }
            else {
                $('#Action').val('');
            }
        }, null, null, $('#finStepForm'));
    }
    function onStep3Begin(){
        blockUI();
    }
    function refreshGraph(e, costs){
        var data = {
            ECExpense: costs,
            IsRevenueGenerating: @Model.IsRevenueGenerating.ToString().ToLower(),
            ProjectedRevenue: @(Model.IsRevenueGenerating ? Html.Raw(string.Format("$('#{0}').val()", Html.IdFor(x => x.ProjectedRevenue))) : (object)"null"),
            TDDirectCosts: @(!Model.IsRevenueGenerating ? Html.Raw(string.Format("$('#{0}').val()", Html.IdFor(x => x.ProjectedExpense))) : (object)"null"),
            CostSavings: $('#@Html.IdFor(x=> x.CostSavings.CostSavings)').val()
        };
        refreshFinInfoGraphData(data);
    }
</script>
@using (Ajax.BeginForm("SubmitCreateScenarioStep3", "Scenarios", new AjaxOptions
{
    HttpMethod = "Post",
    OnSuccess = "onStep3Success",
    OnFailure = "onStep3Failure(xhr)",
    OnBegin = "onStep3Begin",
    OnComplete = "unblockUI",
}, new
{
    @id = "finStepForm",
    editable_form = "",
    submit = "void(0)" // hack to prevent xeditable form.$submit which will reset all cost savings to 0s. value doesn't matter, just use any value
}))
{
    @Html.HiddenFor(m => m.SerializedModel)
    @Html.HiddenFor(t => t.IsRevenueGenerating)
    @Html.AntiForgeryToken()
    <fieldset id="fsFinancial" style="display: none;">
        <legend class="text-bold small-bottom-margin">Financial Information</legend>
        <div class="row">
            <div class="col-sm-4 col-md-3">
                <div class="form-group no-margin-hr">
                    @if (Model.IsRevenueGenerating)
                    {
                        @Html.LabelFor(x => x.ProjectedRevenue, new { @class = "control-label" })
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            @Html.TextBoxFor(model => model.ProjectedRevenue, new { @class = "form-control" })
                        </div>
                        @Html.ValidationMessageFor(model => model.ProjectedRevenue)
                    }
                    else
                    {
                        @Html.LabelFor(x => x.ProjectedExpense, new { @class = "control-label" })
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            @Html.TextBoxFor(model => model.ProjectedExpense, new { @class = "form-control" })
                        </div>
                        @Html.ValidationMessageFor(model => model.ProjectedExpense)
                    }
                </div>
            </div>
            <div class="col-sm-2">
                @if (Model.IsRevenueGenerating)
                {
                    <div class="form-group no-margin-hr">
                        @Html.LabelFor(model => model.Margin, new { @class = "control-label" })
                        <div class="input-group">
                            @Html.TextBoxFor(model => model.Margin, new { @class = "form-control" })
                            <span class="input-group-addon">%</span>
                        </div>
                        @Html.ValidationMessageFor(model => model.Margin)
                    </div>
                }
            </div>
            <div class="col-sm-4 no-padding-hr" style="margin-top:11px;" id="divMargin">
                @if (Model.IsRevenueGenerating)
                {
                    <div class="radio" style="margin-top: 0;">
                        <label>
                            @Html.RadioButtonFor(t => t.UseLMMargin, false)
                            <span class="lbl">Gross</span>
                        </label>
                    </div> <!-- / .radio -->
                    <div class="radio" style="margin-bottom: 0;">
                        <label>
                            @Html.RadioButtonFor(t => t.UseLMMargin, true)
                            <span class="lbl">L&amp;M (static material costs)</span>
                        </label>
                    </div>
                }
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                @Html.EditorFor(x => x.CostSavings)
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" data-section="fin-info-chart">
                @Html.Partial("_finInfoChart")
            </div>
        </div>
    </fieldset>
    @Html.ValidationSummary(false, "The scenario could not be saved due to the following errors:")
}