<%@ 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>TTS태그관리</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" />
<!-- 컨텐트 시작 -->
<section id="Content" class="system_management">
	<div class="cont_top">
		<div class="location">
			<ul>
				<li class="home"><a href="#">HOME</a></li>
				<li><a href="#">운영관리</a></li>
				<li><a href="#">TTS 태그 관리</a></li>
			</ul>
		</div>
	</div>
	<div class="sub_cont">
		<div class="cont_box">
			<div class="box_title">

				<div class="fl">
					<h2 class="mt12">TTS 태그 관리</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 fr">
                        <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">TTS 제품</th>
							<td class="tl">
								<div class="sel_box" id="selOprMng">
									<select class="wide" id="ttsProduct" name="ttsProduct">
										<option value="">TTS명</option>
									</select>
								</div>
							</td>
						</tr>
						</tbody>
					</table>
				</form>
			</div>
		</div>

		<div class="cont_box">
			<div class="box_title">
				<div class="fl">
					<h2 class="mt12">TTS 태그 리스트</h2>
				</div>
			</div>
			<div class="tbl">
				<div id="resultTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
					<table id="resultTable" class="click dataTable no-footer" aria-describedby="resultTable_info" role="grid">
						<colgroup>
							<col width="10%">
							<col width="20%">
							<col width="25%">
							<col width="25%">
							<col width="20%">
						</colgroup>
						<thead>
							<tr role="row">
								<th class="center" rowspan="1" colspan="1">순번</th>
								<th class="center" rowspan="1" colspan="1">태그명</th>
								<th class="center" rowspan="1" colspan="1">SOE 태그</th>
								<th class="center" rowspan="1" colspan="1">TTS 태그</th>
								<th class="center" rowspan="1" colspan="1">등록일시</th>
							</tr>
						</thead>
						<tbody>
							<!--<tr>
								<td valign="middle" colspan="5" class="dataTables_empty">No data available in table</td>
							</tr> -->
						</tbody>
					</table>
					<div class="bottom"></div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- 컨텐트 끝 -->

