<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>의도추론테스트</title>
<%@ include file="/WEB-INF/jsp/adm/include/topLinkTag.jsp"%>

<script type="text/javascript">
	$(function() {
		// 고객사 목록
		fncRetrieveOprMng($("#custCode"));
		$("#custCode").on('change', function() {
			fncRetrieveOprMng($(this));
		});

		// 초기 리스트 조회
		search();

		// modal 오픈 시 파일 초기화
		$("a[data-role=openModal]").click(function() {
			search();
			$("input:file").val('');
			$("input.upload_name").val('');
		});

		// 파일 선택
		$("input:file").change(function() {
			if($.utils.isBlank($(this).val())) return false;

			var file = $(this)[0].files[0];

			// 파일 명 validation
			var filename = file.name;
			if(filename.length+1 > 70) {
				$.utils.warning("파일명은 최대 70자까지 허용합니다.");
				$(this).val('');
				$("input.upload_name").val('');
				return false;
			}

			// 파일 size validation
			var max = (1024 * 1024 * 3);
			if(file.size > max) {
				$.utils.warning("파일은 최대 3MB까지 업로드 할 수 있습니다.");
				$(this).val('');
				$("input.upload_name").val('');
				return false;
			}

			// 확장자 체크
			var ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
			if(ext != "xls" && ext != "xlsx") {
				$.utils.warning("업로드는 Excel 파일만 가능합니다.");
				$(this).val('');
				$("input.upload_name").val('');
				return false;
			}

		});

		// 등록 파일 삭제
		$("[data-role=deleteFile]").click(function() {
			$("input:file").val('');
			$("input.upload_name").val('');
		});

		// 파일 업로드
		$("[data-role=uploadFile]").click(function() {
			if ($.utils.isBlank($("input:file").val())) {
				$.utils.warning("파일을 선택해주세요.");
				return false;
			}
			var formData = new FormData($("form[name=uploadForm]")[0]);

			var req = new XMLHttpRequest();
			req.responseType = 'blob'

			req.open("POST", '/admin/rcp/learningTest/inference/inferenceTest.do', true);

			req.onload = function(e) {

				try {
					if (this.status === 200) {

						var blob = this.response;
						var fileName = req.getResponseHeader('Content-Disposition').split('filename=')[1].split(';')[0];
						if (fileName == 'notexcel') {
							$.utils.warning("올바른 엑셀 형식이 아닙니다.");
							return false;
						} else if (fileName == 'noexapmle') {
							$.utils.warning("입력된 문장이 없습니다.");
							return false;
						} else if (fileName == 'sizeover') {
							$.utils.warning("의도추론 예문 제한을 초과했습니다.");
							return false;
						}
						if (window.navigator.msSaveOrOpenBlob) {
							window.navigator.msSaveBlob(blob, fileName);
						} else {
							var downloadLink = window.document.createElement('a');
							var contentTypeHeader = req.getResponseHeader("Content-Type");
							downloadLink.href = window.URL.createObjectURL(new Blob([blob], {type: contentTypeHeader}));
							downloadLink.download = fileName;
							document.body.appendChild(downloadLink);
							downloadLink.click();
							document.body.removeChild(downloadLink);
						}
					} else {
						$.utils.warning("테스트에 실패하였습니다.");
						return false;
					}
                    $.utils.success("테스트에 성공하였습니다.")

				} catch {
					$.utils.warning("테스트에 실패하였습니다.");
					return false;
				}
			};
            req.send(formData);
			$(".btn.close").click();
		});
	});

	// 리스트 검색
	function search() {
		$("form[name=uploadForm] input[name=oprMngCode]").val($("#custCode").val() + '_RCP_'+ $("select[name=oprMngCode]").val());

	}

	function fncRetrieveOprMng(e){
		$('#oprMngName').empty();

		$.ajax({
			type: "GET",
			contentType: "application/json; charset=utf-8",
			datatype: "JSON",
			async: false,
			url : "<c:url value='/adm/menu/oprmng'/>"+"?serviceType=S" + "&menuval=rcplearningTestInferencemanage",
			success : function(data) {
				data.forEach(function (e, f) {
					$('#oprMngName').append("<option value=" + e.serviceGroup + ">" + e.serviceGroupName  + "</option>");
				});

				$('#oprMngName').niceSelect('update');
			}
		});
	}
