@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 active  {{ (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  {{ (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 ? 'Selecione o período' :
                                ($period == 'custom' && $range ? str_replace('-','/',str_replace('DATE2',$expRange[1],str_replace('DATE1',$expRange[0],$titleH2))) :
                                ($period == 'date' && !$range ? 'Selecione a data': ($period == 'date' && $range ? str_replace('-','/',str_replace('DATE',$range,$titleH2)) : $titleH2)))) }}
                            </h2>
                        </div>
                    </div>

                    <div id="graph_history"></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;
        }

		
		
        @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',['history','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',['history','date']) }}/' + e.format(0,"dd-mm-yyyy");
        });
         @endif
        $("#period").change(function () {
            location.href = '{{ route('radio.statistics.r.type','history') }}/' + this.value;
        });


        var chart;
        $(document).ready(function () {
            @if(!$period || $period == 'yesterday')
                chart = new Highcharts.Chart({
                chart: {renderTo: 'graph_history', type: 'column', height: 300},
                credits: {enabled: false},
                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
                    ], crosshair: true
                }],
                yAxis: [
                    {
                        title: {text: null, style: {color: Highcharts.getOptions().colors[1]}},
                        labels: {style: {color: Highcharts.getOptions().colors[1]}},
                    },
                ],
                tooltip: {shared: true},
                dataLabels: {
                    labelFormatter: function () {
                        return " " + this.name + " (" + this.y + ")  </span>"
                    }
                },
                series: [
                    {
                        showInLegend: false,
                        name: 'Total sessões',
                        data: [
                            @php
                                for($i=0;$i<=23;$i++){
                                 $iP = $i+1;
                                $sumFinal = DB::table('statistics')->where('port','=',$siteData->stream_port)->where('date','=',date('Y-m-d', strtotime("-1 days")))
                                ->whereTime('time', '>=', ($i < 10 ? '0'.$i.':00:00' : $i.':00:00'))->whereTime('time', '<=', ($iP < 10 ? '0'.$iP.':00:00' : $iP.':00:00'))->get()->count();

                                                             echo "['".($i < 10 ? '0'.$i.':00' : $i.':00')."', ".$sumFinal."],";
                                                            echo "\n";

                                                            }
                            @endphp
                        ],
                        color: Highcharts.getOptions().colors[1],
                    },
                ],
            });

            @elseif($period == 'today')
                chart = new Highcharts.Chart({
                chart: {renderTo: 'graph_history', type: 'column', height: 300},
                credits: {enabled: false},
                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
                    ], crosshair: true
                }],
                yAxis: [
                    {
                        title: {text: null, style: {color: Highcharts.getOptions().colors[1]}},
                        labels: {style: {color: Highcharts.getOptions().colors[1]}},
                    },
                ],
                tooltip: {shared: true},
                dataLabels: {
                    labelFormatter: function () {
                        return " " + this.name + " (" + this.y + ")  </span>"
                    }
                },
                series: [
                    {
                        showInLegend: false,
                        name: 'Total sessões',
                        data: [
                            @php
                                for($i=0;$i<=23;$i++){
                                 $iP = $i+1;
                                $sumFinal = DB::table('statistics')->where('port','=',$siteData->stream_port)->where('date','=',date('Y-m-d'))
                                ->whereTime('time', '>=', ($i < 10 ? '0'.$i.':00:00' : $i.':00:00'))->whereTime('time', '<=', ($iP < 10 ? '0'.$iP.':00:00' : $iP.':00:00'))->get()->count();

                                                             echo "['".($i < 10 ? '0'.$i.':00' : $i.':00')."', ".$sumFinal."],";
                                                            echo "\n";

                                                            }
                            @endphp
                        ],
                        color: Highcharts.getOptions().colors[1],
                    },
                ],
            });
            @elseif($period == 'week')
                chart = new Highcharts.Chart({
                chart: {renderTo: 'graph_history', type: 'column', height: 300},
                credits: {enabled: false},
                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
                    ], crosshair: true
                }],
                yAxis: [
                    {
                        title: {text: null, style: {color: Highcharts.getOptions().colors[1]}},
                        labels: {style: {color: Highcharts.getOptions().colors[1]}},
                    },
                ],
                tooltip: {shared: true},
                dataLabels: {
                    labelFormatter: function () {
                        return " " + this.name + " (" + this.y + ")  </span>"
                    }
                },
                series: [
                    {
                        showInLegend: false,
                        name: 'Total sessões',
                        data: [
                            @php
                                for($i=6;$i>=0;$i--){
                                $finalDate = date('Y-m-d', strtotime('Saturday-'. $i . ' days'));
                                $sumFinal = DB::table('statistics')->where('port','=',$siteData->stream_port)->where('date','=',$finalDate)
                                ->get()->count();

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

                                                            }
                            @endphp
                        ],
                        color: Highcharts.getOptions().colors[1],
                    },
                ],
            });

            @elseif($period == 'month')
                chart = new Highcharts.Chart({
                chart: {renderTo: 'graph_history', type: 'column', height: 300},
                credits: {enabled: false},
                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
                    ], crosshair: true
                }],
                yAxis: [
                    {
                        title: {text: null, style: {color: Highcharts.getOptions().colors[1]}},
                        labels: {style: {color: Highcharts.getOptions().colors[1]}},
                    },
                ],
                tooltip: {shared: true},
                dataLabels: {
                    labelFormatter: function () {
                        return " " + this.name + " (" + this.y + ")  </span>"
                    }
                },
                series: [
                    {
                        showInLegend: false,
                        name: 'Total sessões',
                        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, SUM(connected_time) as total_time FROM statistics WHERE port = '".$siteData->stream_port."' AND date = '".$date."'");

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

                                                           //echo date('i',mktime(0,0,$media,15,03,2013)).",";
                                                           echo $totalTime[0]->total.",";
                                                           echo "\n";

                                                           }

                            @endphp
                        ],
                        color: Highcharts.getOptions().colors[1],
                    },
                ],
            });

            @elseif($period == 'year')
                chart = new Highcharts.Chart({
                chart: {renderTo: 'graph_history', type: 'column', height: 300},
                credits: {enabled: false},
                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') }}'
                    ], crosshair: true
                }],
                yAxis: [
                    {
                        title: {text: null, style: {color: Highcharts.getOptions().colors[1]}},
                        labels: {style: {color: Highcharts.getOptions().colors[1]}},
                    },
                ],
                tooltip: {shared: true},
                dataLabels: {
                    labelFormatter: function () {
                        return " " + this.name + " (" + this.y + ")  </span>"
                    }
                },
                series: [
                    {
                        showInLegend: false,
                        name: 'Total sessões',
                        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);
                                                             $sumFinal = DB::select("SELECT count(id) as total,port,date FROM statistics WHERE port = '".$siteData->stream_port."' AND YEAR(date) = '".date('Y')."' AND MONTH(date) = '".$montYear."'");

                                                            $finalTotal .= $sumFinal[0]->total.",";

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


                            @endphp
                        ],
                        color: 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_history', type: 'column', height: 300},
                credits: {enabled: false},
                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
                    ], crosshair: true
                }],
                yAxis: [
                    {
                        title: {text: null, style: {color: Highcharts.getOptions().colors[1]}},
                        labels: {style: {color: Highcharts.getOptions().colors[1]}},
                    },
                ],
                tooltip: {shared: true},
                dataLabels: {
                    labelFormatter: function () {
                        return " " + this.name + " (" + this.y + ")  </span>"
                    }
                },
                series: [
                    {
                        showInLegend: false,
                        name: 'Total sessões',
                        data: [
                            @php
                                if($range){
                                    for($i=0;$i<=23;$i++){
                                     $iP = $i+1;
                                    $sumFinal = DB::table('statistics')->where('port','=',$siteData->stream_port)->where('date','=',$finalRange)
                                    ->whereTime('time', '>=', ($i < 10 ? '0'.$i.':00:00' : $i.':00:00'))->whereTime('time', '<=', ($iP < 10 ? '0'.$iP.':00:00' : $iP.':00:00'))->get()->count();

                                                                 echo "['".($i < 10 ? '0'.$i.':00' : $i.':00')."', ".$sumFinal."],";
                                                                echo "\n";

                                                                }
                                    }
                            @endphp
                        ],
                        color: 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_history', type: 'column', height: 300},
                credits: {enabled: false},
                lang: {noData: '{{ ($range ? 'Sem dados disponíveis' :'Selecione o período acima') }}'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#000000'}},
                title: {text: null},
                xAxis: [{
                    categories: [
                        @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)))."',";
                                                   $a_date = $data;
                                                   $lastDay = date("t", strtotime($a_date));
                                                   $final = DB::select("SELECT * FROM statistics WHERE port = '".$siteData->stream_port."' AND date >= '".$data."' AND date <= '".$data."-".$lastDay."'");
                                                }
                                               echo $response;
                                               }
                        @endphp
                    ], crosshair: true
                }],
                yAxis: [
                    {
                        title: {text: null, style: {color: Highcharts.getOptions().colors[1]}},
                        labels: {style: {color: Highcharts.getOptions().colors[1]}},
                    },
                ],
                tooltip: {shared: true},
                dataLabels: {
                    labelFormatter: function () {
                        return " " + this.name + " (" + this.y + ")  </span>"
                    }
                },
                series: [
                    {
                        showInLegend: false,
                        name: 'Total sessões',
                        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))).',';
                                            $a_date = $data."-01";
                                            $lastDay = date("t", strtotime($a_date));
                                            $final = DB::select("SELECT count(id) as total FROM statistics WHERE port = '".$siteData->stream_port."' AND date >= '".$data."-01' AND date <= '".$data."-".$lastDay."'");
                                            echo $final[0]->total.',';
                                         }
                                }
                            @endphp
                        ],
                        color: Highcharts.getOptions().colors[1],
                    },
                ],

            });
            @endif

        });

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