<!DOCTYPE html>
<html dir="ltr" lang="zh-TW">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>管理後臺</title>
<meta name="robots" content="noindex, nofollow" />
<link href="less/page.less" rel="stylesheet/less">
<link href="css/main.css" rel="stylesheet">
<link href="css/page.css" rel="stylesheet">
<link href="css/jquery.minicolors.css" rel="stylesheet">
<script src="/jquery/jquery-1.10.js"></script>
<script src="/js/jquery.minicolors.js"></script><!--顏色選擇器-->
<script src="/jquery/jquery-ui-1.11.2.min.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script src="ckfinder/ckfinder.js"></script>
<!--tabs-->
<script src="/jquery/horizontalmenu/jquery.horizontalmenu.js"></script>
<!-- 下拉選單 -->
<link href="/jquery/select/nice-select.css" rel="stylesheet">
<script src="/jquery/select/jquery.nice-select.js"></script>
<!-- 瀏覽用燈箱片效果 -->
<link href="/jquery/fancybox-3.0/dist/jquery.fancybox.css" rel="stylesheet">
<script src="/jquery/fancybox-3.0/dist/jquery.fancybox.min.js"></script>
<script>
	if('<?# alertMsg ?>' != ''){
		alert('<?# alertMsg ?>');
		if('<?# goBack ?>' == 'Y') history.back();
	}
	if('<?# locationHref ?>' != '') location.href = '<?# locationHref ?>';