</script>
</head>
<body>

	<h1>ICOMSYS ADMIN</h1>
	<h1>대시보드</h1>
	<div class="skip_navigation">
		<ul>
			<li>
				<a href="#Content" class="go_content">본문 바로가기</a>
			</li>
			<li>
				<a href="#Gnb">메뉴 바로가기</a>
			</li>
		</ul>
	</div>

	<header id="header">
		<%@ include file="/WEB-INF/jsp/adm/include/header.jsp"%>
	</header>
	<c:import url="/adm/menu/getLnbMenu.do" />
	<!-- 컨텐트 시작 -->
	<section id="Content" class="test">
		<div class="cont_top">
			<div class="location">
				<ul>
					<li class="home"><a href="#">HOME</a></li>
					<li><a href="#">학습 및 테스트</a></li>
					<li><a href="#">의도추론 테스트</a></li>
				</ul>
			</div>
		</div>
		<div class="sub_cont">
			<div class="cont_box">
				<div class="box_title">

					<div class="fl">
						<h2 class="mt12">의도추론 테스트</h2>
					</div>
					<div class="fr">
						<dl class="customer fl">
							<dt class="fl">
								<c:if test="${'SYS_ADMIN'==LoginVO.authCode}">
									고객사 :
								</c:if>
							</dt>
							<dd class="fl">
								<div class="sel_box">
									<c:choose>
										<c:when test="${'SYS_ADMIN'==LoginVO.authCode}">
											<select class="top" name="custCode" id="custCode">
												<c:forEach var="siteInfo" items="${siteLists}" varStatus="status">
													<option value="<c:out value="${siteInfo.custCode}"/>">
														<c:out value="${siteInfo.custName}" />
													</option>
												</c:forEach>
											</select>
										</c:when>
										<c:otherwise>
											<input name="custCode" id="custCode" type="hidden" value="${LoginVO.siteCode}" />
										</c:otherwise>
									</c:choose>
								</div>
							</dd>
						</dl>
<%--						<div class="btn_wrap fl">--%>
<%--							<a href="#" class="btn" data-role="search">조회</a>--%>
<%--						</div>--%>
					</div>
				</div>
				<div class="tbl">
					<form id="searchInfo">
						<table class="search table-fixed">
							<colgroup>
								<col width="130px">
								<col>
							</colgroup>
							<tbody>
							<tr>
								<th class="tl">시나리오그룹</th>
								<td class="tl">
									<div class="sel_box" id="selOprMng">
										<select class="wide" id="oprMngName" name="oprMngCode">
											<option value="">시나리오그룹 선택</option>
										</select>
									</div>
								</td>
							</tr>
							</tbody>
						</table>
					</form>
				</div>
			</div>

			<div class="cont_box">
				<div class="box_title">
					<div class="fl">
<%--						<h2 class="mt12">의도추론 테스트 결과 리스트</h2>--%>
					</div>
					<div class="btn_wrap fr">
												<a href="#" rel="inference_upload_modal" class="btn excel modalLoad" data-role="openModal">업로드</a>
					</div>
				</div>

			</div>
		</div>
	</section>
	<!-- 컨텐트 끝 -->

	<!--  modal :: 의도추론 테스트 업로드 안내 팝업-->
	<div class="modal" id="inference_upload_modal" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal_header">
				<h3>의도추론 테스트 업로드 안내</h3>
			</div>
			<div class="modal_body">
				<div class="modal_cont">
					<div class="text-right">
						<a href="/document/inference.xlsx" class="btn excel" download="의도추론 테스트 샘플">샘플 다운로드</a>
					</div>

					<div class="my-5">
						<ul class="dot-list">
							<li>업로드는 Excel 파일만 가능합니다.</li>
							<li>파일 작성 방법은 [샘플 다운로드] 버튼을 선택하시고 샘플 파일을 다운받아 [작성방법] sheet를 참고해주세요.</li>
							<li>파일 당 최대 3MB까지 업로드 할 수 있습니다.</li>
							<li>파일명은 최대 70자까지 허용합니다.</li>
							<li>의도추론 예문은 200개까지 허용합니다.</li>
						</ul>
					</div>

					<div class="title-sm">의도추론 테스트 파일 업로드</div>
					<div class="tbl">
						<form id="uploadForm" method="POST" enctype="multipart/form-data" name="uploadForm" action="<c:url value='/admin/test/inference/upload.do'/>">
							<input type="hidden" name="oprMngCode">
							<table class="search">
								<colgroup>
									<col width="130px">
									<col>
								</colgroup>
								<tbody>
								<tr>
									<th class="tl">파일선택</th>
									<td class="tl">
										<div class="file_upload">
											<!-- view input -->
											<input class="upload_name" value="파일을 선택해주세요" disabled="disabled">

											<!-- upload input -->
											<input name="upFile" type="file" id="file" class="upload_hidden" accept=".xlsx,.xls">
											<label for="file" class="btn line">파일선택</label>

											<button type="button" class="btn ml-1" data-role="deleteFile">삭제</button>
										</div>
									</td>
								</tr>
								</tbody>
							</table>
						</form>
					</div>
				</div>
			</div>
			<div class="modal_footer">
				<div class="btn_wrap fr">
					<a href="#" onclick="" class="btn grey close">취소</a> <a href="#"
																			class="btn" data-role="uploadFile">저장</a>
				</div>
			</div>
			<div class="modal_controller">
				<a href="#" class="close">close</a>
			</div>
		</div>
	</div>
	<!--  modal :: 의도추론 테스트 업로드 안내 end -->

	<div class="clone-box hide">
		<div class="loading">
			<div class="loader default default-01">
				<div class='loader-container'>
					<div class='ball'></div>
					<div class='ball'></div>
					<div class='ball'></div>
					<div class='ball'></div>
					<div class='ball'></div>
					<div class='ball'></div>
					<div class='ball'></div>
					<div class='ball'></div>
					<div class='ball'></div>
					<div class='ball'></div>
				</div>
			</div>
		</div>
	</div>

	<ul class="vakata-context"></ul>
	<div id="jstree-marker" style="display: none;">&nbsp;</div>
</body>
</body>
</html>