<%@ 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>STT 테스트</title>
<%@ include file="/WEB-INF/jsp/adm/include/topLinkTag.jsp"%>
</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="#">STT 테스트</a></li>
				</ul>
			</div>
		</div>
		<div class="sub_cont">
			<div class="cont_box">
				<div class="box_title">

					<div class="fl">
						<h2 class="mt12">STT 테스트</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">Model</th>
								<td class="tl">
									<div class="sel_box" id="selOprMng">
										<select class="wide" id="sttProduct" name="sttProduct">
											<option value="">Model명</option>
										</select>
									</div>
								</td>
							</tr>
							</tbody>
						</table>
					</form>
				</div>
			</div>
			<div class="cont_box">
				<div class="box_title">
					<div class="fl">
						<h2 class="mt12">STT 테스트 결과</h2>
					</div>
					<div class="btn_wrap fr">
						<a href="#" class="btn" data-role="cleanData">초기화</a>
						<a href="#" rel="inference_upload_modal" class="btn modalLoad" data-role="openModal">녹취파일 업로드</a>
					</div>


				</div>

			</div>
			<div>
				<!-- 기존 소스[ 무인접수Bot > 실시간 모니터링] 에서 가져왔어요 -->
				<div class="content-scroll max-height-300px chat-container" style="word-break:break-all;word-wrap:break-word;min-height:unset;">
				</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>STT 테스트 업로드 안내</h3>
			</div>
			<div class="modal_body">
				<div class="modal_cont">
					<div class="my-5">
						<ul class="dot-list">
							<li>업로드는 8Khz, 16bit Linear PCM wave 파일만 가능합니다.</li>
							<li>파일은 최대 5MB까지 업로드 할 수 있습니다.</li>
							<li>파일명은 최대 70자까지 허용합니다.</li>
						</ul>
					</div>

					<div class="title-sm">STT 테스트 파일 업로드</div>
					<div class="tbl">
						<form id="uploadForm" method="POST" enctype="multipart/form-data" name="uploadForm" action="<c:url value='/adm/rcp/learningTest/stttest/call-stt.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=".wav">
											<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">
						<span>테스트</span>
						<img class="loading-img" alt="loading" src="/images/loading.gif" style="display: none;">
					</a>
				</div>
			</div>
			<div class="modal_controller">
				<a href="#" class="close">close</a>
			</div>
		</div>
	</div>
</body>
<script>
	$("[data-role=uploadFile]").click(function() {
		var img = $(".loading-img");

		if($.utils.isBlank($("input:file").val())) {
			$.utils.warning("파일을 선택해주세요.");
			return false;
		}

		img.show();
		img.parent().find("span").text("");

		var formData = new FormData($("form[name=uploadForm]")[0]);

		$.ajax({
			url: "<c:url value='/admin/rcp/learningTest/stttest/call-stt.do'/>",
			data: formData,
			processData: false,
			contentType: false,
			dataType: "json",
			//enctype : 'multipart/form-data',
			type: 'POST',
			success: function (data) {

				//$.utils.success("정상적으로 처리되었습니다.");
				$(".btn.close").click();
				if(data.code == 200){
					$(".chat-container").text(data.result);
				}else{
					$.utils.warning(data.result);
				}

				img.hide();
				img.parent().find("span").text("테스트");

				//toggleLoading();
				//console.log(data.result);
			},
			error: function (e) {
				//alert("실패");
				$.utils.warning("실패");
				$(".btn.close").click();
				//toggleLoading();
				img.hide();
				img.parent().find("span").text("테스트");
			}
		});
	});

	$("[data-role=cleanData]").click(function(){
		$(".chat-container").text("");
		$("input:file").val("");
	});

	$("[data-role=deleteFile]").click(function(){
		$(".upload_name").val("");
		$("input:file").val("");
	});

	$("[data-role=openModal]").click(function(){
		$(".upload_name").val("");
		$("input:file").val("");
	});


	$(document).ready(function() {
		fncRetrieveSttProduct($("#sttProduct"));
		$("#sttProduct").on('change', function () {
			fncRetrieveSttProduct($(this));
		});

		$("input:file").change(function(){
			let fileName = $(this).prop("files")[0].name;
			let fileSize = $(this).prop("files")[0].size;

			if(fileName.length + 1 > 70) {
				$.utils.error('파일명이 너무 깁니다. 70자 이내로 수정해주세요.');
				$(this).val("");
				return false;
			}

			// 파일의 사이즈가 3MB 초과시
			if(fileSize > (5 * 1024 * 1024) ) {
				$.utils.error('파일 크기가 5MB를 초과하여 업로드가 불가능합니다.');
				$(this).val("");
				return false;
			}
		});
	});

	function fncRetrieveSttProduct(e){
		$('#sttProduct').empty();
		var custCode = $("#custCode").val();
		var serviceGroup = $("#mainOpr").val();

		$.ajax({
			type: "GET",
			contentType: "application/json; charset=utf-8",
			data: {
				custCode : custCode,
				serviceGroup : serviceGroup
			},
			datatype: "JSON",
			async: false,
			url : "<c:url value='/admin/rcp/learningTest/stttest/sttproduct.do'/>",
			success : function(data) {
				data.getList.forEach(function (e, f) {
					$('#sttProduct').append("<option value=" + e.minorCode + ">" + e.codeName + "</option>");
				});

				$('#sttProduct').niceSelect('update');
			}
		});
	}

	function toggleLoading() {
		var img = $(".loading-img");
		if(img.css("display") == "none") {
			img.show();
		} else {
			img.hide();
		}
	}
</script>
</html>