<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="ct" tagdir="/WEB-INF/tags" %>

<div class="search2">	
	<form:form commandName="codeVO" name="searchForm" method="get">
		<ul>
		 	<li><b>분야 선택</b></li>
		 	<li class="margin-left">
		 		<select id="category" name="code" >
		 			<option value="CAT1">분야1</option>
		 			<option value="CAT2">분야2</option>
		 		</select>
		 	</li>	 
		</ul>	  
	</form:form>	
</div>
<form:form name="listForm" method="get">
<!-- List -->
<div id="table">
	<div class="codeInfo">		
		<img src="/images/cmmn/title.png" alt="icon">
		<span>분야 목록</span>	
	</div>
	<table class="tbl_list" width="100%" border="0" cellpadding="0" cellspacing="0" summary="게시판 목록을 확인 할 수 있습니다.">
		<caption class="hidden">게시판 목록</caption>
		<colgroup>
			<col width="20%">
			<col width="20%">
			<col width="20%">
			<col width="20%">
			<col width="20%">
		</colgroup>
		<thead>
			<tr>
				<th align="center">선택</th>
				<th align="center">분야코드</th>
				<th align="center">분야명</th>
				<th align="center">정렬순서</th>
				<th align="center">사용여부</th>
			</tr>
		</thead>
		<tbody id="bodyData">
		<form:form name="reportForm" commandName="codeVO" method="post">
			<tr>
				<td align="center">
					<input type="radio" name="selectRadio" data-group="" data-code="" id="selectRadio"/>
				</td>
				<td align="center" >
				<label for="selectRadio">01</label>
				</td>
				<td align="center">
				<label for="selectRadio">01</label>
				</td>
				<td align="center">
				<label for="selectRadio">01</label>
				</td>
				<td align="center">
				<label for="selectRadio">01</label>
				</td>
			</tr>
		</form:form>
		</tbody>
	</table>
</div>
</form:form>
<br/>
<br/>
<div id="memberAdd">
<div class="codeInfo">		
		<img src="/images/cmmn/title.png" alt="icon">
		<span>분야 상세</span>	
	</div>
		<table class="tbl_add">
			<tbody>
				<tr>
					<th>분야코드</th>
					<td><input type="text" id="code"></td>
					<th>분야명</th>
					<td><input type="text" id="codeName"></td>
				</tr>
				<tr>
				<th>정렬순서</th>
					<td><input type="text" id="order"></td>
					<th>사용여부</th>
					<td><input type="checkbox" id="useYn"></td>
				</tr>
			</tbody>
		</table>
    </div>
    
<div class="boardviewinfo">
	<ul class="btn-style">
		<li>
	     	<a href="javascript:Code.add();">새로추가</a>
	    </li>
	    <li>
	    	<a href="javascript:Code.save();">저장하기</a>
	    </li>
	</ul>
</div>

<script type="text/javascript">
var Code = {
		//코드목록
		list : [],
		//신규여부
		isNew : false,
		//코드조회
		select : function(){
			$.ajax({
				type: "get",
				cache: false,
				url: "/code/codeList.json",
				data: {
					group: $("#category").val(),
				},
				success: function(data) {
					$("#bodyData").empty();
					Code.list = data.data;
					console.log(Code.list);
					$(Code.list).each(function(idx, item){
						var html = "";
						html+= '<tr>';
						html+= 	'<td align="center">';
						html+= 		'<input type="radio" name="selectRadio" id="selectRadio'+idx+'" onclick="Code.detail('+idx+');"/>';
						html+= 	'</td>';
						html+= 	'<td align="center" >';
						html+= 	'<label for="selectRadio'+idx+'">'+item.code+'</label>';
						html+= 	'</td>';
						html+= 	'<td align="center">';
						html+= 	'<label for="selectRadio'+idx+'">'+item.name+'</label>';
						html+= 	'</td>';
						html+= 	'<td align="center">';
						html+= 	'<label for="selectRadio'+idx+'">'+item.order+'</label>';
						html+= 	'</td>';
						html+= 	'<td align="center">';
						html+= 	'<label for="selectRadio'+idx+'">'+item.useYn+'</label>';
						html+= 	'</td>';
						html+= '</tr>';
						$("#bodyData").append(html);
					});
					
					$("#selectRadio0").trigger("click");
				}
			});
		},
		//코드 저장
		save : function(){
			var url = "";
			
			if(Code.isNew)
				url = "/code/insert.json";
			else
				url = "/code/update.json";
			
			var param = {
					group: $("#category").val(),
					code: $("#code").val(),
					name: $("#codeName").val(),
					order: $("#order").val(),
					useYn: $("#useYn").prop("checked") == true ? "Y" : "N"
				}
			
			$.ajax({
				type: "get",
				cache: false,
				url: url,
				data: param,
				success: function(data) {
					Code.select();
				}
			});
		},
		//신규
		add : function(){
			Code.isNew = true;
			$("#order").val("");
			$("#code").val("");
			$("#codeName").val("");
			$("#useYn").prop("checked", true);
		},
		//코드 선택
		detail : function(idx){
			Code.isNew = false;
			var item = Code.list[idx];
			$("#order").val(item.order);
			$("#code").val(item.code);
			$("#codeName").val(item.name);
			$("#useYn").prop("checked", item.useYn == 'Y');	
			
		}
}

$(document).ready(function(){
	Code.select();
	
	$("#category").on("change", function(){
		Code.select();
	});
});
</script>
