@using EnVisage.Code
@model EnVisage.Models.CostSavingModel
@{
    // need to init cost saving controller
    var json = Newtonsoft.Json.JsonConvert.SerializeObject(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,
        scenarioStartDate = Model.ScenarioStartDate.HasValue ? Model.ScenarioStartDate.Value.ToString("MM/dd/yyyy") : null,
        costSavings = Model.CostSavings,
        costSavingDescription = Model.CostSavingDescription,
        isExpanded = Model.CostSavingsPanelExpanded,
        costSavingType = Model.CostSavingType,
        isMonthlyMode = Model.IsMonthlyMode,
        isEditable = Model.IsEditable,
        ctrlStartDateId = Html.IdFor(t=>t.CostSavingStartDate).ToString(),
        items = string.IsNullOrWhiteSpace(Model.CostSavingItems) ? null : Model.CostSavingItems
    });
}
<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: '@Constants.MIN_SELECTABLE_DATE', // SA. ENV-1235. Disable incorrect dates input
            endDate: '@Constants.MAX_SELECTABLE_DATE'    // SA. ENV-1235. Disable incorrect dates input
        };

        $('#bs-datepicker-cost-range').datepicker(options);
        @if(Model.ScenarioStartDate.HasValue)
        {
            <text>
            $('#CostSaving_CostSavingStartDate').data('datepicker').setStartDate(new Date('@(Model.ScenarioStartDate.HasValue ? Model.ScenarioStartDate.Value.ToString("MM/dd/yyyy") : null)'));
        $('#CostSaving_CostSavingEndDate').data('datepicker').setStartDate(new Date('@(Model.ScenarioStartDate.HasValue ? Model.ScenarioStartDate.Value.ToString("MM/dd/yyyy") : null)'));   
        </text>
        }
        $('#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");
    }
</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 = "IsExpanded" })
    @Html.HiddenFor(m => m.CostSavingItems, new { @ng_value = "items" })
    @Html.HiddenFor(x => x.IsEditable, new { @ng_value = "IsEditable" })
    <div class="row" ng-show="!IsExpanded">
        <div class="col-sm-6">
            <a class="btn btn-primary" ng-click="addCostSaving()" ng-disabled="!IsEditable"><i class="fa fa-money"></i> Add Cost Savings</a>
        </div>
    </div>
    <div class="row" ng-show="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 = "filters.CostSavings", @ng_disabled = "!IsEditable || !IsExpanded" })
                </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 = "filters.StartDate", @ng_disabled = "!IsEditable || !IsExpanded" })
                    <div class="input-group-addon">to</div>
                    @Html.TextBoxFor(m => m.CostSavingEndDate, "MM/dd/yyyy", new { @class = "form-control", @data_ng_model = "filters.EndDate", @ng_disabled = "!IsEditable || !IsExpanded" })
                </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="data != null && IsExpanded">
        <div class="col-sm-12">
            <label class="control-label">
                Show values for
            </label>
            @Html.CheckBoxFor(x => x.IsMonthlyMode, new { @ng_click = "onMonthHeaderClick()", @class = "switcher", @ng_model = "filters.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: !filters.Show}">
                    <thead>
                        <tr>
                            <th class="nextcol">&nbsp;</th>
                            <th class="nextcol">Total</th>
                            <th class="headcol nextcol" ng-repeat="header in (filters.Months)" ng-show="filters.Show" style="text-align:center;">
                                {{header}}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in (data)" ng-init="sectionIndex = $index">
                            <td>
                                {{row.Year}}
                            </td>
                            <td class="headcol">
                                <a href="#" ng-click="onShow(this)" ng-disabled="!IsEditable" editable-text="row.Costs[0]" e-name="ColValue" 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 (filters.Months)" ng-show="filters.Show">
                                <a href="#" ng-click="onShow(this, $index)" ng-disabled="!IsEditable" ng-if="row.Costs[$index + 1] != null" editable-text="row.Costs[$index + 1]" e-name="ColValue" 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="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="IsEditable">
                    @Html.CheckBoxFor(model => model.CostSavingType, new { @class = "switcher form-control", @ng_model = "filters.CostSavingType" })
                </span>
                <span ng-show="!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 = "filters.Description", @ng_disabled = "!IsEditable || !IsExpanded" })
            </div>
        </div>
    </div>
</div>