@using EnVisage.Code
@model EnVisage.Models.ManageUserViewModel
@{
    ViewBag.Title = "Manage Account";
}
<h2>@ViewBag.Title.</h2>
<p class="text-success">@ViewBag.StatusMessage</p>
<div class="row">
    <div class="col-md-12">
        @(ViewBag.HasLocalPassword ? Html.Partial("_ChangePasswordPartial") : Html.Partial("_SetPasswordPartial"))
        <form name="editAccountForm" id="editAccountForm">
            @Html.AntiForgeryToken()
		    <div class="panel-body">
                <div class="form-group">
				    @Html.LabelFor(model => model.FirstName, new { @class = "col-sm-2 control-label" })
				    <div class="col-sm-10">
					    @Html.TextBoxFor(model => model.FirstName, new { @class = "form-control firstname editField" })
					    @Html.ValidationMessageFor(model => model.FirstName)
				    </div>
			    </div>
                <div class="form-group">
				    @Html.LabelFor(model => model.LastName, new { @class = "col-sm-2 control-label" })
				    <div class="col-sm-10">
					    @Html.TextBoxFor(model => model.LastName, new { @class = "form-control lastname", @disabled = "disabled" })
					    @Html.ValidationMessageFor(model => model.LastName)
				    </div>
			    </div>
			    <div class="form-group">
				    @Html.LabelFor(model => model.Email, new { @class = "col-sm-2 control-label" })
				    <div class="col-sm-10">
					    @Html.TextBoxFor(model => model.Email, new { @class = "form-control email editField" })
					    @Html.ValidationMessageFor(model => model.Email)
				    </div>
			    </div>
			    <div class="form-group">
				    @Html.LabelFor(model => model.Phone, new { @class = "col-sm-2 control-label" })
				    <div class="col-sm-10">
					    @Html.TextBoxFor(model => model.Phone, new { @class = "form-control phone editField" })
					    @Html.ValidationMessageFor(model => model.Phone)
				    </div>
			    </div>
                <div class="form-group" style="margin-top: 20px;margin-bottom: 20px;">
				    @Html.LabelFor(model => model.PreferredResourceAllocation, new { @class = "col-sm-2 control-label" })
				    <div class="col-sm-10">
                        @Html.CheckBoxFor(model => model.PreferredResourceAllocation, new { id = "preferredallocation" })
				    </div>
			    </div>
                <div class="form-group" style="margin-top: 20px;margin-bottom: 20px;">
				    @Html.LabelFor(model => model.PreferredTotalsDisplaying, new { @class = "col-sm-2 control-label" })
				    <div class="col-sm-10">
                        @Html.CheckBoxFor(model => model.PreferredTotalsDisplaying, new { id = "PreferredTotalsDisplaying" })
				    </div>
			    </div>
                <div class="form-group" style="margin-top: 20px;margin-bottom: 20px;">
                    @Html.LabelFor(model => model.ShowAutomaticViews, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10">
                        @Html.CheckBoxFor(model => model.ShowAutomaticViews)
                    </div>
                </div>
                <div class="form-group" style="margin-top: 20px;margin-bottom: 20px;">
				    @Html.LabelFor(model => model.OverUnderCoefficient, new { @class = "col-sm-2 control-label" })
				    <div class="col-sm-10">
					    @Html.HiddenFor(model => model.OverUnderCoefficient, new { })
					    <div id="overUnderCoeffSlider"></div>
					    <div class="alert alert-info" style="margin-top: 12px;">
						    <button type="button" class="close" data-dismiss="alert">×</button>
						    <p><strong>Allocation Cost</strong></p>
						    <p>If you wish to indicate that over allocation of resources is more costly than under allocation, you may do so here. By default, the indicator is at 0, meaning that the under allocations and over allocations are treated equally in scoring.</p>
						    <p>This slider indicates how much more expensive (or undesirable) the over allocation of resources is than under allocation, or vice versa. This value is used for automatically generated scenario mixes in Roadmap Optimizer.</p>
						    <p>For example, if you want to show that over allocations cost twice as much as under allocations, move the indicator to the right to a value of 100%.</p>
					    </div>
				    </div>
			    </div>
                @Html.ValidationSummary(false, "Account could not be saved due to the following errors:")
                <div class="form-group" style="margin-top: 20px; margin-bottom: 20px;">
				    <div class="col-sm-2"></div>
				    <div class="col-sm-10">
					    <button class="btn btn-success" id="btnsave" onclick="changeEmailAndPhone()"><i class="fa fa-save"></i> Save</button>
				    </div>
			    </div>
		    </div>
        </form>
	</div>
</div>
@section Scripts {
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "prevu-profilepage"))

	<script type="text/javascript">
		init.push(function () {
			$('#preferredallocation').switcher({
				on_state_content: 'Number of Resources',
				off_state_content: 'Number of Hours'
			});
			$('#preferredallocation').parent().css("width", "140px");
			$('#PreferredTotalsDisplaying').switcher({
			    on_state_content: 'Average',
			    off_state_content: 'Sum'
			});
			$('#@Html.IdFor(t=>t.ShowAutomaticViews)').switcher({
			    on_state_content: 'Show Views',
			    off_state_content: 'Hide Views'
			}).on("change", function() { enableSaveButton(true) }).parent().css("width", "140px");
			$('#PreferredTotalsDisplaying').parent().css("width", "140px");

			var sliderPlaceholder = $('#overUnderCoeffSlider');
			$(sliderPlaceholder).underOverSlider({
				maxPercent: 300,
				// controlCaption: 'Allocation Cost',
				leftSectorCaption: 'Under',
				rightSectorCaption: 'Over',
				valueHints: {
					aboveZero: '{0}% higher cost on over allocation',
					belowZero: '{0}% higher cost on under allocation',
					equalToZero: 'Equal cost on over and under allocation'
				},
				relatedValueControl: $('#@Html.IdFor(model => model.OverUnderCoefficient)'),
				value: @Model.OverUnderCoefficient,
				changedCallback: function(elem, value) {
				    enableSaveButton(true);
				}
			});
		    $("#PreferredTotalsDisplaying").on("change", function() { enableSaveButton(true) });
		    $("#preferredallocation").on("change", function() { enableSaveButton(true) });
		    $(".editField").on("change", function() { enableSaveButton(true) });
		    enableSaveButton(false);
		});

		function enableSaveButton(value)
		{
		    $("#btnsave").prop("disabled", !value);
		}
		function changeEmailAndPhone() {
		    var form = $('#editAccountForm');
		    if (!form.valid())
		        return;
		    
		    var email = $('.email').val();
			var phone = $('.phone').val();
			var firstname = $('.firstname').val();
			var lastname = $('.lastname').val();
			var alloc = $('#preferredallocation').is(':checked');
			var displayTotals = $('#PreferredTotalsDisplaying').is(':checked');
			var showViews = $('#@Html.IdFor(t=>t.ShowAutomaticViews)').is(':checked');
			var ouCoefficient = $('#@Html.IdFor(model => model.OverUnderCoefficient)').val();

		    var token = $('input[name="__RequestVerificationToken"]', form).val();
		    var data = {
				Email: email,
				Phone: phone,
				PreferredResourceAllocation: alloc,
				PreferredTotalsDisplaying: displayTotals,
			    ShowAutomaticViews: showViews,
				FirstName: firstname,
				LastName: lastname,
				OverUnderCoefficient: ouCoefficient,
                __RequestVerificationToken: token
			};
		    
		    blockUI();
		    $.ajax({
			    type: "post",
			    url: siteRoot + "/Account/ChangeEmailAndPhone",
			    context: document.body,
			    data: data,
			    success: function (result) {
			        handleAjaxResponse(result, onSuccess, null, null, form);
			    },
			    error: function () {
			        showErrorModal();
			    },
			    complete: function () {
			        unblockUI();
			    },
			});
			return false;
		}
        function onSuccess(result)
        {
            bootbox.alert("Your changes have been processed successfully", function () {
                var url = "/Home/Index";
                window.location.href = url;
            });
        }
	</script>
}