</script>
</head>
<body>
	<?# sidePage ?>
	<div class="pos_rel" id="content">
		<?# header ?>
		<form id="form1" name="form1" method="post">
            <input type="hidden" id="id" name="id" value="<?# id ?>" />
			<input type="hidden" id="pUrl" name="pUrl" value="<?# pUrl ?>" />
			<div class="row mt_10 mb_5 h3 page_title"><?# editTitle ?><?# page_name ?></div>
			<div class="card">
				<div class="pos_rel bg_g_100 tabs_warp" id="tabs_warp">
					<div class="tabs_list">
						<a class="tabs_item" data-action="true" data-id="box1" href="javascript:void(0);"><?# page_name ?></a>
						<a class="tabs_item" data-id="box2" href="javascript:void(0);">相片/影片設定</a>
						<php:repeater id="listT">
						<template>
						<a class="tabs_item" data-id="<?# id ?>" href="javascript:void(0);"><?# name ?></a>
						</template>
						</php:repeater>
					</div>
				</div>
				<?# delTxt ?>
				<div id="tabs_box" class="card_body form_box">
					<div id="box1" class="d_md_flex flex_wrap tab_content" data-action="true">
						<div class="col_12 d_flex form_list"><label>相本名稱</label><input type="text" id="BookName" name="BookName" value="<?# BookName ?>" /></div>
						<div class="col_md_6 d_flex form_list"><label>相本路徑</label><input type="text" id="TwPathName" name="TwPathName" value="<?# TwPathName ?>" /></div>
						<div class="col_md_6 d_flex form_list">
							<label>相本分類</label>
                            <select id="CategoryID" name="CategoryID">
                                <option value="0">請選擇</option>
                                <php:repeater id="listC">
                                <template>
                                <option<?# data ?> value="<?# CategoryID ?>"<?# disabled ?>><?# CategoryName ?></option>
                                </template>
                                </php:repeater>
                            </select>
						</div>
						<div class="<?# count_style ?> d_flex form_list IsIndex"><label>首頁</label><p><font class="checkbox"><input type="checkbox" id="IsIndex" name="IsIndex" value="1"><span></span></font></p></div>
						<div class="<?# count_style ?> d_flex form_list"><label>狀態</label><p><font class="checkbox"><input type="checkbox" id="Visible" name="Visible" value="1"><span></span></font></p></div>
						<div class="<?# count_style ?> d_flex form_list"><label>排序</label><input type="text" id="OrderNO" name="OrderNO" value="<?# OrderNO ?>" onkeypress="if (event.keyCode < 48 || event.keyCode >57) event.returnValue = false;" /></div>
						<?# count_box ?>
						<div class="col_12 form_list"><label>相本簡述</label><textarea id="Introduction" name="Introduction"><?# Introduction ?></textarea></div>
						<div class="col_12 form_list"><label>相本說明</label><textarea class="ckeditor" id="Description" name="Description"><?# Description ?></textarea></div>
						<div class="col_12 d_flex form_btn"><a class="ml_2 btn btn_tertiary" data-action="nextPage" href="javascript:void(0);">下一步</a></div>
					</div>
					<div id="box2" class="tab_content">
						<div class="d_flex form_list">
							<label>相本縮圖</label>
							<p class="d_flex upBox">
								<a class="img_box"></a>
								<font class="col_12 in_group">
									<input type="text" id="BookImage" name="BookImage" data-action="Image" value="<?# BookImage ?>" />
									<b class="group"><a class="btn btn_dark" href="javascript:void(0);" data-action="btnImg" data-type="Book"><svg class="fa"><use xlink:href="svg/icons.svg#folder"></use></svg></a></b>
								</font>
							</p>
						</div>
						<div class="mt_5 mb_3 col_12 d_flex f_justify_space_b f_aitems_end start_box">
							<font>
								<a class="mr_2 btn btn_success" id="btnMI" href="javascript:void(0);">新增相片/影片</a>
								<a class="mr_2 btn btn_indigo" id="btnAIV" href="javascript:void(0);">批量新增</a>
							</font>
							<a class="ml_2 btn btn_danger" id="btnAD" href="javascript:void(0);">全選刪除</a>
						</div>
						<ul class="list_box">
							<li class="d_lg_flex">
								<p class="col_lg_1"><label>類型</label></p>
								<p class="col_lg_3 form_list"><label>相片/影片網址</label></p>
								<p class="col_lg_3"><label>標題</label></p>
								<p class="col_lg_3"><label>簡述</label></p>
								<p class="col_lg_1"><label>狀態</label></p>
								<p class="col_lg_1"><label>操作</label></p>
							</li>
						</ul>
						<ul class="pos_rel list_box not_tit" id="image_list">
                            <php:repeater id="listP">
                            <template>
							<li class="d_lg_flex">
								<p class="col_lg_1">
									<label>類型</label>
									<font>
										<select name="PhotoType[]">
											<option value="1"<?# selected1 ?>>相片</option>
											<option value="2"<?# selected2 ?>>影片</option>
										</select>
									</font>
								</p>
								<p class="col_lg_3 form_list">
									<label>相片/影片網址</label>
									<font class="d_flex upBox">
										<a class="img_box fancybox" href="<?# Image2 ?>"><img src="<?# Image2 ?>"></a>
										<span class="col_12 in_group"<?# btnSyle ?>>
											<input type="text" name="Image[]" value="<?# Image ?>" />
											<b class="group"><a class="btn btn_dark" href="javascript:void(0);" data-action="btnImg" data-type="Book"><svg class="fa"><use xlink:href="svg/icons.svg#folder"></use></svg></a></b>
										</span>
										<input type="text" name="Video[]" value="<?# Video ?>"<?# VideoSyle ?> />
									</font>
								</p>
								<p class="col_lg_3"><label>標題</label><font><input type="text" name="Title[]" value="<?# Title ?>"></font></p>
								<p class="col_lg_3"><label>簡述</label><font><input type="text" name="PhotoIntroduction[]" value="<?# Introduction ?>"></font></p>
								<p class="col_lg_1"><label>狀態</label><font><b class="checkbox"><input type="checkbox" name="PhotoVisible[<?# OrderNO ?>]" value="1"<?# checked ?>><span></span></b></font></p>
								<p class="col_lg_1"><label>操作</label><font><a class="mr_2 btn btn_danger" data-action="delItem" href="javascript:void(0);">刪除</a></font></p>
							</li>
                            </template>
                            </php:repeater>
						</ul>
						<div class="d_flex form_btn">
							<a class="ml_2 btn btn_orange" data-action="upPage" href="javascript:void(0);">上一步</a>
							<a class="ml_2 btn btn_tertiary" data-action="nextPage" href="javascript:void(0);">下一步</a>
						</div>
					</div>
					<php:repeater id="listH">
                    <template>
                    <?# html_box ?>
                    </template>
                    </php:repeater>
				</div>
			</div>
            <div class="row mt_5 d_flex start_box">
				<a class="mr_2 btn btn_info" id="btnOK" href="javascript:void(0);">送出</a>
                <a class="mr_2 btn btn_g_300" id="btnCancel" href="javascript:void(0);">返回</a>
			</div>
		</form>
		<?# footer ?>
	</div>
