@section('title', __('radio.menu_item_3'))
@section('head')
    <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker.css"/>
    <link rel="stylesheet" href="/assets/js/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
	@if(Config::get('constants.IS_APP'))
	<style>
		.sFb{
			flex-basis:100%;
			border:1px solid #b5b5b5;
		}
	</style>
	@endif
@endsection
@include('includes/header')
@include('includes/topRadio')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('radio.menu_item_3') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.home.r') }}">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.menu_item_3') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="block block-rounded">
                <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}" role="presentation">
                        <a href="{{ route('radio.statistics.r') }}" class="nav-link {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.stats_tab_now') }} ({{ $totalListen }})</a>
                    </li>
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}" role="presentation">
                        <a href="{{ route('radio.statistics.r.type','history') }}" class="nav-link {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.stats_tab_history') }}</a>
                    </li>
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}" role="presentation">
                        <a href="{{ route('radio.statistics.r.type','average') }}" class="nav-link active {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.stats_tab_average') }}</a>
                    </li>
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}" role="presentation">
                        <a href="{{ route('radio.statistics.r.type','locations') }}" class="nav-link {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.stats_tab_locations') }}</a>
                    </li>
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}" role="presentation">
                        <a href="{{ route('radio.statistics.r.type','sources') }}" class="nav-link {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.stats_tab_sources') }}</a>
                    </li>
                </ul>
                <div class="block-content p-0">

                    <div class="d-flex mt-2 ms-3 me-2 mb-4 align-items-end">
                        <div style="width: 250px">
                            <label class="form-label" for="example-select">@if($period == 'custom')
                                    {{ __('radio.stats_type') }}
                                @else
                                    {{ __('radio.stats_period') }}
                                @endif</label>
                            <select class="form-select" id="period" name="period">
                                <option value="today" {{ ($period == 'today' ? 'selected' : '') }}>{{ __('radio.stats_period_today') }}</option>
                                <option value="yesterday" {{ (!$period || $period == 'yesterday' ? 'selected' : '') }}>
                                    {{ __('radio.stats_period_yesterday') }}
                                </option>
                                <option value="week" {{ ($period == 'week' ? 'selected' : '') }}>{{ __('radio.stats_period_week') }}</option>
                                <option value="month" {{ ($period == 'month' ? 'selected' : '') }}>{{ __('radio.stats_period_month') }}</option>
                                <option value="year" {{ ($period == 'year' ? 'selected' : '') }}>{{ __('radio.stats_period_year') }}</option>
                                <option value="date" {{ ($period == 'date' ? 'selected' : '') }}>{{ __('radio.stats_period_date') }}
                                </option>
                                <option value="custom" {{ ($period == 'custom' ? 'selected' : '') }}>{{ __('radio.stats_period_custom') }}
                                </option>
                            </select>
                        </div>
                        @if($period == 'custom')
                            <div class="ms-3">
                                <label class="form-label" for="start">{{ __('radio.stats_select_period') }}</label>
                                @php
                                    $finalRange = '';
                                        if($range){
                                           $expRange = explode('|',$range);
                                           $finalRange = str_replace('-','/',$expRange[0]).' - '.str_replace('-','/',$expRange[1]);
                                        }
                                @endphp
                                <input type="text" class="form-control" id="start" name="start"
                                       value="{{ ($finalRange ? $finalRange : '') }}" autocomplete="off">
                            </div>

                        @elseif($period == 'date')
                            <div class="ms-3">
                                <label class="form-label" for="start">{{ __('radio.stats_date') }}</label>
                                <input type="text" class="form-control" id="date" name="date" @if($range) value="{{ str_replace('-','/',$range) }}" @endif placeholder="{{ __('radio.stats_select_date') }}">
                            </div>
                        @endif
                    </div>

                    <div class="bg-primary-dark mb-3">
                        <div class="content content-full text-center pt-2 pb-2">
                            <h1 class="h3 text-white mb-2">
                                {{ $titleH1 }}
                            </h1>
                            <h2 class="h5 fw-normal text-white-75 mb-0">
                                {{ ($period == 'custom' && !$range ? __('radio.stats_select_period') :
                                ($period == 'custom' && $range ? str_replace('-','/',str_replace('DATE2',$expRange[1],str_replace('DATE1',$expRange[0],$titleH2))) :
                                ($period == 'date' && !$range ? __('radio.stats_select_date'): ($period == 'date' && $range ? str_replace('-','/',str_replace('DATE',$range,$titleH2)) : $titleH2)))) }}
                            </h2>
                        </div>
                    </div>

                    <div id="graph_average"></div>

                </div>
            </div>

        </div>
    </div>


