@extends('layouts.app', ['pageSlug' => 'customerSetup'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>logs</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            logs
        </div>
        @foreach($users as $user)
            <a href="{{route('users.show.log.detail', $user->id)}}" class="btn btn-info btn-sm pull-right" target="_blank" style="margin-right: 10px;">Show Detail</a>
            <div class="col-md-12 col-sm-12">
                <div class="row one-highsite">                    
                    <div class="col-sm-12" id="userlogmonitor_{{$user->id}}"></div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection

@push('js')
<script src="{{asset('/')}}js/highchart/highcharts.js"></script>
<script src="{{asset('/')}}js/highchart/themes/hc.light.js"></script>
<script>

var chart = [];
$(document).ready(function() {
    Highcharts.setOptions({
        global: {
        useUTC: false
        },
        chart: {
        height: 250,

        },
    });

    Highcharts.addEvent(Highcharts.Series, 'afterInit', function () {
        this.symbolUnicode = {
        circle: '●',
        diamond: '♦',
        square: '■',
        triangle: '▲',
        'triangle-down': '▼'
        }[this.symbol] || '●';
    });

    @foreach($users as $user)
                        chart['{{$user->id}}'] = new Highcharts.Chart({
                          chart: {
                            renderTo: 'userlogmonitor_{{$user->id}}',
                            animation: Highcharts.svg,
                            type: 'areaspline',
                            events: {
                                load: function () {
                                    // setInterval(function () {
                                        // getSummary();
                                        // chart['{{$user->id}}'].setTitle({ text: '{{$user->ip}}' });
                                    // }, 3000);
                                }				
                            }
                            },
                            title: {
                            text: '{{$user->name}}'
                            },
                            
                            xAxis: {
                            type: 'datetime',
                            tickPixelInterval: 150,
                            maxZoom: 20 * 1000,
                            },
                            yAxis: {
                                minPadding: 0.2,
                                maxPadding: 0.2,
                                title: {
                                text: null
                                },
                                labels: {
                                // formatter: function () {      
                                //     var bytes = this.value;                          
                                //     var sizes = ['bps', 'kbps', 'Mbps', 'Gbps', 'Tbps'];
                                //     if (bytes == 0) return '0 bps';
                                //     var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
                                //     return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i];                    
                                // },
                                },       
                            },
                            
                            series: [
                                {
                                    name: 'Fre',
                                    data: [],
                                    marker: {
                                        symbol: 'circle'
                                    }
                                },
                            ],

                            tooltip: {
                                formatter: function () {

                                    var times = this['points'][0]['y'];
                                    
                                    return '<b>Log Counts in Last 10 mins</b><br/>'+ Highcharts['dateFormat']('%H:%M:%S', new Date(this['x']))+ '<br/>'+ times + ' times';
                                },
                                shared: true                                                      
                            },
                        });
    @endforeach
});
    ////////////////////////////////////////////////////
          $(document).ready(function(){
            getSummary();
          })
          function getSummary(){
              $.ajax({
                  type:'POST',
                  url: '{{route('users.log.analysis')}}',
                  data:{_token: '{{csrf_token()}}'},
                  success:function(res){
                        for(var user of res) {
                            var y= parseFloat(user.frequency);
                            var x = (new Date()).getTime(); 
                            let _chart = chart[user.userId];
                            shift=_chart.series[0].data.length > 200;
                            _chart.series[0].addPoint([x, y], true, shift);

                        }
                        setTimeout(function () {
                            getSummary();
                        }, 3000);
                  },
                  error:function(error){
                    console.log(error);
                  }
              })
          }
    </script>
@endpush