<%@ 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-4 col-xs-12" style="margin-bottom: 10px;">
							<div class="input-group">
								<span class="input-group-addon">게시판구분</span>
	                            <select id="bodId" class="form-control selectpicker">
									<option value="">전체</option>
									<c:forEach var="bod" items="${bodList}">
										<option value="${bod.bodId}">${bod.bodNm}</option>
									</c:forEach>
	                            </select>
                            </div>
						</div>
						<div class="col-md-4 col-xs-12" style="margin-bottom: 10px;">
                           	<div class="input-group">
                             	<span class="input-group-addon">제목</span>
                             	<input type="text" id="titleLike" class="form-control" placeholder="제목 입력" maxlength="30">
                           	</div>
						</div>
						<div class="col-md-4 col-xs-12">
                           	<div class="input-group">
                             	<span class="input-group-addon">내용</span>
                             	<input type="text" id="contLike" class="form-control" placeholder="내용 입력" maxlength="30">
                           	</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="showInsertModal()">등록</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade func-modal" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h2 id="func-modal-title"></h2>
				</div>
				<div class="modal-body">
					<form id="funcForm" name="funcForm">
						<input type="hidden" name="artiId" />
						<table class="board_write" style="width:100%;">
							<tr>
								<th>게시판명</th>
								<td colspan="3">
									<select name="bodId" class="form-control selectpicker">
										<option value="">전체</option>
										<c:forEach var="bod" items="${bodList}">
											<option value="${bod.bodId}">${bod.bodNm}</option>
										</c:forEach>
									</select>
								</td>
							</tr>
							<tr>
								<th>제목</th>
								<td colspan="3">
									<input type="text" name="title" class="form-control col-md-7 col-sm-7 col-xs-12" placeholder="제목 입력" maxlength="50">
								</td>
							</tr>
							<tr>
								<th>내용</th>
								<td colspan="3"><textarea id="cont" name="cont" rows="5" class="form-control ckeditor"></textarea></td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-primary" onclick="func()">저장</button>
					<button id="deleteBtn" type='button' class='btn btn-outline-primary' onclick="del()">삭제</button>
					<button type="button" class="btn btn-outline-primary" data-dismiss="modal">닫기</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade view-modal" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h2 id="view-modal-title"></h2>
				</div>
				<div class="modal-body">
					<form id="viewForm" name="viewForm">
						<input type="hidden" id="artiId" />
						<table class="board_write" style="width:100%;">
							<tr>
								<th>게시판명</th>
								<td><div id="bodNm"></div></td>
								<th>제목</th>
								<td><div id="title"></div></td>
							</tr>
							<tr>
								<th>작성자</th>
								<td><div id="regNm"></div></td>
								<th>등록일</th>
								<td><div id="regDt"></div></td>
							</tr>
							<tr>
								<th>내용</th>
								<td colspan="3" style="text-align: unset;"><div id="content"></div></td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-primary" data-dismiss="modal">닫기</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/bodArti/list.json' />"
				,"method" : "post"
				,"data" : function(d) {
					if ($('#bodId').val() != "") {d.bodId = $('#bodId').val();	}
					if ($('#titleLike').val() != "") {d.titleLike = $('#titleLike').val();	}
					if ($('#contLike').val() != "") {d.contLike = $('#contLike').val();	}
				}
			},"processing": true
			,"serverSide": true
			,"order" : [[4, 'desc']]
			,"columns": [
				{ "name" : "BOD_NM", "title" : "게시판명", "data" : "bod.bodNm", "className" : "dt-head-center dt-body-left"},
				{ "name" : "TITLE", "title" : "제목", "data" : "title", "className" : "dt-head-center dt-body-left"},
				{ "name" : "REG_NM", "title" : "작성자", "data" : "regNm", "className" : "dt-head-center dt-body-left"},
				{ "name" : "HIT", "title" : "조회수", "data" : "hit", "className" : "dt-head-center dt-body-right"},
				{ "name" : "REG_DT", "title" : "작성일", "data" : "regDt", "className" : "dt-head-center dt-body-center", "render" :
					function (data, type, row) {
						return new Date(row["regDt"]).format("yyyy-MM-dd HH:mm:ss");
					}
				},
				{ "render" :
					function (data, type, row) {
						var html = "";
						html += "<button type='button' class='btn btn-sm btn-outline-primary' onclick='showViewModal(\""+row["artiId"]+"\")'>상세</button>&nbsp;";
						if((${user.userId}) == row['regId']) {
							html += "<button type='button' class='btn btn-sm btn-outline-primary' onclick='showUpdateModal(\"" + row["artiId"] + "\")'>수정</button>&nbsp;";
						}
						return html;
					},
				   "className": "dt-head-center dt-body-center", "orderable" : false, "title":"기능"
				},
			]
			,"scrollX": "100%"
			,"scrollXInner": "750px"
			,"columnDefs": [
				{"targets": [0], width:"150px"}
				,{"targets": [1], width:"150px"}
				,{"targets": [2], width:"100px"}
				,{"targets": [3], width:"50px"}
				,{"targets": [4], width:"150px"}
				,{"targets": [5], width:"150px"}
			]
		});
	});

	$("#searchBtn").click(function() {
		datatable.ajax.reload();
	});

	$("#bodId").change(function() {
		datatable.ajax.reload();
	});

	$("#resetBtn").click(function() {
		$("#bodId").val("");
		$("#bodId").selectpicker("refresh");
		$("#titleLike").val("");
		$("#contLike").val("");
		datatable.ajax.reload();
	});

	function showInsertModal(){
		var form = document.funcForm;
		$("#func-modal-title").html("등 록");
		form.artiId.value = "";
		form.bodId.value = "";
		$("[name='bodId']").selectpicker('refresh');
		form.title.value = "";
		CKEDITOR.instances.cont.setData("");
		$("#deleteBtn").hide();

		$('.func-modal').modal("show");
	}

	function showViewModal(artiId) {
		$.ajax({
			url : "<c:url value='/system/bodArti/view.json' />",
			type : "POST",
			data : {"artiId" : artiId},
			dataType : "json",
			success : function(res) {
				if ("success" == res.result) {
					var data = res.data;
					$("#view-modal-title").html("상세보기");
					$("#artiId").val(data.artiId);
					$("#bodNm").html(data.bod.bodNm);
					$("#title").html(data.title);
					$("#regNm").html(data.regNm);
					$("#regDt").html(new Date(data.regDt).format('yyyy-MM-dd'));

					if(data.cont == null || data.cont == "")
						$("#content").html("");
					else{
						$("#content").html(data.cont);
						$("#content img").css("max-width", "100%");
						if($("#content img").width()>$(".modal").width())
							$("#content img").css("width", "100%");
						$("#content img").css("height", "auto");
					}
					$('.view-modal').modal("show");
				}else {
					alert(res.message);
				}
			}
		});
	}

	function showUpdateModal(artiId) {
		$("#deleteBtn").show();
		var form = document.funcForm;
		$.ajax({
			url : "<c:url value='/system/bodArti/view.json' />",
			type : "POST",
			data : {
				"artiId" : artiId
			},
			dataType : "json",
			success : function(res) {
				var data = res.data;
				if(res.result == "success"){
					form.artiId.value = data.artiId;
					form.bodId.value = data.bodId;
					$("[name='bodId']").selectpicker('refresh');
					form.title.value = data.title;
					if(data.cont == "" || data.cont == null) {
						CKEDITOR.instances.cont.setData("");
					} else {
						CKEDITOR.instances.cont.setData(data.cont);
					}
					$("#func-modal-title").html("수 정");
					$(".func-modal").modal("show");
				} else {
					alert(res.message);
				}
			}
		})
	}

	function func(){
		var form = document.funcForm;
		if(form.bodId.value == ""){
			alert("게시판명을 선택해주세요.");
			form.bodId.focus();
		} else if(form.title.value == ""){
			alert("제목을 입력해주세요.")
			form.title.focus();
		} else if(form.artiId.value == "") {
			var contents = eval("CKEDITOR.instances.cont.getData()");
			$("#cont").val(contents);
			if(confirm("게시물을 등록하시겠습니까?")) {
				$.ajax({
					url: "<c:url value='/system/bodArti/insert.json' />",
					type: "POST",
					data: $("#funcForm").serialize(),
					dataType: "json",
					success: function (res) {
						if (res.result == "success") {
							alert("등록되었습니다.");
							$(".func-modal").modal("hide");
							datatable.ajax.reload();
						} else {
							alert(res.message);
						}
					}
				})
			}
		} else {
			var contents = eval("CKEDITOR.instances.cont.getData()");
			$("#cont").val(contents);
			if(confirm("게시물을 수정하시겠습니까?")){
				$.ajax({
					url : "<c:url value='/system/bodArti/update.json' />",
					type : "POST",
					data : $("#funcForm").serialize(),
					dataType : "json",
					success : function(res) {
						if(res.result == "success"){
							alert("수정되었습니다.");
							$(".func-modal").modal("hide");
							datatable.ajax.reload();
						} else {
							alert(res.message);
						}
					}
				})
			}
		}
	}

	function del() {
		var form = document.funcForm;
		if(confirm("삭제하시겠습니까?")) {
			$.ajax({
				url : "<c:url value='/system/bodArti/delete.json' />",
				type : "POST",
				data : {"artiId" : form.artiId.value},
				dataType : "json",
				success : function(res) {
					if ("success" == res.result) {
						alert("삭제되었습니다.");
						$(".func-modal").modal("hide");
						datatable.ajax.reload();
					}else {
						alert(res.message);
					}
				}
			});
		}
	}

</script>