<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/tags.jspf"%>

<section class="content-header">
	<tg:menuInfoTag />
</section>

<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box box-success">
				<div class="box-header">
					<h3 class="box-title"><i class='material-icons' style='font-size:16px;'>play_arrow</i>&nbsp;&nbsp;검색조건</h3>
				</div>
				<div class="box-body">
					<div class="row">
						<div class="col-md-6 col-xs-12" style="margin-bottom: 10px;">
							<div class="input-group">
								<span class="input-group-addon">게시판 형태</span>
								<select id="bodTp" name="bodTp" class="form-control selectpicker">
									<option value="">전체</option>
									<c:forEach var="bodTypeList" items="${cdDtlBodTypeList}">
										<option value="${bodTypeList.cdDtlId}">${bodTypeList.cdDtlNm}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="col-md-6 col-xs-12">
							<div class="input-group">
								<span class="input-group-addon">게시판명</span>
								<input type="text" id="bodNmLike" class="form-control" placeholder="게시판명 입력" maxlength="50">
							</div>
						</div>
					</div>
				</div>
				<div class="box-footer">
					<div class="btn-group pull-right">
						<button type="button" class="btn btn-outline-primary" id="searchBtn">검색</button>
						<button type="button" class="btn btn-outline-primary" id="resetBtn">리셋</button>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xs-12">
			<div class="box box-primary">
				<div class="box-body">
					<table id="datatable" class="table table-bordered table-striped" style="width:100%; table-layout:fixed;"></table>
				</div>
				<div class="box-footer">
					<button type="button" class="btn btn-outline-primary pull-right" onclick="goInsert()">등록</button>
				</div>
			</div>
		</div>
	</div>
</section>

<script>

	var datatable;
	$(document).ready(function() {
		datatable = $("#datatable").DataTable({
			"searching" : false
			,"paging": true
			,"bPaginate": true
			,"responsive": true
			,"language": lang_kor
			,"ajax" : {
				"url" : "<c:url value='/system/bod/list.json' />"
				,"method" : "post"
				,"data" : function(d) {
					if ($('#bodNmLike').val() != "") {d.bodNmLike = $('#bodNmLike').val();	}
					if ($('#bodTp').val() != "") {d.bodTp = $('#bodTp').val();	}
				}
			},"processing": true
			,"serverSide": true
			,"order" : [[0, 'desc']]
			,"columns": [
				{ "name" : "BOD_TP", "title" : "게시판 형태", "render" : 
					function (data, type, row) {
						return "<span class='label label-"+row["bodTpCd"].cdDtlLabel+"'>"+row["bodTpCd"].cdDtlNm+"</span>";
					}
					, "className" : "dt-head-center dt-body-center"
				},
				{ "name" : "BOD_NM", "title" : "게시판명", "data" : "bodNm", "className" : "dt-head-center dt-body-left"},
				{ "name" : "BOD_TP", "title" : "게시판 기능", "render" : 
					function (data, type, row) {
						var html = "<span class='label ";
						if(row["cmntYn"]) html += "label-primary' data-toggle='tooltip' title='댓글'";
						else html += "label-default";
						html += "'>댓글</span>&nbsp;";
						
						html += "<span class='label ";
						if(row["answYn"]) html += "label-warning' data-toggle='tooltip' title='답변'";
						else html += "label-default";
						html += "'>답변</span>&nbsp;";
						
						html += "<span class='label ";
						if(row["scrtYn"]) html += "label-success' data-toggle='tooltip' title='비밀글'";
						else html += "label-default";
						html += "'>비밀글</span>";
						return html;  
					}, "className" : "dt-head-center dt-body-center", " orderable" : false
				},
				{ "render" : 
					function (data, type, row) {
						var html = "";
						html += "<button type='button' class='btn btn-sm btn-outline-primary' onclick='goUpdate(\""+row["bodId"]+"\")'>수정</button>&nbsp;";
						html += "<button type='button' class='btn btn-sm btn-outline-primary' onclick='goDelete(\""+row["bodId"]+"\")'>삭제</button>";
						return html;  
					},
				   "className": "dt-head-center dt-body-center", "orderable" : false, "title":"기능"
				}
			]
			,"scrollX": "100%"
			,"scrollXInner": "500px"
			,"columnDefs": [
				{"targets": [0], width:"100px"}
				,{"targets": [1], width:"150px"}
				,{"targets": [2], width:"150px"}
				,{"targets": [3], width:"100px"}
			]
		});
	});
	
	$("#searchBtn").click(function() {
		datatable.ajax.reload();
	});
	
	$("#bodTp").change(function() {
		datatable.ajax.reload();
	});
	
	$("#resetBtn").click(function() {
		$("#bodTp").val("");
		$("#bodTp").selectpicker('refresh');
		$("#bodNmLike").val("");
		datatable.ajax.reload();
	});
	
	$("input").keypress(function(event) {
	    if (event.which == 13) {
	        event.preventDefault();
	        datatable.ajax.reload();
	    }
	});
	
	function goInsert() {
		location.href = "/system/bod/insert.mng";
	}
	
	function goUpdate(bodId) {
		location.href = "/system/bod/view.mng?bodId="+bodId;
	}
	
	function goDelete(bodId){
		if(confirm("삭제하시겠습니까?")){
			$.ajax({
				url : "<c:url value='/system/bod/delete.json' />",
				type : "POST",
				data : {"bodId" : bodId},
				dataType : "json",
				success : function(res){
					if("success" == res.result){
						alert("삭제되었습니다.");
						datatable.ajax.reload();
					}else{
						alert(res.message)
					}
				}
			})
		}
	}

</script>