<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setHeader("Expires", "0");
%>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="/jsp/common/include/css.jsp"/>
<jsp:include page="/jsp/common/include/script.jsp"/>

<link href="<c:url value="/addon/bootstrap-5.3.2/css/bootstrap.min.css"/>" rel="stylesheet" />
<script src="<c:url value="/addon/bootstrap-5.3.2/js/bootstrap.bundle.min.js"/>"></script>
<link href="<c:url value="/addon/select2-4.1.0/css/select2.min.css"/>" rel="stylesheet" />
<link href="<c:url value="/addon/select2-4.1.0/css/select2-bootstrap.min.css"/>" rel="stylesheet" />
<script src="<c:url value="/addon/select2-4.1.0/js/select2.min.js"/>"></script>
<style>

.select2-container--bootstrap {
    display: inline-block;
    height: 50px;
    margin-top: 12;
}

</style>


	<script language="javascript" >
	var url      = '<c:url value="/onl/admin/authserver/apiScopeMan.json" />';
	var url_view = '<c:url value="/onl/admin/authserver/apiScopeMan.view" />';
	
	$.fn.select2.defaults.set( "theme", "bootstrap" );
	
	function isValid(){
		if($('select[name=bzwkSvcKeyName]').val() == ""){
			alert("API를 선택하여 주십시요.");
			$('select[name=bzwkSvcKeyName]').focus();
			return false;
		}
		if($('select[name=scopeId]').val() == ""){
			alert("SCOPE를 선택하여 주십시요.");
			$('select[name=scopeId]').focus();
			return false;
		}
		
		return true;
	}
	
	$(document).ready(function() {
		var gridPostData = getSearchForJqgrid("cmd","LIST");
		$('#grid').jqGrid({
			datatype:"json",
			mtype: 'POST',
			url: url,
			postData : gridPostData,
			colNames:['<%= localeMessage.getString("apiScpMan.apiNm") %>',
	                  '<%= localeMessage.getString("apiScpMan.apiId") %>',
	                  '<%= localeMessage.getString("apiScpMan.scpId") %>',
	                  '<%= localeMessage.getString("apiScpMan.scpNm") %>',
	                  '<%= localeMessage.getString("apiScpMan.del") %>'
	                  ],
			colModel:[
					{ name : 'EAISVCDESC', align:'left', sortable:false },
					{ name : 'BZWKSVCKEYNAME', align:'left' },
					{ name : 'SCOPEID', align:'left' },
					{ name : 'SCOPENAME', align:'left', sortable:false },
					{ name : 'DELETE', align:'center', sortable:false, formatter: addDeleteButton }
					],
	        jsonReader: {
	             repeatitems:false
	        },
			pager : $('#pager'),
			page : '${param.page}',
			rowNum : '${rmsDefaultRowNum}',
		    autoheight: true,
		    height: $("#container").height(),
			autowidth: true,
			viewrecords: true,
			rowList : eval('[${rmsDefaultRowList}]'),
			loadComplete : function(d) {
				$("img[name^='img_']").click(function() {
					if(confirm("삭제하시겠습니까?")){
						var name = $(this).attr("name");
						var rowId = name.split("_")[1];
						var rowData = $('#grid').jqGrid('getRowData', rowId);
						var postData = new Array();
						postData.push({ name: "cmd" , value:"DELETE"});
						postData.push({ name: "bzwkSvcKeyName" , value:rowData['BZWKSVCKEYNAME']});
						postData.push({ name: "scopeId" , value:rowData['SCOPEID']});
						$.ajax({
							type : "POST",
							url:url,
							data:postData,
							success:function(args){
								if(args.status=="error"){
									alert("동기화중 오류입니다.\n확인하여 주십시요.\n" + args.message);
								}else{
									alert("삭제 되었습니다.");
									//goNav(returnUrl);//LIST로 이동
									location.reload();
								}
							},
							error:function(e){
								alert(e.responseText);
							}
						});
					}
				});
			},
			onSortCol :function(sidx,colnum,sort_order){
	          	var gridPostData = getSearchForJqgrid("cmd","LIST");
	          	var sortorder="";
	          	if( sort_order == "") 
	          		sortorder ='ASC';
	          	else
	          		sortorder = sort_order;
	        	$("#grid").setGridParam({ url:url, postData: gridPostData, page:"1"}).trigger("reloadGrid");	 
	        }
		});
		
		resizeJqGridWidth('grid','content_middle','1000');
	
		$("#btn_search").click(function(){
			var postData = getSearchForJqgrid("cmd","LIST"); //jqgrid에서는 object 로 
			$("#grid").setGridParam({ postData: postData ,page : "1"  }).trigger("reloadGrid");
	
		});
	
		$("#btn_add").click(function(){
	        if (!isValid()){
				return;
			}
			var postData = $('#ajaxForm').serializeArray();
			postData.push({ name: "cmd" , value:"INSERT"});
			$.ajax({
				type : "POST",
				url:url,
				data:postData,
				success:function(args){
					alert("저장 되었습니다.");
					location.reload();
					//goNav(returnUrl);//LIST로 이동
				},
				error:function(e){
					alert(e.responseText);
				}
			});
		});
		
		$("input[name^=search]").keydown(function(key){
			if (key.keyCode == 13){
				$("#btn_search").click();
			}
		});
	
		//$("img[name=img_" + rowid + "]").click(function() {
		$("img[name^='img_']").click(function() {
		//$("#btn_pop_delete").click(function() {
			if(confirm("삭제하시겠습니까?")){
				var name = $(this).attr("name");
				var rowId = name.split("_")[1];
				var rowData = $(this).getRowData(rowId); 
				var postData = new Array();
				postData.push({ name: "cmd" , value:"DELETE"});
				postData.push({ name: "bzwkSvcKeyName" , value:rowData['BZWKSVCKEYNAME']});
				postData.push({ name: "scopeId" , value:rowData['SCOPEID']});
				$.ajax({
					type : "POST",
					url:url,
					data:postData,
					success:function(args){
						if(args.status=="error"){
							alert("동기화중 오류입니다.\n확인하여 주십시요.\n" + args.message);
						}else{
							alert("삭제 되었습니다.");
							//goNav(returnUrl);//LIST로 이동
							location.reload();
						}
					},
					error:function(e){
						alert(e.responseText);
					}
				});
			}
		});
		
		buttonControl();
		init();
	});
	
	function addDeleteButton(cellvalue, options, rowObject) {
		var rowId = options["rowId"];
		return "<img id='btn_pop_delete' name='img_" + rowId
				+ "' src=<c:url value='/img/btn_pop_delete.png' /> />";
	}
	
	function init() {
		$.ajax({
			type : "POST",
			url:url,
			dataType:"json",
			data:{cmd: 'LIST_COMBO'},
			success:function(json){
				new makeOptions("APIID","APINAME").setObj($("select[name=bzwkSvcKeyName]")).setNoValueInclude(true).setNoValue("", "- API 선택 -").setData(json.apiRows).setFormat(codeName3OptionFormat).rendering();
				new makeOptions("SCOPEID","SCOPENAME").setObj($("select[name=scopeId]")).setNoValueInclude(true).setNoValue("", "- SCOPE 선택 -").setData(json.scopeRows).setFormat(codeName3OptionFormat).rendering();
				putSelectFromParam();
				//setSearchable("scopeId");	// 콤보에 searchable 설정
				
				if (typeof callback === 'function') {
					callback();
				}
                $('select[name=bzwkSvcKeyName]').select2();
                $('select[name=scopeId]').select2()
			},
			error:function(e){
				alert(e.responseText);
			}
		});
	}
	</script>
