@extends('backend.layouts.master')

@section('header')
    <style>
        .list-group-item {
            padding: 3px 15px!important
        }
        .block-content, .item-group {
            padding: 0!important
        }
    </style>
@endsection

@section('footertop')
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>

        $(function() {
            Morris.Line({
                element: 'visitor-chart',
                data: {!! $statistics['visits'] !!},
                xkey: 'date',
                ykeys: ['visits'],
                labels: ['{{ trans('admin.fields.dashboard.visits') }}'],
                lineColors: ['#3B525E'],
                gridTextColor: ['#ebf4f9'],
                hideHover: 'auto',
                resize: true,
                redraw: true
            });
        });

        google.load("visualization", "1", {packages:["geochart"]});
        google.setOnLoadCallback(drawRegionsMap);
        google.setOnLoadCallback(drawLocalRegionsMap);

        function drawRegionsMap() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', '{{ trans('admin.fields.dashboard.chart_country') }}');
            data.addColumn('number', '{{ trans('admin.fields.dashboard.chart_visitors') }}');
            data.addRows({!! $statistics['countries'] !!});
            var options = {
                colors:['#c8e0ed','#24536e'],
                backgroundColor: '#f9f9f9',
                datalessRegionColor: '#e5e5e5',
                legend:  {textStyle: {fontName: 'Source Sans Pro'}}
            };
            var chart = new google.visualization.GeoChart(document.getElementById('world-map'));
            chart.draw(data, options);
        }

        function drawLocalRegionsMap(){
            var data = new google.visualization.DataTable();
            data.addColumn('string', '{{ trans('admin.fields.dashboard.chart_region') }}');
            data.addColumn('number', '{{ trans('admin.fields.dashboard.chart_visitors') }}');
            data.addRows({!! $statistics['regions'] !!});
            var options = {
                colorAxis: {colors: ['#92c1dc', '#2d688a']},
                backgroundColor: '#55a9bc',
                legend:  {textStyle: {color: '#000', fontName: 'Source Sans Pro'}},
                displayMode: 'markers',
                region: '{{  env('ANALYTICS_COUNTRY_CODE') }}'
            };
            var chart = new google.visualization.GeoChart(document.getElementById('region-map'));
            chart.draw(data, options);
        }

    </script>
@endsection

@section('content')
    <!-- Main Container -->
