<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<script type="text/javaScript" defer="defer">
	$(document).ready(function(){
		$.ajaxSetup({cache: false});
		
		getCode2List('${code.code}' || 'PS00', '${code.name}' || '본청');
		
		$('.code').click(function(){
			var code = $(this).parent().attr('code');
			var name = $(this).parent().attr('name');
			getCode2List(code, name);
		});
		
		$('.codeInfo .btn').click(function(){
			var table = $(this).closest('.inlinetable').find('table');
			
			if ($(this).prop('open') == true) {
				table.find('.addLine').hide();
				$(this).prop('open', false);
			} else {
				table.find('.addLine').show();
				$(this).prop('open', true);
			}
		});
		$('.inlinetable').on('click', '.addLine input[name=cancel]', function(){
			var tr = $(this).closest('tr');
			tr.hide();
			
			var codeInfo = $(this).closest('table').prev();
			codeInfo.find('.btn').prop('open', false);
		});
		
		$('.inlinetable').on('click', '.addLine input[name=save]', function(){
			var tr = $(this).closest('tr');
			var group = tr.find('input[name=group]').val();
			var code = tr.find('input[name=code]').val();
			var name = tr.find('input[name=name]').val();
			var shortName = tr.find('input[name=shortName]').val();
			var useYn = tr.find('input[name=useYn]').prop('checked');
			
			if(group && code && name) {
				$.ajax({
					url : '/code/insert.json',
					type : 'get',
					data : { 'group' : group, 'code' : code, 'name' : name, 'shortName' : shortName, 'useYn' : 'Y' },
					dataType : 'json',
					success : function(data) {
						if(data.cnt == '1'){
							alert('코드가 추가되었습니다.');
						} else {
							alert('코드가 추가에 실패하였습니다.');
						}
						fn_searchList();
					}
				});
			}
		});
		
		$('.inlinetable').on('click', 'input[name=useYn]', function(){
			var flag = false;
			if($(this).prop('checked')){
				flag = confirm('사용여부를 설정하시겠습니까?');
			} else {
				flag = confirm('사용여부를 해제하시겠습니까?');
			}
			if(flag) {
				updateCode(this);
			} else {
				$(this).prop('checked', !$(this).prop('checked'));
			}
		});
	});
	
	function getCode2List(group, name){
		$.ajax({
			url : '/code/codeList.json',
			type : 'get',
			data : { 'group' : group },
			dataType : 'json',
			success : function(data) {
				setCode2Info(group, name);
				listingCode2(data.data);
			}
		});
	}

	var opened = false;
	var openedTarget = null;
	function updateCodeView(self){
		if (opened) {
			cancelUpdateCode(openedTarget);
		}
		openUpdateCode(self);
	}
	function openUpdateCode(self){
		var tr = $(self).closest('tr');
		tr.find('.edit').show();
		tr.find('.view').hide();
		opened = true;
		openedTarget = self;
	}
	function cancelUpdateCode(self){
		var tr = $(self).closest('tr');
		var name = tr.find('input[name=name_temp]').val();
					 tr.find('input[name=name]').val(name);
		
		tr.find('.edit').hide();
		tr.find('.view').show();
		opened = false;
	}
	function updateCode(self){
		var tr = $(self).closest('tr');
		var group = tr.find('input[name=group]').val();
		var code = tr.find('input[name=code]').val();
		var name = tr.find('input[name=name]').val();
		var shortName = tr.find('input[name=shortName]').val();
		var useYn = tr.find('input[name=useYn]').prop('checked');
		
		$.ajax({
			url : '/code/update.json',
			type : 'get',
			data : { 
				'group' : group, 
				'code' : code, 
				'name' : name, 
				'shortName' : shortName,
				'useYn' : (useYn) ? 'Y' : 'N' 
			},
			dataType : 'json',
			success : function(data) {
				if(data.cnt == '1'){
					alert('코드가 수정되었습니다.');
				} else {
					alert('코드가 수정에 실패하였습니다.');
				}
				fn_searchList();
			}
		});
	}
	function deleteCode(self){
		var flag = confirm('선택한 소속를 삭제하시겠습니까? 세부 소속 역시 삭제됩니다.');
		if(flag){
			var tr = $(self).closest('tr');
			var group = tr.find('input[name=group]').val();
			var code = tr.find('input[name=code]').val();
			var name = tr.find('input[name=name]').val();
			var shortName = tr.find('input[name=shortName]').val();
			var useYn = tr.find('input[name=useYn]').prop('checked');
			
			$.ajax({
				url : '/code/delete.json',
				type : 'get',
				data : { 
					'group' : group, 
					'code' : code
				},
				dataType : 'json',
				success : function(data) {
					if(data.cnt > 0){
						alert('소속이 삭제되었습니다.');
					} else {
						alert('소속삭제를 실패하였습니다.');
					}
					location.href = "/admin/placeManage.do";
				}
			});
		}
	}
	
	
	
    function setCode2Info(group, name){
		$('#codeInfo .type').html(group + ' ' + name);
		$('#codeInfo input[name=group]').val(group);
	}
	
	function listingCode2(list){
		var tbody = $('#codeTable tbody').empty();
		var tr = '';
		
		tr += '<tr class="addLine">' +
					'<td class="listtd">NEW</td>' +
					'<td class="listtd">' +
						'<input name="group" type="hidden" value="' + $('#codeInfo input[name=group]').val() + '">' +
						'<input name="code" type="text">' +
					'</td>' +
					'<td class="listtd w-100"><input name="name" type="text"></td>' +
					'<td class="listtd" colspan="2"><input name="shortName" type="text"></td>' +
					'<td class="listtd"><input name="save" type="button" value="저장"></td>' +
					'<td class="listtd"><input name="cancel" type="button" value="취소"></td>' +
					<!--'<td class="listtd"></td>' +-->
				'</tr>';
				
		if (list.length > 0) {
			
			for(var i = 0; i < list.length; i++){
				var checked = (list[i].useYn == 'Y') ? 'checked' : '';
				
				tr = tr + '<tr>' +
						'<td class="listtd" align="center">' + (i+1) + '</td>' +
						'<td class="listtd" align="center">' +
							'<span>' + list[i].code + '</span>' +
							'<input type="hidden" name="group" value="' + list[i].group + '"/>' +
							'<input type="hidden" name="code" value="' + list[i].code + '"/>' +
						'</td>' +
						'<td class="listtd codeNm">' +
							'<span class="view">' + list[i].name + '</span>' +
							'<input class="edit" type="text" name="name" value="' + list[i].name + '">' +
							'<input class="edit" type="hidden" name="name_temp" value="' + list[i].name + '">' +
						'</td>' +
						'<td class="listtd codeYak">' +
							'<span class="view">' + list[i].shortName + '</span>' +
							'<input class="edit" type="text" name="shortName" value="' + list[i].shortName + '">' +
							'<input class="edit" type="hidden" name="shortName_temp" value="' + list[i].shortName + '">' +
						'</td>' +
						'<td class="listtd codeEnable" align="center">' +
							'<input type="checkbox" name="useYn" ' + checked + '/>' +
						'</td>' +
						'<td class="listtd codeModify">' +
							'<input class="view" type="button" value="수정" onclick="updateCodeView(this)">' +
							'<input class="edit" type="button" value="확인" onclick="updateCode(this)">' +
							'<input class="edit" type="button" value="취소" onclick="cancelUpdateCode(this)">' +
						'</td>' +
						'<td class="listtd groupDelete"><input type="button" value="삭제" onclick="deleteCode(this)"></td>' +
					'</tr>';
			}
		}
		tbody.html(tr);
	}
	
	
	/* 글 목록 화면 function */
    function fn_searchList() {
       	document.searchForm.action = "<c:url value='/admin/placeManage.do'/>";
       	document.searchForm.submit();
    }
	
	/* 검색초기화 function */
    function fn_selectList() {
       	location.href = "/admin/placeManage.do";
    }