</head>
	<body>
		<div class="right_box">
			<div class="content_top">
				<ul class="path">
					<li><a href="#">${rmsMenuPath}</a></li>
				</ul>
			</div><!-- end content_top -->
			<div class="content_middle" id="content_middle">
				<div class="search_wrap">
					<button type="button" class="cssbtn" id="btn_search" level="R"><i class="material-icons">search</i> <%= localeMessage.getString("button.search") %></button>
<%-- 					<img src="<c:url value="/img/btn_search.png"/>" alt="" id="btn_search" level="R" /> --%>

				</div>
				<div class="title"><%= localeMessage.getString("apiScpMan.title") %></div>
				
				<table class="search_condition" cellspacing=0;>
					<tbody>
						<tr>
							<th style="width:180px;"><%= localeMessage.getString("apiScpMan.apiNm") %></th>
							<td><input type="text" name="searchEaiSvcDesc" value="${param.searchEaiSvcDesc}"></td>
							<th style="width:180px;"><%= localeMessage.getString("apiScpMan.apiId") %></th>
							<td><input type="text" name="searchBzwkSvcKeyName" value="${param.searchBzwkSvcKeyName}"></td>
						</tr>
						<tr>
							<th style="width:180px;"><%= localeMessage.getString("apiScpMan.scpNm") %></th>
							<td><input type="text" name="searchScopeName" value="${param.searchScopeName}"></td>
							<th style="width:180px;"><%= localeMessage.getString("apiScpMan.scpId") %></th>
							<td><input type="text" name="searchScopeId" value="${param.searchScopeId}"></td>
						</tr>
					</tbody>
				</table>
				
				<form id="ajaxForm">
					<table class="table_row" cellspacing="0">
						<tr>
							<th style="width:180px; text-align: center;"><%= localeMessage.getString("apiScpMan.newAdd") %></small></th>
							<td>
								<!-- 
								<input type="text" name="bzwkSvcKeyName" style="width: auto;" placeholder="API아이디 입력"/>
								<input type="text" name="scopeId" style="width: auto;"  placeholder="SCOPE아이디 입력"/>
								-->
								<select name="bzwkSvcKeyName" value="">										
								</select>
								<select name="scopeId" value="">										
								</select>
<%-- 								<img src="<c:url value="/img/btn_pop_add.png"/>" id="btn_add"/> --%>
								<button type="button" class="cssbtn smallBtn2" id="btn_add" style="vertical-align:middle; font-weight:bold;"><i class="material-icons">add</i><%= localeMessage.getString("button.add") %></button>
							</td>
						</tr>
					</table>
				</form>
				
				<table id="grid" ></table>
				<div id="pager"></div>
				
			</div><!-- end content_middle -->
		</div><!-- end right_box -->
	</body>
</html>