<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<!-- Content wrapper -->
<div class="content-wrapper">
	<!-- Content -->
	<div class="container-xxl flex-grow-1 container-p-y">
    	<%--h4 id="pageTitle" class="fw-bold py-3 mb-4">페이지 제목</h4--%>
		<c:set var="prefixName" scope="request">기능 그룹</c:set>
        <!-- Page Body -->
		<div class="card">
		    <div class="card-datatable text-nowrap">
		        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
		        
					<div class="d-flex flex-row justify-content-evenly">
						<div style="width:49%;">
						<h5 class="mt-3">기능 그룹</h5>
						<div class="d-flex flex-row justify-content-between p-3">
							<div>
								<div class="input-group" id="DataTables_Table_0_length">
									<select id="by" onchange="document.getElementById('term').focus();" aria-controls="DataTables_Table_0" class="form-select">
										<option value="${infoPrefix}Name">이름</option>
										<option value="${infoPrefix}ID">아이디</option>
									</select>
									<input id="term" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
								</div>
							</div>
							<div>
								<button onclick="search${infoPrefix}s();" class="btn btn-primary">찾기</button>
								<button onclick="${infoPrefix}Control.groups.newInfo();" class="btn btn-primary">+ 추가</button>
								<button id="btnRemove${infoPrefix}s" onclick="remove${infoPrefix}s();" class="btn btn-primary">- 제거</button>
							</div>
						</div>
						<table class="datatables-ajax table table-bordered dataTable no-footer" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
							<thead>
								<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="text-align:center;"><input onchange="${infoPrefix}Control.groups.select(this.checked);" type="checkbox" class="form-check-input"></th>
									<th class="sorting sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Full name: activate to sort column descending" style="">아이디</th>
									<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" style="">이름</th>
									<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="">등록일자</th>
								</tr>
		                    </thead>
		                    <tbody id="${infoPrefix}List">
							</tbody>
		                   	<template id="${infoPrefix}Row">
		                   	<tr data-key="{GRP_ID}">
		                       <td style="text-align:center;"><input value="{GRP_ID}" onchange="${infoPrefix}Control.groups.select('{GRP_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
		                       <td onclick="${infoPrefix}Control.groups.setCurrent('{GRP_ID}')" ondblclick="${infoPrefix}Control.groups.getInfo({})">{GRP_ID}</td>
		                       <td onclick="${infoPrefix}Control.groups.setCurrent('{GRP_ID}')" ondblclick="${infoPrefix}Control.groups.getInfo({})">{GRP_NM}</td>
		                       <td onclick="${infoPrefix}Control.groups.setCurrent('{GRP_ID}')" ondblclick="${infoPrefix}Control.groups.getInfo({})">{REG_DT}</td>
		                    </tr>
		                    </template>
		                   	<template id="${infoPrefix}NotFound">
							<tr class="odd">
								<td valign="top" colspan="4" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
							</tr>
		                    </template>
						</table>
						<div class="d-flex flex-row p-3 justify-content-between">
							<label id="${infoPrefix}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
			                 <ul id="${infoPrefix}Paging" class="pagination pagination-primary">
			                 </ul>
						</div>
						</div>
						<div style="width:49%;">
						<h5 class="mt-3">기능 URL</h5>
						<div class="d-flex flex-row justify-content-end p-3">
							<div>
								<button id="btnAddActions" onclick="${infoPrefix}Control.addActions();" class="btn btn-primary">+ 추가</button>
								<button id="btnRemoveActions" onclick="removeActions();" class="btn btn-primary">- 제거</button>
							</div>
						</div>
						<table class="datatables-ajax table table-bordered dataTable no-footer" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
							<thead>
								<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="text-align:center;"><input id="actionToggler" onchange="${infoPrefix}Control.actions.select(this.checked);" type="checkbox" class="form-check-input"></th>
									<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" style="">기능 URL</th>
									<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="">등록일자</th>
								</tr>
		                    </thead>
		                    <tbody id="actionList">
							</tbody>
		                   	<template id="actionRow">
		                   	<tr data-key="{GRP_ID}-{ACTION}">
		                       <td style="text-align:center;"><input value="{GRP_ID}-{ACTION}" onchange="${infoPrefix}Control.actions.select('{GRP_ID}-{ACTION}', this.checked);" type="checkbox" class="form-check-input"></td>
		                       <td onclick="${infoPrefix}Control.actions.setCurrent('{GRP_ID}-{ACTION}')">{ACTION}</td>
		                       <td onclick="${infoPrefix}Control.actions.setCurrent('{GRP_ID}-{ACTION}">{REG_DT}</td>
		                    </tr>
		                    </template>
		                   	<template id="actionNotFound">
							<tr class="odd">
								<td valign="top" colspan="3" class="dataTables_empty text-center">기능 URL 정보를 찾지 못했습니다.</td>
							</tr>
		                    </template>
						</table>
						<div class="d-flex flex-row p-3 justify-content-between">
							<label id="actionPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
			                 <ul id="actionPaging" class="pagination pagination-primary">
			                 </ul>
						</div>
						</div>
					</div>
				</div>
		    </div>
		</div>
		<!--/ Page Body -->

        <hr class="my-5" />
	</div>
    <!-- / Content -->

	<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />

    <div class="content-backdrop fade"></div>
