@using EnVisage.Code
@{
	ViewBag.Title = "Strategic Goals";
}
@section scripts
{
	<script type="text/javascript">
		function formatFDDate(jsonDate) {
			if (jsonDate == null || jsonDate == "")
				return "";
			var dt = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10));
			return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
		}

		var ctr = 0;
		var GroupArr = new Array();
		init.push(function () {
			$('#goals').dataTable({
				"bProcessing": true,
				"bServerSide": true,
				"bAutoWidth": false,
				"sAjaxSource": document.URL,
				"sServerMethod": "POST",
				"aoColumns": [
				{ "mDataProp": "Name" },
                {"mDataProp": "NbrProjects"},
                {
                	"mData": function (data, type, full) {
                		return formatFDDate(data.StartDate);
                	}
                },
                {
                	"mData": function (data, type, full) {
                		return formatFDDate(data.EndDate);
                	}
                },
				{
					"mData": function (data, type, full) {
				        @if (SecurityManager.CheckSecurityObjectPermission(Areas.StrategicGoals, AccessLevel.Write))
						{
						<text>
				    	ctr++;
				    	return ('<a id="btnEdit' + ctr + '" onclick="return editGoal(this.id, \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' + 'class="btn btn-sm btn-primary popover-warning popover-dark"><i class="fa fa-edit"></i> Edit</a> ' +
								'<a id="btnDelete' + ctr + '" onclick="return deleteGoal(this.id, \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' + 'class="btn btn-sm btn-danger popover-warning popover-dark"><i class="fa fa-trash-o"></i> Delete</a>')
							.replace(/_rplcmnt_/g, data.Id);
				        </text>
						}
						else
						{
						<text>
				    	return "";
				    	</text>
						}
				    }
				}],
    	    })
 			@if (SecurityManager.CheckSecurityObjectPermission(Areas.ProjectClassifications, AccessLevel.Write))
			{
			<text>
    		$('#goals_wrapper .table-caption').html('<a class="btn btn-primary" onclick="return editGoal(this.id, null);"><i class="fa fa-plus"></i> Add Strategic Goal</a>');
			</text>
			}
    		$('#goals_wrapper .dataTables_processing').addClass("table-caption");
    		$('#goals_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');
    	});

    	function loadSG(sgId) {
    		blockUI();
    		var url = "";
    		var isNew = true;

    		if (sgId && (sgId != null) && (sgId.length > 0) && (sgId != '@Guid.Empty')) {
        		url = "?Id=" + sgId;
        		isNew = false;
        	}

        	$('#editReload').html("");

        	$.ajax({
        		url: '@Url.Action("Edit", "StrategicGoal")' + url,
            	cache: false,
            	dataType: "html",
            	success: function (data) {
            		$('#editReload').html(data);
            		initGoal();

            		$('#editStrategicGoal')
						.on('hidden.bs.modal', function () {
							if (!isNew) {
								StopEdit();
								RemoveLock('StrategicGoal', sgId);
							}
						})
						.modal('show');
            	},
            	error: function () {
            	    showErrorModal();
            	},
            	complete: function () {
            	    unblockUI();
            	},
            });
		}

		function editGoal(aId, Id) {
			if (Id && (Id != null) && (Id.length > 0) && (Id != '@Guid.Empty'))
    			if (!CheckLock(aId, 'StrategicGoal', Id))
    				return false;

    		loadSG(Id);
    		return true;
    	}

    	function deleteGoal(aId, Id) {
    	    if (Id && (Id != null) && (Id.length > 0) && (Id != '@Guid.Empty')) {
    	        if (!CheckLock(aId, 'StrategicGoal', Id))
    	            return false;

    	        StartEdit('StrategicGoal', Id, null, null, 'errorsMessagesPlaceholder');
    	    }
    	    else {
    	        // Id not specified
    	        return false;
    	    }

    	    blockUI();
    	    $.ajax({
    	        url: '@Url.Action("Delete", "StrategicGoal")?id=' + Id,
    	        cache: false,
    	        dataType: "html",
    	        success: function (content) {
    	            $('#modal-warning div.modal-dialog').html(content);
    	            $('#modal-warning').on('hidden.bs.modal', function () {
    	                StopEdit();
    	                RemoveLock('StrategicGoal', Id);
    	            }).modal('show');
    	        },
    	        error: function () {
    	            showErrorModal();
    	        },
    	        complete: function () {
    	            unblockUI();
    	        },
    	    });

        	return true;
        }

        $(document).on('hide.bs.modal', '#editStrategicGoal', function (e) {
        	// skip modal hide event from datepickers
        	if ($(e.target).attr('id') != 'editStrategicGoal')
        		return true; // close modal form
        	// check that form has been changed
        	if (typeof isSGDataChanged === 'function')
        		// if form has been changed
        		if (isSGDataChanged()) {
        			// ask user for confirmation of form close

                    var msg = "Strategic Goal editing form contains unsaved changes, do you really want to close the form?";
		            bootbox.confirm(msg, function (result) {
		                if (result) {
                            if (typeof resetSGDataChanged === 'function') {
                                resetSGDataChanged();
		                    }
                            $('#editStrategicGoal').modal('hide');
		                }
		            });


        			return false; // DO NOT close modal form
        		}
        	return true; // close modal form
        });

	</script>
}

<div id="errorsMessagesPlaceholder"></div>
<div class="table-light table-responsive">
	<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="goals">
		<thead>
			<tr>
				<th>Goal
				</th>
                <th>
                    Number of Projects
                </th>
				<th>Start Date
				</th>
				<th>End Date
				</th>
				<th></th>
			</tr>
		</thead>
	</table>
</div>
<!-- Modal -->
<div id="editStrategicGoal" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content" id="editReload">
		</div>
		<!-- / .modal-content -->
	</div>
	<!-- / .modal-dialog -->
</div>
<!-- /.modal -->
<!-- / Modal -->
<!-- Warning modal alert -->
<div id="modal-warning" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
	<div class="modal-dialog">

	</div>
	<!-- / .modal-dialog -->
</div>
<!-- / .modal -->