{template 'common/header'}


<ul class="nav nav-tabs">
    <li>
        <a href="{php echo $this->createWebUrl('form_config',array('op'=>'list'))}">预约表单配置</a>
    </li>
    <li class="active">
        <a href="{php echo $this->createWebUrl('form_config',array('op'=>'edit'))}">新增预约表单</a>
    </li>
</ul>
<style type="text/css">
	.btn-group .active {
	    background-color: #428bca;
	    color: #fff;
	}
</style>
<div class="main">

    <form action="{php echo $this->createWebUrl('form_config',array('op'=>'edit'))}" method="post" class="form-horizontal form" enctype="multipart/form-data">
        <div class="panel panel-default">
            <div class="panel-heading">
                新增预约表单
            </div>
            <div class="panel-body">
                <input type="hidden" name="id" id="id" value="{$info['id']}" />
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">表单名称</label>
                    <div class="col-sm-9 col-xs-12">
                        <input type='text'  name='title' value="{$info['title']}" class='form-control' />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">表单位置</label>
                    <div class="col-sm-9 col-xs-12">
                        <select name="position" class='form-control' id="position">
                            {loop $position $key $val}
                            <option value="{$key}" {if !empty($info) and ($info['position'] == $key)}selected="selected"{/if}>{$val}</option>
                            {/loop}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">表单头部图片</label>
                    <div class="col-sm-9 col-xs-12">
                        {php echo tpl_form_field_image('img',$info['img']);}
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">表单按钮文字</label>
                    <div class="col-sm-9 col-xs-12">
                    	<input type='text'  name='font' value="{$info['font']}" class='form-control' />
                    </div>
                </div>
                <!--<div id="of" {if $info['position'] != 1} style="display: none;" {/if}>
                	<div class="form-group">
						<label class="col-xs-12 col-sm-3 col-md-2 control-label">是否弹窗模式</label>
	                    <div class="col-sm-9 col-xs-12">
	                    	<select name="off" class='form-control'>
	                            <option value="1" {if $info['off'] == 1}selected="selected"{/if}>是</option>
	                            <option value="2" {if $info['off'] == 2}selected="selected"{/if}>否</option>
	                        </select>
	                    </div>
	                </div>
                </div>-->
                <div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 control-label">使用状态</label>
					<div class="col-sm-9 col-xs-12">
						<div class="btn-group" data-toggle="buttons">		
							<label class="btn btn-default {if $info['off'] == 1}active{elseif $info['off'] !=1 && $info['off'] != 2}active{/if}">
								<input type="radio" name="off" value="1" {if $info['off'] == 1}checked="checked"{elseif $info['off'] !=1 && $info['off'] != 2}checked="checked"{/if}>启用
							</label>
							<label class="btn btn-default {if $info['off'] == 2}active{/if} ">
								<input type="radio" name="off" value="2" {if $info['off'] == 2}checked="checked"{/if}>禁用
							</label>
						</div>
					</div>
				</div>
                <div class="alert-new">
					<table class="table table-hover">
						<thead>
						<tr>
							<th style="width:35%;text-align:center;">自定义项目</th>
							<th style="width:15%;text-align:center;">排序</th>
							<th style="width:22%;text-align:center;">类型</th>
							<th style="width:18%;text-align:center;">是否显示标题</th>
							<th style="width:10%;">操作</th>
						</tr>
						</thead>
						{if empty($info)}
							<tbody id="re-items" class="ui-sortable" style="">
									<tr class="body_info" data-id="1">
										<td><input name="" type="text" class="form-control" value="姓名" readonly=""/></td>
										<td><input name="" value="100" class="form-control" type="text" readonly=""/></td>
										<td>
											<select name="" class="form-control" disabled="disabled">
		                                        <option value="text" >单行文本</option>
		                                        <!--<option value="textarea">多行文本</option>-->
		                                        <option value="radio">单选</option>
		                                        <option value="checkbox">多选</option>
		                                        <option value="phone">电话号码</option>
		                                        <option value="select">下拉选框</option>
		                                        <option value="img">上传图片</option>
		                                    </select>
										</td>
										<td>
											<select name="" class="form-control" disabled="disabled">
		                                        <option value="text" >否</option>
		                                    </select>
										</td>
										<td>
										</td>
									</tr>
									<tr class="body_info" data-id="1">
										<td><input name="" type="text" class="form-control" value="电话" readonly=""/></td>
										<td><input name="" value="99" class="form-control" type="text" readonly=""/></td>
										<td>
											<select name="" class="form-control" disabled="disabled">
		                                        <option value="phone">电话号码</option>
		                                    </select>
										</td>
										<td>
											<select name="" class="form-control" disabled="disabled">
		                                        <option value="text" >否</option>
		                                    </select>
										</td>
									</tr>
									<tr class="body_info" data-id="1">
										<td><input name="value[1][name]" type="text" class="form-control" value=""/></td>
										<td><input name="value[1][sort]" value="0" class="form-control" type="text"/></td>
										<td>
											<select name="value[1][type]" class="form-control">
		                                        <option value="text" >单行文本</option>
		                                        <!--<option value="textarea">多行文本</option>-->
		                                        <option value="radio">单选</option>
		                                        <option value="checkbox">多选</option>
		                                        <option value="phone">电话号码</option>
		                                        <option value="select">下拉选框</option>
		                                        <option value="img">上传图片</option>
		                                    </select>
										</td>
										<td>
											<select name="value[1][status]" class="form-control" disabled="disabled">
		                                        <option value="2">否</option>
		                                    </select>
										</td>
										<td>
											<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-warning btn-sm" title="设置详细信息" onclick="setValues(1);"><i class="fa fa-edit"></i></a>
											<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-default btn-sm" onclick="deleteItem(1)" title="删除此项目"><i class="fa fa-times"></i></a>
										</td>
									</tr>
							</tbody>
							<div class="models" id="models">
								<div id="dialog_1" class="modal fade in" tabindex="-1" style="display: none; padding-right: 17px;background: rgba(0,0,0,0.5);">
								    <div class="modal-dialog" style="width: 920px;top: 40%;">
								        <div class="modal-content">
								            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" onclick="hidens(1)" type="button">×</button><h3>设置选项</h3></div>
								            <div class="modal-body">  
												<div class="well re-value">
													<textarea id="re-value" name="value[1][comment]" class="form-control" rows="6">{$v['comment']}</textarea>
													<span class="help-block"><strong>设置表单项目的选项(如果有需要的话.) 每行一条记录, 例如: 性别 男, 女</strong></span>
												</div>
								                <div id="module-menus" style="padding-top:5px;"></div>
								            </div>
								            <div class="modal-footer">
								                <a href="javascript:;" class="btn btn-primary btn-ok" data-dismiss="modal" onclick="hidens(1)"  aria-hidden="true">确 定</a>
								                <a href="javascript:;" class="btn btn-default" onclick="hidens(1)"  data-dismiss="modal" aria-hidden="true">关 闭</a>
								            </div>
								        </div>
								    </div>
								</div>
							</div>
						{else}
							<tbody id="re-items" class="ui-sortable" style="">
									<tr class="body_info" data-id="1">
										<td><input name="" type="text" class="form-control" value="姓名" readonly=""/></td>
										<td><input name="" value="100" class="form-control" type="text" readonly=""/></td>
										<td>
											<select name="" class="form-control" disabled="disabled">
		                                        <option value="text" >单行文本</option>
		                                        <!--<option value="textarea">多行文本</option>-->
		                                        <option value="radio">单选</option>
		                                        <option value="checkbox">多选</option>
		                                        <option value="phone">电话号码</option>
		                                        <option value="select">下拉选框</option>
		                                        <option value="img">上传图片</option>
		                                    </select>
										</td>
										<td>
											<select name="" class="form-control" disabled="disabled">
		                                        <option value="2">否</option>
		                                    </select>
										</td>
										<td>
										</td>
									</tr>
									<tr class="body_info" data-id="1">
										<td><input name="" type="text" class="form-control" value="电话" readonly=""/></td>
										<td><input name="" value="99" class="form-control" type="text" readonly=""/></td>
										<td>
											<select name="" class="form-control" disabled="disabled">
		                                        <option value="phone">电话号码</option>
		                                    </select>
										</td>
										<td>
											<select name="" class="form-control" disabled="disabled">
		                                        <option value="2">否</option>
		                                    </select>
										</td>
										<td>
										</td>
									</tr>
								{loop $info['body'] $k $v}
									<tr class="body_info" data-id="{$k}">
										<td><input name="value[{$k}][name]" type="text" class="form-control" value="{$v['name']}"/></td>
										<td><input name="value[{$k}][sort]" value="{$v['sort']}" class="form-control" type="text"/></td>
										<td>
											<select name="value[{$k}][type]" class="form-control">
		                                        <option value="text" {if $v['type']=='text' }selected='selected'{/if}>单行文本</option>
		                                        <!--<option value="textarea" {if $v['type']=='textarea' }selected='selected'{/if}>多行文本</option>-->
		                                        <option value="radio" {if $v['type']=='radio' }selected='selected'{/if}>单选</option>
		                                        <option value="checkbox" {if $v['type']=='checkbox' }selected='selected'{/if}>多选</option>
		                                        <option value="phone" {if $v['type']=='phone' }selected='selected'{/if}>电话号码</option>
		                                        <option value="select" {if $v['type']=='select' }selected='selected'{/if}>下拉选框</option>
		                                        <option value="img" {if $v['type']=='img' }selected='selected'{/if}>上传图片</option>
		                                    </select>
										</td>
										<td>
											<select name="value[{$k}][status]" class="form-control" data-id="{$v['status']}">
												<option value="2" {if $v['status']=='2' }selected='selected'{/if}>否</option>
												<option value="1" {if $v['status']=='1' }selected='selected'{/if}>是</option>
		                                    </select>
										</td>
										<td>
											<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-warning btn-sm" title="设置详细信息" onclick="setValues({$k});"><i class="fa fa-edit"></i></a>
											<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-default btn-sm" onclick="deleteItem({$k})" title="删除此项目"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<div id="models">
										<div id="dialog_{$k}" class="modal fade in" tabindex="-1" style="display: none; padding-right: 17px;background: rgba(0,0,0,0.5);">
										    <div class="modal-dialog" style="width: 920px;top: 40%;">
										        <div class="modal-content">
										            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" onclick="hidens({$k})" type="button">×</button><h3>设置选项</h3></div>
										            <div class="modal-body">  
														<div class="well re-value">
															<textarea id="re-value" name="value[{$k}][comment]" class="form-control" rows="6">{$v['comment']}</textarea>
															<span class="help-block"><strong>设置表单项目的选项(如果有需要的话.) 每行一条记录, 例如: 性别 男, 女</strong></span>
														</div>
										                <div id="module-menus" style="padding-top:5px;"></div>
										            </div>
										            <div class="modal-footer">
										                <a href="javascript:;" class="btn btn-primary btn-ok" data-dismiss="modal" onclick="hidens({$k})"  aria-hidden="true">确 定</a>
										                <a href="javascript:;" class="btn btn-default" onclick="hidens({$k})"  data-dismiss="modal" aria-hidden="true">关 闭</a>
										            </div>
										        </div>
										    </div>
										</div>
									</div>
								{/loop}
							</tbody>
						{/if}
						
						</table>
						<a href="javascript:;" class="btn btn-success" onclick="addItem();"><i class="fa fa-plus" title="添加自定义字段"></i> 添加自定义字段</a>
						<div class="alert alert-info">
							<button type="button" class="close" data-dismiss="alert">×</button>
							<h4>提示！</h4> 每个位置的表单只能存在1个,超出报错.<br>只有首页diy才有弹出表单，其他页面没有。<br>
						</div>
				</div>
				
            </div>
        </div>
        <div class="form-group col-sm-12">
            <input type="submit" name="submit" id="btn" value="提交" class="btn btn-primary col-lg-1" />
        </div>
    </form>
