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

@section('content')
<div class="main-container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <div class="panel panel-default dashboard-status spl-collapsed-panel"
                id="account_detail_box_panel">
                <div class="panel-heading clickable collapse_title" data-toggle="collapse" data-target="#account_detail_box">
                    <span class="title pull-left">Account Detail</span>
                    <div class="pull-right">
                        <button class="btn btn-success" type="button" onclick="event.preventDefault();">
                            <span class="fa fa-edit btn-lbl">&nbsp;Edit</span></button>
                        <button class="close-panel-btn" type="button"><span class="caret"></span></button>
                    </div>
                </div>
                <div class="collapse show" id="account_detail_box">                   
                    <div class="list-group mb-0">
                        <div class="list-group-item text-right">
                            <div class="">
                                <button class="btn btn-dark" type="button" onclick="event.preventDefault();">
                                    <span class="fa fa-lock btn-lbl">&nbsp;Reset Password</span></button>
                                <button class="btn btn-dark" type="button" onclick="event.preventDefault();">
                                    <span class="fa fa-envelope btn-lbl">&nbsp;Request Update</span></button>
                                <button class="btn btn-dark" type="button" onclick="event.preventDefault();">
                                    <span class="fa fa-star btn-lbl">&nbsp;Request Rate</span></button>
                            </div>
                        </div>
                        <div class="list-group-item d-flex">
                            <span class="item-title">First Name</span>
                            <span class="item-cont">{{$account->firstname}}</span>
                        </div>
                        <div class="list-group-item d-flex">
                            <span class="item-title">Last Name</span>
                            <span class="item-cont">{{$account->lastname}}</span>
                        </div>
                        <div class="list-group-item d-flex">
                            <span class="item-title">Company Name</span>
                            <span class="item-cont">{{$account->company}}</span>
                        </div>
                        <div class="list-group-item d-flex">
                            <span class="item-title">Address</span>
                            <span class="item-cont">{{$account->address}}</span>
                        </div>
                        <div class="list-group-item d-flex">
                            <span class="item-title">City</span>
                            <span class="item-cont">{{$account->city}}</span>
                        </div>
                        <div class="list-group-item d-flex">
                            <span class="item-title">Phone Number</span>
                            <span class="item-cont">{{$account->phone}}</span>
                        </div>
                        <div class="list-group-item d-flex">
                            <span class="item-title">Cell Number</span>
                            <span class="item-cont">{{$account->mobile}}</span>
                        </div>
                        <div class="list-group-item d-flex">
                            <span class="item-title">Email Address</span>
                            <span class="item-cont">{{$account->email}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default dashboard-status spl-collapsed-panel"
                id="dhcpleases_panel">
                <div class="panel-heading clickable collapse_title" data-toggle="collapse" data-target="#dhcpleases">
                    <span class="title pull-left">Dhcp Leases</span>
                    <div class="pull-right">
                        <!-- <button class="btn btn-warning" type="button" onclick="event.preventDefault();">
                            <span class="fa fa-redo btn-lbl">&nbsp;Switch to Prepaid</span></button>
                        <button class="btn btn-success" type="button" onclick="event.preventDefault();">
                            <span class="fa fa-plus btn-lbl">&nbsp;Add</span></button> -->
                        <button class="close-panel-btn" type="button"><span class="caret"></span></button>
                    </div>
                </div>
                <div class="collapse" id="dhcpleases">
                    @foreach($dhcpleases as $lease)                                            
                        <div class="list-group-item mb-0">
                            <span class="">
                                <span><b>address:&nbsp;</b></span>{{ $lease['address'] }}&nbsp;
                                <span><b>mac-address:&nbsp;</b></span>{{ $lease['mac-address'] }}<br>

                                <span><b>status:&nbsp;</b></span>{{ $lease['status'] }}&nbsp;
                                <span><b>last-seen:&nbsp;</b></span>{{ $lease['last-seen'] }}&nbsp;<br>
                                
                                <span><b>host-name:&nbsp;</b></span>@isset($lease['host-name']) {{ $lease['host-name'] }}@endisset&nbsp;
                            </span>
                        </div>
                    @endforeach

                </div>
            </div>         
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <div class="panel panel-default dashboard-status spl-collapsed-panel"
                id="data_account_detail_box_panel">
                <div class="panel-heading clickable collapse_title" data-toggle="collapse" data-target="#data_account_detail_box">
                    <span class="title pull-left">Client Details</span>
                    <div class="pull-right">
                        <button class="btn btn-warning" type="button" onclick="event.preventDefault();">
                            <span class="fa fa-redo btn-lbl">&nbsp;Switch to Prepaid</span></button>
                        <button class="btn btn-success" type="button" onclick="event.preventDefault();">
                            <span class="fa fa-plus btn-lbl">&nbsp;Add</span></button>
                        <button class="close-panel-btn" type="button"><span class="caret"></span></button>
                    </div>
                </div>
                <div class="collapse show" id="data_account_detail_box">
                                           
                    <div class="list-group-item mb-0">                         
                        <div class="p-3">
                            <span class=""><strong>Username:&nbsp;</strong></span>
                            <span class="">{{$account->username}}</span>
                            <span class="btn btn-success btn-xs-cus pull-right"><i class="fa fa-edit"></i></span>
                            <span class="btn btn-danger btn-xs-cus pull-right"><i class="fa fa-trash-alt"></i></span>
                            <span class="btn btn-warning btn-xs-cus pull-right"><i class="fa fa-ban"></i></span>
                        </div>
                        <div class="p-3">
                            <span class=""><strong>Registered:&nbsp;</strong></span>
                            <span class="">{{date('d-m-Y', strtotime($account->createdon))}}</span>
                        </div>
                        <div class="p-3">
                            <span class=""><strong>Package:&nbsp;</strong></span>
                            <span class="">{{$account->srvname}}&nbsp;({{$account->downrate}} Download, {{$account->uprate}} Upload)</span>
                        </div>
                        <div class="p-3">
                            <span class=""><strong>Expiration:&nbsp;</strong></span>
                            <span class="">{{date('d-m-Y', strtotime($account->expiration))}}</span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="panel panel-default dashboard-status spl-collapsed-panel"
                id="active_session_panel">
                <div class="panel-heading clickable collapse_title" data-toggle="collapse" data-target="#active_session">
                    <span class="title pull-left">Account Detail</span>
                    <div class="pull-right">
                        <button class="btn btn-primary" type="button" onclick="event.preventDefault();">
                            <span class="">View All</span></button>
                        <button class="close-panel-btn" type="button"><span class="caret"></span></button>
                    </div>
                </div>
                <div class="collapse" id="active_session">                   
                    <div class="list-group mb-0">
                        <div class="list-group-item text-left">
                            <span class="sub_title">Current IP Info</span>
                        </div>

                        <div class="list-group-item mb-0">
                            @foreach($active_sessions as $act)
                            <div class="p-3"><strong>{{ !empty($act)? $act->shortname : '' }}</strong>&nbsp;-&nbsp;
                                <span class="">{{ !empty($act)? $act->nasipaddress: '' }}</span>
                            </div>
                            @endforeach                            
                        </div>             
                    </div>
                </div>
            </div>
            <div class="panel panel-default dashboard-status spl-collapsed-panel"
                id="interface_body_panel">
                <div class="panel-heading clickable collapse_title" data-toggle="collapse" data-target="#interface_body">
                    <span class="title pull-left">Interface Info</span>
                    <div class="pull-right">
                        <button class="btn btn-primary" type="button" onclick="event.preventDefault();">
                            <span class="">View All</span></button>
                        <button class="close-panel-btn" type="button"><span class="caret"></span></button>
                    </div>
                </div>
                <div class="collapse" id="interface_body">                   
                    <div class="list-group mb-0">
                        <div class="list-group-item text-left">
                            <span class="sub_title">Wireless Info</span>
                        </div>
                        <div class="list-group-item mb-0">
                            <span class="p-3"><strong>Access Point:&nbsp;</strong>
                                <span class="">{{ $account->group }}</span>,
                            </span>
                            <span class="p-3"><strong>Ip Address:&nbsp;</strong>
                                <span class="">{{ $account->ip_address }}</span>,
                            </span><br>
                            <span class="p-3"><strong>Signal Point:&nbsp;</strong>
                                <span class=""><span id="signal_strength">0</span></span>,
                            </span>
                            <span class="p-3"><strong>CCQ:&nbsp;</strong>
                                <span class=""><span id="tx_ccq">0</span>/<span id="rx_ccq">0</span></span>
                            </span>
                        </div>
                        <div class="list-group-item text-left">
                            <span class="sub_title">PPTP Client Info</span>
                        </div>

                        <div class="list-group-item mb-0">                            
                            @foreach($pptp as $p)
                            <div class="">
                                <span><b>Name:&nbsp;</b></span>{{$p['name']}},&nbsp;
                                <span><b>Conncet to:&nbsp;</b></span>{{$p['connect-to']}},&nbsp;
                                <span><b>Distance:&nbsp;</b></span>{{isset($p['default-route-distance'])?$p['default-route-distance']:''}},&nbsp;                                
                                <span><b>Status:&nbsp;</b></span>{{isset($p['status'])?$p['status']:'-'}}
                            </div>
                            @endforeach  
                        </div>  

                        <div class="list-group-item text-left">
                            <span class="sub_title">Ethernet Info</span>
                        </div>

                        <div class="list-group-item mb-0">
                            <span class="">
                                <span><b>Latency Sector:&nbsp;</b></span><span id="latency_sector">0</span>,&nbsp;
                                <span><b>Packet losss:&nbsp;</b></span><span id="packet_loss">0</span>%<br>
                                <span><b>Internet Latency:&nbsp;</b></span><span id="internet_latency">0</span>,&nbsp;
                                <span><b>Internet Packet losss:&nbsp;</b></span><span id="internet_packet_loss">0</span>%<br>
                                <span><b>Ethernet Status:&nbsp;</b></span><span id="ethernet_status">-</span>,&nbsp;
                                <span><b>Ethernet rate:&nbsp;</b></span><span id="ethernet_rate">-</span>
                            </span>
                        </div>               
                    </div>
                </div>
            </div>
            <div class="panel panel-default dashboard-status spl-collapsed-panel"
                id="router_detail_body_panel">
                <div class="panel-heading clickable collapse_title" data-toggle="collapse" data-target="#router_detail_body">
                    <span class="title pull-left">Router Details</span>
                    <div class="pull-right">
                        <!-- <button class="btn btn-warning" type="button" onclick="event.preventDefault();">
                            <span class="fa fa-redo btn-lbl">&nbsp;Switch to Prepaid</span></button>
                        <button class="btn btn-success" type="button" onclick="event.preventDefault();">
                            <span class="fa fa-plus btn-lbl">&nbsp;Add</span></button> -->
                        <button class="close-panel-btn" type="button"><span class="caret"></span></button>
                    </div>
                </div>
                <div class="collapse" id="router_detail_body">
                                            
                        <div class="list-group-item mb-0">
                            <span class="">
                                <span><b>System date & time:&nbsp;</b></span><span id="system_date_time">0</span>,&nbsp;
                                <span><b>Uptime:&nbsp;</b></span><span id="uptime">0</span><br>

                                <span><b>Boardname:&nbsp;</b></span><span id="board_name">0</span>,&nbsp;
                                <span><b>Model:&nbsp;</b></span><span id="model">0</span>,&nbsp;
                                <span><b>Router Os:&nbsp;</b></span><span id="router_os">0</span><br>
                                
                                <span><b>CPU load:&nbsp;</b></span><span id="cpu_load">0</span>,&nbsp;
                                <span><b>Free Memory:&nbsp;</b></span><span id="free_memory">0</span>,&nbsp;
                                <span><b>Free HDD:&nbsp;</b></span><span id="free_hdd">0</span>
                            </span>
                        </div>   

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

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <div class="panel panel-default dashboard-status spl-collapsed-panel"
                id="admin_dashboard_data_usage_panel">
                <div class="panel-heading clickable collapse_title" data-toggle="collapse" data-target="#data_usage_body">
                    <span class="title pull-left">Data Usages</span>
                    <div class="pull-right">
                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-secondary active">
                                <input type="radio" name="options" id="daily_opt" autocomplete="off" checked value="day"> Daily
                            </label>
                            <label class="btn btn-secondary">
                                <input type="radio" name="options" id="monthly_opt" autocomplete="off" value="month"> Monthly
                            </label>
                            <label class="btn btn-secondary">
                                <input type="radio" name="options" id="yearly_opt" autocomplete="off" value="year"> Year
                            </label>
                        </div>
                        <button class="close-panel-btn" type="button"><span class="caret"></span></button>
                    </div>
                </div>
                <div class="collapse show" id="data_usage_body">                    
                    <div id="chart_data_usage">
                    </div>                    
                </div>
            </div>
            <div class="panel panel-default dashboard-status spl-collapsed-panel"
                id="admin_dashboard_traffic_panel">
                <div class="panel-heading clickable collapse_title" data-toggle="collapse" data-target="#traffic_body">
                    <span class="title pull-left">Traffic</span>
                    <div class="pull-right">                        
                        <button class="close-panel-btn" type="button"><span class="caret"></span></button>
                    </div>
                </div>
                <div class="collapse show" id="traffic_body">                   
                    <div id="chart_traffic">
                    </div>                    
                </div>
            </div>
        </div>
    </div>    
</div>
@endsection

@push('js')
<script>
var chart;
$(document).ready(function() {
    $('.btn').click(function(event){
       event.stopPropagation();
    });

    Highcharts.setOptions({
        global: {
            useUTC: false
        },
        chart: {
            height: 300,

        },
    });

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

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_traffic',
            animation: Highcharts.svg,
            type: 'areaspline',
            events: {
                load: function() {
                    setInterval(function() {
                        // getSummary();
                        chart.setTitle({
                            text: 'ether1'
                        });
                    }, 1000);
                }
            }
        },
        title: {
            text: '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 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';
                                },

             */
            formatter: function() {

                // var bytes = this.value / 8;                          
                //     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
        },
    });
});
////////////////////////////////////////////////////
$(document).ready(function() {
    getSummary();
})

