@extends('layouts.app')
<style>
    .Chartjs-legend {
        text-align: center;
    }
    .Chartjs-legend>li>i {
        display: inline-block;
        height: 1em;
        margin-right: .5em;
        vertical-align: -.1em;
        width: 1em;
    }
    .Chartjs-legend>li {
        display: inline-block;
        padding: .25em .5em;
    }
</style>
@section('content')
    <!-- daterange picker start -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title ">Observation Report</h3>
            </div>
            <div>
                <span class="m-subheader__daterange" id="daterangepicker">
                    <span class="m-subheader__daterange-label">
                        <span class="m-subheader__daterange-title"></span>
                        <span class="m-subheader__daterange-date m--font-brand"></span>
                    </span>
                    <a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
                        <i class="la la-angle-down"></i>
                    </a>
                </span>
            </div>
        </div>
    </div>
    <!-- daterabge picker end -->

	<div class="m-content">
        <div class="row">
            <div class="col-xl-6">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Site Traffic <small>(Sessions vs. Users)</small>
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <div id="view-selector-container" style="display:none;"></div>
                            <ul class="m-portlet__nav">
                                <li class="m-portlet__nav-item">
                                    <a href="jaascript::void(0);" class="btn btn-focus m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
                                        {{-- <span> --}}
                                            <span id="active-users"></span>
                                        {{-- </span> --}}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                       <div id="site_traffic"></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    This Week vs Last Week (by sessions)
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                       <div id="chart-4-container"></div>
                       <div class="Chartjs-legend" id="this_week_vs_last_week"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-6">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Most Visited City
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                       <div id="chart-3-container"></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Most Visited Country
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                       <div id="most_visited_country"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-6">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Most Page View
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                       <div id="most_page_view"></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Most Visited Browser
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                       {{-- <div id="most_visit_browser"></div> --}}
                       <div id="most_visit_browser" style="width: 900px; height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script> --}}
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/components/view-selector2.js"></script>

<!-- Include the DateRangeSelector component script. -->
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/components/date-range-selector.js"></script>

