@model EnVisage.Models.ScenarioFinInfoModel
@using EnVisage.Code

<script type="text/javascript">
    function registerDocumentEvents4InfoModel() {
        $(document).off('sd.dataload.completed').on('sd.dataload.completed', function (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 ?? 0))) : (object)"null"),
                TDDirectCosts: $('#@Html.IdFor(x=> x.TDDirectCosts)').val(),
                CostSavings: $('#@Html.IdFor(x=> x.CostSaving.CostSavings)').val()
            };
            refreshFinInfoGraphData(data);
        });
    };
    function initScenarioFinInfoModel() {
        registerDocumentEvents4InfoModel();
        initCostSaving();
        initFinInfoGraph();

        var options = {
            format: 'mm/dd/yyyy',
            autoclose: true,
            orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
            startDate: '@Constants.MIN_SELECTABLE_DATE', // SA. ENV-1235. Disable incorrect dates input
            endDate: '@Constants.MAX_SELECTABLE_DATE'    // SA. ENV-1235. Disable incorrect dates input
        };
        $('#@Html.IdFor(x=> x.DateForStartOfChanges)').datepicker(options);

        $('#@Html.IdFor(x=> x.UseLMMargin)').switcher({
            on_state_content: 'L&M',
            off_state_content: 'Gross'
        }).parent().css('width', '100px');

        $('#AdjustBUCosts').switcher({
            on_state_content: 'Yes',
            off_state_content: 'No'
        }).parent().css('width', '100px');

        $('#@Html.IdFor(x=> x.ProjectedRevenue)').on('change', function(){
            var revenue = parseFloat($(this).val() || 0);
            var expense = parseFloat($('#@Html.IdFor(x=> x.TDDirectCosts)').val() || 0);

            updateRevenueAndExpenseOnFinGraph(revenue, expense);
        });
        $('#@Html.IdFor(x=> x.GrossMargin)').on('change', function(){
            var expense = parseFloat($('#@Html.IdFor(x=> x.TDDirectCosts)').val() || 0);
            updateProjectedExpenseOnFinGraph(expense);
        });
        $('#@Html.IdFor(x=> x.LMMargin)').on('change', function(){
            var expense = parseFloat($('#@Html.IdFor(x=> x.TDDirectCosts)').val() || 0);
            updateProjectedExpenseOnFinGraph(expense);
        });
        $('#@Html.IdFor(x=> x.UseLMMargin)').on('change', function(){
            var expense = parseFloat($('#@Html.IdFor(x=> x.TDDirectCosts)').val() || 0);
            updateProjectedExpenseOnFinGraph(expense);
        });
        $('#@Html.IdFor(x=> x.TDDirectCosts)').on('change', function(){
            var value = parseFloat($(this).val() || 0);
            updateProjectedExpenseOnFinGraph(value);
        });
        $('#@Html.IdFor(x=> x.CostSaving.CostSavings)').on('change', function(){
            var value = parseFloat($(this).val() || 0);
            updateCostSavingsOnFinGraph(value);
        });
    }
</script>

<fieldset>
    <div class="row">
        <div class="col-sm-12">
            <span class="text-bold text-lg">Financials</span>
            <hr />
        </div>
    </div>
    <div class="row" ng-show="isFinInfoEditable()">
        <div class="col-sm-6">
            <div class="form-group no-margin-hr">
                @Html.LabelFor(x => x.DateForStartOfChanges, new { @class = "control-label" })
                @Html.EditorFor(x => x.DateForStartOfChanges, new { htmlAttributes = new { @class = "form-control date", ng_model = "changedData.dateForStartOfChanges", ng_change = "modelChanged()", ng_disabled = "!isFinInfoEditable()" } })
                @Html.ValidationMessageFor(x => x.DateForStartOfChanges)
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group no-margin-hr">
                @Html.Label("AdjustBUCosts", "Adjust to desired revenue/expenses", new { @class = "control-label" })
                <div>
                    @Html.CheckBox("AdjustBUCosts", true, new { @class = "form-control", ng_model = "changedData.needToAdjustMargin" })
                </div>
            </div>
        </div>
    </div>
