<?php
include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_right.php");
?>
<!doctype html>
<html class="fixed">

<head>
	<!-- jstree CSS -->
	<link rel="stylesheet" href="/Common/assets/vendor/jstree/themes/default/style.css" />
	<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet">
	<?php include("bim-support-header.html"); ?>
	<script src="./script/js/global.js"></script>
	<style>
		th {
			width: 10%;
			text-align: center;
		}

		.vjs-tech {
			height: 100%;

		}
	</style>
	<script type="application/javascript">
		var i = 0;
		var api = [];
		var fileName;
		var folder;
		var software;
		var userName = "<?php echo $_SESSION['name'] ?>";
		var role = "<?php echo ($groupName); ?>";
		var right = <?php echo ($right); ?>;
		var webLink;
		var source;




		/*$.ajax({
			url: "./script/php/update_popularity.php",
			type: "GET",
			async: false,
			data: {
				api_id: object,
				update_type: "viewTimes",
			},
			contentType: "application/json",
			dataType: "json"
		});*/

		pageHeader = "BIM程式庫";
	</script>
</head>

<body>
	<canvas id="c"></canvas>
	<section class="body">
		<!-- start: header -->
		<header-menu></header-menu>
		<!-- end: header -->
		<div class="inner-wrapper">
			<!-- start: sidebar -->
			<side-bar></side-bar>
			<!-- end: sidebar -->
			<section role="main" class="content-body">
				<header class="page-header">
					<h2>{{pageHeader}}</h2>
				</header>
				<!-- start: page -->
				<div class="row">
					<div class="col-md-12">
						<div class="tabs tabs-primary">
							<ul class="nav nav-tabs nav-justified">
								<li class="active">
									<a href="#upload" data-toggle="tab" class="text-center"><i class="fa fa-upload"></i>上傳工具</a>
								</li>
								<li>
									<a href="#edit" data-toggle="tab" class="text-center"><i class="fa fa-edit"></i>編輯工具</a>
								</li>
							</ul>
							<div class="tab-content">
								<div id="upload" class="tab-pane active">
									<form id="uploadForm">
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group" id="APIName-Form">
													<label class="control-label">API名稱</label>
													<input required="required" type="text" id="APIName" name="APIName" class="form-control">
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">開發者</label>
													<input type="text" name="source" id="source" class="form-control">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">類型</label>
													<select class="form-control mb-md" id="software" name="software">
														<option value="Revit">Revit</option>
														<option value="Dynamo">Dynamo</option>
													</select>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">版本</label>
													<select class="form-control mb-md" id="version" name="version">
														<option value="通用">Revit 通用</option>
														<option value="2014">Revit 2014</option>
														<option value="2015">Revit 2015</option>
														<option value="2016">Revit 2016</option>
														<option value="2017" selected>Revit 2017</option>
														<option value="2018">Revit 2018</option>
														<option value="2019">Revit 2019</option>
														<option value="2020">Revit 2020</option>
														<option value="2021">Revit 2021</option>
														<option value="2022">Revit 2022</option>
														<option value="2023">Revit 2023</option>
													</select>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">細節說明</label>
													<textarea class="form-control" rows="3" id="detail" name="detail" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">操作方式</label>
													<textarea class="form-control" rows="3" id="operate" name="operate" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">適用性</label>
													<select id="type" name="type" class="form-control mb-md">
														<option value="土建">土建</option>
														<option value="土開">土開</option>
														<option value="軌道">軌道</option>
														<option value="機電">機電</option>
														<option value="資訊">資訊</option>
														<option value="通用">通用</option>
													</select>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">關鍵字</label>
													<input name="keyword" id="keyword" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">物件 (例:結構)</label>
													<input name="object" id="object" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="">
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">功能 (例:匯出)</label>
													<input name="usage" id="usage" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">備註</label>
													<textarea class="form-control" rows="3" id="notes" name="notes" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">外部連結</label>
													<input type="text" id="webLink" name="webLink" class="form-control" value="空">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">上傳API</label>
													<div class="fileupload fileupload-new" data-provides="fileupload">
														<div class="input-append">
															<div class="uneditable-input">
																<span id="fileCount" class="fileupload-preview"></span>
															</div>
															<span class="btn btn-default btn-file">
																<span class="fileupload-exists">更換檔案</span>
																<span class="fileupload-new">選擇檔案</span>
																<input type="file" id="files" multiple webkitdirectory mozdirectory>
															</span>
															<a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
															<span class="help-block"><strong>注意事項:</strong>請選擇要上傳的資料夾，盡量不要有子資料夾，若有請壓縮後再上傳
																<br>(例:拖放元件)</span>
														</div>
													</div>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="progress progress-striped light active m-md">
													<div id="bar" class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
														0%
													</div>
												</div>
											</div>
										</div>

										<footer class="panel-footer">
											<button id="submit" class="btn btn-primary">上傳檔案</button>
											<button id="reset" type="reset" class="btn btn-default">清除表單</button>
										</footer>
									</form>
								</div>
								<div id="edit" class="tab-pane">
									<!-- <form method="post" enctype="multipart/form-data" action="./script/php/importTool/uploadExcel.php">
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">API名稱</label>
													<input type="text" name="APIName" class="form-control">
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">開發者</label>
													<input type="text" name="source" class="form-control">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">類型</label>
													<select class="form-control mb-md" id="software" name="software">
														<option value="Revit">Revit</option>
														<option value="Dynamo">Dynamo</option>
													</select>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">版本</label>
													<select class="form-control mb-md" id="version" name="version">
														<option value="通用">Revit 通用</option>
														<option value="2014">Revit 2014</option>
														<option value="2015">Revit 2015</option>
														<option value="2016">Revit 2016</option>
														<option value="2017" selected>Revit 2017</option>
														<option value="2018">Revit 2018</option>
														<option value="2019">Revit 2019</option>
														<option value="2020">Revit 2020</option>
														<option value="2021">Revit 2021</option>
														<option value="2022">Revit 2022</option>
														<option value="2023">Revit 2023</option>
													</select>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">細節說明</label>
													<textarea class="form-control" rows="3" id="detail" name="detail" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">操作方式</label>
													<textarea class="form-control" rows="3" id="operate" name="operate" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">適用性</label>
													<select id="type" name="type" class="form-control mb-md">
														<option value="土建">土建</option>
														<option value="土開">土開</option>
														<option value="軌道">軌道</option>
														<option value="機電">機電</option>
														<option value="資訊">資訊</option>
														<option value="通用">通用</option>
													</select>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">關鍵字</label>
													<input name="keyword" id="keyword" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="資訊">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">物件</label>
													<input name="object" id="object" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="結構">
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">功能</label>
													<input name="usage" id="usage" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="匯出">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">備註</label>
													<textarea class="form-control" rows="3" id="notes" name="notes" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label class="control-label">外部連結</label>
													<input type="text" id="webLink" name="webLink" class="form-control" value="空">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-12">
												<div class="form-group">
													<label class="control-label">上傳API</label>
													<div class="fileupload fileupload-new" data-provides="fileupload">
														<div class="input-append">
															<div class="uneditable-input">
																<i class="fa fa-file fileupload-exists"></i>
																<span class="fileupload-preview"></span>
															</div>
															<span class="btn btn-default btn-file">
																<span class="fileupload-exists">更換檔案</span>
																<span class="fileupload-new">選擇檔案</span>
																<input type="file" name="excel" id="excel" required="required" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
															</span>
															<a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
															<span class="help-block"><strong>注意事項:</strong>請選擇要上傳的資料夾，盡量不要有子資料夾，若有請壓縮後再上傳
																<br>(例:拖放元件)</span>
														</div>
													</div>
												</div>
											</div>
										</div>

										<footer class="panel-footer">
											<button id="submit" class="btn btn-primary">上傳檔案</button>
											<button id="reset" type="reset" class="btn btn-default">清除表單</button>
										</footer>
									</form> -->
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- end: page -->
			</section>
		</div>
	</section>
	<script>
		/*Vue */
		var isDuplicate = false;
		vm.mount('.body');
		addUserImage(userName.charAt(0), role);
		const stack_bar_top = {
			"dir1": "down",
			"dir2": "right",
			"push": "top",
			"spacing1": 0,
			"spacing2": 0
		};
		const revit = ['通用', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'];
		const dynamo = ['1.3', '2.0', '2.1', '2.2', '2.3', '2.13'];
		$(document).ready(function() {
			$("#source").val(userName);

			$("#software").on('change', function(event) {
				$("#version").empty();
				switch (event.currentTarget.value) {
					case 'Revit':
						let optionTemp1 = '';
						for (i = 0; i < revit.length; i++) {
							if (revit[i] == '2017')
								optionTemp1 += `<option value="${revit[i]}" selected>Revit ${revit[i]}</option>`;
							else
								optionTemp1 += `<option value="${revit[i]}">Revit ${revit[i]}</option>`;
						}
						$("#version").append(optionTemp1);
						break;
					case 'Dynamo':
						let optionTemp2 = '';
						for (i = 0; i < dynamo.length; i++) {
							if (dynamo[i] == '2.3')
								optionTemp2 += `<option value="${dynamo[i]}" selected>Dynamo ${dynamo[i]}</option>`;
							else
								optionTemp2 += `<option value="${dynamo[i]}">Dynamo ${dynamo[i]}</option>`;
						}
						$("#version").append(optionTemp2);
						break;
				}
			});

			$("#APIName").on('change', function() {
				isDuplicate = checkDuplicate($(this).val())
				if (isDuplicate) {
					$("#APIName-Form").append(`<label id="APIName-label" class="error">此API已經匯入過</label>`);
					$("#APIName-Form").addClass("has-error");
				} else {
					$("#APIName-label").remove();
					$("#APIName-Form").attr("class", "form-group");
				}
			})

			$("#uploadForm").submit(function(e) {
				e.preventDefault();

				if (isDuplicate) {
					showNotification('警告','尚未提供上傳不同版本功能，請勿重複上傳!','error');
					return;
				}
				if ($("#files").val() === "") {
					showNotification('警告','請先選擇上傳檔案!','error');
					return;
				}


				var formData = new FormData();
				$(".form-control").each(function(ele) {
					formData.append($(this).attr('name'), $(this).val());
				})
				for (i = 0; i < $("#files").prop('files').length; i++) {
					formData.append("files[]", $("#files").prop('files')[i]);
				}
				$.ajax({
					type: "POST",
					url: "./script/php/api_upload.php",
					data: formData,
					cache: false,
					processData: false,
					contentType: false,
					dataType: 'text', // 回傳的資料格式
					success: function(data) {
						showNotification('成功','轉檔上傳成功!','success');
					},
					xhr: function() {
						var xhr = new window.XMLHttpRequest(); // 建立xhr(XMLHttpRequest)物件
						xhr.upload.addEventListener("progress", function(progressEvent) { // 監聽ProgressEvent
							if (progressEvent.lengthComputable) {
								var percentComplete = progressEvent.loaded / progressEvent.total;
								var percentVal = Math.round(percentComplete * 100) + "%";
								$("#bar").text(percentVal); // 進度條百分比文字
								$("#bar").width(percentVal); // 進度條顏色
								if(percentVal == '100%'){
									showNotification('提示','上傳成功!請稍待轉檔完成','info');
								}
							}
						}, false);
						return xhr; // 注意必須將xhr(XMLHttpRequest)物件回傳
					}
				}).fail(function() {
					$("#bar").text("0%"); // 錯誤發生進度歸0%
					$("#bar").width("0%");
				});

			});
		});

		function checkDuplicate(APIName) {
			var isDuplicate = false;
			$.ajax({
				url: "./script/php/get_api_duplicate.php",
				type: "POST",
				data: {
					APIName: APIName,
				},
				async: false,
				dataType: "json"
			}).done(function(result) {
				if (result != "") {
					isDuplicate = true;
				}
			}).error(function(error) {
				console.log(error);
			});
			return isDuplicate;
		}

		function showNotification(title,text,type) {
			var notice = new PNotify({
				title: title,
				text: text,
				type: type,
				addclass: 'stack-bar-top',
				stack: stack_bar_top,
				width: "100%"
			});
		}
	</script>
	<?php include("bim-support-body.html"); ?>


</body>

</html>