function getSummary() {
    $.ajax({
        type: 'POST',
        url: '{{route('winbox.get.summary')}}',
        data: {
            _token: '{{csrf_token()}}'
        },
        success: function(traffic) {

            $('#tx').html(traffic.formated_TX + 'kbps');
            $('#rx').html(traffic.formated_RX + 'kbps');
            $('#system_date_time').html(traffic.system_date_time);
            $('#uptime').html(traffic.uptime);
            $('#board_name').html(traffic.board_name);
            $('#model').html(traffic.model);
            $('#router_os').html(traffic.router_os);
            $('#cpu_load').html(traffic.cpu_load + '%');
            $('#free_memory').html(traffic.free_memory);
            $('#free_hdd').html(traffic.free_hdd);

            $('#signal_strength').html(traffic.first_box.signal_strength);
            $('#up_time').html(traffic.first_box.up_time);
            $('#tx_ccq').html(traffic.first_box.tx_ccq);
            $('#rx_ccq').html(traffic.first_box.rx_ccq);
            $('#p_throughput').html(traffic.first_box.p_throughput);
            $('#latency_sector').html(traffic.second_box.latency_sector[0]['time']);
            $('#packet_loss').html(traffic.second_box.latency_sector[0]['packet-loss']);
            $('#internet_latency').html(traffic.second_box.internet_latency[0]['time']);
            $('#internet_packet_loss').html(traffic.second_box.internet_latency[0]['packet-loss']);


            $('#client_router_status').html(traffic.forth_box.client_router_status);
            // $('#client_status_latency_time').html(traffic.forth_box.client_status_latency_time);
            // $('#client_status_latency_packet_loss').html(traffic.forth_box.client_status_latency_packet_loss);

            $('#ethernet_status').html(traffic.third_box.ethernet_status[0]['status']);

            $('#ethernet_rate').html(traffic.third_box.ethernet_status[0]['rate']);

            var TX = parseInt(traffic.TX);
            var RX = parseInt(traffic.RX);
            var x = (new Date()).getTime();
            let _chart = chart;
            shift = _chart.series[0].data.length > 19;
            _chart.series[0].addPoint([x, TX], true, shift);
            _chart.series[1].addPoint([x, RX], true, shift);


            getSummary();

        },
        error: function(error) {
            console.log(error);
        }
    })
}
</script>
<script>
var chart_data_usage;
$(document).ready(function() {
    chart_data_usage = new Highcharts.chart('chart_data_usage', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly DL/UL'
        },
        xAxis: {
            // categories: ['Jan'],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'DL/UL'
            },
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: null
            },
            labels: {
                formatter: function() {
                    var bytes = this.value;
                    var sizes = ['b', 'kb', 'Mb', 'Gb', 'Tb'];
                    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];
                },
            },
        },
        tooltip: {
             formatter: function () {

                    var download = this['points'][0]['y'];
                    var upload = this['points'][1]['y'];

                    var sizes = ['b', 'kb', 'Mb', 'Gb', 'Tb'];
                    if (download == 0) return '0 bps';
                    var i = parseInt(Math.floor(Math.log(download) / Math.log(1024)));
                    var down1 = parseFloat((download / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i];

                    if (upload == 0) return '0 bps';
                    var i = parseInt(Math.floor(Math.log(upload) / Math.log(1024)));
                    var up1 = parseFloat((upload / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i];
                    
                    return '<b>Download/Upload</b><br/>'+ this['x'] + '<br/>'+ down1 + '<br/>' + up1;
                },
            
            // headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            // pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            //     '<td style="padding:0"><b>{point.y:.1f} byte</b></td></tr>',
            // footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Download',
            // data: [49.9]

        }, {
            name: 'Upload',
            // data: [83.6]

        }]
    });
    $('input#daily_opt').change();
});

