@using EnVisage.Code
@using EnVisage.Code.HtmlHelpers
@using EnVisage.Models
@using EnVisage.Code.Cache
@model ScenarioDetailModel

@{
    // need to init angular header controller
    var json = Newtonsoft.Json.JsonConvert.SerializeObject(new
    {
        id = Model.Id,
        name = Model.Name,
        parentId = Model.ParentId,
        templateId = Model.TemplateId.Equals(Guid.Empty) ? (Guid?)null : Model.TemplateId,
        startDate = (Model.StartDate ?? DateTime.Today).ToString("MM/dd/yyyy"),
        endDate = (Model.EndDate ?? DateTime.Today).ToString("MM/dd/yyyy"),
        growthScenario = Model.GrowthScenario,
        expense = Model.TDDirectCosts,
        revenue = Model.ProjectedRevenue,
        useLMMargin = Model.UseLMMargin,
        grossMargin = Model.GrossMargin ?? 0,
        lmMargin = Model.LMMargin ?? 0,
        isActiveScenario = Model.IsActiveScenario,
        duration = Model.Duration,
        dateForStartOfChanges = Model.DateForStartOfChanges.HasValue ? Model.DateForStartOfChanges.Value.ToString("MM/dd/yyyy") : string.Empty,
        activeTab = Model.ActiveTab
    });
}
@{
    ViewBag.Title = ((!string.IsNullOrEmpty(Model.PartName)) ? Model.PartName + ": " : "") + Model.ProjectName + " " + "Scenario Details";
}
@section stylesheets
{
    <link href="~/Content/stylesheets/xeditable.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/stylesheets/select.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/stylesheets/angular-dnd.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/stylesheets/bootstrap-modal-bs3patch.css" rel="stylesheet" />
    <link href="~/Content/stylesheets/bootstrap-modal.css" rel="stylesheet" />
}
@section Scripts
{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/URIjs.min.js")" type="text/javascript"></script>
    @Scripts.Render("~/bundles/angular-app-modules")
    <script src="~/Scripts/Angular/app.js"></script>
    <script src="~/Scripts/Angular/Controllers/scenarioDetailController.js"></script>
    <script src="~/Scripts/Angular/Controllers/scenarioHeaderController.js"></script>
    <script src="~/Scripts/Angular/Controllers/costSavingController.js"></script>
    <script src="@Url.Content("~/Scripts/sliders.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Plugins/ScenarioDetailsGrid.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/CustomValidation.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-modalmanager.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-modal.js")" type="text/javascript"></script>
    <script type="text/javascript">
        //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();
                }
            });
        };
        var changesMade = false;
        var autoclick = false;
        function onDataChanged() {
            changesMade = true;
        }

        function onDataSaved() {
            changesMade = false;
        }

        function setupUnload() {
            $(window).on('beforeunload', function () {
                if (changesMade) {
                    return '@EnVisage.Code.Constants.CONFIRM_EDIT_SCENARIO';
                }
            });
        }

        emulateNavUrl = "/Scenarios";
        init.push(function () {
            setupUnload();
            initCostSaving();
            initFinInfoGraph();

            $(document).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))) : (object)"null"),
                    TDDirectCosts: $('#@Html.IdFor(x=> x.TDDirectCosts)').val(),
                    CostSavings: $('#@Html.IdFor(x=> x.CostSaving.CostSavings)').val()
                };
                refreshFinInfoGraphData(data);
            });
            $('#scenario-header').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
                if (typeof onDataChanged === 'function')
                    onDataChanged();
            });

            @if (Model.Id != Guid.Empty)
            {
                @:StartEdit('Scenario', '@Model.Id', "#btnDelete", "#btnsave", "erorMsgPlaceholder");
                                                                }
            $('#visibilitydropdown').click(function (event) {
                if (event.target == null || event.target.nodeName == null || (event.target.nodeName != 'A' && event.target.parentNode.nodeName != 'A')) {
                    event.stopPropagation();
                }
            });
            $('#btnCopySubmit').click(function () {
                if (!changesMade || confirm('@EnVisage.Code.Constants.CONFIRM_EDIT_SCENARIO')) {
                    if ($(this).parents('form').valid()) {
                        blockUI();
                        $(window).off('beforeunload');
                    }
                    return true;
                }
                else
                    return false;
            });
            $('#btnNewTemplate').click(function () {
                if (!changesMade || confirm('@EnVisage.Code.Constants.CONFIRM_EDIT_SCENARIO')) {
                    if ($(this).parents('form').valid()) {
                        blockUI();
                        $(window).off('beforeunload');
                    }
                    return true;
                }
                else
                    return false;
            });
            var tab = $.QueryString["ptab"];
            if (tab == "copy")
                $('#btnCopyTo').click();

            $('#@Html.ClientIdFor(x=> x.IsActiveScenario)').switcher({
                on_state_content: 'Active',
                off_state_content: 'Inactive'
            });
            $('#@Html.ClientIdFor(x=> x.IsActiveScenario)').parent().css('width', '100px');

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

            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
            };

            $('#bs-scenario-details-datepicker-rangeStart').datepicker(options);
            $('#bs-scenario-details-datepicker-rangeEnd').datepicker(options);


            var s = $("#scenario-details-container .forselect2").select2({
                allowClear: true
            });

            $('#headerController .datepicker').datepicker(options);
            initScenarioDetails();

            $(document).on('hide.bs.modal', '#copyTo', function (e) {
                // skip modal hide event from datepickers
                if ($(e.target).attr('id') != 'copyTo')
                    return true; // close modal form
                // check that form has been changed
                if (typeof isCTDataChanged === 'function')
                    // if form has been changed
                    if (isCTDataChanged()) {
                        // ask user for confirmation of form close
                        if (confirm("@EnVisage.Code.Constants.CONFIRM_CREATE_SCENARIO")) {
                            // reset change indicator
                            if (typeof resetCTDataChanged === 'function') {
                                resetCTDataChanged();
                            }
                            return true; // close modal form
                        };
                        return false; // DO NOT close modal form
                    }
                return true; // close modal form
            });
            $(document).on('hide.bs.modal', '#createTemplate', function (e) {
                if ($(e.target).attr('id') != 'createTemplate')
                    return true; // close modal form
                if (typeof isTemplateDataChanged === 'function')
                    if (isTemplateDataChanged()) {
                        if (confirm("Template form contains unsaved changes, do you really want to close the form?")) {
                            if (typeof resetTemplateDataChanged === 'function') {
                                resetTemplateDataChanged();
                            }
                        };
                        return false; // DO NOT close modal form
                    }
                return true; // close modal form
            });
            $('#@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.TDDirectCosts)').on('change', function(){
                var value = parseFloat($(this).val() || 0);
                updateProjectedExpenseOnFinGraph(value);
            });
            $('#@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.CostSaving.CostSavings)').on('change', function(){
                var value = parseFloat($(this).val() || 0);
                updateCostSavingsOnFinGraph(value);
            });
        });
        function onCreateTemplateFailure(xhr) {
            unblockUI();
            $('#createTemplateModal').html(xhr.responseText);
        }
        function onCreateTemplateSuccess(data) {
            unblockUI();
            document.location.href = document.location.href;
        }

        function onCopyToFailure(xhr) {
            $('#copyToModal').html(xhr.responseText);
            unblockUI();
        }

        function onCopyToSuccess(data) {
            unblockUI();
            var url = '@Url.Action("Details", new { @Id = "VarId" , @tab=string.Empty,  @backUrl=Model.BackUrl, @backName=Model.BackName })';
            document.location.href = url.replace('VarId', data);
        }

        // TODO: remove it
        function showAdjustMagrinModal(id) {
            var url = '@Url.Action("AdjustMargin", "Scenarios", new { id = "idval" })';
            url = url.replace('idval', id);
            $('#modalAdjustMargin .divForCreate').load(url, function () {
                $(".innerForm input").removeData("validator");
                $(".innerForm input").removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parseDynamicContent('.innerForm');
                $('#modalAdjustMargin').modal('show');
                
                $(".datepicker").datepicker({
                    autoclose: true,
                    startDate: '@Constants.MIN_SELECTABLE_DATE', // SA. ENV-1235. Disable incorrect dates input
                    endDate: '@Constants.MAX_SELECTABLE_DATE'    // SA. ENV-1235. Disable incorrect dates input
                });
            });
        }

        // TODO: remove it
        function saveMarginConfirmed() {
            if (!changesMade || confirm('@EnVisage.Code.Constants.CONFIRM_EDIT_SCENARIO')) {
                blockUI();
                $(window).off('beforeunload');
            }
            else
                return false;
            $('#saveLoader').show();
            $('#saveButton').addClass('disabled');
            var data = $('#adjustMarginForm').serialize();
            var url = '@Url.Action("AdjustMargin", "Scenarios")';
            $.post(url, data, function (responseData) {
                unblockUI();
                if (responseData != null) {
                    $('#saveLoader').hide();
                    $('#saveButton').removeClass('disabled');
                    if (responseData.Status == 'Ok') {
                        $('#modalAdjustMargin').modal('hide');
                        setTimeout(function () { window.location.href = window.location.href; }, 500);
                    } else if (responseData.Status == undefined) {
                        $('#modalAdjustMargin .divForCreate').html(responseData);
                        setupUnload();
                    }
                }
            });
        }

        function isValid() {
            return $('#scenario-header').valid();
        }

        function showDetailsGraph() {
            var scope = angular.element(document.getElementById('controller-details-grid')).scope();
            setTimeout(scope.showGraph, 300);
        }
    </script>
}
<div ng-app="app">
    <div id="erorMsgPlaceholder"></div>
    <div class="tab-content tab-content-bordered" id="scenario-details-container" ng-controller="scenarioHeaderController" ng-init="init(@json)">
        <ul id="uidemo-tabs-default-demo" class="nav nav-tabs">
            <li ng-class="getTabClass('general')">
                <a href="#general" data-toggle="tab" ng-disabled="headerWasConfirmed()">Scenario Header<span class="badge badge-primary"></span></a>
            </li>
            <li ng-class="getTabClass('scenarios')">
                <a href="#scenarios" data-toggle="tab" ng-disabled="canBeSaved() && !headerWasConfirmed()" onclick="showDetailsGraph();">Scenario Details<span class="badge badge-primary"></span></a>
            </li>
            <li ng-class="getTabClass('rateTable')">
                <a href="#rateTable" data-toggle="tab" ng-disabled="canBeSaved()">Rates<span class="badge badge-primary"></span></a>
            </li>
            <li ng-class="getTabClass('notes')">
                <a href="#notes" data-toggle="tab" ng-disabled="canBeSaved()">Notes<span class="badge badge-primary"></span></a>
            </li>
        </ul>
        <div class="tab-pane fade @(string.IsNullOrEmpty(Model.ActiveTab) || Model.ActiveTab == "general" ? "in active" : string.Empty)" id="general">
            <form style="border:0;" id="scenario-header" editable-form>
                @Html.HiddenFor(t => t.Id)
                @Html.HiddenFor(t => t.ParentId)
                @Html.HiddenFor(t => t.BackUrl)
                @Html.HiddenFor(t => t.BackName)
                <div class="panel-body" style="border: 0;" id="headerController">
                    <fieldset id="fsHead" class="form-group-margin">
                        <div class="row">
                            <div class="col-sm-12">
                                <span class="text-bold text-lg">Scenario Information</span>
                                @Html.CheckBoxFor(model => model.IsActiveScenario, new { @class = "form-control", @ng_model = "changedData.isActiveScenario", @ng_change = "modelChanged()" })
                                <hr />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group no-margin-hr">
                                    @Html.LabelFor(model => model.ProjectName, new { @class = "control-label" })
                                    @Html.TextBoxFor(model => model.ProjectName, new { @class = "form-control", @disabled = "disabled" })
                                </div>
                            </div>
                            @if (!string.IsNullOrWhiteSpace(Model.PartName))
                            {
                                <div class="col-sm-6">
                                    <div class="form-group no-margin-hr">
                                        @Html.LabelFor(model => model.PartName, new { @class = "control-label" })
                                        @Html.TextBoxFor(model => model.PartName, new { @class = "form-control", @disabled = "disabled" })
                                    </div>
                                </div>
                            }
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group no-margin-hr">
                                    @Html.LabelFor(model => model.Name, new { @class = "control-label" })
                                    @Html.TextBoxFor(model => model.Name, new { @class = "form-control", @ng_model = "changedData.name", @ng_change = "modelChanged()" })
                                    @Html.ValidationMessageFor(model => model.Name)
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group no-margin-hr">
                                    <label class="control-label">Scenario Dates</label>
                                    @*   env-716 start *@
                                    <div class="date-range-wrapper">
                                        <div class="input-daterange input-group date floatdaterange" id="bs-scenario-details-datepicker-rangeStart">
                                            @Html.TextBoxFor(x => x.StartDate, "{0:MM/dd/yyyy}", new { @class = "form-control", @ng_model = "changedData.startDate", @ng_change = string.Format("refreshDuration('{0}')", Url.Action("CalculateScenarioDuration", "Scenarios")) })
                                        </div>
                                        <div class="pull-left floatdaterange-addon">To</div>
                                        <div class="input-daterange input-group date floatdaterange" id="bs-scenario-details-datepicker-rangeEnd">
                                            @Html.TextBoxFor(x => x.EndDate, "{0:MM/dd/yyyy}", new { @class = "form-control", @ng_model = "changedData.endDate", @ng_change = string.Format("refreshDuration('{0}')", Url.Action("CalculateScenarioDuration", "Scenarios")) })
                                        </div>
                                    </div>
                                    @*  <div class="input-daterange input-group" id="bs-scenario-details-datepicker-range">
                                            @Html.TextBoxFor(x => x.StartDate, "{0:MM/dd/yyyy}", new { @class = "form-control", @ng_model = "changedData.startDate", @ng_change = string.Format("refreshDuration('{0}')", Url.Action("CalculateScenarioDuration", "Scenarios")) })
                                            <span class="input-group-addon">to</span>
                                            @Html.TextBoxFor(x => x.EndDate, "{0:MM/dd/yyyy}", new { @class = "form-control", @ng_model = "changedData.endDate", @ng_change = string.Format("refreshDuration('{0}')", Url.Action("CalculateScenarioDuration", "Scenarios")) })
                                        </div>
                                        env-716 end *@
                                    @Html.ValidationMessageFor(model => model.StartDate)
                                    @Html.ValidationMessageFor(model => model.EndDate)
                                    @if (Model.ProjectDeadline.HasValue)
                                    {
                                        <i>(@Html.LabelFor(x => x.ProjectDeadline) @Html.DisplayFor(x => x.ProjectDeadline))</i>
                                    }
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group no-margin-hr">
                                    @Html.LabelFor(x => x.TemplateId, new { @class = "control-label" })
                                    <select id="@Html.ClientIdFor(x=> x.TemplateId)"
                                            name="@System.Web.Mvc.Html.NameExtensions.NameFor(Html, x=> x.TemplateId)"
                                            class="form-control forselect2" ng-model="changedData.templateId" ng-change="modelChanged()"
                                            data-val="true" data-val-required="The Template field is required.">
                                        @Utils.GetTemplates(Model.TemplateId)
                                    </select>
                                    @Html.ValidationMessageFor(x => x.TemplateId)
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group no-margin-hr">
                                    @Html.LabelFor(x => x.Duration, new { @class = "control-label" })
                                    @Html.TextBoxFor(x => x.Duration, new { @disabled = "disabled", @class = "form-control", @ng_model = "changedData.duration" })
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <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="isFinancialAdjusted()">
                            <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 = "!isFinancialAdjusted()" } })
                                    @Html.ValidationMessageFor(x => x.DateForStartOfChanges)
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group no-margin-hr">
                                    @* Expenditures will be here *@
                                </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 = "!isFinancialAdjusted()" } })
                                        </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 = "!isFinancialAdjusted()", @ng_show = "!changedData.useLMMargin" })
                                            @Html.TextBoxFor(x => x.LMMargin, new { @class = "form-control", @ng_model = "changedData.lmMargin", @ng_change = "marginChanged(changedData.lmMargin)", @ng_disabled = "!isFinancialAdjusted()", @ng_show = "changedData.useLMMargin" })
                                            <span class="input-group-addon" style="padding-top: 3px; padding-bottom: 1px;" ng-show="isFinancialAdjusted()">
                                                @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="!isFinancialAdjusted()">
                                                @(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>
                                    </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" : "!isFinancialAdjusted()" })
                                    </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 id="cost-saving">
                        <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 id="fin-info-chart">
                        <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:", new { id = "header-val-summary" })
                    <div class="form-group" style="margin-bottom: 0;">
                        <div class="col-sm-offset-3 col-sm-9">
                            @* SA. ENV-707. For the following line HREF and button title where corrected to use backUrl and backName parameters *@
                            <a class="btn btn-primary" href='@Model.BackUrl'><i class="fa fa-backward"></i> Back to @Model.BackName</a>
                            <button id="btnCopyTo" type="button" class="btn btn-warning lockable" data-toggle="modal" data-target="#copyTo">Copy</button>
                            <button type="button" class="btn btn-warning lockable" data-toggle="modal" data-target="#createTemplate">Create Template</button>
                            @*<a onclick="showAdjustMagrinModal('@Model.Id')" data-toggle="popover" data-placement="left" class="btn btn-info popover-warning popover-dark lockable"><i class="fa fa-adjust"></i> Adjust Margin</a>*@
                            <button type="button" class="btn btn-success lockable" id="btnAdjustFinancials" ng-disabled="!canAdjustFinancial()" ng-click="adjustFinancial()"><i class="fa fa-adjust"></i> Adjust Financials</button>
                            <button type="button" class="btn btn-success" id="btnsave" ng-disabled="!canBeSaved()" ng-click="recalculateCalendar()">
                                <i class=" fa fa-save"></i> Submit Changes
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="tab-pane @(Model.ActiveTab == "scenarios" ? "in active" : string.Empty)" id="scenarios" data-section="scenarioCalendar">
            @{
                var user = (new UsersCache()).Value.FirstOrDefault(x => x.Id == new Guid(User.Identity.GetID()));
                var detailsModel = (new ScenarioDetailsCalendarModel(Model, user, ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details));
                Html.RenderPartial("_scenarioCalendar", detailsModel);
            }
        </div>
        <div class="tab-pane fade  @(Model.ActiveTab == "rateTable" ? "in active" : string.Empty)" id="rateTable">
            @Html.Partial("_rates", Model.RatesModel)
        </div>
        <div class="tab-pane fade @(Model.ActiveTab == "notes" ? "in active" : string.Empty)" id="notes">
            @Html.Partial("_notes", Model.Id)
        </div>
    </div>
    <div id="createTemplate" class="modal fade" tabindex="-2" role="dialog" style="display: none;" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content" id="createTemplateModal">
                @Html.Partial("_createTemplateModal", new ScenarioTemplateCreationModel(Model))
            </div> <!-- / .modal-content -->
        </div> <!-- / .modal-dialog -->
    </div> <!-- /.modal -->
    <!-- / Modal -->

    <div id="modalAdjustMargin" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
        <div class="modal-dialog divForCreate" style="width:900px;">

        </div> <!-- / .modal-dialog -->
    </div> <!-- / .modal -->
    <!-- Modal -->
    <div id="copyTo" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content" id="copyToModal">
                @Html.Partial("_copyToModal", new ScenarioCopyModel()
           {
               TargetProjectId = Model.ParentId,
               ScenarioId = Model.Id,
               TargetStatus = ScenarioStatus.Inactive,
               hasCostSavings = Model.CostSaving.CostSavingStartDate.HasValue
           })
            </div> <!-- / .modal-content -->
        </div> <!-- / .modal-dialog -->
    </div> <!-- /.modal -->
</div>