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

@section('content')
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Traffic / Summary</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        @foreach($traffics as $traffic)
            <div class="col-md-6 col-sm-12">
                <div class="row one-highsite">
                    <div class="ribbon rib-{{$traffic->id}}" style="display:none;"><span>OFFLINE</span></div>
                    <div class="col-sm-12 device-info">
                        <div id="r_1" class="row" style="display:flex;">
                            <div class="col-md-4 col-sm-4 col-xs-4 p-0 m-2">
                                <div class="panel panel-default bootstrap-panel card  winbox-card">
                                    <div class="panel-heading p-2">
                                        <div class="row">
                                            <div class="box-group">
                                                <div class="box-group-icon"><i class="fa fa-calendar"></i></div>
                                                <div class="box-group-area">
                                                    <span >System date & time <br><span id="system_date_time_{{$traffic->id}}"></span>
                                                    </span><br>
                                                    <span>
                                                        <span>Uptime:&nbsp;</span><span id="uptime_{{$traffic->id}}"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-4 p-0 m-2">
                                <div class="panel panel-default bootstrap-panel card winbox-card">
                                    <div class="panel-heading p-2">
                                        <div class="row">
                                            <div class="box-group">
                                                <div class="box-group-icon"><i class="fa fa-info-circle"></i></div>
                                                <div class="box-group-area">
                                                    <span>
                                                        <span>Boardname:&nbsp;</span><span id="board_name_{{$traffic->id}}"></span>
                                                    </span><br>
                                                    <span>
                                                        <span>Model:&nbsp;</span><span id="model_{{$traffic->id}}"></span>
                                                    </span><br>
                                                    <span>
                                                        <span>Router Os:&nbsp;</span><span id="router_os_{{$traffic->id}}"></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>                    
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-4  p-0 m-2">
                                <div class="panel panel-default bootstrap-panel card  winbox-card">
                                    <div class="panel-heading p-2">
                                        <div class="row">
                                            <div class="box-group">
                                                <div class="box-group-icon"><i class="fa fa-server"></i></div>
                                                <div class="box-group-area">
                                                    <span>
                                                        <span>CPU load:&nbsp;</span><span id="cpu_load_{{$traffic->id}}"></span>
                                                    </span><br>
                                                    <span>
                                                        <span>Free Memory:&nbsp;</span><span id="free_memory_{{$traffic->id}}"></span>
                                                    </span><br>
                                                    <span>
                                                        <span>Free HDD:&nbsp;</span><span id="free_hdd_{{$traffic->id}}"></span>
                                                    </span> 
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 traffic-speedometer">
                        <img src="{{asset('/')}}/images/speedometer.png" alt="">
                        <div class="upload-meter">
                            <span>Upload</span>
                            <span id="tx_{{$traffic->id}}"></span>
                        </div>
                        <div class="download-meter">
                            <span>Download</span>
                            <span id="rx_{{$traffic->id}}"></span>
                        </div>
                        <div class="latency-meter">
                            <span>Latency</span>
                            <span id="latency_{{$traffic->id}}"></span>
                        </div>
                    </div>
                    
                    <div class="col-sm-12" id="trafficMonitor_{{$traffic->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($traffics as $traffic)
                        chart['{{$traffic->id}}'] = new Highcharts.Chart({
                          chart: {
                            renderTo: 'trafficMonitor_{{$traffic->id}}',
                            animation: Highcharts.svg,
                            type: 'areaspline',
                            events: {
                                load: function () {
                                    // setInterval(function () {
                                        // getSummary();
                                        // chart['{{$traffic->id}}'].setTitle({ text: '{{$traffic->ip}}' });
                                    // }, 3000);
                                }				
                            }
                            },
                            title: {
                            text: '{{$traffic->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: 'Tx',
                            data: [],
                            marker: {
                                symbol: 'circle'
                            }
                            }, {
                            name: 'Rx',
                            data: [],
                            marker: {
                                symbol: 'circle'
                            }
                            }],

                            tooltip: {
                            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]; 

                                var arr=['points','y','bps','kbps','Mbps',
                                'Gbps','Tbps','<span style="color:',
                                'color','series','; font-size: 1.5em;">',
                                'symbolUnicode',
                                '</span><b>','name',
                                ':</b> 0 bps','push',
                                'log','floor',':</b> ',
                                'toFixed','pow',' ','each',
                                '<b>Mikhmon Traffic Monitor</b><br /><b>Time: </b>','%H:%M:%S','x','dateFormat','<br />',' <br/> ','join'];
                                var s=[];
                                $[arr[22]](this[arr[0]],function(bytes,var2){

                                    var var1=var2[arr[1]];
                                    var units=[arr[2],arr[3],arr[4],arr[5],arr[6]];
                                    if(var1== 0){
                                        s[arr[15]](arr[7]+ this[arr[9]][arr[8]]+ arr[10]+ this[arr[9]][arr[11]]+ arr[12]+ this[arr[9]][arr[13]]+ arr[14])
                                    };
                                    var bytes=parseInt(Math[arr[17]](Math[arr[16]](var1)/ Math[arr[16]](1024)));
                                    s[arr[15]](arr[7]+ this[arr[9]][arr[8]]+ arr[10]+ this[arr[9]][arr[11]]+ arr[12]+ this[arr[9]][arr[13]]+ arr[18]+ parseFloat((var1/ Math[arr[20]](1024,bytes))[arr[19]](2))+ arr[21]+ units[bytes])
                                    });
                                    return arr[23]+ Highcharts[arr[26]](arr[24], new Date(this[arr[25]]))+ arr[27]+ s[arr[29]](arr[28])
                            },
                            shared: true                                                      
                            },
                        });
    @endforeach
});
    ////////////////////////////////////////////////////
          $(document).ready(function(){
            getSummary();
          })
          function getSummary(){
              $.ajax({
                  type:'POST',
                  url: '{{route('traffic.get.summary')}}',
                  data:{_token: '{{csrf_token()}}'},
                  success:function(res){
                      if (res.length > 0) {
                          for(var traffic of res) {
                            if (traffic.status == 'up' ) {
                                $('.rib-' + traffic.router_id).css('display','none');
                                $('#tx_' + traffic.router_id).html(traffic.formated_TX);
                                $('#rx_' + traffic.router_id).html(traffic.formated_RX);
                                $('#system_date_time_' + traffic.router_id).html(traffic.system_date_time);
                                $('#uptime_' + traffic.router_id).html(traffic.uptime);
                                $('#board_name_' + traffic.router_id).html(traffic.board_name);
                                $('#model_' + traffic.router_id).html(traffic.model);
                                $('#router_os_' + traffic.router_id).html(traffic.router_os);
                                $('#cpu_load_' + traffic.router_id).html(traffic.cpu_load + '%');
                                $('#free_memory_' + traffic.router_id).html(traffic.free_memory);
                                $('#free_hdd_' + traffic.router_id).html(traffic.free_hdd);
                                $('#latency_' + traffic.router_id).html(traffic.latency[0]['time']);

                                var TX=parseInt(traffic.TX);
                                var RX=parseInt(traffic.RX);
                                var x = (new Date()).getTime(); 
                                let _chart = chart[traffic.router_id];
                                shift=_chart.series[0].data.length > 19;
                                _chart.series[0].addPoint([x, TX], true, shift);
                                _chart.series[1].addPoint([x, RX], true, shift);
                            } else {
                                $('.rib-' + traffic.router_id).css('display','');
                            }
                           

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