@using EnVisage.Code
@using EnVisage.Code.HtmlHelpers

@model EnVisage.Models.CreateScenarioModel
@{
    var projectParts = new List<SelectListItem>() { new SelectListItem() { Value = "", Text = "" } };
}
<script src="@Url.Content("~/Scripts/CustomValidation.js")" type="text/javascript"></script>
<script type="text/javascript">
    function moveNext() {
        var frm = $("#newScenarioForm");
        var v1 = $(frm).validate().element($("#@Html.ClientIdFor(m => m.ScenarioName)"));
        var v2 = $(frm).validate().element($("#@Html.ClientIdFor(m => m.TemplateId)"));
        var v3 = $(frm).validate().element($("#@Html.ClientIdFor(m => m.StartDate)"));
        var v4 = $(frm).validate().element($("#@Html.ClientIdFor(m => m.EndDate)"));
        var v5 = $(frm).validate().element($("#@Html.ClientIdFor(m => m.CreateAsActive)"));
        var v6 = $(frm).validate().element($("#@Html.ClientIdFor(m => m.GrowthScenario)"));

        if(v1 && v2 && v3 && v4 && v5 && v6)
        {
            $("#fsGeneral").hide(100);
            $("#fsCategories").hide(100);
            $("#fsTeamAllocation").hide(100);
            $("#fsFinancial").show(100);

            $("#backButton").show(50);
            $("#nextButton").hide(50);
            $("#saveButton").show(50);
        }

    }
    function saveAsDraft() {
        $("#@Html.ClientIdFor(model =>model.SaveAsDraft)").val(true);
        save();
    }

    function saveSliders() {
        var finalSliderValues;
        $("#teamsContainer .ui-slider").each(function (i, slider) {
            teamallocations[$(this).attr('id').split("_")[0]] = $(this).slider("value");
            });
        $('#TeamAllocations').val(JSON.stringify(teamallocations));
    }

    function save() {
        saveSliders();
        if ($("#newScenarioForm").valid())
            blockUI();
        $("#newScenarioForm").submit();
    }

    function moveBack() {
        $("#fsFinancial").hide(100);
        $("#fsGeneral").show(100);
        if ($("#@Html.ClientIdFor(model =>model.TemplateId)").val() != "") {
            $("#fsCategories").show(100);
            $("#fsTeamAllocation").show(100);
        }

        $("#backButton").hide(50);
        $("#nextButton").show(50);
        $("#saveButton").hide(50);
    }

    function reloadEC(obj) {
        $(obj).parents('form').validate().element($(obj)); 
    	
        var text = "@Url.Action( "GetECsByTemplateId", "Scenarios", new { Id = "JSVar" })";

        text = text.replace("JSVar", $(obj).val());

        if ($(obj).val() == "") {
            $("#fsCategories").css("display", "none");
            $("#fsTeamAllocation").css("display", "none");
            return;
        }

        blockUI();
        $("#fsCategories").show();
        $('#expenditures_@Model.ScenarioId').load(text, function () {
            if (!$("#fsFinancial").is(':visible'))
                $("#fsTeamAllocation").show();
            unblockUI();
        });
    }

    function reloadProjectParts() {
        var text = "@Url.Action( "GetProjectPartsByProjectId", "Scenarios", new { Id = "JSVar" })";

        text = text.replace("JSVar", $('#project_@Model.ScenarioId').val());
        blockUI();
        $('#project_parts_@Model.ScenarioId').load(text, function () {
            var projectPart = $("#partName_@Model.ScenarioId");
            projectPart.html($('#project_parts_@Model.ScenarioId').find("select").html());

            if (projectPart.find("option").length > 0)
                $("#divPartName_@Model.ScenarioId").show();
            else
                $("#divPartName_@Model.ScenarioId").hide();

            unblockUI();
        });
    }

    function initScenario() {
        
        reloadProjectParts();

        $("#project_@Model.ScenarioId.ToString()").select2({
            allowClear: true
        }).on('change', reloadProjectParts);

        $("#partName_@Model.ScenarioId").select2({
            allowClear: true
        });

        $("#createScenario .forselect2").select2({
            allowClear: true
        });

        var options = {
            format: 'm/d/yyyy',
            autoclose: true,
            orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto'
        };

        $('#bs-datepicker-range').datepicker(options).on('changeDate', function(evt) {
            if (evt.target.id == '@Html.ClientIdFor(m => m.EndDate)') {
                var newDate = new Date(new Date($("#@Html.ClientIdFor(m => m.EndDate)").val()).getTime() + 1000 * 60 * 60 * 24);
                var sDate = (newDate.getMonth() + 1) + '/' + newDate.getDate() + '/' + newDate.getFullYear();
                $('#@Html.ClientIdFor(m => m.CostSavingStartDate)').val(sDate);
                $('#@Html.ClientIdFor(m => m.CostSavingStartDate)').data('datepicker').setStartDate(newDate);
                angular.element(document.getElementById('costSavingsController')).scope().setStartDate(sDate);
            }
            else if (evt.target.id == '@Html.ClientIdFor(m => m.StartDate)') {
            	if ($('#@Html.ClientIdFor(m => m.EndDate)').val() == "")
            		$('#@Html.ClientIdFor(m => m.EndDate)').val($('#@Html.ClientIdFor(m => m.StartDate)').val());
            }
        });
        $('#bs-datepicker-range span.input-group-addon').hide();


        $('#bs-datepicker-cost-range').datepicker(options);
        $('#bs-datepicker-cost-range span.input-group-addon').hide();

        $("#btnAddCostSavings").click(function () {
            $('#@Html.IdFor(t=>t.CostSavingsPanelExpanded)').val(true);
            $("#rowBtnAddCostSavings").hide(50);
            $("#rowCostSavings1").show(50);
            $("#rowCostSavings2").show(50);
            $("#rowCostSavings3").show(50);
        });


        $('input.yes-no-switcher').switcher({
            on_state_content: 'Yes',
            off_state_content: 'No'
        });

        $('input.yes-no-switcher').parent().css("width", "80px");

        $('#costSaving_@Model.ScenarioId').switcher({
            on_state_content: 'Hard Savings',
            off_state_content: 'Soft Savings'
        });
        $('#costSaving_@Model.ScenarioId').parent().css("width", "120px");

        $('#swCostSavingsYM').switcher({
            on_state_content: 'Months',
            off_state_content: 'Years'
        });
        $('#swCostSavingsYM').parent().css("width", "80px");

        if ($("#@Html.ClientIdFor(m => m.TemplateId)").val() != "")
            $("#@Html.ClientIdFor(m => m.TemplateId)").change();

        //unobtrusive validation needs to be set up as this form is loaded dynamically
        $.validator.unobtrusive.parse($("#newScenarioForm"));
        $("#addteamdiv").hide();
    }

    var teamallocations = {};
    var fired = false;
    var sliders;
    var othersliders;
    $(function () {
        angular.bootstrap($("#fsFinancial"), ['controllers']);
    //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();
            }
        });
    };
    $("#addteamdiv").hide();
    if ($('#TeamAllocations').val()) teamallocations = JSON.parse($('#TeamAllocations').val());
    for (key in teamallocations) {
        $("#addTeams").find('option[value=' + key + ']').remove();
    }
        sliders = $("#teamsContainer .ui-slider");
    $('div.row', $('#teamsContainer')).each(function (i, div) {
        $(this).find('.ui-slider').slider({
            'range': 'min',
            'min': 0,
            'max': 100,
            'value': teamallocations[div.id.split("_")[0]],
            change: onDependentChange,
            slide: onDependentSlide
        });
    });
        othersliders = sliders;
        $("#addTeams").select2({
            placeholder: "Select teams",
        });
    });

    function onDependentSlide(event, ui) {
        if (fired) return;
    	var value = parseInt(ui.value);
        // Get current total
        var total = 0;
        var totalofothers = 0;
        var availableTotal = 100;
        var nonmovablesum = 0;
        othersliders = $(othersliders).not(this); //putting this slider off collection of autoadjustable sliders
        $(this).addClass("ui-slider-success");
        if (othersliders.length == 0 && sliders.length > 1){
            fired = true;
            $(sliders).slider("disable");
            bootbox.confirm("By moving this slider, you will adjust previously set values for other teams on this scenario.",
            function (result) {
                if (!result) {
                    fired = false;
                    $(sliders).slider("enable");
                    var valuetoset = availableTotal;
                    $(sliders).not($("#" + ui.handle.parentElement.id.split("_")[0] + "_container")).each(function (i, div) {
                        availableTotal -= $(this).slider("value");
                        //console.log("val: " + $(this).slider("value") + "; availableTotal: " + availableTotal);

                    });
                    $("#" + ui.handle.parentElement.id.split("_")[0] + "_container").slider("value", availableTotal);
                    return;
                }
                else {
                    $(sliders).removeClass("ui-slider-success");
                    othersliders = $(sliders).not(this);
                }
                var valuetoset = availableTotal;
                $(sliders).not($("#" + ui.handle.parentElement.id.split("_")[0] + "_container")).each(function (i, div) {
                    availableTotal -= $(this).slider("value");
                    //console.log("val: " + $(this).slider("value") + "; availableTotal: " + availableTotal);

                });
                $("#" + ui.handle.parentElement.id.split("_")[0] + "_container").slider("value", availableTotal);
                fired = false;
                $(sliders).slider("enable");
            });
            
        }
        $(sliders).not(this).each(function () {
            totalofothers += teamallocations[$(this).attr('id').split("_")[0]]; //calculate precise total for all allocatios except for one that we moved
        });
        $(othersliders).not(this).each(function () {
            nonmovablesum += teamallocations[$(this).attr('id').split("_")[0]]; //calculate precise total for all allocatios except for one that we moved
        });
        nonmovablesum = totalofothers - nonmovablesum;
        total = totalofothers + value;
        var change = availableTotal - total; //amount to ditribute betwee autoadjustable sliders
        //console.log("change: " + change);
        var sliderscount = othersliders.length;
        if (change != 0) {
            var tempsum = value + Math.round(nonmovablesum);
        	var tempprecisesum = value + nonmovablesum;
            for (i = othersliders.length -1 ; i >= 0 ; i--) {
            	var currvalue = teamallocations[$(othersliders[i]).attr('id').split("_")[0]]; //getting value of one of autoadjustable sliders
            	var newprecisevalue = currvalue + change / sliderscount;
            	if (newprecisevalue < 0)
            		newprecisevalue = 0;
            	//console.log("currvalue: " + currvalue + "; set: " + newprecisevalue + "; tempsum " + tempsum);
                if (i == 0) { //for the last slider we set value as 100-other values
                	if (tempprecisesum <= 100) {
                		teamallocations[$(othersliders[i]).attr('id').split("_")[0]] = 100 - tempprecisesum;
                		$(othersliders[i]).slider("value", 100 - tempsum);
                	}
                	else {
                		teamallocations[$(othersliders[i]).attr('id').split("_")[0]] = 0;
                		var remainder = (tempprecisesum - 100) / ((sliderscount - 1 > 0 ? sliderscount - 1 : 1));
                		//console.log("REMI: " + remainder);
                		for (j = 1; j < othersliders.length; j++) {
                			teamallocations[$(othersliders[j]).attr('id').split("_")[0]] -= remainder;
                			$(othersliders[j]).slider("value", Math.round(teamallocations[$(othersliders[j]).attr('id').split("_")[0]]));
                		}
                	}
                	//console.log("set last to " + (100 - tempsum));
                }
                else {
                	teamallocations[$(othersliders[i]).attr('id').split("_")[0]] = newprecisevalue;
                	$(othersliders[i]).slider("value", Math.round(newprecisevalue));
                	tempsum += Math.round(newprecisevalue);
                	tempprecisesum += newprecisevalue;
                	//console.log("set to " + Math.round(newprecisevalue));
                }
            }
        }
        teamallocations[ui.handle.parentElement.id.split("_")[0]] = value;
        //console.log(teamallocations);
        //$(this).children(".sliderValue").val(value);
        $(this).children(".sliderTitle").html(value + '%');
    }
    function onDependentChange(event, ui) {
    	var value = parseInt(ui.value);
        $(this).children(".sliderValue").val(value);
        $(this).children(".sliderTitle").html(value + '%');
    }
    function showaddteams() {
        $("#addteambutton").hide();
        $("#addteamdiv").show();
    }
    function hideteams() {
        $("#addteambutton").show();
        $("#addteamdiv").hide();
    }
    function addteams() {
        $("#addteambutton").show();
        $("#addteamdiv").hide();
        var value_to_add = 0;
        if (sliders.length == 0 && $("#addTeams").val().length > 0){
            value_to_add = 100/$("#addTeams").val().length;
        }
        var data = $("#addTeams").select2('data');
        jQuery.each($("#addTeams").val(), function (i, val) {
            $('#teamsContainer div#addteambutton').last().before('<div class="row" id="' + val + '_div"><div class="col-sm-4" style="text-align:right;"><label id="' + val + '_label">' +
                data[i].text + '</label></div><div class="col-sm-4" style="padding-top: 6px;"><div id="' + val + '_container" class="ui-slider">' + 
                '<input id="' + val + '_value" class="sliderValue" type="hidden" value="0" name="allocation" data-val="true"><span class="sliderTitle">0%</span>' +
                '</div></div><div class="col-sm-4"><a class="btn btn-xs btn-labeled btn-danger" onclick="removeteam(\'' + val + '\');">Remove</a></div></div>');
            $('#teamsContainer div.row').last().find('.ui-slider').first().slider({
                'range': 'min',
                'min': 0,
                'max': 100,
                'value': value_to_add,
                change: onDependentChange,
                slide: onDependentSlide
            });
            $("#teamsContainer .ui-slider").last().siblings().text(value_to_add + "%");///buggy!!!!!
            othersliders.push($("#teamsContainer .ui-slider").last()[0]);
            teamallocations[val] = value_to_add;
            $("#addTeams").find('option[value=' + val + ']').remove();
            
        });
        $("#addTeams").select2("val", "");
        sliders = $("#teamsContainer .ui-slider");
    }
    function removeteam(id) {
        $('#addTeams')
            .append($("<option></option>")
                .attr("value", id)
                .text($('#' + id + '_label').text()));
        othersliders = $(othersliders).not($('#' + id + '_container').first());
        var todistribute = teamallocations[id];
        if (othersliders.length > 0) {
            var sliderscount = othersliders.length;
            for (i = othersliders.length - 1 ; i >= 0 ; i--) {
                teamallocations[$(othersliders[i]).attr('id').split("_")[0]] += todistribute / sliderscount;
                $(othersliders[i]).slider("value", Math.round(teamallocations[$(othersliders[i]).attr('id').split("_")[0]]));
            }
        }
        else if (sliders.length > 0) {
            var sliderscount = sliders.length;
            for (i = othersliders.length - 1 ; i >= 0 ; i--) {
                teamallocations[$(sliders[i]).attr('id').split("_")[0]] += todistribute / sliderscount;
                $(sliders[i]).slider("value", Math.round(teamallocations[$(othersliders[i]).attr('id').split("_")[0]]));
            }
        }
        $('#' + id + '_div').remove();
        sliders = $("#teamsContainer .ui-slider");
        delete teamallocations[id];
    }
    function onCreateScenarioSubmit() {
        $('#@Html.IdFor(t=>t.CostSavingItems)').val(JSON.stringify(angular.element(document.getElementById('costSavingsController')).scope().data));
    }
