@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">
    <style>
        rect{
            display: none!important;
        }
    </style>
	@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 {{ (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 active {{ (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="d-flex mt-2 ms-2 me-2 mb-3 align-items-end">

                    <div class="ms-2" style="width: 250px">
                        <label class="form-label" for="start">{{ __('radio.stats_period') }}</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-smooth-dark mb-0">
                    <div class="content content-full text-center pt-2 pb-2">
                        <h1 class="h3 text-white mb-2">
                            {{ __('radio.stats_tab_locations') }}
                        </h1>
                        <h2 class="h5 fw-normal text-white-75 mb-0">
                            {{ ($period == 'custom' && !$range ? 'Período personalizado' : ($period == 'custom' && $range ? str_replace('-','/',str_replace('DATE2',$expRange[1],str_replace('DATE1',$expRange[0],$titleH1))) :
                                ($period == 'date' && !$range ? 'Data específica' :($period == 'date' && $range ? str_replace('-','/',str_replace('DATE',$range,$titleH1)) : $titleH1)))) }}
                        </h2>
                    </div>
                </div>

                <div class="block block-themed">
                    <div class="block-header bg-smooth-dark text-center">
                        <h3 class="block-title">{{ __('radio.stats_total_sessions_country') }}</h3>
                    </div>
                    <div class="block-content p-0">
                        <div id="country_graph"></div>
                    </div>
                </div>
                <div class="block block-themed">
                    <div class="block-header bg-smooth-dark text-center">
                        <h3 class="block-title">{{ __('radio.stats_total_sessions_state') }}</h3>
                    </div>
                    <div class="block-content p-0">
                        <div id="state_graph"></div>
                    </div>
                </div>
                <div class="block block-themed">
                    <div class="block-header bg-smooth-dark text-center">
                        <h3 class="block-title">{{ __('radio.stats_total_sessions_city') }}</h3>
                    </div>
                    <div class="block-content p-0">
                        <div id="city_graph"></div>
                    </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 () {

        $("#period").change(function () {
            location.href = '{{ route('radio.statistics.r.type','locations') }}/' + this.value;
        });


        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('-2 years')) }}',
                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',['locations','custom']) }}/' + dateStart + '|' + dateEnd;
                }
            });

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

        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'country_graph',
                    type: 'pie'
                },
                lang: {noData: '{{ ($period == 'date' && !$range ? 'Selecione uma data acima' : ($period == 'date' && $range ? 'Sem dados disponíveis' :
                                ($period == 'custom' && !$range ? 'Selecione um período acima' : ($period == 'custom' && $range ? 'Sem dados disponíveis' : 'Sem dados disponíveis')))) }}'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {
                    text: '&nbsp;'
                },
                tooltip: {
                    formatter: function() {
                        console.log(this);
                        return '<b>'+ this.point.name +'</b>: '+(this.y == '1' ? this.y+' sessão' : this.y+' sessões')+' </br><b>Porcentagem:</b> '+ Highcharts.numberFormat(this.percentage, 0, ',') +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true
                        },
                        showInLegend: true
                    }
                },
                legend: {
                    useHTML: true,
                    maxHeight: 1024,
                    labelFormatter: function () {
                        return "<span style='font-size: 16px;'> " + this.name + " ("+this.y+")"+ " </span>"
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Ouvintes por Países',
                    data: [
                        @php
                            foreach($arrCountries as $country){
                               if($country->total >= 1) {
                                echo "['<img style=\"border: 1px solid #dddddd; width:20px\" src=\"/assets/img/flags/".strtolower($country->country_code).".svg\"> ".$country->country."', ".$country->total."],";
                                echo "\n";
                                }
                            }
                        @endphp
                    ],dataLabels: {
                        useHTML: false
                    },
                    animation: true
                }]
            });
        });

    });

    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'state_graph',
                    type: 'pie',
					//height: 2400
                },
                lang: {noData: '{{ ($period == 'date' && !$range ? 'Selecione uma data acima' : ($period == 'date' && $range ? 'Sem dados disponíveis' :
                                ($period == 'custom' && !$range ? 'Selecione um período acima' : ($period == 'custom' && $range ? 'Sem dados disponíveis' : 'Sem dados disponíveis')))) }}'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {
                    text: '&nbsp;'
                },
                tooltip: {
                    formatter: function() {
                        var finalStateHTM = this.point.name.replace(/<[^>]*>?/gm, '');
                        var finalState = finalStateHTM.split("-");
                        return '<b>'+ finalState[0].slice(0, -1) +':</b> '+ (this.y == '1' ? this.y+' sessão' : this.y+' sessões') +' </br> <b>País:</b> '+finalState[1]+'</br> <b>Porcentagem:</b> '+Highcharts.numberFormat(this.percentage, 0, ',') +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true
                        },
                        showInLegend: true,
                    }
                },
                legend: {
                    useHTML: true,
                    maxHeight: 1024,
                    labelFormatter: function () {
                        return "<span style=' font-size: 15px;'> " + this.name +  " ("+this.y+")  </span>"
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Ouvintes por Estados',
					
                    data: [
                        @php
                            foreach($arrStates as $state){
                               if($state->total >= 1) {
                                echo "['<img style=\"border: 1px solid #dddddd; height: 18px;vertical-align: sub;\" src=\"/assets/img/flags/".strtolower($state->country_code).".svg\"> ".$state->state.' - '.$state->country_code."', ".$state->total."],";
                                echo "\n";
                                }
                            }
                        @endphp
                    ],
					
                    dataLabels: {
                        formatter: function () {
                            var finalStateHTM = this.point.name.replace(/<[^>]*>?/gm, '');
                            var finalState = finalStateHTM.split("-");
                            return finalState[0];
                        }
                    }
                }]
            });
        });

    });

    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'city_graph',
                    type: 'pie'
                },
                lang: {noData: '{{ ($period == 'date' && !$range ? 'Selecione uma data acima' : ($period == 'date' && $range ? 'Sem dados disponíveis' :
                                ($period == 'custom' && !$range ? 'Selecione um período acima' : ($period == 'custom' && $range ? 'Sem dados disponíveis' : 'Sem dados disponíveis')))) }}'},
                noData: {style: {fontWeight: 'bold', fontSize: '15px', color: '#303030'}},
                title: {
                    text: '&nbsp;'
                },
                tooltip: {
                    formatter: function() {
                        var finalStateHTM = this.point.name.replace(/<[^>]*>?/gm, '');
                        var finalState = finalStateHTM.split("/");
                        return '<b>'+ finalState[0] +':</b> '+ (this.y == '1' ? this.y+' sessão' : this.y+' sessões') +' </br> <b>Estado:</b> '+finalState[1]+'</br> <b>Porcentagem:</b> '+Highcharts.numberFormat(this.percentage, 0, ',') +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true
                        },
                        showInLegend: true
                    }
                },
                legend: {
                    useHTML: true,
                    maxHeight: 400,
                    labelFormatter: function () {
                        return "<span style='font-size: 15px;'> " + this.name +  " ("+this.y+")  </span>"
                    }
                },
                series: [{
                    type: 'pie',
                    data: [
                        @php
                            foreach($arrCities as $city){
                               if($city->total >= 1) {
                                echo "['<img style=\"border: 1px solid #dddddd; height: 18px;vertical-align: sub;\" src=\"/assets/img/flags/".strtolower($city->country_code).".svg\"> ".$city->city.'/'.$city->state_code."', ".$city->total."],";
                                echo "\n";
                                }
                            }
                        @endphp
                    ],
                    dataLabels: {
                            useHTML: false,
                        formatter: function () {
                            var finalStateHTM = this.point.name.replace(/<[^>]*>?/gm, '');
                            var finalState = finalStateHTM.split("/");
                            return finalState[0];
                        }
                    }
                }]
            });
        });

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