var year_category = [];
var year_data_dl = [];
var year_data_ul = [];
@foreach($data_usage_by_year as $key => $d)
    year_category.push('{{$key}}');
    year_data_dl.push(parseInt('{{$d->download}}'));
    year_data_ul.push(parseInt('{{$d->upload}}'));
@endforeach

var month_category = [];
var month_data_dl = [];
var month_data_ul = [];
@foreach($data_usage_by_month as $key => $d)
    month_category.push('{{$key}}');
    month_data_dl.push(parseInt('{{!empty($d)?$d->download:0}}'));
    month_data_ul.push(parseInt('{{!empty($d)?$d->upload:0}}'));
@endforeach


var date_category = [];
var date_data_dl = [];
var date_data_ul = [];
@foreach($data_usage_by_date as $key => $d)
    date_category.push('{{$d->datetime}}');
    date_data_dl.push(parseInt('{{$d->download}}'));
    date_data_ul.push(parseInt('{{$d->upload}}'));
@endforeach

$('input[name=options]').change(function(){
    var cat = $('input[name=options]:checked').val();
    var date = new Date(), y = date.getFullYear(), m = date.getMonth();
    var firstDay = new Date(y, m, 1).getDate();
    var lastDay = new Date(y, m + 1, 0).getDate();
    var arr1 = [];
    for (var i = 1 ; i<= lastDay; i++) {
        arr1.push(i);
    }

    switch (cat){
        case 'day' :
            $('#daily_opt').parent().addClass('active');
            $('#monthly_opt').parent().removeClass('active');
            $('#yearly_opt').parent().removeClass('active');
            chart_data_usage.setTitle({ text: 'Daily data usage'});
            chart_data_usage.xAxis[0].setCategories(date_category);
            chart_data_usage.series[0].setData(date_data_dl);
            chart_data_usage.series[1].setData(date_data_ul);
            break;
        case 'month' :
            $('#monthly_opt').parent().addClass('active');
            $('#daily_opt').parent().removeClass('active');
            $('#yearly_opt').parent().removeClass('active');
            chart_data_usage.setTitle({ text: 'Monthly data usage'});
            chart_data_usage.xAxis[0].setCategories(month_category);
            chart_data_usage.series[0].setData(month_data_dl);
            chart_data_usage.series[1].setData(month_data_ul);
            break;
        case 'year' :
            $('#yearly_opt').parent().addClass('active');
            $('#monthly_opt').parent().removeClass('active');
            $('#daily_opt').parent().removeClass('active');
            chart_data_usage.setTitle({ text: 'Yearly data usage'});
            chart_data_usage.xAxis[0].setCategories(year_category);
            chart_data_usage.series[0].setData(year_data_dl);
            chart_data_usage.series[1].setData(year_data_ul);
            break;
    }


})

</script>
@endpush