<!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">
<script src="/jquery/jquery-1.10.js"></script>
<script src="ckfinder/ckfinder.js"></script>
<!--tabs-->
<script src="/jquery/horizontalmenu/jquery.horizontalmenu.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 ?>" />
			<div class="row mt_10 mb_5 h3 page_title"><?# editTitle ?></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);"><?# editTitle ?></a>
						<a class="tabs_item" data-id="box2" href="javascript:void(0);">額外設定</a>
					</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_md_6 d_flex form_list"><label>版型名稱</label><input type="text" id="TemplateName" name="TemplateName" value="<?# TemplateName ?>" /></div>
						<div class="col_md_6 d_flex form_list"><label>版型路徑</label><input type="text" id="PathName" name="PathName" value="<?# PathName ?>" /></div>
						<div class="col_md_6 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="Image" name="Image" data-action="Image" value="<?# Image ?>" />
									<b class="group"><a class="btn btn_dark" href="javascript:void(0);" data-action="btnImg" data-type="System"><svg class="fa"><use xlink:href="svg/icons.svg#folder"></use></svg></a></b>
								</font>
							</p>
						</div>
						<div class="col_md_6 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="MobileImg" name="MobileImg" data-action="Image" value="<?# MobileImg ?>" />
									<b class="group"><a class="btn btn_dark" href="javascript:void(0);" data-action="btnImg" data-type="System"><svg class="fa"><use xlink:href="svg/icons.svg#folder"></use></svg></a></b>
								</font>
							</p>
						</div>
						<div class="col_md_6 d_flex form_list">
							<label>版型說明檔</label>
							<p class="d_flex upBox">
								<font class="col_12 in_group">
									<input type="text" id="File" name="File" data-action="Image" value="<?# File ?>" />
									<b class="group"><a class="btn btn_dark" href="javascript:void(0);" data-action="btnImg" data-type="Files"><svg class="fa"><use xlink:href="svg/icons.svg#folder"></use></svg></a></b>
								</font>
							</p>
						</div>
						<div class="col_md_6 d_flex form_list"><label>版型範例網站</label><input type="text" id="Website" name="Website" value="<?# Website ?>" /></div>
						<div class="col_12 form_list"><label>版型備註</label><textarea id="Description" name="Description"><?# Description ?></textarea></div>
						<div class="col_md_6 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="col_md_6 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>
						<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"><a class="btn btn_success" id="btnAS" href="javascript:void(0);">新增設定欄位</a></div>
						<ul class="pos_rel list_box" id="image_list">
                            <php:repeater id="listS">
                            <template>
							<li class="d_lg_flex">
								<p class="col_lg_2"><label>名稱</label><font><input type="text" name="SetName[]" value="<?# SetName ?>"></font></p>
								<p class="col_lg_3"><label>值</label><font><input type="text" name="SetValue[]" value="<?# SetValue ?>"></font></p>
								<p class="col_lg_7"><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></div>
					</div>
				</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(){
		if('<?# Visible ?>' == '1') $('#Visible').prop('checked', true);

		$('#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;
			}
		});
		
		$('#btnAS').click(function(){
			var li = $('<li></li>').addClass('d_lg_flex');
			var p1 = $('<p></p>').addClass('col_lg_2').html('<label>名稱</label><font><input type="text" name="SetName[]" value="<?# SetName ?>"></font>');
			var p2 = $('<p></p>').addClass('col_lg_3').html('<label>值</label><font><input type="text" name="SetValue[]" value="<?# SetValue ?>"></font>');
			var p3 = $('<p></p>').addClass('col_lg_7').html('<label>操作</label><font><a class="mr_2 btn btn_danger" data-action="delItem" href="javascript:void(0);">刪除</a></font>');

			li.append(p1).append(p2).append(p3);
			$('#image_list').append(li);
		});
		
		$('#image_list').on('click', 'a[data-action="delItem"]', function(){
			$(this).parents('li').remove();
		});
		
		$('#btnOK').click(function(){
			if($('#TemplateName').val() == ''){
				alert('版型名稱不可空白!');
				$('#TemplateName').focus();
				tabchk(1);
				return false;
			}
			if($('#PathName').val() == ''){
				alert('版型路徑不可空白!');
				$('#PathName').focus();
				tabchk(1);
				return false;
			}
			if($('#Image').val() == ''){
				alert('請上傳電腦版版型圖片!');
				$('#Image').focus();
				tabchk(1);
				return false;
			}
			if($('#MobileImg').val() == ''){
				alert('請上傳手機板版型圖片!');
				$('#MobileImg').focus();
				tabchk(1);
				return false;
			}
			var flagS = false;
			$('input:text[name="SetName[]"]').each(function(a,b){
				if(!/^[A-Za-z0-9_]+$/.test($(b).val()) && $(b).val() != ''){
					flagS = true;
					return false;
				}
			});
			if(flagS === true){
				alert('額外設定欄位名稱錯誤!請勿輸入英數底線以外的字元!');
				tabchk(2);
				return false;
			}
			$('#form1').submit();
		});
		$('#btnCancel').click(function(){
			location.href = 'templateList.php';
		});
	});
</script>