@using EnVisage.Code
@model EnVisage.Models.CostSavingModel
@{
    // need to init cost saving controller
    var jsModel = new
    {
        startDate = Model.CostSavingStartDate.HasValue ? Model.CostSavingStartDate.Value.ToString("MM/dd/yyyy") : null,
        endDate = Model.CostSavingEndDate.HasValue ? Model.CostSavingEndDate.Value.ToString("MM/dd/yyyy") : null,
        costSavings = Model.CostSavings,
        costSavingDescription = Model.CostSavingDescription,
        isExpanded = Model.CostSavingsPanelExpanded,
        costSavingType = Model.CostSavingType,
        isMonthlyMode = Model.IsMonthlyMode,
        isEditable = Model.IsEditable,
        scenarioId = Model.ScenarioId,
        scenarioStartDate = Model.ScenarioStartDate.HasValue ? Model.ScenarioStartDate.Value.ToString("MM/dd/yyyy") : null,
        scenarioEndDate = Model.ScenarioEndDate.HasValue ? Model.ScenarioEndDate.Value.ToString("MM/dd/yyyy") : null,
        items = string.IsNullOrWhiteSpace(Model.CostSavingItems) ? null : Model.CostSavingItems
        
    };
    var json = Newtonsoft.Json.JsonConvert.SerializeObject(jsModel);
}
<script type="text/javascript">
    function initCostSaving() {
        var options = {
            format: 'mm/dd/yyyy',
            autoclose: true,
            orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
            startDate: '@(!string.IsNullOrWhiteSpace(jsModel.scenarioStartDate) ? jsModel.scenarioStartDate : Constants.MIN_SELECTABLE_DATE)', // SA. ENV-1235. Disable incorrect dates input
            endDate: '@(!string.IsNullOrWhiteSpace(jsModel.scenarioEndDate) ? jsModel.scenarioEndDate : Constants.MAX_SELECTABLE_DATE)'    // SA. ENV-1235. Disable incorrect dates input
        };

        $('#bs-datepicker-cost-range').datepicker(options);
        $('#bs-datepicker-cost-range span.input-group-addon').hide();
        $('#@Html.IdFor(x=> x.CostSavingType)').switcher({
            on_state_content: 'Hard Savings',
            off_state_content: 'Soft Savings'
        });
        $('#@Html.IdFor(x=> x.CostSavingType)').parent().css("width", "120px");

        $('#@Html.IdFor(x=> x.IsMonthlyMode)').switcher({
            on_state_content: 'Months',
            off_state_content: 'Years'
        });
        $('#@Html.IdFor(x=> x.IsMonthlyMode)').parent().css("width", "80px");

        $(document).off('cs.auto.costSaving-range-changed').on('cs.auto.costSaving-range-changed', function (e, data) {
            data = data || {};
            var startDate = new Date(data.costSavingStartDateNew);
            var endDate = new Date(data.costSavingEndDateNew);

            // we always need to set min date for datepickers: if scenarioStartDate is existing value we will set correct min date
            // and clear min date validation in other case
            $('#@Html.IdFor(x=> x.CostSavingStartDate)').data('datepicker').setStartDate(data.scenarioStartDate);
            $('#@Html.IdFor(x=> x.CostSavingEndDate)').data('datepicker').setStartDate(data.scenarioStartDate);

            if (startDate.getTime() > 0)
                $('#@Html.IdFor(x=> x.CostSavingStartDate)').data('datepicker').setDate(startDate);

            if (endDate.getTime() > 0)
                $('#@Html.IdFor(x=> x.CostSavingEndDate)').data('datepicker').setDate(endDate);

            $('#@Html.IdFor(x=> x.ScenarioStartDate)').val(data.scenarioStartDate);
            $('#@Html.IdFor(x=> x.ScenarioEndDate)').val(data.scenarioEndDate);
        });
    }
</script>
<style type="text/css">
    .smallWidth {
        width: 200px;
    }

    #costSaving-table thead tr th,
    #costSaving-table thead tr td {
        min-width: 70px;
    }

        #costSaving-table thead tr td input {
            min-width: 100%;
        }
