<!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="ckfinder/ckfinder.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">
			<div class="row mt_10 mb_5 h3 page_title"><?# 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" href="index.php">控制台</a>
						<a class="tabs_item" data-action="true" href="javascript:void(0);"><?# page_name ?></a>
					</div>
				</div>
				<div class="card_body form_box">
                    <div class="<?# add_btn_class2 ?> form_list"><a class="btn btn_success" data-action="add" href="javascript:void(0);">新增</a></div>
                    <ul class="pos_rel" id="image_list">
                        <php:repeater id="listP">
                        <template>
                        <li class="mr_4 ml_4 pos_rel mb_5 d_md_flex flex_wrap border">
                            <h5 class="mt_4 mr_4 ml_4 col_12">橫幅<?# NO2 ?></h5>
							<div class="col_md_6 d_flex form_list">
								<label>樣式</label>
								<p class="d_flex">
									<font class="mr_3 el-radio"><input type="radio" name="ShowType[<?# NO ?>]" data-action="ShowType" value="1"><label class="el-radio-style" for="1"></label><span>圖片</span></font>
									<font class="mr_3 el-radio"><input type="radio" name="ShowType[<?# NO ?>]" data-action="ShowType" value="2"><label class="el-radio-style" for="2"></label><span>影片</span></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" name="Image[]" data-action="Image" value="<?# Image ?>" />
										<b class="group"><a class="btn btn_dark" href="javascript:void(0);" data-action="btnImg" data-type="Images"><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"<?# style ?>><label>影片連結</label><input type="text" name="PictureVideo[]" value="<?# PictureVideo ?>" /></div>
							<div class="col_md_6 d_flex form_list"><label>標題</label><input type="text" name="Title[]" value="<?# Title ?>" /></div>
							<div class="col_md_6 d_flex form_list"><label>超連結</label><input type="text" name="Link[]" value="<?# Link ?>" /></div>
							<div class="col_md_6 d_flex form_list"><label>背景顏色</label><p><input type="text" class="form-control" name="BanColor[]" data-position="bottom left" value="<?# BanColor ?>" style="padding-left: 40px; cursor:pointer;" maxlength="11" /></p></div>
							<div class="col_12 form_list"><label>描述</label><textarea name="DanDesc[]"><?# DanDesc ?></textarea></div>
                            <a class="pos_abs remove" href="javascript:void(0);" data-action="delete"><svg class="fa"><use xlink:href="svg/icons.svg#close"></use></svg></a>
							<script>$(function(){ $('input:radio[name="ShowType[<?# NO ?>]"][value="<?# ShowType ?>"]').prop('checked', true); });</script>
                        </li>
                        </template>
                        </php:repeater>
                    </ul>
					<?# add_btn ?>
				</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></div>
		</form>
		<?# footer ?>
	</div>
