<?php
$menu_code = '1010';
require_once (APPPATH.'views/skin/admin/_content_comm.php');
?>
<!-- jquery UI -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<!--oringin-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- <link href="./css/prettify-1.0.css" rel="stylesheet"> -->
<!-- <link href="./css/base.css" rel="stylesheet"> -->
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->


<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>

<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>



<style>
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
textarea { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
* {box-sizing: border-box;}
/*the container must be positioned relative:*/
.autocomplete {position: relative; display: inline-block;}
.autocomplete-items {  position: absolute;  border: 1px solid #d4d4d4;  border-bottom: none;  border-top: none;  z-index: 99;  /*position the autocomplete items to be the same width as the container:*/
  top: 15%;  left: 0;  right: 0;	margin: 0px 16px;	width: 89%;}
.autocomplete-items div {  padding: 10px;  cursor: pointer;  background-color: #fff;  border-bottom: 1px solid #d4d4d4; }
/*when hovering an item:*/
.autocomplete-items div:hover {  background-color: #e9e9e9; }
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {  background-color: DodgerBlue !important;   color: #ffffff; }
</style>
<!-- //jquery UI -->
<!-- 테이블 시작-->
<div class="common_table">
<table>
		<thead>
				<th>번호</th>
				<th>맵툰 이름</th>
				<th>공지 사항 제목</th>
				<th>등록일</th>
				<th>공지 기간</th>
				<th>관리</th>
		</thead>
	<tbody>
		<?if(count($list)==0) {
			echo '<tr><td colspan="6">등록된 내용이 없습니다.</td></tr>';
		} else {
					$i=0;
					foreach($list as $val) {
								$idx= $val['idx'];
								$mt_name=$val['name'];
								$contents= $val['contents'];
								$s_date=$val['s_date'];
								$e_date=$val['e_date'];
								$reg_date=$val['reg_date'];?>
								<tr>
											<td><?=$idx?><input type="hidden" id="index_<?=$idx?>" value="<?=$i?>"></td>
											<td><?=$mt_name?></td>
											<td><?=$contents?></td>
											<td><?=$reg_date?></td>
											<td><?=$s_date." ~ ".$e_date?></td>
											<td style="width:200px" class="tool_btn">
												<a href="#"  class="btn_modify" value="<?= $idx;?>"><i class="fa fa-pencil"></i>수정</a>
												<a href="#" class="btn_delete" value="<?= $idx;?>"><i class="fa fa-close"></i>삭제</a>
											</td>
								</tr>
						
					<?$i++;	}
		}

		?>
	</tbody>
	</table>
</div>

<div class="write_btn">
		<a href="#" id="btn_reg">등록</a>
</div>
<div class="pasing_wrap">
	<?//=$pagination?>
</div>

<!-- register popup -->
<div id="dialog" title="맵툰 카테고리 등록/수정" style="display:none;">
  <!--p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p-->
  <form name="popup" action="" target="ifrm" method="post">
  	<input type="hidden" id="popup_mode" name="mode" value="" />
  	<input type="hidden" id="popup_idx" name="idx" value="" />
    <fieldset>
      <label for="mt_title">맵툰 선택</label>
			<select id="mt_title"  class="ui-widget-content ui-corner-all" name="mt_title">
					<?foreach($mt_title as $val){?>
							<option value="<?=$val["idx"]?>"><?=$val["name"]?></option>
					<?}?>
			</select>

      <label for="contents">공지 사항 내용</label>
      <textarea id="contents" name="contents" value="" class="text ui-widget-content ui-corner-all" maxlength="500"></textarea>
	  <label>공지기간</label>
	  	<div style="width: 95%;">
			<div class="form-group">
				<div class='input-group date' id='div_s_date'>
					<input type='text' id="s_date" name="s_date" class="form-control"/>
					<span class="input-group-addon">
						<span class="glyphicon glyphicon-calendar"></span>
					</span>
				</div>
			</div>
		</div>
		<div style="width: 95%;">
			<div class="form-group">
				<div class='input-group date' id='div_e_date'>
					<input type='text' id="e_date" name="e_date" class="form-control"/>
					<span class="input-group-addon">
						<span class="glyphicon glyphicon-calendar"></span>
					</span>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			$(function () {
				$('#div_s_date').datetimepicker({
					locale: 'ko',
					format : "YYYY-MM-DD HH:mm:ss"
				});
				$('#div_e_date').datetimepicker({
					useCurrent: false, //Important! See issue #1075
					locale: 'ko',
					format : "YYYY-MM-DD HH:mm:ss"
				});
				$("#div_s_date").on("dp.change", function (e) {
					$('#div_e_date').data("DateTimePicker").minDate(e.date);
				});
				$("#div_e_date").on("dp.change", function (e) {
					$('#div_s_date').data("DateTimePicker").maxDate(e.date);
				});
			});
		</script>

      <input type="button" value=" 등록 " id="btn_register" tabindex="-1" >
    </fieldset>
  </form>
</div>
<!-- //register popup -->

<iframe name="ifrm" frameborder="0" width="0" height="0"></iframe>

<script type="text/javascript">
$(document).ready(function() {
	$("#btn_reg").click(function() {
		reset_popup_form();
		$("#dialog").dialog({"width": 500, "height": 650} );
		return false;
	});

	//팝업 초기화
	function reset_popup_form() {
		$("#popup_mode").val('');
		$("#popup_idx").val('');
		$("#contents").val('');
		$("#s_date").val('');
		$("#e_date").val('');		
		$( "#dialog" ).dialog({"width": 500, "height": 650});
		$("#mt_title option").not(":selected").removeAttr("disabled")
	}

	//delete click event
	$(".btn_delete").click(function() {
		idx = $(this).attr('value');
			if(confirm('정말 삭제하시겠습니까?')) {
				frm = $("form[name='popup']");
				frm.attr('target','ifrm');
				$("#popup_idx").val(idx);
				frm.attr('action','/admin/maptoon/announcement_del_proc');
				frm.submit();
			}
	});

	//modify click event
	$(".btn_modify").click(function() {
		var idx = $(this).attr('value');
		var list_index=$("#index_"+idx).val();
		if(idx>0) {
			reset_popup_form();
		
			<?if(isset($list)==TRUE) {?>
			var edit_notice=<?= json_encode($list);?>;
			var list=edit_notice[list_index];
			$("#mt_title").val(list.mt_list_idx);
			$("#mt_title option").not(":selected").attr("disabled", "disabled");
			$("#mt_title").attr("readonly",true);
			$("#contents").val(list.contents);
			$("#s_date").val(list.s_date);
			$("#e_date").val(list.e_date);
			$("#popup_mode").val("modify");
			$("#popup_idx").val(idx);
			
			<?}else{?> alert("값이 존재하지 않습니다 관리자에게 문의주세요"); <?}?>
		}else{
			alert("값이 존재하지 않습니다 관리자에게 문의주세요");
		}
	});

	//등록
	$("#btn_open_popup").click(function() {
		reset_popup_form();
	});

	// 등록하기 
	$("#btn_register").click(function() {
		frm = $("form[name='popup']");

		if($("#mt_title").val()=='') {
			alert('맵툰을 선택해주세요.');
			$("#mt_title").focus();
			return false;
		}

		if($("#s_date").val()=='') {
			alert('시작일을 등록해 주십시오.');
			$("#s_date").focus();
			return false;
		}
		if($("#e_date").val()=='') {
			alert('종료일을 등록해 주십시오.');
			$("#e_date").focus();
			return false;
		}
		frm.attr('target','ifrm');
		frm.attr('action','/admin/maptoon/announcement_reg_proc');
		frm.submit();
	});
});

//autocomplete


</script>
