<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<span data-doctx="${pageName}">
	<form name="frmEdit">
		<div class="d-flex flex-row justify-content-evenly">
			<div class="card" style="width:500px;">
				<h3>시군구 백업</h3>
				
				<div class="card-datatable text-nowrap">
			        <div class="dataTables_wrapper dt-bootstrap5 no-footer">
						<div class="table-responsive" style="overflow-x: scroll;height:500px;overflow-y: scroll;">
							<table name="backupSggTable" class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
								<thead class="sticky-thead">
									<tr>
										<th style="width: 50px;"></th>
										<th style="width: 140px;" >시군구코드</th>
										<th style="width: 300px;" >시군구명</th>
										<th class="cmn dummy-th"></th>
									</tr>
								</thead>
			                    <tbody name="backupSggTbody">
			                    </tbody>
							</table>
						</div>
					</div>
			    </div>
				
			</div>
			
			<div class="card" style="width:100px;">
				<div style="display: flex;flex-direction: column;justify-content: space-evenly;height: 100%;">
					<button type="button" name="btnAdd">추가 &gt;&gt;</button>
					<button type="button" name="btnDel">&lt;&lt; 삭제</button>
				</div>
			</div>
			
			<div class="card" style="width:500px;">
				<h3>시군구</h3>
	
				<div class="card-datatable text-nowrap">
			        <div class="dataTables_wrapper dt-bootstrap5 no-footer">
						<div class="table-responsive"
							style="overflow-x: scroll;height:500px;overflow-y: scroll;">
							<table class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
								<thead class="sticky-thead">
									<tr>
										<th style="width: 50px;"></th>
										<th style="width: 140px;" >시군구코드</th>
										<th style="width: 300px;" >시군구명</th>
										<th class="cmn dummy-th"></th>
									</tr>
								</thead>
			                    <tbody name="originalSggTbody">
			                    </tbody>
								
							</table>
						</div>
					</div>
			    </div>
				
			</div>
		</div>
	</form>
	
	
	<template is="curly-brackets" name="sggRow">
		<tr data-index="DATA-INDEX">
			<td onclick ondblclick class="text-center cmn">
				<input type="checkbox" value="DATA-INDEX" />
			</td>
			<td onclick ondblclick class="text-center cmn">SGG_CD</td>
			<td onclick ondblclick class="text-center cmn">SGG_NM</td>
			<td class="dummy-td cmn"></td>
		</tr>
	</template>
	<template name="sggNotFound">
		<tr>
			<td valign="top" colspan="14" class="dataTables_empty text-center">
			정보를 찾지 못했습니다.
			</td>
		</tr>
	</template>
</span>
<script>
pageObject['${pageName}'] = newDoctxFinder("${pageName}");

$(document).ready(function(){
	let $P = pageObject['${pageName}'];
	
	$P.originalDataset = new Dataset({
		keys : ["SGG_CD"]
	});
	$P.backupDataset = new Dataset({
		keys : ["SGG_CD"]
	});
	
	$P.fnRenderBackupAndOriginal = (list,tbodyName, dataset) => {
		$P.$findn(tbodyName).html("");
		
		if(list != null && list.length > 0){
			dataset.setData(list);
		} else {
			dataset.setData([]);
		}
		
		var empty = dataset.empty;
		var notFound = [$P.findn("sggNotFound").innerHTML];
		var found = $P.findn("sggRow").innerHTML;
		var replacer = (str, dataItem) => str.replace(/{onclick}/gi, "");
		var trs = empty ? notFound : dataset.inStrings(found, replacer);
		$P.$findn(tbodyName).html(trs.join());
	};
	
	$P.getBackupAndOriginalDataList = () => {
		ajax.get({
			url : wctx.url("/admin/sggBackup/list.do"),
			data : {
				originalTable : "TB_SGG",
				backupTable : "TB_SGG_ORG",
				pkName : "SGG_CD"
			},
			success : (resp) => {
				
				$P.fnRenderBackupAndOriginal(resp.originalDataList,"originalSggTbody", $P.originalDataset);
				$P.fnRenderBackupAndOriginal(resp.backupDataList,"backupSggTbody", $P.backupDataset);
				
			}
		});
	};
	
	$P.$findn("btnAdd").on("click", function(){
		var checked = $P.$findn("backupSggTbody").find("input[type='checkbox']:checked");
		if(checked.length < 1){
			return;
		}
		
		var arr = [];
		checked.each(function(){
			arr.push($P.backupDataset.getData(this.value).SGG_CD); 
		});
		
		ajax.post({
			url : wctx.url("/admin/sggBackup/activate.do"),
			data : {
				originalTable : "TB_SGG",
				backupTable : "TB_SGG_ORG",
				pkName : "SGG_CD",
				pks : arr.join(",")
			},
			success : (resp) => {
				if(resp.saved){
					$P.getBackupAndOriginalDataList();
				}
			}
		});
		
	});
	$P.$findn("btnDel").on("click", function(){
		var checked = $P.$findn("originalSggTbody").find("input[type='checkbox']:checked");
		if(checked.length < 1){
			return;
		}
		var arr = [];
		checked.each(function(){
			arr.push($P.originalDataset.getData(this.value).SGG_CD);
		});
		
		ajax.post({
			url : wctx.url("/admin/sggBackup/deactivate.do"),
			data : {
				originalTable : "TB_SGG",
				backupTable : "TB_SGG_ORG",
				pkName : "SGG_CD",
				pks : arr.join(",")
			},
			success : (resp) => {
				if(resp.saved){
					$P.getBackupAndOriginalDataList();
				}
			}
		});
	});

	$P.getBackupAndOriginalDataList();
});

</script>