@model EnVisage.Models.StrategicGoalModel
@using EnVisage.Code.HtmlHelpers
@using EnVisage.Code
@{
	ViewBag.Title = Model != null ? "Edit " + Model.Name : "Add Strategic Goal";
	var companies = string.Join("','", Model.CompanyId == null ? new List<Guid>() : Model.CompanyId);
	companies = "'" + companies + "'";

}
<script type="text/javascript">
	var _sgDataChanged = false;
	function onSGDataChanged() {
		_sgDataChanged = true;
	}
	function resetSGDataChanged() {
		_sgDataChanged = false;
	}
	function isSGDataChanged() {
		return _sgDataChanged;
	}
	emulateNavUrl = "/StrategicGoal";

	function fillSelect2(multik, preselected) {
		var selected = [];
		if (preselected != null)
			selected = preselected;
		else {

		}
		multik.select2('val', selected);
	}

	function initGoal() {
            @{if (Model.Id != Guid.Empty)
			  {
				<text>
		StartEdit('StrategicGoal', '@Model.Id', "#btnDelete", "#btnsave", "erorMsgPlaceholder");
				</text>
			  }
			}

		$("#@Html.ClientIdFor(model => model.CompanyId)").select2({
			allowClear: true,
			placeholder: "Select companies"
		});

		var companies = [@Html.Raw(companies)];
		fillSelect2($("#@Html.ClientIdFor(model => model.CompanyId)"), companies);
		$(".select2-input").css("min-width", "200px");

		$('#btnsave').click(function () {
			if ($(this).parents('form').valid())
				blockUI();
		});
		$('#input-color').minicolors({
			control: 'hue',
			position: 'bottom left',
			theme: 'bootstrap'
		});

		initDatePickers();

		$('#editGoalForm').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
			if (typeof onSGDataChanged === 'function')
				onSGDataChanged();
		});
		$.validator.unobtrusive.parseDynamicContent('form#editGoalForm');
	}

	function initDatePickers() {
		var options = {
			format: 'm/d/yyyy',
			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-rangePlanSimple').datepicker(options).on('changeDate', function (evt) {
			if (evt.target.id == 'StartDate') {
				if ($('#EndDate').val() == "") {
					//AG: ENV-782. The API of this forked datepicker does not seem to work correct or we use it incorrectly in this particularly case - 
					//I cannot access datepicker methods by standard $(selector).datepicker('method', arg1, arg2, ...)
					//Setting date value directly into the textbox does not work as it does not call inline calendar update
					//so we need to use API method for that
					$('#bs-datepicker-rangePlanSimple').data('datepicker').pickers[1].setDate($('#StartDate').val());
					$('#EndDate').val("");
				}
			}
		});

            @{if (Model.Id != Guid.Empty)
			  {
                <text>
    		$('#StartDate').val($('#StartDate').val().split(" ")[0]);
    		$('#EndDate').val($('#EndDate').val().split(" ")[0]);
                </text> 
			  }
			}
    	}

	function onFailure(xhr) {
		unblockUI();
		$('#editReload').html(xhr.responseText);
		initGoal();
	}
	function onSuccess(data) {
		unblockUI();
		var href = document.location.href;
		if (href.substr(href.length - 1) == '#')
			href = href.substr(0, href.length - 1);
		document.location.href = href;
	}
</script>
@using (Ajax.BeginForm("Edit", "StrategicGoal", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onSuccess", OnFailure = "onFailure(xhr)", UpdateTargetId = "editReload" }, new { @id = "editGoalForm" }))
{
	@Html.AntiForgeryToken()
	@Html.HiddenFor(t => t.Id)    
        
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
		<h4 class="modal-title">@(Model.Id != Guid.Empty ? "Edit " + Model.Name : "Add Goal")</h4>
	</div>
	<div class="modal-body">
		<div id="erorMsgPlaceholder"></div>
		<div class="row">
			<div class="col-sm-12">
				<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" })
					@Html.ValidationMessageFor(model => model.Name)
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="form-group no-margin-hr">
					<label class="control-label">Goal Dates</label>
					<div class="input-daterange input-group" id="bs-datepicker-rangePlanSimple">
						@Html.TextBoxFor(model => model.StartDate, new { @class = "form-control" })
						@Html.ValidationMessageFor(model => model.StartDate)
						<span class="input-group-addon enddate">to</span>
						@Html.TextBoxFor(model => model.EndDate, new { @class = "form-control" })
						@Html.ValidationMessageFor(model => model.EndDate)
					</div>

				</div>
			</div>

		</div>
		<div class="row">
			<div class="col-sm-6">
				<div class="form-group no-margin-hr select2-primary">
					@Html.LabelFor(model => model.CompanyId, new { @class = "control-label" })
					@Html.EditorFor(model => model.CompanyId, string.Empty, new { List = Utils.GetCompanies(false) })
					@Html.ValidationMessageFor(model => model.CompanyId)
				</div>
			</div>
			<div class="col-sm-6 ">
				<div class="form-group no-margin-hr">
					@Html.LabelFor(model => model.Color, new { @class = "control-label" })
					@Html.TextBoxFor(model => model.Color, new { @class = "form-control", @id = "input-color" })
					@Html.ValidationMessageFor(model => model.Color)
				</div>
			</div>

		</div>

		<div class="row">
			<div class="col-sm-12">
				<div class="form-group no-margin-hr">
					@Html.LabelFor(model => model.Description, new { @class = "control-label" })
					@Html.TextAreaFor(model => model.Description, new { @class = "form-control" })
					@Html.ValidationMessageFor(model => model.Description)
				</div>
			</div>
		</div>
		@Html.ValidationSummary(false, "The Strategic Goal could not be saved due to the following errors:")
	</div> <!-- / .modal-body -->
	<div class="modal-footer">
		<button type="submit" class="btn btn-success" id="btnsave"><i class="fa fa-save"></i>Save</button>
		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	</div>
}