@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>



        </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="test2"></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="example2" class="table  table-bordered dt-responsive pre-wrap" cellspacing="0"  >
        <thead>
            <tr>
                <th>日期</th>
                <th>線上人數</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>日期</th>
                <th>線上人數</th>
            </tr>
        </tfoot>
        <tbody>
        @foreach ($rtusers as $key) 
            <tr style="width:100%">
                
                <td>{{ $key->date }}</td>
                <td>{{  $key->users }}</td>
            </tr>
        @endforeach
           
            
        </tbody>
    </table>

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





    </div>
</div>
@endsection


@section("footer")

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script type="text/javascript">




$(function () {



   $("#test").highcharts({
        title: {
            text: "網路溫度計線上用戶歷史軌跡",
            x: -20 //center
        },

        xAxis: {
            type: "category",
            categories: [
            @foreach($rtusers as $key)
            {{ $key->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($rtusers as $key)
            {{ $key->users."," }}
            @endforeach

]
        }






        ]
    });

    var ranges = [
        ['00:00', {{$timecount[0] - $timesd[0] }},{{ $timecount[0] + $timesd[0]}} ],
        ['01:00', {{$timecount[1] - $timesd[1] }},{{ $timecount[1] + $timesd[1]}} ],
        ['02:00', {{$timecount[2] - $timesd[2] }},{{ $timecount[2] + $timesd[2]}} ],
        ['03:00', {{$timecount[3] - $timesd[3] }},{{ $timecount[3] + $timesd[3]}} ],
        ['04:00', {{$timecount[4] - $timesd[4] }},{{ $timecount[4] + $timesd[4]}} ],
        ['05:00', {{$timecount[5] - $timesd[5] }},{{ $timecount[5] + $timesd[5]}} ],
        ['06:00', {{$timecount[6] - $timesd[6] }},{{ $timecount[6] + $timesd[6]}} ],
        ['07:00', {{$timecount[7] - $timesd[7] }},{{ $timecount[7] + $timesd[7]}} ],
        ['08:00', {{$timecount[8] - $timesd[8] }},{{ $timecount[8] + $timesd[8]}} ],
        ['09:00', {{$timecount[9] - $timesd[9] }},{{ $timecount[9] + $timesd[9]}} ],
        ['10:00', {{$timecount[10] - $timesd[10] }},{{ $timecount[10] + $timesd[10]}} ],
        ['11:00', {{$timecount[11] - $timesd[11] }},{{ $timecount[11] + $timesd[11]}} ],
        ['12:00', {{$timecount[12] - $timesd[12] }},{{ $timecount[12] + $timesd[12]}} ],
        ['13:00', {{$timecount[13] - $timesd[13] }},{{ $timecount[13] + $timesd[13]}} ],
        ['14:00', {{$timecount[14] - $timesd[14] }},{{ $timecount[14] + $timesd[14]}} ],
        ['15:00', {{$timecount[15] - $timesd[15] }},{{ $timecount[15] + $timesd[15]}} ],
        ['16:00', {{$timecount[16] - $timesd[16] }},{{ $timecount[16] + $timesd[16]}} ],
        ['17:00', {{$timecount[17] - $timesd[17] }},{{ $timecount[17] + $timesd[17]}} ],
        ['18:00', {{$timecount[18] - $timesd[18] }},{{ $timecount[18] + $timesd[18]}} ],
        ['19:00', {{$timecount[19] - $timesd[19] }},{{ $timecount[19] + $timesd[19]}} ],
        ['20:00', {{$timecount[20] - $timesd[20] }},{{ $timecount[20] + $timesd[20]}} ],
        ['21:00', {{$timecount[21] - $timesd[21] }},{{ $timecount[21] + $timesd[21]}} ],
        ['22:00', {{$timecount[22] - $timesd[22] }},{{ $timecount[22] + $timesd[22]}} ],
        ['23:00', {{$timecount[23] - $timesd[23] }},{{ $timecount[23] + $timesd[23]}} ]

    ],
    averages = [
        ['00:00',{{ $timecount[0] }}  ],
        ['01:00',{{ $timecount[1] }}],
        ['02:00',{{ $timecount[2] }}],
        ['03:00',{{ $timecount[3] }}],
        ['04:00',{{ $timecount[4] }}],
        ['05:00',{{ $timecount[5] }}],
        ['06:00',{{ $timecount[6] }}],
        ['07:00',{{ $timecount[7] }}], 
        ['08:00',{{ $timecount[8] }}],
        ['09:00',{{ $timecount[9] }}],
        ['10:00',{{ $timecount[10]}}],
        ['11:00',{{ $timecount[11]}}],
        ['12:00',{{ $timecount[12]}}],
        ['13:00',{{ $timecount[13]}}],
        ['14:00',{{ $timecount[14]}}],
        ['15:00',{{ $timecount[15]}}],
        ['16:00',{{ $timecount[16]}}],
        ['17:00',{{ $timecount[17]}}],
        ['18:00',{{ $timecount[18]}}],
        ['19:00',{{ $timecount[19]}}],
        ['20:00',{{ $timecount[20]}}],
        ['21:00',{{ $timecount[21]}}],
        ['22:00',{{ $timecount[22]}}],
        ['23:00',{{ $timecount[23]}}],   ];


Highcharts.chart('test2', {

    title: {
        text: ''
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        title: {
            text: null
        }
    },

    tooltip: {
        crosshairs: true,
        shared: true,
        valueSuffix: '人'
    },

    legend: {
    },

    series: [{
        name: '站上人數',
        data: averages,
        zIndex: 1,
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0]
        }
    }, {
        name: 'Range',
        data: ranges,
        type: 'arearange',
        lineWidth: 0,
        linkedTo: ':previous',
        color: Highcharts.getOptions().colors[0],
        fillOpacity: 0.3,
        zIndex: 0
    }]
});







});



</script>




@endsection