EnVisageOnline/Main-RMO/Source/EnVisage/Views/StrategicGoal/Edit.cshtml

@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">

        emulateNavUrl = "/StrategicGoal";

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

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

    </script>
    
    <script type="text/javascript">
        //init.push(function () {
        function initGoal() {

            StartEdit('StrategicGoal', '@Model.Id', "#btnDelete", "#btnsave", "erorMsgPlaceholder");


        	$("#@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");

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

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

            initDatePickers();
            
        }

        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("");
                    }
                }
            });

            //$('#bs-datepicker-rangePlanSimple').datepicker(options);
        }

        function onFailure(xhr) {
            unblockUI();
            $('#editReload').html(xhr.responseText);
            initTeam();
        }
        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>


<div id="erorMsgPlaceholder"></div>

@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 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" })
                            <span class="input-group-addon enddate">to</span>
                            @Html.TextBoxFor(model => model.EndDate, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.StartDate)
                            @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>
}