</body>
</html>
<script>
	$(function(){
		$('a[data-action="add"]').click(function(){
			var len = $('#image_list li').length;
			if(len == '<?# bannerMaximum ?>'){
				$('.card_body >div').remove();
				alert('<?# page_name ?>上限是<?# bannerMaximum ?>張，如需新增請洽客服人員!');
			}else{
				var num = len + 1;
				var li = $('<li></li>').addClass('mr_4 ml_4 pos_rel mb_5 d_md_flex flex_wrap border');
				var h5 = $('<h5></h5>').addClass('mt_4 mr_4 ml_4 col_12').text('橫幅' + num);
				
				var div1 = $('<div></div>').addClass('col_md_6 d_flex form_list');
				var div1_label = $('<label></label>').text('樣式');
				var div1_p = $('<p></p>').addClass('d_flex');
				var div1_p_radio1 = $('<font></font>').addClass('mr_3 el-radio').html('<input type="radio" name="ShowType['+len+']" data-action="ShowType" value="1" checked><label class="el-radio-style" for="1"></label><span>圖片</span>');
				var div1_p_radio2 = $('<font></font>').addClass('mr_3 el-radio').html('<input type="radio" name="ShowType['+len+']" data-action="ShowType" value="2"><label class="el-radio-style" for="2"></label><span>影片</span>');
				div1.append(div1_label).append(div1_p.append(div1_p_radio1).append(div1_p_radio2));
				
				var div2 = $('<div></div>').addClass('col_md_6 d_flex form_list');
				var div2_label = $('<label></label>').text('圖片');
				var div2_upBox = $('<p></p>').addClass('d_flex upBox');
				var div2_upBox_a = $('<a></a>').addClass('img_box').html('<img src="images/upImgBg.png">');
				var div2_upBox_group = $('<font></font>').addClass('col_12 in_group').html('<input type="text" name="Image[]" data-action="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>');
				div2.append(div2_label).append(div2_upBox.append(div2_upBox_a).append(div2_upBox_group));
				
				var div3 = $('<div></div>').addClass('col_md_6 d_flex form_list').css('display', 'none').html('<label>影片連結</label><input type="text" name="PictureVideo[]" />');
				var div4 = $('<div></div>').addClass('col_md_6 d_flex form_list').html('<label>標題</label><input type="text" name="Title[]" />');
				var div5 = $('<div></div>').addClass('col_md_6 d_flex form_list').html('<label>超連結</label><input type="text" name="Link[]" value="/" />');
				var div6 = $('<div></div>').addClass('col_md_6 d_flex form_list').html('<label>背景顏色</label><p><input type="text" class="form-control" name="BanColor[]" data-position="bottom left" style="padding-left: 40px; cursor:pointer;" maxlength="11" /></p>');
				var div7 = $('<div></div>').addClass('col_12 form_list').html('<label>描述</label><textarea name="DanDesc[]"></textarea>');
				var remove = $('<a></a>').addClass('pos_abs remove').attr('href', 'javascript:void(0);').attr('data-action', 'delete').html('<svg class="fa"><use xlink:href="svg/icons.svg#close"></use></svg>');
				
				$('#image_list').append(li.append(h5).append(div1).append(div2).append(div3).append(div4).append(div5).append(div6).append(div7).append(remove));
				
				$('.form-control').each(function(){ selectColor($(this)); });
				autosize(document.querySelectorAll('textarea'));
				
				if($('#image_list li').length == 0 || $('#image_list li').length >= '<?# bannerMaximum ?>'){
					$('.card_body >div').removeClass('d_flex');
					$('.card_body >div').addClass('d_none');
				}else{
					$('.card_body >div').removeClass('d_none');
					$('.card_body >div').addClass('d_flex');
				}
			}
		});
		
		$('#image_list').on('click', 'a[data-action="upimage"]', function(){
			selectFileWithCKFinder($(this).parent().prev(), 'Images');
		});
		$('#image_list').on('change', 'input:text[name="Image[]"]', function(){
			ImageChange($(this));
		});
		$('#image_list').on('click', 'a[data-action="delete"]', function(){
			$(this).parents('li').remove();
			var num = 0;
			$('#image_list li').each(function(){
				$(this).children().eq(0).text('橫幅'+(num + 1));
				$(this).children().eq(1).children().eq(1).children().eq(0).children('input').attr('name', 'ShowType['+num+']');
				num++
			});
			if($('#image_list li').length == 0 || $('#image_list li').length >= '<?# bannerMaximum ?>'){
				$('.card_body >div').removeClass('d_flex');
				$('.card_body >div').addClass('d_none');
			}else{
				$('.card_body >div').removeClass('d_none');
				$('.card_body >div').addClass('d_flex');
			}
		});
		$('#image_list').on('change', 'input:radio[data-action="ShowType"]', function(){
			var value = ($(this).val() == 1) ? 2 : 1;
			if($(this).is(':checked')) value = $(this).val();
			var display = (value == '1') ? 'none' : 'flex';
			$(this).parents('li').children().eq(3).css('display', display);
		});

		$('#image_list').sortable({
			opacity: 0.6,
			cursor: 'move'
		});
		$('#image_list').disableSelection();
		
		$('#btnOK').click(function(){
			$('#form1').submit();
		});
	});
</script>