<!--  modal :: TTS 태그 수정 팝업-->
<div class="modal" id="ttstag_update_modal" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal_header">
			<h3>TTS 태그 수정</h3>
		</div>
		<div class="modal_body">
			<div class="modal_cont">
				<form id="editServiceInfo">

					<dl>
						<dt><h4><em class="">태그명</em></h4></dt>
						<dd>
							<div class="ipt_box">
								<input type="text" id="tagName" name="tagName" value="" readonly>
								<input type="hidden" id="tagCode" name="tagName" value="" readonly>
							</div>
						</dd>
					</dl>

					<dl class="">
						<dt><h4><em class="">SOE 시작 태그</em></h4></dt>
						<dd>
							<div class="ipt_box">
								<input type="text" id="soeStartTag" name="soeStartTag" value="" readonly>
							</div>
						</dd>
					</dl>
					<dl class="">
						<dt><h4><em class="">SOE 종료 태그</em></h4></dt>
						<dd>
							<div class="ipt_box">
								<input type="text" id="soeEndTag" name="soeEndTag" value="" readonly>
							</div>
						</dd>
					</dl>
					<dl class="">
						<dt><h4><em class="">TTS 시작 태그</em></h4></dt>
						<dd>
							<input type="text" id="ttsStartTag" name="ttsStartTag" value ="${ttsStartTag}"></input>
						</dd>
					</dl>
					<dl class="">
						<dt><h4><em class="">TTS 종료 태그</em></h4></dt>
						<dd>
							<input type="text" id="ttsEndTag" name="ttsEndTag" value ="${ttsEndTag}"></input>
						</dd>
					</dl>

				</form>
			</div>
		</div>
		<div class="modal_footer">
			<div class="btn_wrap fr">
				<a href="#" onclick="" class="btn grey close">취소</a> <a href="#" id="updateTag"
																		class="btn" data-role="updateTag">저장</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>
	<script type="text/javascript">
		$(document).ready(function() {

			if (!checkPermissionPolicy("rcpoprmanagettstagmanageFull")) {
				$("#updateTag").hide();
			}

			// Datatable 초기화
			var opts = {
				"bStateSave": true,
				columns: [
					{data: "rownum"},
					{data: "codeName"},
					{data: "soeTag"},
					{data: "ttsTag"},
					{data: "updateDate"},
					{data: "tagCode"},
					{data: "soeStartTag"},
					{data: "soeEndTag"},
					{data: "ttsStartTag"},
					{data: "ttsEndTag"}
				],
				columnDefs: [{
					"defaultContent": "-",
					"targets": "_all",
					"className": "center"
				},
					{
						targets: 2,
						render: function (data) {
							var replaceData = "";
							if (data != undefined && data != null) {
								replaceData = data.replace(/</g,'&lt').replace(/</g,'&gt');
							}
							return '<a style="display: block;text-align: center;">' + replaceData + '</a>';
						}
					},
					{
						targets: 3,
						render: function (data) {
							var replaceData = "";
							if (data != undefined && data != null) {
								replaceData = data.replace(/</g,'&lt').replace(/</g,'&gt');
							}
							return '<a style="display: block;text-align: center;">' + replaceData + '</a>';
						}
					},
					{
						targets: 5,
						visible: false,
					},
					{
						targets: 6,
						visible: false,
					},
					{
						targets: 7,
						visible: false,
					},
					{
						targets: 8,
						visible: false,
					},
					{
						targets: 9,
						visible: false,
					}

				],
				createdRow: function (row, data, index) {
					$(row).addClass("modalLoad");
					$(row).attr("rel", "ttstag_update_modal");
					$(row).data('seq',index);
				},
				drawCallback: function (settings) {
					// scripts.js : 조회list modal 연결
					modalUi();
				}
			}
			$.utils.dataTable.init('<c:url value="/admin/rcp/oprmanage/ttstag/ttstaglist.do"/>', opts);

			// 검색
			$("[data-role=search]").click(function() {
				search(true);
			});

			// 고객사 목록
			fncRetrieveTtsProduct($("#ttsProduct"));
			$("#ttsProduct").on('change', function () {
				fncRetrieveTtsProduct($(this));
			});

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

			$("#resultTable").DataTable().on( 'select.dt', function ( e, dt, type, indexes ) {
				var rowData = $("#resultTable").DataTable().row( indexes ).data();

				fncClearUpParam();
				fncGetParam(rowData);
			})

			$('#updateTag').on('click', function () {
				var modal = $(this).parents(".modal");

				if (modal.find("input[name=ttsStartTag]").val() == $("#ttsOriginStartTag").val() &&
						modal.find("input[name=ttsEndTag]").val() == $("#ttsOriginEndTag").val()) {
					$.utils.warning("변경사항이 없습니다.");
					return false;
				}

				// 전송 데이터
				var data = {
					ttsProdCode: $("select[name=ttsProduct]").val(),
					tagCode: $("#tagCode").val(),
					ttsStartTag: modal.find("input[name=ttsStartTag]").val(),
					ttsEndTag: modal.find("input[name=ttsEndTag]").val()
				};

				$.ajax({
					url: '<c:url value="/admin/rcp/oprmanage/ttstag/updatettstag.do"/>',
					type: "POST",
					datatype: "JSON",
					async: false,
					data: JSON.stringify(data),
					contentType: "application/json",
					success: function(d) {
						// console.log(d);

						if(d.result) {
							search(false);
							$('#ttstag_update_modal a.close').trigger('click');
							$.utils.success(d.message);

						} else {
							$.utils.error(d.message);
						}
					}
				});
			});

		});


		// 리스트
		function search(update) {
			$.utils.dataTable.getListData({
				ttsProduct: $("select[name=ttsProduct]").val(),
				custCode: $("#custCode").val()
			}, function(d) {
				// console.log('result', d);
				$("#resultTable").renderTable(d.list);
				if (update) {
					$("#resultTable").DataTable().page(0).draw(true);
				}
			});
		}

		function fncRetrieveTtsProduct(e){
			$('#ttsProduct').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/oprmanage/ttstag/ttsproduct.do'/>",
				success : function(data) {
					data.getList.forEach(function (e, f) {
						$('#ttsProduct').append("<option value=" + e.minorCode + ">" + e.codeName + "</option>");
					});

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

		function fncClearUpParam() {
			$("#tagName").val("");
			$("#tagCode").val("");
			$("#soeStartTag").val("");
			$("#soeEndTag").val("");
			$("#ttsStartTag").val("");
			$("#ttsEndTag").val("");
		}

		function fncGetParam(rowData) {
			$("#tagName").val(rowData.codeName);
			$("#tagCode").val(rowData.tagCode);
			$("#soeStartTag").val(rowData.soeStartTag);
			$("#soeEndTag").val(rowData.soeEndTag);
			$("#ttsStartTag").val(rowData.ttsStartTag);
			$("#ttsEndTag").val(rowData.ttsEndTag);
			$("#ttsOriginStartTag").val(rowData.ttsStartTag);
			$("#ttsOriginEndTag").val(rowData.ttsEndTag);
		}


	</script>
</html>