@extends('core::layouts.master')
@section('stylesheet')
<style type="text/css">
    .ViewSelector,
    .ViewSelector2 {
        display: block
    }

    .ViewSelector2-item,
    .ViewSelector table {
        display: block;
        margin-bottom: 1em;
        width: 100%
    }

    .ViewSelector2-item>label,
    .ViewSelector td:first-child {
        font-weight: 700;
        margin: 0 .25em .25em 0;
        display: block
    }

    .ViewSelector2-item>select {
        width: 100%
    }

    .ViewSelector table,
    .ViewSelector tbody,
    .ViewSelector td,
    .ViewSelector tr {
        display: block
    }

    .ViewSelector table {
        height: auto!important
    }

    .ViewSelector table,
    .ViewSelector td {
        width: auto!important
    }

    .ViewSelector td:last-child * {
        display: block;
        text-align: left
    }

    .ViewSelector td:last-child>div {
        font-weight: 400;
        margin: 0
    }

    @media (min-width:570px) {
        .ViewSelector,
        .ViewSelector2 {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            margin: 0 0 -1em -1em;
            width: -webkit-calc(100% + 1em);
            width: calc(100% + 1em)
        }
        .ViewSelector2-item,
        .ViewSelector table {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 -webkit-calc(100%/3 - 1em);
            -ms-flex: 1 1 calc(100%/3 - 1em);
            flex: 1 1 calc(100%/3 - 1em);
            margin-left: 1em
        }
    }

    .ViewSelector2--stacked,
    .ViewSelector--stacked {
        display: block;
        margin: 0;
        width: auto
    }

    .ViewSelector2--stacked .ViewSelector2-item,
    .ViewSelector--stacked table {
        margin-left: 0
    }
    #embed-api-auth-container,
    #btnLogoutContainer{
        padding-top: 5px;
    }
    .gapi-analytics-auth-styles-signinbutton {
        height: 35px;
    }
    .gapi-analytics-auth-styles-signinbutton .gapi-analytics-auth-styles-signinbutton-image{
        height: 35px !important;
    }
</style>
@endsection
@section('breadcrumb', 'Google Analytics')
@section('head-action')
    <li id="googleAnalyticsAuth">
        <div id="embed-api-auth-container"></div>
    </li>
    <li id="btnLogoutContainer">
    </li>
    {{ Form::bsNavButton('Cấu hình', route('admin.setting.index', 'google')) }}
@endsection
@section('content')
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 hidden" style="z-index: 100" id="errorBox">
        <div class="alert alert-danger alert-styled-left alert-bordered"></div>
    </div>
    <div class="col-sm-12">
        <div class="panel panel-flat hidden">
            <div class="panel-body">
                <div class="ViewSelector hidden" id="session-selector-container"></div>
            </div>
        </div>
        <div class="panel panel-flat hidden" id="sessionChartContainer">
            <div class="panel-heading">
                <h6 class="panel-title">
                    Lượng người dùng truy cập
                </h6>
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li><a data-action="collapse" class=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="panel-body">
                <div id="sessionChart"></div>
            </div>
        </div>
        <div class="panel panel-flat hidden" id="pageTrackingChartContainer">
            <div class="panel-heading">
                <h6 class="panel-title">Tổng người dùng theo tỉnh thành</h6>
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li><a data-action="collapse" class=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="ViewSelector" id="page-tracking-selector-container"></div>
                    <div id="pageTrackingChart"></div>
                </div>
            </div>
        </div>
        <div class="panel panel-flat hidden" id="pageViewChartContainer">
            <div class="panel-heading">
                <h6 class="panel-title">Lượt xem mỗi trang</h6>
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li><a data-action="collapse" class=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="ViewSelector" id="page-view-selector-container"></div>
                    <div id="pageViewChart"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('scripts')