</div>

</div>

</main>


@include('includes/footer')

</div>

<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script> var LNG_viewFullscreen = 'Tela cheia';
    var LNG_exitFullscreen = 'Sair da Tela cheia';
    var LNG_printChart = 'Imprimir';
    var LNG_downloadJPG = 'Baixar em JPG';
    var LNG_downloadPDF = 'Baixar em PDF'; </script>
<script src="/assets/js/pages/graph/highcharts.js"></script>
<script src="/assets/js/pages/graph/highcharts-3d.js"></script>
<script src="/assets/js/pages/graph/exporting.js"></script>
<script src="/assets/js/pages/graph/no-data-to-display.js"></script>
<script src="/assets/js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="/assets/js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.pt-BR.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/assets/js/pages/graph/moment.min.js"></script>
<script type="text/javascript" src="/assets/js/pages/graph/daterangepicker.js"></script>

<script type="text/javascript">
    $(function () {

        function timeConverter(timest) {
            var timestamp = moment(timest);
            var time = timestamp.format("DD-MM-YYYY");
            return time;
        }


        var toHHMMSS = (secs,sigle) => {
            var sec_num = parseInt(secs, 10)
            var hours   = Math.floor(sec_num / 3600)+(sigle ? 'h' : '')
            var minutes = Math.floor(sec_num / 60) % 60+(sigle ? 'm' : '')
            var seconds = sec_num % 60+(sigle ? 's' : '')

            return [hours,minutes,seconds]
                .map(v => parseInt(v) < 10 ? "0" + v : v)
                .filter((v,i) => v !== "00" || i > 0)
                .join((sigle ? ' ' : ':'))
        }

        @if($period == 'custom')
        $('#start').daterangepicker({
                locale: {
                    format: 'DD/MM/YYYY',
                    "separator": " - ",
                    "applyLabel": "Aplicar",
                    "cancelLabel": "Cancelar",
                    "fromLabel": "De",
                    "toLabel": "Até",
                    "customRangeLabel": "Customizado",
                    "daysOfWeek": [
                        "Dom",
                        "Seg",
                        "Ter",
                        "Qua",
                        "Qui",
                        "Sex",
                        "Sab"
                    ],
                    "monthNames": [
                        "Janeiro",
                        "Fevereiro",
                        "Março",
                        "Abril",
                        "Maio",
                        "Junho",
                        "Julho",
                        "Agosto",
                        "Setembro",
                        "Outubro",
                        "Novembro",
                        "Dezembro"
                    ]
                },
                minDate: '01/01/{{ date('Y', strtotime('-1 year')) }}',
                maxDate: '{{ date('d/m/Y') }}',

            },
            function (start, end, label) {
                if (start && end) {
                    var dateStart = timeConverter(start);
                    var dateEnd = timeConverter(end);
                    location.href = '{{ route('radio.statistics.r.type',['average','custom']) }}/' + dateStart + '|' + dateEnd;
                }
            });

        @elseif($period == 'date')
        $('#date').datepicker({
            autoclose: true,
            startDate: '01/01/{{ date('Y', strtotime('-2 year')) }}',
            endDate: '{{ date('d/m/Y') }}',
            format: 'dd/mm/yyyy',
            language: 'pt-BR'
        }).on('changeDate', function(e) {
            location.href = '{{ route('radio.statistics.r.type',['average','date']) }}/' + e.format(0,"dd-mm-yyyy");
        });
        @endif
        $("#period").change(function () {
            location.href = '{{ route('radio.statistics.r.type','average') }}/' + this.value;
        });


        var chart;
        $(document).ready(function () {
            @if(!$period || $period == 'yesterday')
                chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graph_average',
                    type: 'areaspline'
                },
                lang: {noData: 'Nenhum resultado'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {text: null},
                xAxis: {
                    categories: [
                        @php
                            for($i=0;$i<=23;$i++){
                            echo '"'.($i < 10 ? '0'.$i.':00' : $i.':00').'",';
                        }
                        @endphp
                    ],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function() {
                            return toHHMMSS(this.value);
                        }
                    }
                },
                tooltip: {
                    formatter: function() {
                        return ''+toHHMMSS(this.y,'1')+'';
                    }
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        cursor: 'pointer',
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666',
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'Tempo médio de conexão',
                    data: [

                        @php
                            for($i=0;$i<=23;$i++){
                             $iP = $i+1;

                             $totalTime = DB::select("SELECT count(connected_time) as total, AVG(connected_time) as total_time FROM statistics WHERE port = '".$siteData->stream_port."' AND date = '".date('Y-m-d', strtotime("-1 days"))."' AND HOUR(time) = '".($i < 10 ? '0'.$i : $i)."'");
                             $media = ($totalTime[0]->total > 0) ?  $totalTime[0]->total_time : '0';

                             echo "".$media.",";
                              echo "\n";

                              }
                        @endphp
                    ],
                    color: Highcharts.getOptions().colors[1],
                    lineColor: Highcharts.getOptions().colors[1]
                }]
            });
            @elseif($period == 'today')
                chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graph_average',
                    type: 'areaspline'
                },
                lang: {noData: 'Nenhum resultado'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {text: null},
                xAxis: {
                    categories: [
                        @php
                            for($i=0;$i<=23;$i++){
                            echo '"'.($i < 10 ? '0'.$i.':00' : $i.':00').'",';
                        }
                        @endphp
                    ],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function() {
                            return toHHMMSS(this.value);
                        }
                    }
                },
                tooltip: {
                    formatter: function() {
                        return ''+toHHMMSS(this.y,'1')+'';
                    }
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        cursor: 'pointer',
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666',
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'Tempo médio de conexão',
                    data: [

                        @php
                            for($i=0;$i<=23;$i++){
                             $iP = $i+1;

                             $totalTime = DB::select("SELECT count(connected_time) as total, AVG(connected_time) as total_time FROM statistics WHERE port = '".$siteData->stream_port."' AND date = '".date('Y-m-d')."' AND HOUR(time) = '".($i < 10 ? '0'.$i : $i)."'");
                             $media = ($totalTime[0]->total > 0) ?  $totalTime[0]->total_time : '0';

                             echo "".$media.",";
                              echo "\n";

                              }
                        @endphp
                    ],
                    color: Highcharts.getOptions().colors[1],
                    lineColor: Highcharts.getOptions().colors[1]
                }]
            });
            @elseif($period == 'week')
                chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graph_average',
                    type: 'areaspline'
                },
                lang: {noData: 'Nenhum resultado'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {text: null},
                xAxis: {
                    categories: [
                        @php
                            $arrWeekDays = array('0' => 'Domingo','1' => 'Segunda','2' => 'Terça','3' => 'Quarta','4' => 'Quinta','5' => 'Sexta','6' => 'Sábado');
                            for($i=0;$i<7;$i++){
                            echo "'".$arrWeekDays[$i]."',";
                        }
                        @endphp
                    ],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function() {
                            return toHHMMSS(this.value);
                        }
                    }
                },
                tooltip: {
                    formatter: function() {
                        return ''+toHHMMSS(this.y,'1')+'';
                    }
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        cursor: 'pointer',
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666',
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'Tempo médio de conexão',
                    data: [

                        @php
                            for($i=6;$i>=0;$i--){
                            $finalDate = date('Y-m-d', strtotime('Saturday-'. $i . ' days'));

                            $totalTime = DB::select("SELECT count(connected_time) as total, AVG(connected_time) as total_time FROM statistics WHERE port = '".$siteData->stream_port."' AND date = '".$finalDate."'");
                            $media = ($totalTime[0]->total > 0) ?  $totalTime[0]->total_time : '0';

                             echo "".$media.",";
                             echo "\n";

                             }
                        @endphp
                    ],
                    color: Highcharts.getOptions().colors[1],
                    lineColor: Highcharts.getOptions().colors[1]
                }]
            });
            @elseif($period == 'month')
                chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graph_average',
                    type: 'areaspline'
                },
                lang: {noData: 'Nenhum resultado'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {text: null},
                xAxis: {
                    categories: [
                        @php
                            $days = '';
                                $array_dias_meses = array("01" => "31", "02" => "28", "03" => "31", "04" => "30", "05" => "31", "06" => "30", "07" => "31", "08" => "31", "09" => "30", "10" => "31", "11" => "30", "12" => "31");

                                                             for($i=1;$i<=$array_dias_meses[date('m')];$i++){

                                                             $days .= '"'.sprintf("%02s",$i).'/'.date('m').'",';

                                                             }
                                                             $finalDay = substr($days, 0, -1);
                                                             echo $finalDay;
                        @endphp
                    ],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function() {
                            return toHHMMSS(this.value);
                        }
                    }
                },
                tooltip: {
                    formatter: function() {
                        return ''+toHHMMSS(this.y,'1')+'';
                    }
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        cursor: 'pointer',
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666',
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'Tempo médio de conexão',
                    data: [

                        @php
                            for($i=1;$i<=$array_dias_meses["".date('m').""];$i++){

                                                       $day = sprintf("%02s",$i);

                                                       $date = date('Y')."-".date('m')."-".$day;

                                                       $totalTime = DB::select("SELECT count(id) as total, AVG(connected_time) as total_time FROM statistics WHERE port = '".$siteData->stream_port."' AND date = '".$date."'");

                                                      $media = ($totalTime[0]->total > 0) ?  $totalTime[0]->total_time : '0';

                                                     echo "".$media.",";
                                                     echo "\n";

                                                       }

                        @endphp
                    ],
                    color: Highcharts.getOptions().colors[1],
                    lineColor: Highcharts.getOptions().colors[1]
                }]
            });
            @elseif($period == 'year')
                chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graph_average',
                    type: 'areaspline'
                },
                lang: {noData: 'Nenhum resultado'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {text: null},
                xAxis: {
                    categories: [
                        'Jan/{{ date('Y') }}', 'Fev/{{ date('Y') }}', 'Mar/{{ date('Y') }}', 'Abr/{{ date('Y') }}', 'Mai/{{ date('Y') }}', 'Jun/{{ date('Y') }}', 'Jul/{{ date('Y') }}', 'Ago/{{ date('Y') }}',
                        'Set/{{ date('Y') }}', 'Out/{{ date('Y') }}', 'Nov/{{ date('Y') }}', 'Dez/{{ date('Y') }}'
                    ],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function() {
                            return toHHMMSS(this.value);
                        }
                    }
                },
                tooltip: {
                    formatter: function() {
                        return ''+toHHMMSS(this.y,'1')+'';
                    }
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        cursor: 'pointer',
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666',
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'Tempo médio de conexão',
                    data: [

                        @php

                            $arrayMonths = array("01","02","03","04","05","06","07","08","09","10","11","12");
                            $finalTotal = '';
                                                        foreach($arrayMonths as $montYear) {

                                                        $montYear = sprintf("%02s",$montYear);
                                                        $totalTime = DB::select("SELECT count(id) as total, AVG(connected_time) as total_time FROM statistics WHERE port = '".$siteData->stream_port."' AND YEAR(date) = '".date('Y')."' AND MONTH(date) = '".$montYear."'");

                                                        $finalTotal .= ($totalTime[0]->total_time ? $totalTime[0]->total_time : '0').",";

                                                        }
                                                        echo substr($finalTotal, 0, -1);


                        @endphp
                    ],
                    color: Highcharts.getOptions().colors[1],
                    lineColor: Highcharts.getOptions().colors[1]
                }]
            });
            @elseif($period == 'date')
                @php
                    if($range){
                        $expRange = explode('-',$range);
                        $finalRange = $expRange[2].'-'.$expRange[1].'-'.$expRange[0];
                        }
                @endphp
                chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graph_average',
                    type: 'areaspline'
                },
                lang: {noData: '{{ ($range ? 'Sem dados disponíveis' :'Selecione a data acima') }}'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {text: null},
                xAxis: {
                    categories: [
                        @php
                            for($i=0;$i<=23;$i++){
                            echo '"'.($i < 10 ? '0'.$i.':00' : $i.':00').'",';
                        }
                        @endphp
                    ],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function() {
                            return toHHMMSS(this.value);
                        }
                    }
                },
                tooltip: {
                    formatter: function() {
                        return ''+toHHMMSS(this.y,'1')+'';
                    }
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        cursor: 'pointer',
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666',
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'Tempo médio de conexão',
                    data: [

                        @php
                            if($range){
                                for($i=0;$i<=23;$i++){
                                 $iP = $i+1;
                                 $totalTime = DB::select("SELECT count(connected_time) as total, AVG(connected_time) as total_time FROM statistics WHERE port = '".$siteData->stream_port."' AND date = '".$finalRange."' AND HOUR(time) = '".($i < 10 ? '0'.$i : $i)."'");
                                 $media = ($totalTime[0]->total > 0) ?  $totalTime[0]->total_time : '0';

                                 echo "".($media ? $media : '0').",";
                                 echo "\n";
                                }

                                }
                        @endphp
                    ],
                    color: Highcharts.getOptions().colors[1],
                    lineColor: Highcharts.getOptions().colors[1]
                }]
            });
            @elseif($period == 'custom')

                @php
                    if($range){
                            setlocale(LC_ALL, 'pt_BR');
                            $expRange = explode('|',$range);
                            $expEnd = explode('-',$expRange[1]);
                            $expStart = explode('-',$expRange[0]);
                            $theEnd = $expEnd[2].'-'.$expEnd[1].'-'.$expEnd[0];
                            $theStart = $expStart[2].'-'.$expStart[1].'-'.$expStart[0];
                            $qnt = (strtotime($theEnd) - strtotime($theStart)) / 86400;
                            $month = round($qnt / 30); $qnt = $month + 1;
                            }
                @endphp

                chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graph_average',
                    type: 'areaspline'
                },
                lang: {noData: '{{ ($range ? 'Sem dados disponíveis' :'Selecione o período acima') }}'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {text: null},
                xAxis: {
                    categories: [
                        @php
                            \Carbon\Carbon::setLocale('fr');

                            if($range){
                                $day = date('Y-m', strtotime($expRange[1]));
                                    $response = '';
                                               for($i=0;$i<$qnt ;$i++) {
                                                   $data = date('Y-m', strtotime("-".(($qnt - 1) - $i)." months", strtotime($day)));
                                                   $response .=  "'".date('M/Y', strtotime("-".(($qnt - 1) - $i)." months", strtotime($day)))."',";
                                                   $final = DB::select("SELECT * FROM statistics WHERE port = '".$siteData->stream_port."' AND date >= '".$data."-01' AND date <= '".$data."-31'");
                                                }
                                               echo $response;
                                               }
                        @endphp
                    ],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function() {
                            return toHHMMSS(this.value);
                        }
                    }
                },
                tooltip: {
                    formatter: function() {
                        return ''+toHHMMSS(this.y,'1')+'';
                    }
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        cursor: 'pointer',
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666',
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'Tempo médio de conexão',
                    data: [
                        @php
                            if($range){
                                $day = date('Y-m', strtotime($expRange[1]));
                                $response = '';
                                    for($i=0;$i<$qnt ;$i++) {
                                        $data = date('Y-m', strtotime("-".(($qnt - 1) - $i)." months", strtotime($day)));
                                        $response .=  date('m/Y', strtotime("-".(($qnt - 1) - $i)." months", strtotime($day))).',';
                                        $final = DB::select("SELECT count(connected_time) as total, AVG(connected_time) as total_time FROM statistics WHERE port = '".$siteData->stream_port."' AND date >= '".$data."-01' AND date <= '".$data."-31'");
                                        echo ($final[0]->total_time ? $final[0]->total_time : '0').',';
                                     }
                            }
                        @endphp
                    ],
                    color: Highcharts.getOptions().colors[1],
                    lineColor: Highcharts.getOptions().colors[1]
                }]
            });

            @endif

        });

    });
</script>
</body>
</html>