<%@ 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-4">
			<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-9 col-xs-12" style="margin-bottom: 10px;">
							<div class="input-group">
								<span class="input-group-addon">사용자검색</span>
								<input type="text" id="pgmNmLike" class="form-control" placeholder="사용자검색" maxlength="50">
							</div>
						</div>
						<button type="button" class="btn btn-outline-primary" id="chatBtn">대화하기</button>
					</div>
					<table id="chatuser" class="table table-bordered table-striped" style="width:100%; table-layout:fixed;"></table>
				</div>
			</div>
		</div>

		<div class="col-xs-8">
			<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-10 col-xs-12" style="margin-bottom: 10px;">
							<div class="input-group">
								<span class="input-group-addon">사용자검색</span>
								<input type="text" id="userNmLike" class="form-control" placeholder="사용자검색" maxlength="50">
							</div>
						</div>
						<button type="button" class="btn btn-outline-primary" id="searchBtn">검색하기</button>
					</div>
					<table id="datatable" class="table table-bordered table-striped" style="width:100%; table-layout:fixed;"></table>
				</div>
				<div class="box-footer">

				</div>
			</div>
		</div>
	</div>
</section>

<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>
	</div>
</div>

<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/chat/list.json' />"
				,"method" : "post"
				// ,"data" : function(d) {
				//     if ($('#pgmNmLike').val() != "") {d.pgmNmLike = $('#pgmNmLike').val();	}
				//     if ($('#pgmUrlLike').val() != "") {d.pgmUrlLike = $('#pgmUrlLike').val();	}
				// }
			},"processing": true
			,"serverSide": true
			,"order" : [[0, 'desc']]
			,"columns": [
				{ "name" : "USER_NM", "title" : "대화상대", "data" : "userNm", "className" : "dt-head-center dt-body-left"},
				{ "name" : "ROOM_NAME", "title" : "채팅방명", "data" : "roomName", "className" : "dt-head-center dt-body-left"},
				// { "name" : "REG_DT", "title" : "등록일", "render" :
				//         function (data, type, row) {
				//             return new Date(row["regDt"]).format("yyyy-MM-dd HH:mm:ss");
				//         }, "className" : "dt-head-center dt-body-center"},
				// { "name" : "UPD_DT", "title" : "수정일", "render" :
				//         function (data, type, row) {
				//             return new Date(row["updDt"]).format("yyyy-MM-dd HH:mm:ss");
				//         }, "className" : "dt-head-center dt-body-center"},
				// { "render" :
				//         function (data, type, row) {
				//             var html = "";
				//             // html += "<button type='button' class='btn btn-xs btn-outline-primary' data-toggle='tooltip' title='수정' onclick='showUpdateModel(\""+row["pgmId"]+"\")'><i class='material-icons'>create</i></button>&nbsp;";
				//             html += "<button type='button' class='btn btn-xs btn-outline-primary' data-toggle='tooltip' title='삭제' onclick='del(\""+row["pgmId"]+"\")'><i class='material-icons'>delete</i></button>";
				//             return html;
				//         },
				//     "className": "dt-head-center dt-body-center", "orderable" : false, "title":"기능"
				// },
			]
			,"scrollX": "100%"
			,"scrollY": "100%"
			,"scrollXInner": "250px"
			,"columnDefs": [
				{"targets": [0], width: "100px"}
				,{"targets": [1], width: "150px"}
			]
		});
	});

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

	$("#chatBtn").click(function() {
		$("#func-modal-title").html("채팅창");
		$('.func-modal').modal("show");
	});

	function showUpdateModel(pgmId) {
		$.ajax({
			url : "<c:url value='/system/pgm/view.json' />",
			type : "POST",
			data : {"pgmId" : pgmId},
			dataType : "json",
			success : function(res) {
				if ("success" == res.result) {
					var data = res.data;
					var form = document.funcForm;
					form.pgmId.value = data.pgmId;
					form.pgmNm.value = data.pgmNm;
					form.pgmDesc.value = data.pgmDesc;

					if(data.pgmDesc == null || data.pgmDesc == ""){
						form.pgmDesc.value = "";
					}else{
						form.pgmDesc.value = data.pgmDesc;
					}

					form.pgmUrl.value = data.pgmUrl;

					if(data.useSt){
						$("#useSt").bootstrapToggle('on');
					}else{
						$("#useSt").bootstrapToggle('off');
					}

					$("#func-modal-title").html("수정");
					$('.func-modal').modal("show");
				}else {
					alert(res.message);
				}
			}
		});
	}


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

</script>