<link rel="stylesheet" href="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css">
<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>

<div class="content_wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>查询</header>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <a style="margin:5px;" class="btn btn-primary <?php if($type != 1){echo 'active';}?>" href="#remain/tableIndex" role="button">表格</a>
                                    <a style="margin:5px;" class="btn btn-primary <?php if($type == 1){echo 'active';}?>" href="#remain/index" role="button">图表</a>
                                    <a style="margin:5px;" class="btn btn-primary <?php if($type == 1){echo 'active';}?>" href="#remain/remainGuestFb" role="button">游客/FB</a>
                                    <a style="margin:5px;" class="btn btn-primary <?php if($type == 1){echo 'active';}?>" href="#remain/remainGuestFb/2" role="button">VIVO</a>
                                </div>
                            </div>
                        </div>
                    </section>

                    <?php if($type != 2) { ?>

                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <form class="form-inline" role="form" method="POST" action="#remain/index" name="stanpform">
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>开始时间</label>
                                            <input type="text" class="form-control datetimepicker" value="<?php if($stime) echo $stime;?>" placeholder="开始时间" name="remain_stime" />
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>结束时间</label>
                                            <input type="text" class="form-control datetimepicker" value="<?php if($etime) echo $etime;?>" placeholder="结束时间" name="remain_etime" />
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>国家</label>
                                            <input type="text" class="form-control" value="<?php if($address) echo $address;?>" placeholder="国家" name="address" />
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>用户属性</label>
                                            <select name="userType" class="form-control">
                                                <option value="" <?php if($userType=="") echo "selected";?> >所有</option>
                                                <option value="natural" <?php if($userType=="natural") echo "selected";?> >自然量</option>
                                                <option value="buy" <?php if($userType=="buy") echo "selected";?> >买量</option>
                                            </select>
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>付费等级</label>
                                            <select name="groupId" class="form-control">
                                                <option value="0">所有</option>
                                                <?php
                                                foreach($groupList as $row){
                                                    echo '<option value="'.$row['id'].'" '.($groupId==$row['id']?'selected':'').' >'.$row['name'].'</option>';
                                                }
                                                ?>
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-primary">查询</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>


		<?php foreach($sidList as $sid){ ?>
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>留存率</header>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div id="container<?php echo $sid; ?>" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                            </div>
                            <button type="button" class="btn btn-primary" id="all_checked<?php echo $sid; ?>">全选</button>
                            <button type="button" class="btn btn-primary" id="all_no_checked<?php echo $sid; ?>">全不选</button>
                            <button type="button" class="btn btn-primary" onclick="initContainer<?php echo $sid; ?>()">折线图</button>
                            <button type="button" class="btn btn-primary" onclick="initContainer<?php echo $sid; ?>('column')">柱形图</button>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
		<?php } ?>

<!--        <div class="row">-->
<!--            <div class="col-sm-12">-->
<!--                <aside>-->
<!--                    <header><i class="fa fa-fw fa-file"></i>设备留存率</header>-->
<!--                    <section>-->
<!--                        <div class="container-fluid">-->
<!--                            <div class="row">-->
<!--                                <div id="container-d" style="min-width: 310px; height: 400px; margin: 0 auto"></div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </section>-->
<!--                </aside>-->
<!--            </div>-->
<!--        </div>-->
    </div>

    <?php }else{ ?><!--表格-->
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <form class="form-inline" role="form" method="POST" action="#remain/tableIndex" name="stanpform">
                        <span class="gap"></span>
                        <div class="form-group">
                            <label>开始时间</label>
                            <input type="text" class="form-control datetimepicker" value="<?php if($stime) echo $stime;?>" placeholder="开始时间" name="remain_stime" />
                        </div>
                        <span class="gap"></span>
                        <div class="form-group">
                            <label>结束时间</label>
                            <input type="text" class="form-control datetimepicker" value="<?php if($etime) echo $etime;?>" placeholder="结束时间" name="remain_etime" />
                        </div>
                        <button type="submit" class="btn btn-primary">查询</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    </aside>
</div>
</div>

<div class="row">
    <div class="col-sm-12">
        <aside>
            <header><i class="fa fa-fw fa-file"></i>用户留存</header>
            <section>
                <div class="container-fluid">

                    <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                                <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th colspan="3"></th>
                                        <th colspan="7" style="text-align: center">新增玩家</th>
                                        <th colspan="7" style="text-align: center">活跃玩家</th>
                                    </tr>
                                    <tr>
                                        <th>序号</th>
                                        <th>日期</th>
                                        <th>类型</th>
                                        <th>次留</th>
                                        <th>3日留存</th>
                                        <th>7日留存</th>
                                        <th>30日留存</th>
                                        <th>60日留存</th>
                                        <th>90日留存</th>
                                        <th>120日留存</th>
                                        <th>次留</th>
                                        <th>3日留存</th>
                                        <th>7日留存</th>
                                        <th>30日留存</th>
										<th>60日留存</th>
										<th>90日留存</th>
										<th>120日留存</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <?php
                                    if(is_array($list)){
                                        foreach ($list as $key => $val) {
                                            ?>
                                            <tr>
                                                <td><?php echo $page + $key + 1;?></td>
                                                <td><?php echo $val['date'];?></td>
                                                <td><?php echo $val['sid']==1?'安卓':'IOS';?></td>
                                                <td><?php echo $val['day1Remain'].'%' ?? '-';?></td>
                                                <td><?php echo $val['day3Remain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day7Remain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day30Remain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day60Remain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day90Remain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day120Remain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day1ActRemain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day3ActRemain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day7ActRemain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day30ActRemain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day60ActRemain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day90ActRemain'].'%'  ?? '-';?></td>
                                                <td><?php echo $val['day120ActRemain'].'%'  ?? '-';?></td>
                                            </tr>
                                        <?php } } else{?>
                                        <tr>
                                            <td colspan="10">暂无数据</td>
                                        </tr>
                                    <?php } ?>
                                    </tbody>

                                    </tbody>
                                </table>
                            </div>

                            <nav>
                                <ul class="pagination">
                                    <li class="disabled"><a href="#">共<span class="pagetotal"><?php echo $total;?></span>条</a></li>
                                    <?php echo $pageurl;?>
                                </ul>
                            </nav>

                        </div>
                    </div>

                </div>
            </section>
        </aside>
    </div>
</div>
<?php } ?>






