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

<section class="content">
	<div class="row">
		<c:if test="${(user.userTyCd eq 'J') or (user.userTyCd eq 'M')}">
			<div class="col-md-6 col-sm-6 col-xs-12">
				<div class="box box-info" style="height: 100%;">
					<div class="box-header">
						<h3 class="box-title"><i class='material-icons' style='font-size:16px;'>play_arrow</i>&nbsp;&nbsp;시스템 공지사항</h3>
							<div class="box-body no-padding">
								<table id="datatable" class="table table-bordered table-striped" style="width:100%; table-layout:fixed;"></table>
						</div>
					</div>
				</div>
			</div>
		</c:if>

		<c:if test="${user.userTyCd eq 'S'}">
			<div class="col-md-6 col-sm-6 col-xs-12">
				<div class="box box-info" style="height: 100%;">
					<div class="box-header">
						<h3 class="box-title"><i class='material-icons' style='font-size:16px;'>play_arrow</i>&nbsp;&nbsp;게시판 관리</h3>
						<div class="box-body no-padding">
							<div class="box-tools pull-right">
								<a href="<c:url value='/system/bod/list.mng'/>">
									<button type="button" class="btn btn-sm btn-outline-primary" data-toggle="tooltip" title="더보기">
										더보기
									</button>
								</a>
							</div>
							<table id="boardDatatable" class="table table-bordered table-striped" style="width:100%; table-layout:fixed;"></table>
						</div>
					</div>
				</div>
			</div>
		</c:if>

		<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>공지사항</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>

		<div class="col-md-6 col-sm-6 col-xs-12">
			<div class="box box-info" style="height: 100%;">
				<div class="box-header">
					<h3 class="box-title"><i class='material-icons' style='font-size:16px;'>play_arrow</i>&nbsp;&nbsp;게시물 관리</h3>
					<div class="box-body no-padding">
						<div class="box-tools pull-right">
							<a href="<c:url value='/system/bodArti/list.mng'/>">
								<button type="button" class="btn btn-sm btn-outline-primary" data-toggle="tooltip" title="더보기">
									더보기
								</button>
							</a>
						</div>
						<table id="noticeDatatable" class="table table-bordered table-striped" style="width:100%; table-layout:fixed;"></table>
					</div>
				</div>
			</div>
		</div>

		<c:if test="${user.userTyCd eq 'S'}">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="box box-info">
					<div class="box-header">
						<h3 class="box-title"><i class='material-icons' style='font-size:16px;'>play_arrow</i>&nbsp;&nbsp;컬러푸드 사용자 접속자 통계</h3>
							<div class="box-body no-padding">
								<div class="box-tools pull-right">
									<a href="<c:url value='/system/siteStats/list.mng'/>">
										<button type="button" class="btn btn-sm btn-outline-primary" data-toggle="tooltip" title="더보기">
											더보기
										</button>
									</a>
								</div>
								<div class="box-body chart-responsive">
									<div id="line-chart" class="chart" style="width:100%; height:300px;"></div>
								</div>
						</div>
					</div>
					<div class="box-body no-padding">
					</div>
				</div>
			</div>
		</c:if>
	</div>

</section>

<script>

	$(document).ready(function() {
		chatData();

		datatable = $("#datatable").DataTable({
			"searching" : false
			,"paging": true
			,"bPaginate": true
			,"responsive": true
			,"language": lang_kor
			,"ajax" : {
				"url" : "<c:url value='/system/bodArti/noticeList.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" : [[2, 'desc']]
			,"columns": [
				{ "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" : "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;";
								return html;
							},
					"className": "dt-head-center dt-body-center", "orderable" : false, "title":"기능"
				},
			]
			,"scrollX": "100%"
			,"scrollXInner": "250px"
			,"columnDefs": [
				{"targets": [0], width:"100px"}
				,{"targets": [1], width:"100px"}
				,{"targets": [2], visible: false}
				,{"targets": [3], width:"50px"}
			]
		});

		boardDatatable = $("#boardDatatable").DataTable({
			"searching" : false
			,"paging": true
			,"bPaginate": true
			,"responsive": true
			,"language": lang_kor
			,"ajax" : {
				"url" : "<c:url value='/system/bod/list.json' />"
				,"method" : "post"
			},"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
				}
			]
			,"scrollX": "100%"
			,"scrollXInner": "300px"
			,"columnDefs": [
				{"targets": [0], width:"100px"}
				,{"targets": [1], width:"150px"}
				,{"targets": [2], width:"100px"}
			]
		});

		noticeDatatable = $("#noticeDatatable").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" : [[2, 'desc']]
			,"columns": [
				{ "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" : "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;";
								return html;
							},
					"className": "dt-head-center dt-body-center", "orderable" : false, "title":"기능"
				},
			]
			,"scrollX": "100%"
			,"scrollXInner": "250px"
			,"columnDefs": [
				{"targets": [0], width:"100px"}
				,{"targets": [1], width:"100px"}
				,{"targets": [2], visible: false}
				,{"targets": [3], width:"50px"}
			]
		});
	});
	
	//게시물 상세 보기
	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;
					$("#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 chatData() {
		if($('#startRegDt').val() > $('#endRegDt').val()){
			alert("일정기간 : 시작일은 종료일보다 클 수 없습니다.");
			return ;
		}
		
	    $.ajax({
	        url : "<c:url value='/system/siteStats/list.json' />",
	        type : "POST",
	        data : {"siteId":$("#siteId").val(),"startRegDt":$("#startRegDt").val(),"endRegDt":$("#endRegDt").val()},
	        dataType : "json",
	        success : function(result) {
	        	//chart 초기화
	        	$('#line-chart').html('');
	        	
	        	var data = result.data;
	            Morris.Line({
	            		element: 'line-chart',
	                   	data: data,
	                  	xkey: 'rRegDtString',
	                 	ykeys: ['menuCount'],
		                labels: ['접속자수'],
	                	lineColors: ['#3c8dbc'],
	                	hideHover: 'auto',
	                	resize: true	//반응형 리사이징 문제점 파악
	               });
	        },error : function(request,status,error) {
	        }
	    });
	}
	
</script>