</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 class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	<h4 class="modal-title">New Scenario</h4>
</div>
<div class="modal-body">
@using (Ajax.BeginForm("CreateScenario", "Scenarios", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onSuccess", OnFailure = "onFailure(xhr)", UpdateTargetId = "reloadForm" }, new { @id = "newScenarioForm", @class = "form-horizontal", onsubmit="onCreateScenarioSubmit();" }))
{ 
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.ScenarioId)
    @Html.HiddenFor(m => m.ProjectId)
    @Html.HiddenFor(m => m.PartId)
    @Html.HiddenFor(m => m.TeamAllocations)
    @Html.HiddenFor(m => m.SaveAsDraft)
	@Html.HiddenFor(m => m.ProjectDeadline)
    @Html.HiddenFor(m => m.CostSavingItems)
    @Html.HiddenFor(m => m.CostSavingsPanelExpanded)
    <fieldset id="fsGeneral" class="form-group-margin">
	    <legend class="text-bold" style="display:none;">Scenario Information</legend>
	    <div class="row">
		    <div class="col-sm-7">
			    <div class="form-group no-margin-hr">
				    @Html.LabelFor(model => model.ProjectId, new { @class = "control-label" })
					@Html.DropDownListFor(model => model.ProjectId, Utils.GetProjects(User.Identity.Name), new { @class = "form-control", @id = "project_" + Model.ScenarioId.ToString(), @disabled = "disabled" })
                    @Html.ValidationMessageFor(model => model.ProjectId)
				</div>
		    </div>
		    <div class="col-sm-5" id="divPartName_@Model.ScenarioId" style="display:none;">
			    <div class="form-group no-margin-hr">
                    @Html.LabelFor(model => model.PartId, new { @class = "control-label" })
					@Html.DropDownListFor(model => model.PartId, Utils.GetProjectParts(Model.ProjectId), new { @class = "form-control", @id = "partName_" + Model.ScenarioId, @disabled = "disabled" })
                    @Html.ValidationMessageFor(model => model.PartId)
				</div>
			</div>
	    </div>
	    <div class="row">
		    <div class="col-sm-7">
			    <div class="form-group no-margin-hr">
					@Html.LabelFor(model => model.ScenarioName, new { @class = "control-label" })
					@Html.TextBoxFor(model => model.ScenarioName, new { @class = "form-control" })
					@Html.ValidationMessageFor(model => model.ScenarioName)
				</div>
            </div>	
		    <div class="col-sm-5">
			    <div class="form-group no-margin-hr">
                    <label class="control-label">Scenario Dates</label>
                    <div class="input-daterange input-group" id="bs-datepicker-range">
                        @Html.EditorFor(t => t.StartDate)
						<div class="input-group-addon">to</div>
						@Html.EditorFor(model => model.EndDate)
					</div>
					@Html.ValidationMessageFor(model => model.StartDate)
					@Html.ValidationMessageFor(model => model.EndDate)
					@if(Model.ProjectDeadline != null)
					{ 
						<i>(Project Deadline: @Model.ProjectDeadline.Value.ToShortDateString())</i>
					}
			    </div>
		    </div>
	    </div>
	    <div class="row">
		    <div class="col-sm-6 col-md-7">
			    <div class="form-group no-margin-hr">
					@Html.LabelFor(model => model.TemplateId, new { @class = "control-label" })
					@Html.DropDownListFor(model => model.TemplateId, Utils.GetTemplates(), new { @class = "form-control forselect2", @onchange = "reloadEC(this);" })
					@Html.ValidationMessageFor(model => model.TemplateId)
                </div>
			</div>
		    <div class="col-sm-3 col-md-2">
			    <div class="form-group no-margin-hr switcher-block">
				    @Html.LabelFor(model => model.CreateAsActive, new { @class = "control-label" })
				    @Html.CheckBoxFor(model => model.CreateAsActive, new { @class = "switcher form-control yes-no-switcher" })
				    @Html.ValidationMessageFor(model => model.CreateAsActive)
                </div>
            </div>						    
		    <div class="col-sm-3 col-md-2">
			    <div class="form-group no-margin-hr switcher-block">
				    @Html.LabelFor(model => model.GrowthScenario, new { @class = "control-label" })
				    @Html.CheckBoxFor(model => model.GrowthScenario, new { @class = "switcher form-control yes-no-switcher" })
					@Html.ValidationMessageFor(model => model.GrowthScenario)
                </div>
		    </div>
	    </div>
    </fieldset>	
    <fieldset id="fsCategories" style="display:none;" class="form-group-margin">
	    <legend class="text-bold small-bottom-margin">Expenditure Categories</legend>
	    <div class="row" id="expenditures_@Model.ScenarioId">
        </div>
    </fieldset>	
    <fieldset id="fsTeamAllocation">
	    <legend class="text-bold small-bottom-margin">Teams</legend>
		<div class="col-sm-12" id="teamsContainer">
        @foreach (var team2proj in Model.Project.Team2Project.ToList())
        {
            <div class="row" id="@team2proj.Team.Id.ToString()_div">
                <div class="col-sm-4" style="text-align:right;">
					<label id="@team2proj.Team.Id.ToString()_label">
						@team2proj.Team.Name    
					</label>
			    </div>
                <div class="col-sm-4" style="padding-top: 6px;">
                    <div id="@team2proj.Team.Id.ToString()_container" class="ui-slider">
                        <input id="@team2proj.Team.Id.ToString()_value" class="sliderValue" type="hidden" value="@Math.Floor((double)100 / Model.Project.Team2Project.Count())" name="allocation" data-val="true">
                        <span class="sliderTitle">@Math.Floor((double)100 / Model.Project.Team2Project.Count()) %</span>
                    </div>
                </div>
                <div class="col-sm-4">
                    @*<a class="btn btn-xs btn-labeled btn-danger" onclick="removeteam('@team2proj.Team.Id.ToString()');">Remove</a>*@
                </div>
            </div>
        }
			<div id="addteambutton">
				<div>
					<div class="col-sm-4" style="text-align:right;">
						<a class="btn btn-success"  href="javascript:void(0)" onclick="showaddteams();">Add teams</a>
					</div>
					<div class="col-sm-4" style="padding-bottom: 17px;">
						&nbsp;
					</div>
					<div class="col-sm-4" style="padding-bottom: 17px;"> 
					</div>
				</div>
			</div>
			<div id="addteamdiv" >
				<div>
					<div class="form-group no-margin-hr select2-primary col-sm-4" style="text-align:right;">
						@Html.ListBox("addTeams", EnVisage.Code.Utils.GetTeams(false), new { @id = "addTeams", @class = "form-control" })
					</div>
					<div class="col-sm-4">
						<a class="btn btn-success"  href="javascript:void(0)" onclick="addteams();"><i class="fa fa-plus"></i> Add</a>
                        <a class="btn btn-default"  href="javascript:void(0)" onclick="hideteams();">Cancel</a>
					</div>
					<div class="col-sm-4" style="padding-bottom: 17px;"> 
					</div>
				</div>
			</div>
		</div> 				
	</fieldset>	
	<fieldset id="fsFinancial" style="display:none;">
		<legend class="text-bold small-bottom-margin">Financial Information</legend>
	    <div id="costSavingsController" ng-controller="costSavingController">
		<div class="row">
			<div class="col-sm-4 col-md-3">
			    <div class="form-group no-margin-hr">
			        <label class="control-label" for="@Html.IdFor(t=>t.ProjectedRevenue_Expense)">Projected @(Model.Project.IsRevenueGenerating ? "Revenue" : "Expense")</label>
			        <div class="input-group">
			            <span class="input-group-addon">$</span>
			            @Html.TextBoxFor(model => model.ProjectedRevenue_Expense, new { @class = "form-control" })
			        </div>
			        @Html.ValidationMessageFor(model => model.ProjectedRevenue_Expense)
			    </div> 
			</div>
		    <div class="col-sm-2">
		        @if (Model.Project.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"}, false)
		                    <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_@Model.ScenarioId">
		        @if (Model.Project.IsRevenueGenerating)
		        {
					<div class="radio" style="margin-top: 0;">
						<label>
							@Html.RadioButtonFor(t => t.UseLMMargin, false, new { }, false)
							<span class="lbl">Gross</span>
						</label>
					</div> <!-- / .radio -->
					<div class="radio" style="margin-bottom: 0;">
						<label>
							@Html.RadioButtonFor(t => t.UseLMMargin, true, new { }, false)
							<span class="lbl">L&M (static material costs)</span>
						</label>
					</div>
				}
			</div>
		</div>
		<div class="row" id="rowBtnAddCostSavings">
			<div class="col-sm-6">
				<a class="btn btn-primary" id="btnAddCostSavings"><i class="fa fa-money"></i> Add Cost Savings</a>
			</div>
		</div>
		<div class="row" id="rowCostSavings1" style="display:none;">
			<div class="col-sm-4 col-md-3">
				<div class="form-group no-margin-hr">
					@Html.LabelFor(model => model.CostSavings, new { @class = "control-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" })
					</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.EditorFor(m => m.CostSavingStartDate, new { htmlAttributes = new { @class = "form-control", @data_ng_model = "filters.StartDate"} })
						<div class="input-group-addon">to</div>
	                        @Html.EditorFor(m => m.CostSavingEndDate, new { htmlAttributes = new { @class = "form-control", @data_ng_model = "filters.EndDate" } })
					</div>
                    @Html.ValidationMessageFor(model => model.CostSavingStartDate)
					@Html.ValidationMessageFor(model => model.CostSavingEndDate)
				</div>
			</div>
		</div>
		<div class="row" id="rowCostSavings2" style="display:none;" ng-show="data != null">							
	            <div class="col-sm-12">							
				<label><span class="switcherLbl">Show values for </span><input type="checkbox" ng-click="onMonthHeaderClick()" id="swCostSavingsYM" class="switcher" {{ filters.Show ? "" : "checked" }} /></label>
	                <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" ng-repeat="header in (filters.Months)" class="nextcol" 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="#" 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-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" id="rowCostSavings3" style="display:none;">
			<div class="col-sm-3 col-md-2">
				<div class="form-group no-margin-hr switcher-block">
					@Html.LabelFor(model => model.CostSavingType, new { @class = "control-label" })
					@Html.CheckBoxFor(model => model.CostSavingType, new { @id = "costSaving_" + Model.ScenarioId, @class = "switcher form-control" })
					@Html.ValidationMessageFor(model => model.CostSavingType)
				</div> 
			</div>
		</div>        
	    </div>
	</fieldset>	    		
	@Html.ValidationMessage("errors", new { @style = "text-align: left" })
	@Html.ValidationSummary(false, "The scenario could not be saved due to the following errors:")   
}				  					
</div>
<div class="modal-footer">
	<div class="pull-left">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
   </div>
	<div class="pull-right">
		<a class="btn btn-success lockable" id="backButton" href="javascript:void(0)" onclick="moveBack();" style="display:none;"><i class="fa fa-backward"></i> Back to Scenario Info</a>
		<label style="display:none;" id="saveLoader"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Saving...</label>
		<a class="btn btn-primary lockable" id="saveDraftButton" href="javascript:void(0)" onclick="saveAsDraft();"><i class="fa fa-save"></i> Save as Draft</a>
        <a class="btn btn-success lockable" id="nextButton" href="javascript:void(0)" onclick="moveNext();"><i class="fa fa-forward"></i> Continue to Financials</a>
        <a class="btn btn-warning lockable" id="saveButton" href="javascript:void(0)" onclick="save();" style="display:none;"><i class="fa fa-save"></i> Save Scenario</a>
	</div>
</div>	
<div id="project_parts_@Model.ScenarioId" style="display:none;"></div>