<main id="main-container">
    <!-- Page Header -->
    <div class="content bg-image overflow-hidden" style="background-image: url({{ url('photos/photo3@2x.jpg') }});">
        <div class="push-50-t push-15">
            <h1 class="h2 text-white animated zoomIn">İstatistikler</h1>
        </div>
    </div>
    <!-- END Page Header -->
 

    <!-- Page Content -->
    <div class="content content-norrow">
        
        <div class="row">
            <div class="col-md-12">
                <div class="box box-solid bg-dark-blue-gradient">
                    <div class="box-header">
                        <h3 class="box-title"><i class="fa fa-th"></i> {{ trans('admin.fields.dashboard.visits') }}</h3>
                    </div>
                    <div class="box-body border-radius-none">
                        <div class="chart right-charts" id="visitor-chart"></div>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <div class="row"> 
            <div class="col-md-12">
                <!-- Block Tabs Justified Alternative Style -->
                <div class="block">
                    <ul class="nav nav-tabs nav-tabs-alt nav-justified" data-toggle="tabs">
                        <li class="active">
                            <a href="#pages" data-toggle="tab">
                                <i class="fa fa-file"></i> {{ trans('admin.fields.dashboard.pages') }}
                            </a>
                        </li>
                        <li>
                            <a href="#keywords" data-toggle="tab">
                                <i class="fa fa-key"></i> {{ trans('admin.fields.dashboard.keywords') }}
                            </a>
                        </li>
                        <li>
                            <a href="#entrance-pages" data-toggle="tab">
                                <i class="fa fa-building-o"></i> {{  trans('admin.fields.dashboard.entrance_pages') }}
                            </a>
                        </li>
                        <li>
                            <a href="#exit-pages" data-toggle="tab">
                                <i class="fa fa-power-off"></i> {{ trans('admin.fields.dashboard.exit_pages') }}
                            </a>
                        </li>
                        <li>
                            <a href="#time-pages" data-toggle="tab">
                                <i class="fa fa-clock-o"></i> {{ trans('admin.fields.dashboard.time_pages') }}
                            </a>
                        </li>
                        <li>
                            <a href="#traffic-sources" data-toggle="tab">
                                <i class="fa fa-lightbulb-o"></i> {{ trans('admin.fields.dashboard.traffic_sources') }}
                            </a>
                        </li>
                        <li>
                            <a href="#browsers" data-toggle="tab">
                                <i class="fa fa-android"></i> {{ trans('admin.fields.dashboard.browsers') }}
                            </a>
                        </li>
                        <li>
                            <a href="#os" data-toggle="tab">
                                <i class="fa fa-linux"></i> {{ trans('admin.fields.dashboard.os') }}
                            </a>
                        </li>
                    </ul>
                    <div class="block-content tab-content">
                        <div class="tab-pane statistic-tabs active" id="pages">
                            <ul class="list-group">
                                @foreach($statistics['pages'] as $p)
                                <li class="list-group-item">
                                    {{ $p['url'] }}  <span class="badge">{{ $p['pageViews'] }}</span> 
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="tab-pane statistic-tabs" id="keywords">
                            <ul class="item-group">
                                @foreach($statistics['keywords'] as $p)
                                <li class="list-group-item">
                                    {{ $p['keyword'] }} <span class="badge"> {{ $p['sessions'] }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="tab-pane statistic-tabs" id="entrance-pages">
                            <ul class="item-group">
                                @foreach($statistics['landings'] as $p)
                                <li class="list-group-item">
                                    {{ $p['path'] }} <span class="badge"> {{ $p['visits'] }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="tab-pane statistic-tabs" id="exit-pages">
                            <ul class="item-group">
                                @foreach($statistics['exits'] as $p)
                                <li class="list-group-item">
                                    {{ $p['path'] }} <span class="badge"> {{ $p['visits'] }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="tab-pane statistic-tabs" id="time-pages">
                            <ul class="item-group">
                                @foreach($statistics['times'] as $p)
                                <li class="list-group-item">
                                    {{ $p['path'] }} <span class="badge"> {{ formatMilliseconds($p['time']) }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="tab-pane statistic-tabs" id="traffic-sources">
                            <ul class="item-group">
                                @foreach($statistics['sources'] as $p)
                                <li class="list-group-item">
                                    {{ $p['path'] }} <span class="badge"> {{ $p['visits'] }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="tab-pane statistic-tabs" id="browsers">
                            <ul class="item-group">
                                @foreach($statistics['browsers'] as $p)
                                <li class="list-group-item">
                                    {{ $p['browser'] }} <span class="badge"> {{ $p['visits'] }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="tab-pane statistic-tabs" id="os">
                            <ul class="item-group">
                                @foreach($statistics['ops'] as $p)
                                <li class="list-group-item">
                                    {{ $p['os'] }} <span class="badge"> {{ $p['visits'] }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>

                    </div>
                </div>
                <!-- END Block Tabs Justified Default Style -->
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-md-12">
                <div class="box box-solid bg-blue-special">
                    <div class="box-header">
                        <h3 class="box-title"> <i class="fa fa-location-arrow"></i> {{ trans('admin.fields.dashboard.region_visitors') }}</h3>
                    </div>
                    <div class="box-body">
                        <div id="region-map"></div>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-xs-12">
                <div class="box bg-gray-white">
                    <div class="box-header">
                        <h3 class="box-title"> <i class="fa fa-globe"></i> {{ trans('admin.fields.dashboard.world_visitors') }}</h3>
                    </div>
                    <div class="box-body">
                        <div id="world-map"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- END Page Content -->
</main>
<!-- END Main Container -->


@endsection