<!-- Include the ActiveUsers component script. -->
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/components/active-users.js"></script>
{{-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> --}}
<!-- Include the CSS that styles the charts. -->
{{-- <link rel="stylesheet" href="https://ga-dev-tools.appspot.com/public/css/chartjs-visualizations.css"> --}}
<script>
    var startDate = '{{$startDate}}';
    var endDate = '{{$endDate}}';
    gapi.analytics.ready(function() {

        /**
        * Authorize the user with an access token obtained server side.
        */
        gapi.analytics.auth.authorize({
            'serverAuth': {
                'access_token': ''
            }
        });

        /** Site Traffic. */
        var dataChart1 = new gapi.analytics.googleCharts.DataChart({
            query: {
                'ids': 'ga:208583953',
                'start-date': startDate,
                'end-date': endDate,
                'metrics': 'ga:sessions,ga:users,ga:newUsers,ga:bounceRate',
                'dimensions': 'ga:date'
            },
            chart: {
                'container': 'site_traffic',
                'type': 'LINE',
                'options': {
                    'width': '100%',
                    // legend: 'none',
                    series: {
                        0: { color: '#964848' },
                        1: { color: '#7ecc8b' },
                        2: { color: '#4857f9' },
                        3: { color: '#d85d00' },
                    }
                }
            }
        });
        dataChart1.execute();

        /*  Most visited country */
        var dataChart2 = new gapi.analytics.googleCharts.DataChart({
            query: {
                'ids': 'ga:208583953',
                metrics: 'ga:sessions',
                dimensions: 'ga:country',
                'start-date': startDate,                //  'start-date': '30daysAgo',
                'end-date': endDate,                    //  'end-date': 'today',
                'max-results': 6,
                sort: '-ga:sessions'
            },
            chart: {
                container: 'most_visited_country',
                type: 'PIE',
                options: {
                    width: '100%',
                    pieHole: 4/9
                }
            }
        });
        dataChart2.execute();

        /*  Most visited city */
        var dataChart3 = new gapi.analytics.googleCharts.DataChart({
            query: {
                'ids': 'ga:208583953',
                metrics: 'ga:sessions',
                dimensions: 'ga:city',
                'start-date': startDate,
                'end-date': endDate,
                    'max-results': 6,
                sort: '-ga:sessions'
            },
            chart: {
                container: 'chart-3-container',
                type: 'PIE',
                options: {
                    width: '100%',
                    pieHole: 4/9
                }
            }
        });
        dataChart3.execute();

        /**
        * Create a new ActiveUsers instance to be rendered inside of an
        * element with the id "active-users-container" and poll for changes every
        * five seconds.
        */
        var activeUsers = new gapi.analytics.ext.ActiveUsers({
            container: 'active-users',
            pollingInterval: 5
        });
        /**
        * Create a new ViewSelector2 instance to be rendered inside of an
        * element with the id "view-selector-container".
        */
        var viewSelector = new gapi.analytics.ext.ViewSelector2({
            container: 'view-selector-container',
        }).execute();

         /**
        * Update the activeUsers component, the Chartjs charts, and the dashboard
        * title whenever the user changes the view.
        */
        viewSelector.on('viewChange', function(data) {
            // Start tracking active users for this view.
            activeUsers.set(data).execute();

            renderWeekOverWeekChart(data.ids);
        });

        function renderWeekOverWeekChart(ids) {

            // Adjust `now` to experiment with different days, for testing only...
            var now = moment(); // .subtract(3, 'day');

            var thisWeek = query({
                'ids': ids,
                'dimensions': 'ga:date,ga:nthDay',
                'metrics': 'ga:sessions',
                'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'),
                'end-date': moment(now).format('YYYY-MM-DD')
            });

            var lastWeek = query({
                'ids': ids,
                'dimensions': 'ga:date,ga:nthDay',
                'metrics': 'ga:sessions',
                'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week')
                    .format('YYYY-MM-DD'),
                'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week')
                    .format('YYYY-MM-DD')
            });

            Promise.all([thisWeek, lastWeek]).then(function(results) {

                var data1 = results[0].rows.map(function(row) { return +row[2]; });
                var data2 = results[1].rows.map(function(row) { return +row[2]; });
                var labels = results[1].rows.map(function(row) { return +row[0]; });

                labels = labels.map(function(label) {
                    return moment(label, 'YYYYMMDD').format('ddd');
                });

                var data = {
                    labels : labels,
                    datasets : [
                    {
                        label: 'Last Week',
                        fillColor : 'rgba(150,30,30,0.5)',
                        strokeColor : 'rgba(150,30,30,1)',
                        pointColor : 'rgba(150,30,30,1)',
                        pointStrokeColor : '#fff',
                        data : data2
                    },
                    {
                        label: 'This Week',
                        fillColor : 'rgba(59,63,82,0.5)',
                        strokeColor : 'rgba(59,63,82,1)',
                        pointColor : 'rgba(59,63,82,1)',
                        pointStrokeColor : '#fff',
                        data : data1
                    }
                    ]
                };

                new Chart(makeCanvas('chart-4-container')).Line(data);
                generateLegend('this_week_vs_last_week', data.datasets);
            });
        }

        function query(params) {
            return new Promise(function(resolve, reject) {
            var data = new gapi.analytics.report.Data({query: params});
            data.once('success', function(response) { resolve(response); })
                .once('error', function(response) { reject(response); })
                .execute();
            });
        }


        /**
        * Create a new canvas inside the specified element. Set it to be the width
        * and height of its container.
        * @param {string} id The id attribute of the element to host the canvas.
        * @return {RenderingContext} The 2D canvas context.
        */
        function makeCanvas(id) {
            var container = document.getElementById(id);
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            container.innerHTML = '';
            canvas.width = 100;
            canvas.height = 260;
            container.appendChild(canvas);

            return ctx;
        }


        /**
        * Create a visual legend inside the specified element based off of a
        * Chart.js dataset.
        * @param {string} id The id attribute of the element to host the legend.
        * @param {Array.<Object>} items A list of labels and colors for the legend.
        */
        function generateLegend(id, items) {
            var legend = document.getElementById(id);
            legend.innerHTML = items.map(function(item) {
            var color = item.color || item.fillColor;
            var label = item.label;
            return '<li><i style="background:' + color + '"></i>' +
                escapeHtml(label) + '</li>';
            }).join('');
        }


        // Set some global Chart.js defaults.
        Chart.defaults.global.animationSteps = 60;
        Chart.defaults.global.animationEasing = 'easeInOutQuart';
        Chart.defaults.global.responsive = true;
        Chart.defaults.global.maintainAspectRatio = false;


        /**
        * Escapes a potentially unsafe HTML string.
        * @param {string} str An string that may contain HTML entities.
        * @return {string} The HTML-escaped string.
        */
        function escapeHtml(str) {
            var div = document.createElement('div');
            div.appendChild(document.createTextNode(str));
            return div.innerHTML;
        }

        // Most Visited Browser
        var mostVisitPage = new gapi.analytics.googleCharts.DataChart({
            query: {
                'ids': 'ga:208583953',
                metrics: 'ga:users',
                dimensions: 'ga:browser',
                'start-date': startDate,                //  'start-date': '30daysAgo',
                'end-date': endDate,                    //  'end-date': 'today',
                'max-results': 10,
                // sort: '-ga:sessions'
            },
            chart: {
                container: 'most_visit_browser',
                type: 'TABLE',
                options: {
                    width: '88%',
                    pieHole: 4/9
                }
            }
        });
        mostVisitPage.execute();

        // Most Page View
        var mostPageView = new gapi.analytics.googleCharts.DataChart({
            query: {
                'ids': 'ga:208583953',
                metrics: 'ga:pageviews,ga:sessions',
                dimensions: 'ga:pageTitle',
                'start-date': startDate,                //  'start-date': '30daysAgo',
                'end-date': endDate,                    //  'end-date': 'today',
                'max-results': 10,
                // sort: '-ga:sessions'
            },
            chart: {
                container: 'most_page_view',
                type: 'PIE',
                options: {
                    width: '100%',
                    pieHole: 4/9
                }
            }
        });
        mostPageView.execute();

    });

    /*** Start Date Range Filter ***/
    jQuery(document).ready(function() {
        Daterangepicker.init();
    });
    var isFirstTime = true;
    var Daterangepicker = function() {
        var daterangepickerInit = function() {
            if ($('#daterangepicker').length == 0) {
                return;
            }

            var picker = $('#daterangepicker');
            var starts = moment();
            var start = moment('{{$startDate}}');
            var end = moment('{{$endDate}}');
            function cb(start, end) {
                var title = '';
                var range = '';
                if (start.date() == moment().date()) {
                    title = 'Today:';
                    range = start.format('MMM D');
                } else if (start.date() == moment().subtract(1, 'days').date()) {
                    title = 'Yesterday:';
                    range = start.format('MMM D');
                } else {
                    range = start.format('D MMM YY') + ' - ' + end.format('D MMM YY');
                }
                picker.find('.m-subheader__daterange-date').html(range);
                picker.find('.m-subheader__daterange-title').html(title);
                reloadData(start,end);
            }
            function reloadData(start,end){
                if(isFirstTime){
                    isFirstTime = false;
                    return;
                }
                var startDate = start.format('YYYY-MM-DD');
                var endDate = end.format('YYYY-MM-DD');
                window.location.href = base_url + '/super-admin/analytics' + '?startDate='+startDate+'&endDate='+endDate;
                mApp.blockPage({
                    overlayColor: '#000000',
                    type: 'loader',
                    state: 'primary',
                    message: 'Processing...'
                });
            }
            picker.daterangepicker({
                locale: {
                    format: 'DD/MM/YYYY'
                },
                direction: mUtil.isRTL(),
                startDate: start,
                endDate: end,
                opens: 'left',
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(7, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(30, 'days'), moment()],
                    'Last 90 Days': [moment().subtract(90, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'This Year': [moment().startOf('year'), moment().endOf('year')],
                    // 'Last Year': [moment().subtract(364, 'days'), moment()],
                    // 'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                    // 'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
                }
            }, cb);

            cb(start, end);
        }
        return {
            init: function() {
                daterangepickerInit();
            }
        };
    }();
   /*** End Date Range Filter ***/
</script>
@endsection