</style>
<div id="costSavingsController" ng-controller="costSavingController" ng-init="init(@json)" ng-cloak>
    @Html.HiddenFor(x => x.CostSavingsPanelExpanded, new { ng_value = "ViewModel.IsExpanded" })
    @Html.HiddenFor(m => m.CostSavingItems, new { ng_value = "ViewModel.ItemsJson" })
    @Html.HiddenFor(x => x.IsEditable, new { ng_value = "ViewModel.IsEditable" })
    @Html.HiddenFor(x => x.ScenarioStartDate)
    @Html.HiddenFor(x => x.ScenarioEndDate)
    <div class="row" ng-show="!ViewModel.IsExpanded">
        <div class="col-sm-6">
            <a class="btn btn-primary" ng-click="addCostSaving()" ng-disabled="!ViewModel.IsEditable"><i class="fa fa-money"></i> Add Cost Savings</a>
        </div>
    </div>
    <div class="row" ng-show="ViewModel.IsExpanded">
        <div class="col-sm-6">
            <a class="btn  btn-danger" ng-click="removeCostSaving()" ng-disabled="!ViewModel.IsEditable"><i class="fa fa-money nav-icon-btn-danger"></i> Remove Cost Savings</a>

        </div>
    </div>

    <div class="row" ng-show="ViewModel.IsExpanded">
        <div class="col-sm-4 col-md-3">
            <div class="form-group no-margin-hr">
                <label class="control-label">Cost Savings</label>
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    @Html.TextBoxFor(model => model.CostSavings, new { @class = "form-control", data_ng_model = "ViewModel.CostSavings", ng_disabled = "!ViewModel.IsEditable || !ViewModel.IsExpanded", ng_model_options = "{ updateOn: 'change' }" })
                </div>
                @Html.ValidationMessageFor(model => model.CostSavings)
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group no-margin-hr">
                <label class="control-label">Cost Saving Dates</label>
                <div class="input-daterange input-group" id="bs-datepicker-cost-range">
                    @Html.TextBoxFor(m => m.CostSavingStartDate, "MM/dd/yyyy", new { @class = "form-control", data_ng_model = "ViewModel.StartDate", ng_disabled = "!ViewModel.IsEditable || !ViewModel.IsExpanded", ng_model_options = "{ updateOn: 'change' }" })
                    <div class="input-group-addon">to</div>
                    @Html.TextBoxFor(m => m.CostSavingEndDate, "MM/dd/yyyy", new
               {
                   @class = "form-control",
                   data_ng_model = "ViewModel.EndDate",
                   ng_disabled = "!ViewModel.IsEditable || !ViewModel.IsExpanded",
                   ng_model_options = "{ updateOn: 'change' }",
                   data_val_dategreaterthanorequal = "Cost Saving End Date should not be less than Cost Saving Start Date",
                   data_val_dategreaterthanorequal_otherpropertyname = Html.IdFor(x => x.CostSavingStartDate)
               })
                </div>
                @Html.ValidationMessageFor(model => model.CostSavingStartDate)
                @Html.ValidationMessageFor(model => model.CostSavingEndDate)
            </div>
        </div>
        @if (Model.ROIDate.HasValue)
        {
            <div class="col-sm-3">
                <div class="form-group no-margin-hr">
                    @Html.LabelFor(x => x.ROIDate, new { @class = "control-label" })
                    @Html.TextBoxFor(x => x.ROIDate, "{0:MM/dd/yyyy}", new { @class = "form-control", disabled = "disabled" })
                </div>
            </div>
        }
    </div>
    <div class="row" ng-show="ViewModel.Items != null && ViewModel.IsExpanded">
        <div class="col-sm-12">
            <label class="control-label">
                Show values for
            </label>
            @Html.CheckBoxFor(x => x.IsMonthlyMode, new { @class = "switcher", ng_model = "ViewModel.Show" })
            <div class="table-light table-responsive" style="overflow-x:auto;">
                <table class="table table-bordered no-margin-vr" id="costSaving-table" ng-class="{smallWidth: !ViewModel.Show}">
                    <thead>
                        <tr>
                            <th class="nextcol">&nbsp;</th>
                            <th class="nextcol">Total</th>
                            <th class="headcol nextcol" ng-repeat="header in (ViewModel.Months)" ng-show="ViewModel.Show" style="text-align:center;">
                                {{header}}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in (ViewModel.Items)" ng-init="sectionIndex = $index">
                            <td>
                                {{row.Year}}
                            </td>
                            <td class="headcol">
                                <a href="#" class="editable-click" ng-click="onShow(this)" ng-disabled="!ViewModel.IsEditable" editable-text="row.Costs[0]" e-name="ColValue_{{row.Year}}" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit" onbeforesave="checkValue($data, $index, 0)" e-required>
                                    {{ (row.Costs[0] || 0 | number:2) }}
                                </a>
                            </td>
                            <td class="headcol" ng-repeat="col in (ViewModel.Months)" ng-show="ViewModel.Show">
                                <a href="#" class="editable-click" ng-click="onShow(this, $index)" ng-disabled="!ViewModel.IsEditable" ng-if="row.Costs[$index + 1] != null" editable-text="row.Costs[$index + 1]" e-name="ColValue_{{row.Year}}_{{$index}}" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit" onbeforesave="checkValue($data, sectionIndex, $index+1)" e-required>
                                    {{ (row.Costs[$index + 1] || 0 | number:2) }}
                                </a>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="col-sm-4" style="display:none;">
            <div style="width:100%; height:200px;background-color:lightgray;">Graph Place Holder</div>
        </div>
    </div>
    <div class="row" ng-show="ViewModel.IsExpanded">
        <div class="col-sm-4 col-md-3">
            <div class="form-group no-margin-hr switcher-block">
                @Html.LabelFor(model => model.CostSavingType, new { @class = "control-label" })
                <span ng-show="ViewModel.IsEditable">
                    @Html.CheckBoxFor(model => model.CostSavingType, new { @class = "switcher form-control", ng_model = "ViewModel.CostSavingType" })
                </span>
                <span ng-show="!ViewModel.IsEditable">
                    @(Model.CostSavingType ? "Hard Savings" : "Soft Savings")
                </span>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group no-margin-hr">
                @Html.LabelFor(model => model.CostSavingDescription, new { @class = "control-label" })
                @Html.TextAreaFor(model => model.CostSavingDescription, 3, 55, new { @class = "form-control", data_ng_model = "ViewModel.Description", ng_disabled = "!ViewModel.IsEditable || !ViewModel.IsExpanded", ng_model_options = "{ updateOn: 'change' }" })
            </div>
        </div>
    </div>
</div>