@section('title', __('radio.menu_item_3'))
@section('head')
    <link href="/assets/css/openlayers.css" media="screen" rel="stylesheet" type="text/css">
    <script>var CONTENT_LOCALE = 'pt-br'; var CONTENT_DATE_FORMAT = 2; var UPDATE_DATA_IN = 48129 * 1000;</script>
    <link href="/assets/css/statistics.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <link href="/assets/css/statistics-icon.css" rel="stylesheet" type="text/css">
	@if(Config::get('constants.IS_APP'))
	<style>
		.sFb{
			flex-basis:100%;
			border:1px solid #b5b5b5;
		}
		#listeners-world-map{
			min-height:500px;
		}
	</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 blListeners">
                <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}" role="presentation">
                        <button class="nav-link currentList active  {{ (Config::get('constants.IS_APP') ? 'w-100' : '') }}" id="btabs-animated-fade-listeners-tab" data-bs-toggle="tab" data-bs-target="#btabs-animated-fade-listeners" role="tab" aria-controls="btabs-animated-fade-listeners" aria-selected="true">{{ __('radio.stats_tab_now') }} (<span class="online-count">0</span>) <i class="ms-2 refresh-button fa fa-refresh"></i></button>
                    </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  {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.stats_tab_sources') }}</a>
                    </li>
                </ul>
                <div class="block-content tab-content overflow-hidden p-0">
                    <div class="tab-pane fade position-relative active show" id="btabs-animated-fade-listeners" role="tabpanel" aria-labelledby="btabs-animated-fade-home-tab" tabindex="0">
                       <div class="now-map position-relative">
                        <div class="block-map-mobile" onclick="$(this).remove();">
                            <div class="block-content">{{ __('radio.stats_map_hint') }}</div>
                        </div>
                        <div id="listeners-world-map"></div>
                       </div>

                        <div class="block block-rounded mt-3 mb-0 listeners-list d-none">
                            <ul class="nav nav-tabs nav-tabs-alt border-1 border-top" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="btabs-countries-tab" data-bs-toggle="tab" data-bs-target="#btabs-countries" role="tab" aria-controls="btabs-countries" aria-selected="true">{{ __('radio.stats_listeners_by_country') }}</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="btabs-state-tab" data-bs-toggle="tab" data-bs-target="#btabs-state" role="tab" aria-controls="btabs-state" aria-selected="false" tabindex="-1">{{ __('radio.stats_listeners_by_state') }}</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="btabs-cities-tab" data-bs-toggle="tab" data-bs-target="#btabs-cities" role="tab" aria-controls="btabs-cities" aria-selected="false" tabindex="-1">{{ __('radio.stats_listeners_by_city') }}</button>
                                </li>
                            </ul>
                            <div class="block-content tab-content ps-0 pe-0 pt-2 pb-2">
                                <div class="tab-pane active" id="btabs-countries" role="tabpanel" aria-labelledby="btabs-countries-tab" tabindex="0">
                                    <div class="countries"></div>
                                </div>
                                <div class="tab-pane" id="btabs-state" role="tabpanel" aria-labelledby="btabs-state-tab" tabindex="0">
                                    <div class="states"></div>
                                </div>
                                <div class="tab-pane" id="btabs-cities" role="tabpanel" aria-labelledby="btabs-cities-tab" tabindex="0">
                                    <div class="cities"></div>
                                </div>
                            </div>
                        </div>

                        <div class="listeners-list d-none block block-bordered mb-0">
                            <div class="block-header block-header-default d-flex align-items-center justify-content-between">
								<h3 class="block-title hupper">
									{{ __('radio.stats_active_sessions') }}
								</h3>
								<a href="{{ route('radio.blacklist.r') }}" class="btn btn-primary btn-sm">
									<i class="fa fa-sliders me-1 opacity-50"></i> {{ __('radio.stats_blacklist_link') }}
								</a>
							</div>
                            <div class="block-content p-0">
                                <div class="table-responsive tList">
                                <table class="table table-striped table-vcenter table-sm mb-0">
                                    <thead>
                                    <tr>
                                        <th class="text-start">IP</th>
                                        <th>{{ __('radio.stats_table_city_state') }}</th>
                                        <th class="text-center">{{ __('radio.stats_table_os') }}</th>
                                        <th class="text-center">{{ __('radio.stats_table_source') }}</th>
                                        <th class="text-center">{{ __('radio.stats_table_time') }}</th>
                                        <th class="text-center" style="width: 170px;">{{ __('radio.stats_table_actions') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                </div>

                            </div>
                        </div>

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


        </div>
		<input type="hidden" id="currentIP" name="currentIP" value="{{ request()->ip() }}">
    </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 src="/assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script type="text/javascript" src="/assets/js/pages/openlayers.js"></script>
<script>window.LNG = Object.assign(window.LNG || {}, {
    stats_your_session: @json(__('radio.stats_js_your_session')),
    stats_ban_ip: @json(__('radio.stats_js_ban_ip')),
    stats_disconnect_listener: @json(__('radio.stats_js_disconnect_listener'))
});</script>
<script src="/assets/js/pages/statistics.js?t={{ time() }}"></script>
<script>
    if(screen.width >= 1780){ var zoomM = '3'; var longM = 15.235004; }else{ var zoomM = '2'; var longM = 28.235004;}
    function disconnect(e){
        var listenKick = $(e).attr('data-id');
        Sweetalert2.fire({
            title: 'Deseja realmente desconectar este ouvinte?',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: 'Desconectar',
            cancelButtonText: 'Cancelar',
        }).then((result) => {
            if (result.isConfirmed) {
                $.post('{{ route('radio.statistics.r.blacklist') }}', { port: "{{ $siteData->stream_port }}", id: listenKick })
                    .done(function( data ) {
                        if(data){
                            One.helpers('jq-notify', {type: 'primary', icon: 'fa fa-check me-1', from: 'top', align: 'right', message: 'Ouvinte desconectado com sucesso!'});
                        }else{
                            One.helpers('jq-notify', {type: 'danger', icon: 'fa fa-times me-1', from: 'top', align: 'right', message: 'Falha ao tentar desconectar ouvinte.'});
                        }
                        $('.currentList').click();
                    });

            }
        });
    }
</script>

</body>
</html>