<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加活动</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="<?php echo base_url();?>public/js/bootstrap/bootstrap.min.css" >
    <link rel="stylesheet" href="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css">
    <link rel="stylesheet" href="<?php echo base_url();?>public/css/jquery.timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="<?php echo base_url();?>public/js/vendor/select2/select2.min.css">
    <style type="text/css">
        .thumbnail {
            margin:10px;
        }

        .lang-name {
            margin-left:42px;
        }

        .upimg {
            cursor: pointer;
        }
		tr.myDragClass td {
		    /*position: fixed;*/
		    color: yellow;
		    text-shadow: 0 0 10px black, 0 0 10px black, 0 0 8px black, 0 0 6px black, 0 0 6px black;
		    background-color: #999;
		    -webkit-box-shadow: 0 12px 14px -12px #111 inset, 0 -2px 2px -1px #333 inset;
		}
		tr.myDragClass td:first-child {
		    -webkit-box-shadow: 0 12px 14px -12px #111 inset, 12px 0 14px -12px #111 inset, 0 -2px 2px -1px #333 inset;
		}
		tr.myDragClass td:last-child {
		    -webkit-box-shadow: 0 12px 14px -12px #111 inset, -12px 0 14px -12px #111 inset, 0 -2px 2px -1px #333 inset;
		}
    </style>
</head>
<body>
<div id="msg-tip">

</div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>添加漏斗</header>
                    <hr/>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <form class="form-horizontal" role="form" method="post"  enctype="multipart/form-data" id="addForm">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">漏斗名称*: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" name="name" value="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">漏斗识别号*: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" name="event_id" value="">
                                            </div>
                                        </div>
										
										<table id="reportTable" class="table" border="3" cellspacing="0" cellpadding="1">
                                        	<tbody id="pokerList">
                                        		
                                        	</tbody>
                                        </table>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label"></label>
                                            <div class="col-sm-1">
                                                <button type="button" class="btn btn-primary btn-sm" id="addPlayPoker" data-max-blind="0"><i class="fa fa-plus-square"></i>添加事件配置</button>
                                            </div>
                                            <br/>
                                            <hr>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-offset-3 col-sm-3">
                                                <button type="button" class="btn btn-info goback">返回</button>
                                                <button type="button" class="btn btn-primary" id="submitBtn">提交</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>

</body>
<script src="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="<?php echo base_url();?>public/plugins/validate/jquery.validate-1.15.0.min.js"></script>
<script src="<?php echo base_url();?>public/plugins/validate/jaquery.validate.messages_zh.js"></script>
<script src="<?php echo base_url();?>public/js/common.js"></script>
<script src="<?php echo base_url();?>public/js/vendor/timepicker/timepicker.min.js"></script>
<!-- Select2 -->
<script src="<?php echo base_url();?>public/js/vendor/select2/select2.full.min.js"></script>

<script src="<?php echo base_url();?>public/js/jquery.tablednd.js"></script>

</html>
<script type="text/javascript">

    /**
     * Created by Administrator on 2018/1/31.
     */
    $(function () {
    	
    	
	    
        var addForm = $("#addForm");
        var msgTip = $('#msg-tip');
        $('#submitBtn').click(function () {
            if (addForm.valid()) {
                var data = new FormData(document.getElementById("addForm"));
                $.ajax({
                    url: rootPath + 'events/add',
                    type: 'POST',
                    data: data,
                    dataType: 'json',
                    contentType: false, //必须
                    processData: false, //必须
                    success: function (data) {
                        if (data.ret != 0) {//新增失败
                            msgTip.messager().error(data.msg);
                        } else {
                            window.location.href = rootPath + '/#events/index';
                        }
                    },
                    error: function (msg) {
                        msgTip.messager().error('网络错误，请刷新后重试');
                    }
                });
            }
        });
    });

	var i = 1;

    //添加玩牌盲注
    $('#addPlayPoker').click(function () {
        var html = '<tr id="'+i+'"><td><div class=""><div class="col-sm-3"><label>事件标题*: </label><input type="text" name="mean[]" value=""></div> <div class="col-sm-3"><label>事件标识*: </label><input type="text" name="ids[]" value="'+i+'">'
            +'</div></div></td></tr>';

           $('#pokerList').append(html);
           
        i++;
        
        //初始化表
	    //$("#reportTable").tableDnD();
	    //table条纹效果
	    table_2 = $("#reportTable");
	    //初始化第二个表，指定将显示警报的DragClass和OnDrop函数
	    table_2.tableDnD({
	        onDragClass: "myDragClass",
	        onDrop: function (table, row) {
	            var rows = table.tBodies[0].rows;
	            var debugStr = "Row dropped was " + row.id + ". New order: ";
	            for (var i = 0; i < rows.length; i++) {
	                debugStr += rows[i].id + " ";
	            }
	            $(table).parent().find('.result').text(debugStr);
	        },
	        onDragStart: function (table, row) {
	            $(table).parent().find('.result').text("Started dragging row " + row.id);
	        }
	    });
    });

    $('.goback').click(function(){
        history.go(-1);
    });
</script>