<?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>
div.sortform{border: 1px solid #d8dcdd;	padding: 15px;	}
label.sort_label{width: 80px;}
div.mt_div{width: 43%;float:left;}
.w175{width: 175px;}
}
</style>

<div class="write_btn">
	<a href="episode" id="">취소</a>
</div>

<div class="inner_content">
<?$mode="";
if(isset($modify_data)) $mode="edit";?>
<form name="input_form" id="input_form" action="/admin/maptoon/episode_reg_proc" method="post" enctype="multipart/form-data">
	<?if($mode!="edit"){?>
		<input type="hidden" name="mode" id="mode_txt" value="">
		<input type="hidden" name="idx" id="idx_txt" value="">
	<div class="common_table">
		<table><tbody>
		<tr>
		<th class="fw500">카테고리</th>
			<td class="tl">
				<SELECT id="page_list" name="mt_categories_idx" SIZE=1>
					<option value="n">선택없음</option>
					<? foreach($category as $i){?>
						<option value="<?=$i['idx']?>"><?=$i['c_name']?></option>
					<?}?>
				</SELECT>
			</td>
		</tr>
		<tr>
		<th class="fw500">맵툰 이름</th>
			<td class="tl">
				<SELECT id="mt_list_idx" name="mt_list_idx" SIZE=1>
					<? foreach($mt_title as $i){?>
						<option value="<?=$i['idx']?>"><?=$i['name']?></option>
					<?}?>
				</SELECT>
				<!-- <span id="edit_mt_list_idx"></span> -->
			</td>
		</tr>
		<tr>
			<th class="fw500">맵툰 회차</th>
				<td class="tl">
				<input type="text" id="ep_no" name="ep_no" numberOnly/>
			</td>
		</tr>
		<tr>
		<th class="fw500">제목</th>
			<td class="tl">
				<input type="text" name="title">
			</td>

		</tr>
		<tr>
		<th class="fw500">회차 대표 썸네일<br />(865x486 px)</th>
			<td class="tl">
				<input type="file" name="main_img" id="main_img" onchange="change_main_img(this)">
				<div class="show_img" style="width:600px;height:200px display:none;">
					<img  class="show_img" id="image_section" src="" style="max-height: 100%; max-width: 100%; display:none;"/>
				</div>
			</td>
		</tr>
		<tr>
			<th class="fw500">맵툰 이미지 업로드</th>
			<td class="tl"> 
				<div style="row">
					<div class="mt_div" id="mt_img_1">
						<input type="file" name="webtoon_images[]" id="webtoon_images" data-width="680" data-height="10000">
					</div>
					<div class="mt_div">
						<div class="write_btn tc">
							<a onclick="add_img();">업로드 필드 추가</a>
						</div>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<th class="fw500">노출유무</th>
			<td class="tl">
				<select id="" name="is_display">
						<option value="0" >N</option>
						<option value="1" >Y</option>	
				</select>
			</td>
		</tr>
		<tr>
			<th class="fw500">노출일</th>
			<td class="tl">
				<div class="row">
					<div class='col-sm-6'>
						<div class="form-group">
							<div class='input-group date' id='datetimepicker1'>
									<input type='text' class="form-control" name="display_date"/>
								<span class="input-group-addon">
									<span class="glyphicon glyphicon-calendar"></span>
								</span>
							</div>
						</div>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<th class="fw500">등록일</th>
			<td class="tl">

			</td>
		</tr>
		<tr>
			<th class="fw500">추천수</th>
			<td class="tl">
				<span> </span>
			</td>
		</tr>
	<?}else if($mode=="edit"){?>
		<input type="hidden" name="mode" id="mode_txt" value="edit">
		<input type="hidden" name="idx" id="idx_txt" value="<?=$modify_data['idx']?>">
		<div class="common_table">
			<table><tbody>
			<tr>
			<th class="fw500 w175">카테고리</th>
				<td class="tl">
				<?if($mode=="edit"){?>
					<SELECT id="page_list" name="mt_categories_idx" SIZE=1>
					<option value="n">선택없음</option>
						<? foreach($category as $i){
							if($i['idx']==$modify_data['mt_categories_idx']){?>
								<option value="<?=$i['idx']?>" selected><?=$i['c_name']?></option>
							<?}else{?>
								<option value="<?=$i['idx']?>"><?=$i['c_name']?></option>
							<?}
						}
				}else{?>
					<SELECT id="page_list" name="mt_categories_idx" SIZE=1>
						<? foreach($category as $i){?>
							<option value="<?=$i['idx']?>"><?=$i['c_name']?></option>
						<?}?>
					</SELECT>
				<?}?>
				</td>
			</tr>
			<tr>
			<th class="fw500">맵툰 이름</th>
				<td class="tl">
					<SELECT id="mt_list_idx" name="mt_list_idx" SIZE=1>
						<? foreach($mt_title as $i){
							if($modify_data['mt_list_idx']==$i['idx']){?>
								<option value="<?=$i['idx']?>" selected><?=$i['name']?></option>
							<?}else{?>
								<option value="<?=$i['idx']?>"><?=$i['name']?></option>
						<?}}?>
					</SELECT>
					<!-- <span>
					
					<?//$mt_title[array_search($modify_data['mt_list_idx'],$mt_title)]['name']?>
					</span>
					<input  type="hidden" value="<?//$modify_data['idx']?>"> -->
				</td>
			</tr>
			<tr>
			<th class="fw500">맵툰 회차</th>
				<td class="tl">
				<input type="text" id="ep_no" name="ep_no" numberOnly value="<?= $modify_data['ep_no'];?>"/>
			</td>
			</tr>
			<tr>
			<th class="fw500">제목</th>
				<td class="tl">
					<input type="text" name="title" value="<?if($mode=="edit") echo $modify_data['title'];?>">
				</td>
			</tr>
			<tr>
			<th class="fw500">회차 대표 썸네일</th>
				<td class="tl">
					<input type="file" name="main_img" id="main_img" onchange="change_main_img(this)">
					<div class="show_img" style="width:600px;height:200px">
						<img  class="show_img" id="image_section" src="<?if($mode=="edit") echo $modify_data['main_img'];?>" style="max-height: 100%; max-width: 100%; "/>
					</div>
				</td>
			</tr>
			<tr>
				<th class="fw500">맵툰 이미지 업로드</th>
				<td class="tl">
					<div style="row">
						<div class="mt_div" id="mt_img_1">
							<input type="file" name="webtoon_images[]" id="webtoon_images" data-width="680" data-height="10000">
						</div>
						<div class="mt_div">
							<div class="write_btn tc">
								<a onclick="add_img();">업로드 필드 추가</a>
							</div>
						</div>
						<div class="show_img mt_div">
							<?$webtoon_images=json_decode($modify_data['webtoon_images']);
							foreach($webtoon_images as $val){?>
							<img  class="show_img" id="w_image" src="<?if($mode=="edit") echo $val;?>" style="max-height: 20%; max-width: 20%; "/>
							<?}?>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<th class="fw500">노출유무</th>
				<td class="tl">
					<select id="" name="is_display">
						<option value="0" <?if($modify_data['is_display']==0) echo "selected"?>>N</option>
						<option value="1" <?if($modify_data['is_display']==1) echo "selected"?>>Y</option>
					</select>
				</td>
			</tr>
			<tr>
				<th class="fw500">노출일</th>
				<td class="tl">
					<div class="row">
						<div class='col-sm-6'>
							<div class="form-group">
								<div class='input-group date' id='datetimepicker1'>
										<input type='text' class="form-control" name="display_date" value="<?=$modify_data['display_date'] ?>"/>
									<span class="input-group-addon">
										<span class="glyphicon glyphicon-calendar"></span>
									</span>
								</div>
							</div>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<th class="fw500">등록일</th>
				<td class="tl">
					<span><?=$modify_data['reg_date']?></span>
				</td>
			</tr>
			<tr>
				<th class="fw500">추천수</th>
				<td class="tl">
					<span><?=$modify_data['recommend_count']?></span>
				</td>
			</tr>
	<?}?>
		</tbody></table>
	</div>
	<div class="write_btn tc">
		<a href="javascript:submit_episode()">저장하기</a>
		<?if($mode=="edit"){?>
			<a href="/admin/maptoon/announcement/10?idx=<?=$modify_data['mt_list_idx']?>">공지보기</a>
		<?}?>
	</div>
