@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row">

        <div class="col-md-10 col-md-offset-1 " style="padding: 0px;">

            <div class="col-md-4   ">
                <div class="panel panel-default">
                    <div class="panel-heading">目前上站人數</div>
               
                    <div class="panel-body">

                    <h4 class="text-center" style="font-size: 60px;">{{ $realtime }}
</h4>

                    </div>
                </div>
            </div>


            <div class="col-md-8 ">
                <div class="panel panel-default">
                    <div class="panel-heading">大數聚月流量</div>
               
                    <div class="panel-body">
                        

                    </div>

                </div>
            </div>



        </div>

        



        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">大數聚月流量</div>
               
                <div class="panel-body">

                <div id="test"></div>

                </div>
            </div>
        </div>


        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">大數聚月流量</div>
               
                <div class="panel-body">

                <table id="example" class="table  table-bordered dt-responsive pre-wrap" cellspacing="0"  >
        <thead>
            <tr>
                <th>pagePath</th>
                <th>pageviews</th>
                <th>uniquePageviews</th>
                <th>timeOnPage</th>
                <th>bounces</th>
                <th>entrances</th>
                <th>exits</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>pagePath</th>
                <th>pageviews</th>
                <th>uniquePageviews</th>
                <th>timeOnPage</th>
                <th>bounces</th>
                <th>entrances</th>
                <th>exits</th>
            </tr>
        </tfoot>
        <tbody>
        @foreach ($topcontent["rows"] as $key) 
            <tr style="width:100%">
                <td class="AutoNewline"><p>{{ $key["ga:pagePath"] }}</p></td>
                <td>{{ $key["ga:pageviews"] }}</td>
                <td>{{ $key["ga:uniquePageviews"] }}</td>
                <td>{{ $key["ga:timeOnPage"] }}</td>
                <td>{{ $key["ga:bounces"] }}</td>
                <td>{{ $key["ga:entrances"] }}</td>
                <td>{{ $key["ga:exits"] }}</td>
            </tr>
        @endforeach
           
            
        </tbody>
    </table>

                </div>
            </div>
        </div>





    </div>
</div>
@endsection


@section("footer")



<script type="text/javascript">
$(function () {
    $("#test").highcharts({
        title: {
            text: "大數聚",
            x: -20 //center
        },

        xAxis: {
            type: "category",
            categories: [




            @foreach($results['rows'] as $key)
            {{ $key["ga:date"]."," }}
            @endforeach

]
        },
        yAxis: {
            title: {
                text: "Click"
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: "#808080"
            }]
        },

        legend: {
            layout: "vertical",
            align: "right",
            verticalAlign: "middle",
            borderWidth: 0
        },
        series: [{
            name: "瀏覽量",
            data: [





 @foreach($results['rows'] as $key)
            {{ $key["ga:pageviews"]."," }}
            @endforeach


]
        }, {
            name: '點擊數',
             data: [





        @foreach($bs as $b)
            {{ $b->total."," }}
            @endforeach


]




        }






        ]
    });
});



</script>




@endsection