</div>

{template 'common/footer'}
{template 'footer'}

<script type="text/javascript">
    //	layer.msg('123');
    $('#btn').click(function(){
        var title = $("input[name='title']").val();
        if(title == '' || title == undefined){
            alert('请填写标题');
            return false;
        }
        return true;
    });
    function addItem(){
    	var id = $(".body_info").eq(-1).data('id');
        id++;
        var str = '';
            str +='<tr class="body_info" data-id="'+id+'">';
			str +=	'<td><input name="value['+id+'][name]" type="text" class="form-control" value=""/></td>';
			str +=	'<td><input name="value['+id+'][sort]" value="0" class="form-control" type="text"/></td>';
			str +=	"<td>";
			str +=		'<select name="value['+id+'][type]" class="form-control">';
            str +=           "<option value=\"text\">单行文本</option>";
            /**str +=            "<option value=\"textarea\">多行文本</option>";*/
            str +=            "<option value=\"radio\">单选</option>";
            str +=            "<option value=\"checkbox\">多选</option>";
            str +=            '<option value="phone">电话号码</option>';
            str +=            '<option value="select">下拉选框</option>';
            str +=            '<option value="img">上传图片</option>';
            str +=        "</select>";
			str +=	"</td>";
			str += '<td>';
			str += '	<select name="value['+id+'][status]" class="form-control">';
			str += '		<option value="2">否</option>';
			str += '		<option value="1">是</option>';
		    str += '	</select>';
			str += '</td>';
			
			str +=	"<td>";
			str += '<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-warning btn-sm" data-original-title="设置详细信息" onclick="setValues('+id+');"><i class="fa fa-edit"></i></a>';
			str += '<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-default btn-sm" onclick="deleteItem('+id+')" title="删除此项目"><i class="fa fa-times"></i></a>';
			str +=	"</td>";
			str +="</tr>";
			var model = '';
			model += '<div id="dialog_'+id+'" class="modal fade in" tabindex="-1" style="display: none; padding-right: 17px;background: rgba(0,0,0,0.5);">';
			model += '<div class="modal-dialog" style="width: 920px;top: 40%;">';
			model += '<div class="modal-content">';
			model += '<div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" onclick="hidens('+id+')" type="button">×</button><h3>设置选项</h3></div>';
			model += '<div class="modal-body">  ';
			model += '<div class="well re-value">';
			model += '<textarea id="re-value" name="value['+id+'][comment]" class="form-control" rows="6"></textarea>';
			model += '<span class="help-block"><strong>设置表单项目的选项(如果有需要的话.) 每行一条记录, 例如: 性别 男, 女</strong></span>';
			model += '</div>';
			model += '<div id="module-menus" style="padding-top:5px;"></div>';
			model += '</div>';
			model += '<div class="modal-footer">';
			model += '<a href="javascript:;" class="btn btn-primary btn-ok" data-dismiss="modal" onclick="hidens('+id+')"  aria-hidden="true">确 定</a>';
			model += '<a href="javascript:;" class="btn btn-default" onclick="hidens('+id+')"  data-dismiss="modal" aria-hidden="true">关 闭</a>';
			model += '</div></div></div></div>';
			$("#re-items").append(str);
			$("#models").append(model);
    }

    function deleteItem(id){
    	$(".body_info[data-id='"+id+"']").remove();
    }
    function setValues(id){
    	$('#dialog_'+id).show();
    }
    function hidens(id){
    	$('#dialog_'+id).hide();
    }
//  $('#position').change(function(){
//  	var val = $(this).val();
//  	if(val == 1){
//  		$('#of').show();
//  	}else{
//  		$('#of').hide();
//  	}
//  })
</script>