<?php
$menu_code = '1030';
require_once (APPPATH.'views/skin/admin/_content_comm.php');
?>

<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">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<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>
.row {margin-left: 0px;    margin-bottom: 15px;}
div.sortform{border: 1px solid #d8dcdd;padding: 15px;}
label.sort_label{width: 80px;}
button{	background:#1AAB8A;	color:#fff;	border:none; position:relative; height:60px; font-size:1.6em; padding:0 2em; cursor:pointer; transition:800ms ease all; outline:none;}
button:hover{background:#fff; color:#1AAB8A;}
button:before,button:after{	content:'';	position:absolute;	top:0; right:0; height:2px; width:0; background: #1AAB8A; transition:400ms ease all;}
button:after{	right:inherit; top:inherit; left:0; bottom:0; }
button:hover:before,button:hover:after{width:100%;	transition:800ms ease all; }
.write_btn_1{background: #ebebeb; float: right; border: 1px solid #ccc;	margin-right: 15px; padding: 4px 15px;}

* {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: 100%;  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; }
#inp_authorautocomplete-list{margin-left: 100px; width: 39%;}
#inp_mt_nameautocomplete-list{margin-left: 20%;   width: 60%;}
</style>
<form class="" name="sort_form" id="sort_form" method="get" action="episode">
	<input type="hidden" name="sort_list" id="sort_list">
	<div class="common_tep clearfix type01 sortform">
		<div class="row">
			<div class="row form-group">
				<div class="col-md-3">
					<label for="date_reg" class="sort_label" >등록 날짜별</label>
					<select name="date_reg" id="select_sort_date">
						<option value="">선택안함</option>
						<option value="td">오늘</option>
						<option value="yd">어제</option>
						<option value="w">일주일</option>
						<option value="30d">지난30일</option>
						<option value="lm">지난달</option>
						<option value="sel">날짜지정</option>
					</select>
				</div>
				<div class="col-md-3">
					<!-- <label for="ca">카테고리</label>
					<select id="select_cartegory" name="ca">
					<option value="">선택안함</option>
						<? foreach($category as $i){?>
							<option value="<?=$i['idx']?>"><?=$i['c_name']?></option>
						<?}?>
					</select> -->
				</div>
			</div>
		</div>
		<div id="datepicker_reg" class="row" style="display:none;     margin-left: 85px;    margin-bottom: 20px;">
				<div class='col-md-2'>
					<label for="sdate" >시작일</label>
					<div class='input-group date' id='div_s_date'>
						<input type='text' id="sdate" name="sdate" class="form-control"/>
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-calendar"></span>
						</span>
					</div>
				</div>
				<div class='col-md-2'>
					<label for="edate">종료일</label>
					<div class='input-group date' id='div_e_date'>
						<input type='text' id="edate" name="edate" class="form-control"/>
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-calendar"></span>
						</span>
					</div>
				</div>
		</div>
		<div class="row">
				<div class="col-md-3">
					<label for="author" class="sort_label">작가</label>
					<input type="text" id="inp_author" name="author">
				</div>
				<div class="col-md-3">
					<label for="mt_name">맵툰 이름</label>
					<input type="text" name="mt_name" id="inp_mt_name">
			
				</div>
				<div class="col-md-3">
					<label for="ep_title" class="sort_label">맵툰 제목</label>
					<input type="text" name="ep_title" id="inp_ep_name">
				</div>
		</div>
		<button type="submit" class="write_btn a" style="float:right;">검색</button>
	</div>
</form>
<div class="searh_area">		
</div>

<div class="common_table"  style="margin-top: 30px">
	<div class="row">
		<span style="font-weight:bold">Total:</span> <?=$total_count;?>
		<span style="margin-left:20px"></span>
		<span style="margin-left:20px">오늘 신규</span>
		<span style="margin-left:20px"></span>
		<span style="margin-left:20px">
			<input type="radio" id="sort_list_up" name="sort_list" value="up" onclick="change_sort();"> 최신순
			<input type="radio" id="sort_list_vi" name="sort_list" value="vi" onclick="change_sort();"> 조회순
		</span>
		<div class="write_btn_1">
			<a href="/admin/maptoon/episode_reg" id="btn_reg">등록</a>
		</div>
	</div>
</div>
<!-- 테이블 시작-->
<div class="common_table">
<table>
	<thead>
		<th>번호</th>
		<th>썸네일</th>
		<th>맵툰이름</th>
		<th>작가명</th>
		<th>제목</th>
		<th>조회수</th>
		<th>상태</th>
		<th>등록일시</th>
		<th>예약일시</th>
		<th>관리</th>
	</thead>
	<tbody>
		<?if(count($list)==0) {
			echo '<tr><td colspan="10">등록된 내용이 없습니다.</td></tr>';
		} else {
					$i=0;
					foreach($list as $val) {
								$idx                     = $val['idx'];
								$main_img                = $val['main_img'];
								// $mt_categories_idx       = $val['mt_categories_idx'];
								$name                    = $val['name'];
								$title                   = $val['title'];
								$mt_list_idx             = $val['mt_list_idx'];
								$recommend_count         = $val['recommend_count'];
								$view_count              = $val['view_count'];
								$mt_cartoonists_idx      = $val['mt_cartoonists_idx'];
								$is_display              = $val['is_display'];
								$reg_date                = $val['reg_date'];
								$display_date                = $val['display_date'];?>
								<tr>
										<td><?=$idx?><input type="hidden" id="index_<?=$idx?>" value="<?=$i?>"></td>
										<td><img id="" style="width: 75px;  height: 53px;" class="img" src="<?=$main_img?>"></td>
										<!-- <td><?if($mt_categories_idx!=0){echo $category_list[$mt_categories_idx];}?></td> -->
										<td><?=$name?></td>
										<td><?=$cartoonist_list[$mt_cartoonists_idx]?></td>
										<td><?=$title ?></td>
										<td><?=$view_count?></td>
										<td><?if($is_display==0){echo "N";}else{echo "Y";}?></td>
										<td><?=$reg_date?></td>
										<td><?=$display_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="pasing_wrap">
	<?=$pagination?>
</div>

</form>

<script type="text/javascript">
$(document).ready(function() {
	set_sort_option();
	set_search_area();
	$("#btn_reg").click(function() {
		$("#dialog").dialog();
		return false;
	});
});

//search condition
function set_search_area(){
	var url_string = window.location.href; //window.location.href
	var url = new URL(url_string);
	var date_reg = url.searchParams.get("date_reg");
	var category = url.searchParams.get("ca");
	var author = url.searchParams.get("author");
	var mt_name = url.searchParams.get("mt_name");
	var ep_title = url.searchParams.get("ep_title");
	var s_date = url.searchParams.get("sdate");
	var e_date = url.searchParams.get("edate");

	if(date_reg!=''){
		$("#select_sort_date").val(date_reg);
		if(date_reg=="sel"){
			$("#datepicker_reg").show();
			$("sdate").val(s_date);
			$("edate").val(e_date);
		}
	}
	if(category!=''){
		$("#select_cartegory").val(category);
	} 
	if(author!=''){
		$("#inp_author").val(author);
	} 
	if(mt_name!=''){
		$("inp_mt_name").val(mt_name);
	} 
	if(ep_title!=''){
		$("inp_ep_name").val(ep_title);
	}
}

//show datepickup
$("#select_sort_date").on('change',function(){
	if($(this).val()=="sel"){
			$("#datepicker_reg").show();
	}else{
		$("#datepicker_reg").hide();
	};
})
// modify btn event 
$(".btn_modify").click(function() {
		var idx = $(this).attr('value');
		redirectUrl='/admin/maptoon/episode_reg';
		if(idx>0) {
			var form = $('<form action="' + redirectUrl + '" method="post">' +
			'<input type="hidden" name="idx" value="' + idx + '"></input>' + '</form>');
			$('body').append(form);
			$(form).submit();
		}else{
			alert("값이 존재하지 않습니다 관리자에게 문의주세요");
		}
	});

	//delete click event
	$(".btn_delete").click(function() {
		idx = $(this).attr('value');
		redirectUrl='/admin/maptoon/episode_del_proc';
			if(confirm('정말 삭제하시겠습니까?')) {
				var form = $('<form action="' + redirectUrl + '" method="post">' +
										'<input type="hidden" name="idx" value="' + idx + '"></input>' + '</form>');
				$('body').append(form);
				$(form).submit();
				frm.attr('action','/admin/maptoon/announcement_del_proc');
				frm.submit();
			}
	});


// set checkbox option 
function set_sort_option(){
	var url_string = document.URL; //window.location.href
	var url = new URL(url_string);
	var sort_list = url.searchParams.get("sort_list");
	if(sort_list==null){
		document.getElementById("sort_list_up").checked = true;
		document.getElementById("sort_list").value="up";
	}else if(sort_list=="up"){
		document.getElementById("sort_list").value="up";
		document.getElementById("sort_list_up").checked = true;
	}else if(sort_list=="vi"){
		document.getElementById("sort_list").value="vi";
		document.getElementById("sort_list_vi").checked = true;
	}
}

// radio button 조회순 업데이트 순 조회
function change_sort(){
	var url_string = document.URL; //window.location.href
	var url = new URL(url_string);
	var sort_list = url.searchParams.get("sort_list");
	if(location.search!=""){
		if (document.getElementById('sort_list_up').checked){
			sort_list==null?window.location.href=url_string+"&sort_list=up":window.location.href=url_string.replace("sort_list=vi", "sort_list=up");
		} else {
			sort_list==null?window.location.href=url_string+"&sort_list=vi":window.location.href=url_string.replace("sort_list=up", "sort_list=vi");
		}
	}else{
		if (document.getElementById('sort_list_up').checked){
			window.location.href=url_string+"?sort_list=up"
		}else{
			window.location.href=url_string+"?sort_list=vi"
		}
	}
}

//dateTime picker
$(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);
		});
});

//autocomplete
function autocomplete(inp, arr) {
  var currentFocus;
  /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*close any already open lists of autocompleted values*/
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*create a DIV element that will contain the items (values):*/
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
			a.setAttribute("class", "autocomplete-items");
			
      /*append the DIV element as a child of the autocomplete container:*/
      this.parentNode.appendChild(a);
      /*for each item in the array...*/
      for (i = 0; i < arr.length; i++) {
        /*check if the item starts with the same letters as the text field value:*/
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*create a DIV element for each matching element:*/
          b = document.createElement("DIV");
          /*make the matching letters bold:*/
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*execute a function when someone clicks on the item value (DIV element):*/
          b.addEventListener("click", function(e) {
              /*insert the value for the autocomplete text field:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /*close the list of autocompleted values,
              (or any other open lists of autocompleted values:*/
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /*execute a function presses a key on the keyboard:*/
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /*If the arrow DOWN key is pressed,
        increase the currentFocus variable:*/
        currentFocus++;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /*If the arrow UP key is pressed,
        decrease the currentFocus variable:*/
        currentFocus--;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 13) {
        /*If the ENTER key is pressed, prevent the form from being submitted,*/
        e.preventDefault();
        if (currentFocus > -1) {
          /*and simulate a click on the "active" item:*/
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /*a function to classify an item as "active":*/
    if (!x) return false;
    /*start by removing the "active" class on all items:*/
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*add class "autocomplete-active":*/
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /*a function to remove the "active" class from all autocomplete items:*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /*close all autocomplete lists in the document,
    except the one passed as an argument:*/
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  /*execute a function when someone clicks in the document:*/
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}

/*An array containing all the country names in the world:*/
var countries = ["atest",'btest',"ctest","dtest","etest","qtest","wtest","rtest","ttest","ytest","utest","itest","otest","ptest","stest","ftest","gtest","htest","jtest","ktest","ltest","ztest","xtest","vtest","ntest","mtest"];

var cartoonist = <?=json_encode($cartoonist);?>;
var auto_cartoonist= new Array();
for (var i in cartoonist) {
	auto_cartoonist[i] = cartoonist[i]['name'];
}

var mt_list = <?=json_encode($mt_title)?>;
var auto_mt_list= new Array();
var auto_mt_idx= new Array();
for (var i in mt_list) {
	auto_mt_list[i] = mt_list[i]['name'];
	auto_mt_idx[i] = mt_list[i]['idx'];
}

/*initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:*/
autocomplete(document.getElementById("inp_author"), auto_cartoonist);
autocomplete(document.getElementById("inp_mt_name"), auto_mt_list);

</script>

<?
// print_r($_SERVER['QUERY_STRING']);
?>
