@model Guid
@using EnVisage.Code
@using Microsoft.AspNet.Identity
@using System.Web.Mvc.Html

@{
  ViewBag.Title = "Capacity Widget";
  Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
    <script src="@Url.Content("~/Scripts/CustomValidation.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/URIjs.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Plugins/CapacityPlanning.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/FileUploads/jquery.ui.widget.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/FileUploads/jquery.iframe-transport.j")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/FileUploads/jquery.fileupload.js")" type="text/javascript"></script>
}
@section stylesheets {
	<link href="~/Content/stylesheets/fileuploads.css" rel="stylesheet" type="text/css">
}
<script>
	init.push(function () {
		$.ajax({
			url: '/Team/GetPlanCapacitySimpleMode',
			type: 'post',
			data: { teamId: '@(Model.ToString())' },
			success: function (data) {
				var categories = [];

				for (var index = 0; index < data.data.length; index++) {
					var incomingCategory = data.data[index];

					var catItem = {
						Id: incomingCategory.Id,
						Name: incomingCategory.Name,
						InPlan: incomingCategory.InPlan,
					}
					categories.push(catItem);
				}

				$("#team-container").capacityPlanner({
					teamId: '@(Model.ToString())',
					expenditureCategories: categories,
					dataTableRenderingCallback: onDataTableBeforeRendering,
					dataTableRenderedCallback: onDataTableRendered,
				});

				$("#team-container").capacityPlanner('setData', data);
				$("#team-container").capacityPlanner('renderTable');
			},
			error: function (ret) {
				showErrorModal("@(EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE)", ret.statusText)
			}
		});

		// Scripts for file uploads ----------------------
		var url = '@Url.Action("UploadFiles", "Capacity")';
		$('#fileupload').fileupload({
			url: url,
			dataType: 'json',
			autoUpload: true,
			done: function (e, data) {
				var getContentUrl = '@Url.Action("GetTempFile", "Capacity")';
				var filesTable = $("<table></table>").appendTo('#uploadedFiles');

				$.each(data.result, function (index, file) {
					var row = $('<tr id="' + file.Id + '"></tr>');
					$('<td></td>').append("<a href='" + getContentUrl + "/" + file.Id +"' target='_blank'>" + file.Name + "</a>").appendTo(row);
					$('<td></td>').append(file.Size).appendTo(row);
					$('<td></td>').append(file.ContentType).appendTo(row);
					$('<td></td>').append("<a href='javascript:void(0);' onclick='removeTempFile(\"" + file.Id + "\")'>Delete</a>").appendTo(row);
					filesTable.append(row);
				});
			},
			progressall: function (e, data) {
				var progress = parseInt(data.loaded / data.total * 100, 10);
				$('.progress-bar').css(
					'width',
					progress + '%'
				);
			}
		}).prop('disabled', !$.support.fileInput)
			.parent().addClass($.support.fileInput ? undefined : 'disabled');

	});

	function onDataTableBeforeRendering() {
		blockUI();
	}

	function onDataTableRendered() {
		unblockUI();
	}

	function exportData() {
		var data = $("#team-container").data("capacityPlanner").getData();
	}

	function removeTempFile(attachmentId) {
		var url = '@Url.Action("DeleteTempFile", "Capacity")';
		$.ajax({
			url: url,
			type: 'post',
			data: { id: attachmentId },
			success: function (data) {
				$('#uploadedFiles').find('tr#' + attachmentId).remove();
			},
			error: function (ret) {
				showErrorModal("@(EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE)", ret.statusText)
			}
		});
	}

	function deleteUserTempFiles() {
		var url = '@Url.Action("ClearUserTempFolder", "Capacity")'; 
		$.ajax({
			url: url,
			type: 'post',
			success: function (data) {
				alert("All temp files deleted");
			},
			error: function (ret) {
				showErrorModal("@(EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE)", ret.statusText)
			}
		});
	}

	function moveToPermanent() {
		var url = '@Url.Action("MoveToPermanentStorage", "Capacity")';
		var fileIds = [];

		$('#uploadedFiles').find('tr').each(function (index, item) {
			var thisId = $(item).attr('id');
			fileIds.push(thisId);
		});

		$.ajax({
			url: url,
			type: 'post',
			data: { files: fileIds },
			success: function (data) {
				alert("Files moved");
			},
			error: function (ret) {
				showErrorModal("@(EnVisage.Code.Constants.ERROR_GENERAL_TITLE_TEMPLATE)", ret.statusText)
			}
		});
		}

</script>

<h2>Capacity Widget</h2>
<div class="table-light table-responsive" id="team-container">
@{
  Html.RenderPartial("~/Views/CapacityManagement/_capacityPlanning.cshtml", Model);
}
</div>
<button title="Export Data" onclick="exportData()">Export Data</button>
<hr />
<h2>File uploads</h2>
    <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Select files...</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload" type="file" name="files[]" multiple>
    </span>
		<br />
		<div class="progress">
			<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
				<span class="sr-only">0% complete</span>
			</div>
		</div>
<div id="uploadedFiles"></div>
<button title="Empty user temp folder" onclick="deleteUserTempFiles()">Empty user temp folder</button>
<button title="Move to permanent storage" onclick="moveToPermanent()">Move to permanent storage</button>