<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시나리오 관리</title>
<%@ include file="/WEB-INF/jsp/adm/include/topLinkTag.jsp"%>
</head>
<body>

	<h1>ICOMSYS ADMIN</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" />

	<script type="text/javascript" src="<c:url value='/aajs/scenario.js' />"></script>

	<!-- 컨텐트 시작 -->
	<section id="Content" class="conversation">
		<div class="cont_top">
			<div class="location">
				<ul>
					<li class="home"><a href="#">HOME</a></li>
					<li><a href="#">대화관리</a></li>
					<li><a href="<c:url value='/admin/conversation/scenario/manage.do'/>">시나리오 관리</a></li>
					<li><a href="javascript:location.reload();">시나리오 편집</a></li>
				</ul>
			</div>
		</div>
		<div class="sub_cont menu08_01">
			<div class="cont_box">
				<div class="box_title">
					<div class="fl">
						<h2 class="mt12">시나리오 편집</h2>
					</div>
				</div>


				<div class="tbl">
					<table class="search">
						<colgroup>
							<col width="130px">
							<col width="auto">
						</colgroup>
						<tbody>
							<tr>
								<th class="tl">시나리오명</th>
								<td class="tl">
									<form id="reloadForm" method="post">
										<input type="text" name="scenarioName" value="${ eMap.scenarioName }"> <input type="hidden" name="serviceCode" value="${ eMap.serviceCode }"> <input type="hidden" name="custCode" value="${ eMap.custCode }"> <input type="hidden" name="seq" value="${ eMap.seq }">
									</form>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="cont_box">

				<div class="box_title">
					<div class="fl"></div>
					<div class="btn_wrap fr">
						<a href="javascript:fncAddNode();" class="btn">노드 추가</a> <a href="javascript:fncDelNode();" class="btn red">노드 삭제</a>
					</div>
				</div>

				<form id="sendform" name="sendform" style="overflow-x: auto;">

					<div class="tbl" style="min-width: 1300px; min-height: 500px;">
						<div id="resultTable" class="slt-tbl">
							<ul class="row no-gutters thead">
								<li class="col">선택</li>
								<li class="col-1">노드 코드</li>
								<li class="col-1">노드 명</li>
								<li class="col-1">노드 형태</li>
								<li class="col-1">파라미터명</li>
								<li class="col-4">멘트</li>
								<li class="col " style="min-width: 70px;">질의 횟수</li>
								<li class="col-1">다음노드</li>
								<li class="col-1">인텐트명</li>
								<li class="col-1">API명</li>
							</ul>

							<ul class="tbody">

								<c:if test="${ list.isEmpty() }">
									<div id="emptyTable" style="text-align: center; margin: 20px;">No data available in table</div>
								</c:if>

								<c:if test="${ !list.isEmpty() }">

									<c:forEach var="item" items="${ list }">

										<li class="ctLine">
											<div class="row no-gutters boder-b-1 align-items-center">
												<div class="col">
													<div class="rdo-group">
														<div class="rdo_box">
															<input id="seqNo_<c:out value="${ item.nodeCode }"/>" name="seqNo" class="rdo-tbl-slt" type="radio" value="<c:out value="${ item.seq }"/>"> <label for="seqNo_<c:out value="${ item.nodeCode }"/>"></label> <input type="hidden" name="nodeUseYn" value="Y">
														</div>
													</div>
												</div>
												<div class="col-1 border-left-1">
													<input type="text" name="nodeCode" value="<c:out value="${ item.nodeCode }"/>" readonly>
												</div>
												<div class="col-1 border-left-1">
													<input id="itemName_0" name="nodeName" type="text" value="<c:out value="${ item.nodeName }"/>">
												</div>
												<div class="col-1 border-left-1">
													<div class="sel_box">
														<select name="nodeType" class="wide" onchange="fncNodeType(this, 'slot');">
															<option value="">데이터 선택</option>
															<option value="INTENT" <c:out value="${ item.nodeType eq 'INTENT' ? 'selected':'' }"/>>INTENT</option>
															<option value="SLOT" <c:out value="${ item.nodeType eq 'SLOT' ? 'selected':'' }"/>>SLOT</option>
															<option value="SPLIT" <c:out value="${ item.nodeType eq 'SPLIT' ? 'selected':'' }"/>>SPLIT</option>
															<option value="API" <c:out value="${ item.nodeType eq 'API' ? 'selected':'' }"/>>API</option>
															<option value="SPEAK" <c:out value="${ item.nodeType eq 'SPEAK' ? 'selected':'' }"/>>SPEAK</option>
														</select>
													</div>
												</div>
												<div class="col-1 border-left-1">
													<div class="sel_box">
														<!-- 파라미터명 -->
														<input type="hidden" name="inputPN" value="<c:out value="${ item.slotParamSeq }"/>"> <select name="slotParamSeq" class="wide elements slot" required="required">
															<option value="">데이터 선택</option>
														</select>
													</div>
												</div>
												<div class="col-4 border-left-1">
													<!-- 멘트 -->
													<input name="inputMent" type="hidden" value="<c:out value="${ item.nodeMent }"/>"> <input name="nodeMent" type="text" class="elements intent slot speak" value="<c:out value="${ item.nodeMent }"/>">
												</div>
												<div class="col border-left-1" style="min-width: 70px;">
													<!-- 질의횟수 -->
													<input name="inputNQC" type="hidden" value="<c:out value="${ item.nodeQstCnt }"/>"> <input name="nodeQstCnt" type="number" class="text-center elements slot" value="<c:out value="${ item.nodeQstCnt }"/>">
												</div>
												<div class="col-1 border-left-1">
													<!-- 다음노드 -->
													<input type="text" name="nextNode" class="elements intent slot api speak" value="<c:out value="${ item.nextNode }"/>">
												</div>
												<div class="col-1 border-left-1">
													<div class="sel_box">
														<!-- 인텐트명 -->
														<input type="hidden" name="inputIN" value="<c:out value="${ item.intentSeq }"/>"> <select name="intentSeq" class="wide elements intent" required="required" onchange="slotParam(this);">
															<option value="">항목 선택</option>
														</select>
													</div>
												</div>
												<div class="col-1 border-left-1">
													<div class="sel_box">
														<!-- API -->
														<input type="hidden" name="inputAPI" value="<c:out value="${ item.apiCode }"/>"> <select name="apiName" class="wide elements api" required="required">
															<option value="">항목 선택</option>
														</select>
													</div>
												</div>
											</div> <c:forEach var="slItem" items="${ subList }">
												<c:if test="${ slItem.nodeSeq eq item.seq }">
													<div id="addment_chk_<c:out value="${ item.seq }_${ slItem.nodeSeq }"/>" class="addments">
														<div class="row no-gutters align-items-center mentsBox subMents" data-item-code="">
															<div class="col-auto stack">
																<i class="xi-subdirectory-arrow"></i> <input type="hidden" name="splitSeq" value="<c:out value="${ slItem.seq }"/>"> <input type="hidden" name="useYn" value="Y">
															</div>

															<div class="col-auto min-width-50px ml-4 text-right">조건</div>
															<div class="col-3 ml-4">
																<input type="text" name="splitNodeCondition" value="${fn:escapeXml(slItem.nodeCondition)}" style="width: 100%; margin: 0;">
															</div>
															<div class="col-auto min-width-50px ml-4 text-right">멘트</div>
															<div class="col ml-4">
																<div class="row no-gutters">
																	<div class="col">
																		<input type="text" name="splitNodeMent" value="${fn:escapeXml(slItem.nodeMent)}">
																	</div>

																</div>
															</div>
															<div class="col-auto min-width-50px ml-4 text-right">다음노드</div>
															<div class="col-1 ml-4">
																<input type="text" name="splitNextNode" value="<c:out value="${ slItem.nextNode }"/>" style="width: 100%; margin: 0;">
															</div>
															<div class="col-auto ml-2">
																<button type="button" class="mentBtnAdd extraBox btn-outline-primary ment_btn" onclick="fncAddSubList(this);">+</button>
															</div>
															<div class="col-auto ml-2">
																<button type="button" class="mentBtnDel btn-outline-danger ment_btn" onclick="fncDelSubList(this, <c:out value='${slItem.seq}'/>);">-</button>
															</div>
														</div>
													</div>
												</c:if>
											</c:forEach>

										</li>

									</c:forEach>
								</c:if>
							</ul>
						</div>
					</div>
				</form>

				<div class="btn-side">
					<div class="btn_wrap fl">
						<a id="btnMoveUp" href="#" class="btn grey up dataAlignUp">위로</a> 
						<a id="btnMoveDown" href="#" class="btn grey down dataAlignDown">아래로</a>
					</div>
					<div class="btn_wrap fr">
						<a id="btnSave" href="javascript:fncSave();" class="btn blue">저장</a> 
						<a id="btnRemoveTr" href="javascript:fncCancel();" class="btn red dataRemove">취소</a>
					</div>
				</div>

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

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