</form>
</div>



<script type="text/javascript">
$(document).ready(function() {

});

//submit btn event
function submit_episode(){
	$( "#input_form" ).submit();
}

//add file upload btn
function add_img(){
	$("#mt_img_1").append("<input type='file' name='webtoon_images[]' />");

}



//thumbnil img change event
function change_main_img(value){
  if (value.files && value.files[0]) {
        var reader = new FileReader();
 
        reader.onload = function (e) {
            $('#image_section').attr('src', e.target.result);
        }
		$(".show_img").show();
        reader.readAsDataURL(value.files[0]);
    }
}

//dateTime picker
$(function () {
	$('#datetimepicker1').datetimepicker({
		locale: 'ko',
		format : "YYYY-MM-DD HH:mm:ss"
	});
});

//image size 제한
$(document).on('change', 'input[name=webtoon_images]', function(){
	var $width = $(this).attr('data-width');
	var $height = $(this).attr('data-height');
	var $target = $(this);
	if(window.FileReader){ //FileReader를 지원하는 브라우저의 경우 IE 10이상, 크롬..
		var reader = new FileReader();
	 	 reader.onload = function (e) {
		  	$('body').append('<img src="" id="temp_img" style="display:none;" />');  //보이지 않는 임시 img 태그를 생성.
		 	$img = $('#temp_img').attr('src', e.target.result);                          //파일을 선택했을 경우 정보를 $img 객체에 저장
		 	if($img.width() != $width || $img.height() <= $height){                  //가로 세로 사이즈 비교 후 반환
				alert('지정된 크기와 맞지 않습니다.( 선택된 파일의 크기는 '+$width + 'x'+ $height +' 입니다) 가로는 680 이며 세로가 10000 보다 클 경우 분할 해주세요' );
				$target.val('');
				$('#temp_img').remove(); //위에서 생성한 임시 img 태그 삭제
				return;
			}
		};

	 reader.readAsDataURL($(this)[0].files[0]);  //파일을 img 태그에 보여줄 수 있도록 base64로 url을 생성합니다.
	} else {                                               //FileReader를 지원하지 않는 브라우저의 경우 IE 9 이하
			$(this)[0].select();
			var src = document.selection.createRange().text;
			$('body').append('<img src="" id="temp_img" style="display:none;" />');
			$img = $('#temp_img').attr('src', src);
			$('#temp_img').remove();
			if($img.width() != $width || $img.height() != $height){
				alert('지정된 크기와 맞지 않습니다.('+$width + 'x'+ $height +')');

				$(this).val('');

				return;

			}

	}
$('#temp_img').remove();
});


$("input:text[numberOnly]").on("focus", function() {
    var x = $(this).val();
    x = removeCommas(x);
    $(this).val(x);
}).on("focusout", function() {
    var x = $(this).val();
    if(x && x.length > 0) {
        if(!$.isNumeric(x)) {
            x = x.replace(/[^0-9]/g,"");
        }
        x = addCommas(x);
        $(this).val(x);
    }
}).on("keyup", function() {
    $(this).val($(this).val().replace(/[^0-9]/g,""));
});

</script>