@extends('core::layouts.master')
@section('stylesheet')

@endsection
@section('breadcrumb', 'Google Analytics')
@section('head-action')
    {{ Form::bsNavButton('Cấu hình', route('admin.setting.index', 'google')) }}
@endsection
@section('content')
    <div class="col-sm-12">
        <div class="panel panel-flat" id="sessionChartContainer">
            <div class="panel-heading">
                <h6 class="panel-title">Lượt truy cập trong 30 ngày</h6>
            </div>
            <div class="panel-body">
                <div id="visitorsChart"></div>
            </div>
        </div>
        <div class="panel panel-flat" id="topbrowseranddevice">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel-heading">
                        <h6 class="panel-title">Lượt truy cập theo trình duyệt web</h6>
                    </div>
                    <div class="panel-body">
                        <div id="piechartBrowser" style="width: 100%; height: 400px;"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel-heading">
                        <h6 class="panel-title">Lượt truy cập theo thiết bị</h6>
                    </div>
                    <div class="panel-body">
                        <div id="piechartDevice" style="width: 100%; height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-flat" id="pageViewChartContainer">
            <div class="panel-heading">
                <ul class="nav nav-tabs">
                    <li class="nav-item active">
                        <a class="panel-title nav-link" data-toggle="tab" href="#toppageview">Top 10 trang có lượt xem cao nhất trong 30 ngày</a>
                    </li>
                    <li class="nav-item">
                        <a class="panel-title nav-link" data-toggle="tab" href="#topviewcity">Lượt truy cập theo tỉnh / thành phố trong 30 ngày</a>
                    </li>
                    <li class="nav-item">
                        <a class="panel-title nav-link" data-toggle="tab" href="#topreferrers">Nguồn mang đến lượt truy cập nhiều nhất trong 30 ngày</a>
                    </li>
                </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div id="toppageview" class="tab-pane fade in active">
                        <table class="table table-hover">
                            <tr>
                                <th>Trang</th>
                                <th width="10%">Lượt xem</th>
                            </tr>
                            @foreach($data['mostVisitedPages'] as $page)
                                <tr>
                                    <td><a href="{{$page['url']}}" target="_blank">{{$page['pageTitle']}}</a></td>
                                    <td>{{$page['pageViews']}}</td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                    <div id="topviewcity" class="tab-pane fade">
                        <table class="table table-hover">
                            <tr>
                                <th>Tỉnh / Thành phố</th>
                                <th width="10%">Lượt truy cập</th>
                            </tr>
                            @foreach($data['visitorsPerCity'] as $row)
                                <tr>
                                    <td>{{$row[0]}}</td>
                                    <td>{{$row[1]}}</td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                    <div id="topreferrers" class="tab-pane fade">
                        <table class="table table-hover">
                            <tr>
                                <th>Trang nguồn</th>
                                <th width="10%">Lượt xem</th>
                            </tr>
                            @foreach($data['topReferrers'] as $page)
                                <tr>
                                    <td>{{$page['url']}}</td>
                                    <td>{{$page['pageViews']}}</td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    {{ Html::script('https://www.gstatic.com/charts/loader.js') }}
    <script>
        google.charts.load('current', {packages: ['corechart', 'line', 'bar']});
        google.charts.setOnLoadCallback(drawAnalytics);
        function drawAnalytics() {
            var vistiors = new google.visualization.DataTable();
            vistiors.addColumn('string', 'Ngày');
            vistiors.addColumn('number', 'Lượt truy cập');
            vistiors.addColumn('number', 'Lượt xem trang');
            vistiors.addRows({!!$data['visitors']!!});
            var optionsVisitors = {
                chartArea: {
                    left: '5%',
                    right: '2%',
                },
                pointSize: 4,
                tooltip: {
                    textStyle: {
                        fontName: 'Roboto',
                        fontSize: 13
                    }
                },
                legend: {
                    position: 'top',
                    alignment: 'left',
                    textStyle: {
                        fontSize: 12
                    }
                }
            };
            var chartVisitors = new google.visualization.LineChart(document.getElementById('visitorsChart'));
            chartVisitors.draw(vistiors, optionsVisitors);


            var topBrowsers = google.visualization.arrayToDataTable({!!$data['topBrowsers']!!});
            var chartTopBrowsers = new google.visualization.PieChart(document.getElementById('piechartBrowser'));
            chartTopBrowsers.draw(topBrowsers);


            var topDevices = google.visualization.arrayToDataTable({!!$data['topDevices']!!});
            var chartTopDevices = new google.visualization.PieChart(document.getElementById('piechartDevice'));
            chartTopDevices.draw(topDevices);
        }
    </script>
@endsection