</div>
</div>
<script type="text/javascript" src="<?php echo base_url();?>public/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>public/js/highcharts/modules/exporting.js"></script>
<script type="text/javascript">
<?php
	$sidListName = [1=>'安卓',2=>'IOS'];
	foreach($sidList as $sid){ 
?>
    var chart<?php echo $sid; ?> = null;
    initContainer<?php echo $sid; ?>();
    function initContainer<?php echo $sid; ?>(type = 'line') {
        chart<?php echo $sid; ?> = Highcharts.chart('container<?php echo $sid; ?>', {
            chart: {
                type: type
            },
            title: {
                text: '<?php echo $sidListName[$sid]; ?>留存率查询'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: [<?php echo "'" . implode("','", $daylist[$sid]) . "'";?>]
            },
            yAxis: {
                title: {
                    text: '数值'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: '新增次日留存',
                data: [<?php echo implode(",", $day1Remain[$sid]);?>]
            }, {
                name: '新增3日留存',
                data: [<?php echo implode(",", $day3Remain[$sid]);?>]
            }, {
                name: '新增7日留存',
                data: [<?php echo implode(",", $day7Remain[$sid]);?>]
            }, {
                name: '新增30日留存',
                visible: false,
                data: [<?php echo implode(",", $day30Remain[$sid]);?>]
            }, {
                name: '活跃次日留存',
                data: [<?php echo implode(",", $day1ActRemain[$sid]);?>]
            }, {
                name: '活跃3日留存',
                data: [<?php echo implode(",", $day3ActRemain[$sid]);?>]
            }, {
                name: '活跃7日留存',
                data: [<?php echo implode(",", $day7ActRemain[$sid]);?>]
            }, {
                name: '活跃30日留存',
                visible: false,
                data: [<?php echo implode(",", $day30ActRemain[$sid]);?>]
            }]
        });
    }
    $(document).on("click","#all_checked<?php echo $sid; ?>",function(){
        $(".highcharts-legend-item").each(function(index){
            chart<?php echo $sid; ?>.series[index].show();//显示
        })
    })
    $(document).on("click","#all_no_checked<?php echo $sid; ?>",function(){
        $(".highcharts-legend-item").each(function(index){
            chart<?php echo $sid; ?>.series[index].hide();//隐藏
        })
    })
<?php } ?>

    Highcharts.chart('container-d', {
        chart: {
            type: 'line'
        },
        title: {
            text: '设备留存率查询'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [<?php echo "'".implode("','", $daylist)."'";?>]
        },
        yAxis: {
            title: {
                text: '数值'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: '新增次日留存',
            data: [<?php echo implode(",", $day1RemainDevice);?>]
        },{
            name: '新增3日留存',
            data: [<?php echo implode(",", $day3RemainDevice);?>]
        },{
            name: '新增7日留存',
            data: [<?php echo implode(",", $day7RemainDevice);?>]
        },{
            name: '新增30日留存',
            visible: false,
            data: [<?php echo implode(",", $day30RemainDevice);?>]
        },{
            name: '活跃次日留存',
            data: [<?php echo implode(",", $day1ActRemainDevice);?>]
        },{
            name: '活跃3日留存',
            data: [<?php echo implode(",", $day3ActRemainDevice);?>]
        },{
            name: '活跃7日留存',
            data: [<?php echo implode(",", $day7ActRemainDevice);?>]
        },{
            name: '活跃30日留存',
            visible: false,
            data: [<?php echo implode(",", $day30ActRemainDevice);?>]
        }]
    });
</script>
<script type="text/javascript">
    //选择日期
    $('.datetimepicker').datepicker({
        language:'zh-CN',
        format:'yyyy-mm-dd',
        zIndexOffset:906  //控制z-index
    });
</script>