</body>
</html>
<script>
	function addBookImgList(len, file) {
		var li = $('<li></li>').attr('class', 'd_lg_flex');
		var p1 = $('<p></p>').addClass('col_lg_1').html('<label>類型</label><font><select name="PhotoType[]"><option value="1">相片</option><option value="2">影片</option></select></font>');
		if (file == '') {
			var p2 = $('<p></p>').addClass('col_lg_3 form_list').html('<label>相片/影片網址</label><font class="d_flex upBox"><a class="img_box"><img src="images/upImgBg.png"></a><span class="col_12 in_group"><input type="text" name="Image[]" /><b class="group"><a class="btn btn_dark" href="javascript:void(0);" data-action="upimage"><svg class="fa"><use xlink:href="svg/icons.svg#folder"></use></svg></a></b></span><input type="text" name="Video[]" style="display:none;" /></font>');
		} else {
			var p2 = $('<p></p>').addClass('col_lg_3 form_list').html('<label>相片/影片網址</label><font class="d_flex upBox"><a class="img_box" href="' + file + '"><img src="' + file + '"></a><span class="col_12 in_group"><input type="text" name="Image[]" value="' + file + '" /><b class="group"><a class="btn btn_dark" href="javascript:void(0);" data-action="upimage"><svg class="fa"><use xlink:href="svg/icons.svg#folder"></use></svg></a></b></span><input type="text" name="Video[]" style="display:none;" /></font>');
		}
		var p3 = $('<p></p>').addClass('col_lg_3').html('<label>標題</label><font><input type="text" name="Title[]" value="<?# Title ?>"></font>');
		var p4 = $('<p></p>').addClass('col_lg_3').html('<label>簡述</label><font><input type="text" name="PhotoIntroduction[]"></font>');
		var p5 = $('<p></p>').addClass('col_lg_1').html('<label>狀態</label><font><b class="checkbox"><input type="checkbox" name="PhotoVisible[' + len + ']" value="1" checked><span></span></b></font>');
		var p6 = $('<p></p>').addClass('col_lg_1').html('<label>操作</label><font><a class="mr_2 btn btn_danger" data-action="delItem" href="javascript:void(0);">刪除</a></font>');

		$('#image_list').append(li.append(p1).append(p2).append(p3).append(p4).append(p5).append(p6));
		$('select').niceSelect('destroy');
		$('select').niceSelect();
		$('#btnAD').css('display', 'inline-block');
	}
	function addFilesWithCKFinder() {
		CKFinder.modal({
			chooseFiles: true,
			resourceType: 'Book',
			width: 980,
			height: 600,
			onInit: function(finder) {
				var len = $('#image_list >li').length;
				finder.on('files:choose', function(evt) {
					var files = evt.data.files;
					var len = $('#image_list >li').length;
					files.forEach(function(file,i) {
						var num = parseInt(len) + i;
						addBookImgList (num, file.get('url'));
					});
				});

				finder.on('file:choose:resizedImage', function(evt) {
					addBookImgList (len, evt.data.resizedUrl);
				});
			}
		});
	}
	function VideoChange(a){
		var img_box = a.parent().children().eq(0);
		var url = a.val();
		if(isYouTubeUrl(url)){
			var imgV = 'https://img.youtube.com/vi/' + getYouTubeId(url) + '/maxresdefault.jpg';
			img_box.removeAttr('data-fancybox');
			img_box.attr('href', imgV).html('<img src="'+imgV+'" />');
		}else{
			img_box.attr('data-fancybox', '').attr('href', 'javascript:void(0);').html('<img src="images/upImgBg.png" />');
		}
	}
	function PhotoTypeChange(a){
		var upBox = a.parents('li').children().eq(1).children().eq(1);
		if(a.val() == 2){
			upBox.children().eq(2).css('display', 'block');
			upBox.children().eq(1).css('display', 'none');
			VideoChange(upBox.children().eq(2));
		}else{
			upBox.children().eq(2).css('display', 'none');
			upBox.children().eq(1).css('display', 'flex');
			ImageChange(upBox.children().eq(1).children().eq(0));
		}
	}
	function btnADChange(){
		var display = ($('#image_list >li').length == 0) ?'none':'inline-block';
		$('#btnAD').css('display', display);
	}
	btnADChange();
	function isYouTubeUrl(url) {
		return url.match(/^https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([^?&]+)/);
	}
	function getYouTubeId(url) {
		if (isYouTubeUrl(url)) return url.match(/^https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([^?&]+)/)[1];
	}
	$(function(){
		$('#CategoryID').val('<?# CategoryID ?>');
		if('<?# IsIndex ?>' == '1') $('#IsIndex').prop('checked', true);
		if('<?# Visible ?>' == '1') $('#Visible').prop('checked', true);
		
		$('select').niceSelect();
		
		$('#tabs_warp').horizontalmenu({
			itemClick: function (item) {
				$('#tabs_box .tab_content').removeAttr('data-action');
				$('#tabs_box .tab_content:eq(' + $(item).index() + ')').attr('data-action', 'true');
				return false;
			}
		});

		$('#btnMI').click(function(){
			var len = $('#image_list >li').length;
			addBookImgList (len, '');
		});
		$('#btnAIV').click(function(){
			addFilesWithCKFinder();
		});
		$('#btnAD').click(function(){
			if(!confirm('是否確定要刪除全部相片/影片?')){
				return false;
			}else{
				$('#image_list li').remove();
				btnADChange();
			}
		});
		$('#image_list').on('click', 'a[data-action="upimage"]', function(){
			selectFileWithCKFinder($(this).parent().prev(), 'Book');
		});
		$('#image_list').on('click', 'a[data-action="delItem"]', function(){
			$(this).parents('li').remove();
			btnADChange();
		});
		$('#image_list').on('change', 'select[name="PhotoType[]"]', function(){
			PhotoTypeChange($(this));
		});
		$('#image_list').on('change', 'input:text[name="Image[]"]', function(){
			ImageChange($(this));
		});
		$('#image_list').on('change', 'input:text[name="Video[]"]', function(){
			VideoChange($(this));
		});
		
		$('#image_list').sortable({
			opacity: 0.6,
			cursor: 'move'
		});
		$('#image_list').disableSelection();

		$('#btnOK').click(function(){
			if($('#BookName').val() == ''){
				alert('相本名稱不可空白!');
				$('#BookName').focus();
				tabchk(1);
				return false;
			}
			if($('#TwPathName').val() == ''){
				alert('相本路徑不可空白!');
				$('#TwPathName').focus();
				tabchk(1);
				return false;
			}else if(!/^[A-Za-z0-9\-]+$/.test($('#TwPathName').val())){
				alert('相本路徑只能輸入英數和中線!');
				('#TwPathName').focus();
				tabchk(1);
				return false;
			}
			if($('#CategoryID').val() == '' || $('#CategoryID').val() == '0'){
				alert('請選擇相本分類!');
				$('#CategoryID').focus();
				tabchk(1);
				return false;
			}
			if($('#BookImage').val() == ''){
				alert('相本縮圖不可空白!');
				$('#BookImage').focus();
				tabchk(2);
				return false;
			}
			$('#bookList input:checkbox[name="PVisible[]"]').each(function(a,b){
				var vis = 0;
				if($(this).is(':checked') === true) vis = 1;
				$(this).prev().val(vis);
			});
			$('#form1').submit();
		});
		$('#btnCancel').click(function(){
			location.href = ($('#pUrl').val() == '') ?'bookList.php':$('#pUrl').val();
		});
	});

	build_ckeditor('Description', 'Book');
</script>