</fieldset>
@if (Model.IsRevenueGenerating)
{
    <fieldset>
        <div class="row">
            <div class="col-sm-12">
                <span class="text-bold text-bg">Revenue</span>
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group no-margin-hr">
                    @Html.LabelFor(x => x.ProjectedRevenue, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        @Html.EditorFor(model => model.ProjectedRevenue, new { htmlAttributes = new { @class = "form-control", ng_model = "changedData.revenue", ng_change = "projectedRevenueChanged(changedData.revenue)", ng_disabled = "!isFinInfoEditable()" } })
                    </div>
                    <i ng-show="changedData.oldRevenue != changedData.revenue" ng-cloak>
                        (<label>Currently:&nbsp;</label>${{changedData.oldRevenue}})
                    </i>
                    @Html.ValidationMessageFor(model => model.ProjectedRevenue)
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group no-margin-hr">
                    @Html.LabelFor(x => x.RevenueAfterCost, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        @Html.TextBoxFor(x => x.RevenueAfterCost, "{0:0}", new { disabled = "disabled", @class = "form-control" })
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group no-margin-hr">
                    @Html.LabelFor(x => x.ActualRevenueAfterCost, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        @Html.TextBoxFor(x => x.ActualRevenueAfterCost, "{0:0}", new { disabled = "disabled", @class = "form-control" })
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group no-margin-hr">
                    <label class="control-label">Projected Margin</label>
                    <div class="input-group">
                        <span class="input-group-addon">%</span>
                        @Html.TextBoxFor(x => x.GrossMargin, new { @class = "form-control", ng_model = "changedData.grossMargin", ng_change = "marginChanged(changedData.grossMargin)", ng_disabled = "!isFinInfoEditable()", ng_show = "!changedData.useLMMargin" })
                        @Html.TextBoxFor(x => x.LMMargin, new { @class = "form-control", ng_model = "changedData.lmMargin", ng_change = "marginChanged(changedData.lmMargin)", ng_disabled = "!isFinInfoEditable()", ng_show = "changedData.useLMMargin" })
                        <span class="input-group-addon" style="padding-top: 3px; padding-bottom: 1px;" ng-show="isFinInfoEditable()">
                            @Html.CheckBoxFor(x => x.UseLMMargin, new { @class = "form-control", ng_model = "changedData.useLMMargin", ng_change = "marginTypeChanged(changedData.useLMMargin)" })
                        </span>
                        <span class="input-group-addon" ng-show="!isFinInfoEditable()">
                            @(Model.UseLMMargin ? "L&M" : "Gross")
                        </span>
                    </div>
                    <i ng-show="!changedData.useLMMargin && changedData.oldGrossMargin != changedData.grossMargin" ng-cloak>
                        (<label>Currently:&nbsp;</label>{{changedData.oldGrossMargin}}%)
                    </i>
                    <i ng-show="changedData.useLMMargin && changedData.oldLMMargin != changedData.lmMargin" ng-cloak>
                        (<label>Currently:&nbsp;</label>{{changedData.oldLMMargin}}%)
                    </i>
                    <span class="help-block field-validation-valid" data-valmsg-for="FinInfo.GrossMargin" data-valmsg-replace="true" ng-disabled="!isFinInfoEditable()" ng-if="!changedData.useLMMargin"></span>
                    <span class="help-block field-validation-valid" data-valmsg-for="FinInfo.LMMargin" data-valmsg-replace="true" ng-disabled="!isFinInfoEditable()" ng-if="changedData.useLMMargin"></span>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group no-margin-hr">
                    <label class="control-label">Calculated Margin</label>
                    <div class="input-group">
                        <span class="input-group-addon">%</span>
                        @Html.TextBoxFor(x => x.CalculatedGrossMargin, new { @class = "form-control", disabled = "disabled", ng_show = "!changedData.useLMMargin" })
                        @Html.TextBoxFor(x => x.CalculatedGrossMarginLM, new { @class = "form-control", disabled = "disabled", ng_show = "changedData.useLMMargin" })
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group no-margin-hr">
                    <label class="control-label">Actual Margin</label>
                    <div class="input-group">
                        <span class="input-group-addon">%</span>
                        @Html.TextBoxFor(x => x.CalculatedGrossMarginActuals, new { @class = "form-control", disabled = "disabled", ng_show = "!changedData.useLMMargin" })
                        @Html.TextBoxFor(x => x.CalculatedGrossMarginLMActuals, new { @class = "form-control", disabled = "disabled", ng_show = "changedData.useLMMargin" })
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
}
<fieldset>
    <div class="row">
        <div class="col-sm-12">
            <span class="text-bold text-bg">Expenses</span>
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group no-margin-hr">
                @Html.LabelFor(x => x.TDDirectCosts, new { @class = "control-label" })
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    @Html.TextBoxFor(model => model.TDDirectCosts, new { @class = "form-control", ng_model = "changedData.expense", ng_change = "modelChanged()", ng_disabled = Model.IsRevenueGenerating ? "true" : "!isFinInfoEditable()" })
                </div>
                <i ng-show="changedData.oldExpense != changedData.expense" ng-cloak>
                    (<label>Currently:&nbsp;</label>${{changedData.oldExpense}})
                </i>
                @Html.ValidationMessageFor(model => model.TDDirectCosts)
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group no-margin-hr">
                @Html.LabelFor(x => x.BUDirectCosts, new { @class = "control-label" })
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    @Html.TextBoxFor(x => x.BUDirectCosts, new { disabled = "disabled", @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group no-margin-hr">
                @Html.LabelFor(x => x.ActualLabor, new { @class = "control-label" })
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    @Html.TextBoxFor(x => x.ActualLabor, new { disabled = "disabled", @class = "form-control" })
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group no-margin-hr">
                @Html.LabelFor(x => x.LaborMaterialsSplit, new { @class = "control-label" })
                <div class="input-group">
                    <span class="input-group-addon">%</span>
                    @Html.TextBoxFor(model => model.LaborMaterialsSplit, new { @class = "form-control", disabled = "disabled" })
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group no-margin-hr">
                @Html.LabelFor(x => x.ActualLaborMaterialsSplit, new { @class = "control-label" })
                <div class="input-group">
                    <span class="input-group-addon">%</span>
                    @Html.TextBoxFor(x => x.ActualLaborMaterialsSplit, new { disabled = "disabled", @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group no-margin-hr">
                @Html.LabelFor(x => x.ActualMaterials, new { @class = "control-label" })
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    @Html.TextBoxFor(x => x.ActualMaterials, new { disabled = "disabled", @class = "form-control" })
                </div>
            </div>
        </div>
    </div>
</fieldset>
<fieldset>
    <div class="row">
        <div class="col-sm-12">
            <span class="text-bold text-bg">Cost Savings</span>
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            @Html.EditorFor(x => x.CostSaving)
        </div>
    </div>
</fieldset>
<fieldset>
    <div class="row">
        <div class="col-sm-12" data-section="fin-info-chart">
            @Html.Partial("~/Views/Scenarios/_finInfoChart.cshtml")
        </div>
    </div>
</fieldset>