<script>
(function (w, d, s, g, js, fjs) {
  g = w.gapi || (w.gapi = {});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>

<script>
window.addEventListener('error', function(errorEvent) { 
    let errorMessage = 'Có lỗi xảy ra, vui lòng kiểm tra cấu hình Google Analytics và đăng nhập đúng khoản Analytics của bạn!';
    showErrorBox(errorMessage);
    hideChartContainer();
});

var showErrorBox = function (error) {
    $('#errorBox').removeClass('hidden');
    $('#errorBox .alert').html('');
    $('#errorBox .alert').html(error);
};

var hideErrorBox = function () {
    $('#errorBox').addClass('hidden');
};

var hideChartContainer = function () {
    $('#pageViewChartContainer').addClass('hidden');
    $('#sessionChartContainer').addClass('hidden');
    $('#pageTrackingChartContainer').addClass('hidden');
};

var showChartContainer = function () {
    $('#pageViewChartContainer').removeClass('hidden');
    $('#sessionChartContainer').removeClass('hidden');
    $('#pageTrackingChartContainer').removeClass('hidden');
};
gapi.analytics.ready(function () {
    // Step 3: Authorize the user.

    var CLIENT_ID = '{{$config['oauth']['client_id']}}';

    gapi.analytics.auth.authorize({
        container: 'embed-api-auth-container',
        clientid: CLIENT_ID,
    });
    gapi.analytics.auth.on('signIn', function() {
        renderSignOutButton();
        showChartContainer();
    });

    var renderSignOutButton = function () {
        let buttonHtml = '<button type="button" class="btn bg-orange heading-btn" id="btnLogout">Đổi tài khoản</button>';
        $('#btnLogoutContainer').append(buttonHtml);
        $('#googleAnalyticsAuth').css({
            'padding' : '9px 35px 0px 0px'
        });
    }

    $(document).on('click', '#btnLogout', function () {
        hideErrorBox();
        hideChartContainer();
        gapi.analytics.auth.signOut();
        $(document).find('#btnLogout').remove();
        $('#googleAnalyticsAuth').css({
            'padding' : '0px'
        });
    });
    /* CHART 1 */
    var selector = new gapi.analytics.ViewSelector({
        container: 'session-selector-container'
    });

    var sessionChart = new gapi.analytics.googleCharts.DataChart({
        reportType: 'ga',
        query: {
            dimensions: 'ga:date',
            metrics: 'ga:users',
            'start-date': '30daysAgo',
            'end-date': 'today'
        },
        chart: {
            type: 'LINE',
            container: 'sessionChart',
            options: {
                width: '100%'
            }
        }
    });

    var pageTrackingChart = new gapi.analytics.googleCharts.DataChart({
        reportType: 'ga',
        query: {
            dimensions: 'ga:city',
            metrics: 'ga:users',
            'start-date': '30daysAgo',
            'end-date': 'today'
        },
        chart: {
            type: 'COLUMN',
            container: 'pageTrackingChart',
            options: {
                width: '100%'
            }
        }
    });

    var pageViewChart = new gapi.analytics.googleCharts.DataChart({
        reportType: 'ga',
        query: {
            dimensions: 'ga:pageTitle',
            metrics: 'ga:pageviews',
            segment: 'gaid::-1',
            sort: '-ga:pageviews',
            filters: 'ga:pagePath!=/',
            'max-results': '10',
            'start-date': '30daysAgo',
            'end-date': 'today'
        },
        chart: {
            type: 'TABLE',
            container: 'pageViewChart',
            options: {
                width: '100%'
            }
        }
    });

    gapi.analytics.auth.on('success', function (response) {
        selector.execute();
    });

    selector.on('change', function (ids) {
        let newIds = {
            query: {
                ids: 'ga:{{$config['oauth']['view_ids']}}'
            }
        }
        sessionChart.set(newIds).execute();
        pageTrackingChart.set(newIds).execute();
        pageViewChart.set(newIds).execute();
    });
    /* END CHART 1 */
});
</script>
@endsection