@section('title', __('radio.menu_item_3'))
@section('head')
    <link href="/assets/css/statistics-icon.css" rel="stylesheet" type="text/css">
    <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>
        #source_graph rect{
            display: none!important;
        }
        #source_graph .icon{
            vertical-align: -webkit-baseline-middle!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 {{ (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 active {{ (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-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-primary-dark mb-3">
                        <div class="content content-full text-center pt-2 pb-2">
                            <h1 class="h3 text-white mb-2">
                                {{ ($period == 'custom' && !$range ? __('radio.stats_period_custom_title') : ($period == 'custom' && $range ? str_replace('-','/',str_replace('DATE2',$expRange[1],str_replace('DATE1',$expRange[0],$titleH1))) :
                                ($period == 'date' && !$range ? __('radio.stats_period_date') :($period == 'date' && $range ? str_replace('-','/',str_replace('DATE',$range,$titleH1)) : $titleH1)))) }}
                            </h1>
                            <h2 class="h5 fw-normal text-white-75 mb-0">
                                @php
                                if(count($arrSources) == 1){
                                    $sessSTR = __('radio.stats_session_singular');
                                }else{
                                    $sessSTR = __('radio.stats_session_plural');
                                }
                                @endphp
                                {{ ($period == 'custom' && !$range ? __('radio.stats_select_period') : ($period == 'custom' && $range ? str_replace('SESSFINALSTR',$sessSTR,str_replace('SESSTOTAL',count($arrSources),$titleH2)) :
                                 str_replace('SESSFINALSTR',$sessSTR,str_replace('SESSTOTAL',count($arrSources),$titleH2)))) }}
                            </h2>
                        </div>
                    </div>

                    <div id="source_graph"></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','sources') }}/' + 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('-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',['sources','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',['sources','date']) }}/' + e.format(0,"dd-mm-yyyy");
        });
        @endif

        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {

                    renderTo: 'source_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() {
                        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,
                    labelFormatter: function () {
                        return "<span style='font-size: 16px;'> " + this.name +  " ("+this.y+")  </span>"
                    }
                },
                series: [{
                    type: 'pie',
                    data: [
                        @php
                            foreach($arrSources as $source){
                               if($source->total >= 1) {
                                echo "['<i class=\"".$source->source_icon."\" style=\"font-size:18px;vertical-align: baseline;\"></i> ".$source->source."', ".$source->total."],";
                                echo "\n";
                                }
                            }
                        @endphp
                    ],dataLabels: {
                        useHTML: false
                    },
                    animation: true
                }]
            });
        });

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