</div>
<!-- Content wrapper -->




<script>
var ${infoPrefix}Control = new ActionGroupControl();

function search${infoPrefix}s() {
	${infoPrefix}Control.groups.query = {
		by:$("#by").val(),
		term:$("#term").val()
	};
	${infoPrefix}Control.groups.load(1);
}

function remove${infoPrefix}s() {
	dialog.alert({
		content:"선택한 ${prefixName} 정보를 제거하시겠습니까?",
		onOK:() => {
			${infoPrefix}Control.groups.remove();
		}
	});
}

function removeActions() {
	dialog.alert({
		content:"선택한 기능 URL을 삭제하시겠습니까?",
		onOK:() => {
			${infoPrefix}Control.removeActions();
		}
	});
}

function render${infoPrefix}List() {
	let ${infoPrefix}List = ${infoPrefix}Control.groups.dataset;
	let empty = ${infoPrefix}List.empty;
	
	let trs = empty ?
		[document.getElementById("${infoPrefix}NotFound").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
		${infoPrefix}List.inStrings(document.getElementById("${infoPrefix}Row").innerHTML); <%-- from template#${infoPrefix}Row --%>
	$("#${infoPrefix}List").html(trs.join());
	$("th input[type='checkbox']").prop("checked", false);
}

${infoPrefix}Control.onGroupListChange = obj => {
	render${infoPrefix}List();

	$("#${infoPrefix}Paging").setPaging({
		list:${infoPrefix}Control.groups.dataset,
		prefix:${infoPrefix}Control.groups.prefix,
		start:obj.${infoPrefix}Start,
		totalSize:obj.${infoPrefix}Total,
		fetchSize:obj.${infoPrefix}Fetch,
		func:"${infoPrefix}Control.groups.load({index})"
	});
};

${infoPrefix}Control.onCurrentGroupChange = item => {
	$("#btnAddActions").prop("disabled", !item);
	if (!item) return;
	
	let key = item.data.GRP_ID;
	$("#${infoPrefix}List").setCurrentRow(key);
};

${infoPrefix}Control.onGroupSelect = selected => {
	let ${infoPrefix}List = ${infoPrefix}Control.groups.dataset;
	let keys = selected.map(e => ${infoPrefix}List.getKey(e));
	$("#${infoPrefix}List input[type='checkbox']").each(function() {
		let checkbox = $(this);
		checkbox.prop("checked", keys.includes(checkbox.val()));
	});
	
	$("#btnRemove${infoPrefix}s").prop("disabled", keys.length < 1);
};


${infoPrefix}Control.onActionListChange = obj => {
	let ${infoPrefix}List = ${infoPrefix}Control.actions.dataset;
	let empty = ${infoPrefix}List.empty;
	
	let trs = empty ?
		[document.getElementById("actionNotFound").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
		${infoPrefix}List.inStrings(document.getElementById("actionRow").innerHTML); <%-- from template#${infoPrefix}Row --%>
	$("#actionList").html(trs.join());
	$("#actionToggler").prop("checked", false);

	$("#actionPaging").setPaging({
		list:${infoPrefix}Control.actions.dataset,
		prefix:${infoPrefix}Control.actions.prefix,
		start:obj.actionStart,
		totalSize:obj.actionTotal,
		fetchSize:obj.actionFetch,
		func:"${infoPrefix}Control.actions.load({index})"
	});
};

${infoPrefix}Control.onCurrentActionChange = item => {
	if (!item) return;
	
	let data = item.data;
	let key = data.GRP_ID + "-" + data.ACTION;
	$("#actionList").setCurrentRow(key);
};

${infoPrefix}Control.onActionSelect = selected => {
	let ${infoPrefix}List = ${infoPrefix}Control.actions.dataset;
	let keys = selected.map(e => ${infoPrefix}List.getKey(e));
	$("#actionList input[type='checkbox']").each(function() {
		let checkbox = $(this);
		checkbox.prop("checked", keys.includes(checkbox.val()));
	});
	
	$("#btnRemoveActions").prop("disabled", keys.length < 1);
};

$("#term").onEnterPress(search${infoPrefix}s);

$(function(){
	${onload}
	${infoPrefix}Control.groups.setData({
		${infoPrefix}List:${groupList},
		${infoPrefix}Start:${groupStart},
		${infoPrefix}Fetch:${groupFetch},
		${infoPrefix}Total:${groupTotal}
	});
});
</script>