</script>

<!-- List -->
<div id="table" class="clear">	
	<!-- 대분류 코드 구분 -->
	<div class="inlinetable">
		<div class="codeInfo">		
			<img src="/images/cmmn/title.png" alt="icon">
			<span>소속 구분</span>	
			<input class="value" type="hidden" value=""/>
			<input class="code_btn btn" type="button" value="소속 추가"/>
		</div>
		<table class="code_list">
			<colgroup>
	   			<col width="57">
	   			<col width="60">
	   			<col width="195">
	   			<col width="68">
	   			<col width="50">
	   			<col width="50">
	   		</colgroup>
			<thead>
				<tr>
					<th align="center"><spring:message code="code.view.rnum" /></th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.place1"/>">
							<spring:message code="code.view.code" />
						</span>
					</th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.position"/>">
							소속명
						</span>
					</th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.userid"/>">
							<spring:message code="code.view.enabled" />
						</span>
					</th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.name"/>">
							<spring:message code="code.view.modify" />
						</span>
					</th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.name"/>">
							<spring:message code="code.view.delete" />
						</span>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr class="addLine">
					<td>NEW</td>
					<td class="input_text">
						<input name="group" type="hidden" value="${place1List[0].group}">
						<input name="code" type="text">
					</td>
					<td class="input_text" colspan="2"><input name="name" type="text"></td>
					<td align="center"><input name="save" type="button" value="저장"></td>
					<td align="center"><input name="cancel" type="button" value="취소"></td>
				</tr>
				<c:forEach items="${place1List}" var="item" varStatus="status">					
					<tr name="${item.name}" code="${item.code}">
						<td align="center">${status.count}</td>
						<td align="center" class="code">
							<span>${item.code}</span>
							<input type="hidden" name="group" value="${item.group}"/>
							<input type="hidden" name="code" value="${item.code}"/>
						</td>
						<td align="left" class="codeNm">
							<span class="view">${item.name}</span>
							<input class="edit" type="text" name="name" value="${item.name}">
							<input class="edit" type="hidden" name="name_temp" value="${item.name}">
						</td>
						<td align="center" class="codeEnable">
							<input type="checkbox" name="useYn" ${item.useYn == 'Y' ? 'checked': ''} />
						</td>
						<td align="center"  class="codeModify">
							<input class="view" type="button" value="수정" onclick="updateCodeView(this)">
							<input class="edit" type="button" value="확인" onclick="updateCode(this)">
							<input class="edit" type="button" value="취소" onclick="cancelUpdateCode(this)">
						</td>
						<td align="center" class="codeDelete"><input type="button" value="삭제" onclick="deleteCode(this)"></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>			
	</div>
	<!-- 대분류 코드 구분 끝 -->
	
	<!-- AUTH 권한등급 -->
	<div class="inlinetable">
		<form name="searchForm" method="get">
		<div id="codeInfo" class="codeInfo">	
			<img src="/images/cmmn/title.png" alt="icon">
			<span class="type"></span>
			<input name="group" type="hidden" value="${code.code}"/>
			<input class="code_btn btn" type="button" value="세부 소속 추가"/>
		</div>
		</form>
		<table class="code_list" id="codeTable" border="0" cellpadding="0" cellspacing="0">
			<colgroup>
	   			<col width="57">
	   			<col width="60">
	   			<col width="">	   			
	   			<col width="">
	   			<col width="68">
	   			<col width="50">
	   			<col width="50">
	   		</colgroup>
			<thead>
				<tr>
					<th align="center"><spring:message code="code.view.rnum" /></th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.place1"/>">
							<spring:message code="code.view.code" />
						</span>
					</th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.position"/>">
							코드명
							<img src="/images/cmmn/blank_1x1.png" />
						</span>
					</th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.position"/>">
							약어
						</span>
					</th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.userid"/>">
							<spring:message code="code.view.enabled" />
						</span>
					</th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.name"/>">
							<spring:message code="code.view.modify" />
						</span>
					</th>
					<th align="center">
						<span class="order" value="<spring:message code="member.value.order.name"/>">
							<spring:message code="code.view.delete" />
						</span>
					</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>		
	</div>
</div>
<!-- /List -->
