@extends('adminlte::page')

@section('title_postfix', ' - Analitika')

@section('content')

    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Odaberite razdoblje</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    {!! BootForm::vertical([
                      'model' => null,
                      'url' => route('analytics.index'),
                      'autocomplete' => 'off'
                  ]) !!}

                    <div class="col-md-6">
                        <div class="input-group input-daterange">
                            <input type="text" class="form-control" name="start_date" value="{{ $startDate->format('d.m.Y') }}">
                            <div class="input-group-addon">do</div>
                            <input type="text" class="form-control" name="end_date" value="{{ $endDate->format('d.m.Y') }}">
                        </div>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-6" >
                        {!! BootForm::submit( trans('common.submit'), array('class' => 'btn btn-primary')) !!}
                    </div>

                    {!! BootForm::close() !!}

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Stranice</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <canvas id="chartPages" width="400" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Preglednici</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <canvas id="chartTopBrowsers" width="400" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Posjetitelji</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <canvas id="chartUsers" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div id="topBrowsers" style="display: none">{{ $topBrowsers->toJson() }}</div>
    <div id="topPages" style="display: none">{{ $pages->toJson() }}</div>
    <div id="topUsers" style="display: none">{{ $userData }}</div>

@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/bootstrap-datepicker-master/dist/css/bootstrap-datepicker.css') }}">
@stop

@section('js')
    <script src="{{ asset('vendor/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/bootstrap-datepicker-master/dist/locales/bootstrap-datepicker.hr.min.js') }}" charset="UTF-8"></script>
    <script>
        $(document).ready(function() {
            $(".form_datetime").datepicker({
                format: "dd.mm.yyyy",
                autoclose: true,
                weekStart: 1,
                language: 'hr'
            });

            $(".input-daterange").datepicker({
                format: "dd.mm.yyyy",
                autoclose: true,
                weekStart: 1,
                language: 'hr'
            });



        });

        var ctx = document.getElementById('chartTopBrowsers').getContext('2d');
        var labels = [], data = [];
        $.each(JSON.parse($('#topBrowsers').text()), function (key, value) {
            labels.push(key);
            data.push(value);
        });
        var chartBrowsers = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Broj korisnika',
                    data: data,
                    backgroundColor: ["#00c0ef", "#dd4b39", "#00a65a","#f39c12","#3c8dbc", "#d2d6de"]
                }]
            },
            options: {
                title: {
                    display: false,
                }
            }
        });


        // top pages
        labels = [];
        data = [];
        $.each(JSON.parse($('#topPages').text()), function (key, value) {
            labels.push(value.pageTitle);
            data.push(value.pageViews);
        });

        ctx = document.getElementById('chartPages').getContext('2d');
        var chartPages = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Broj posjeta',
                    data: data,
                    backgroundColor: [
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)'
                    ],
                    borderColor: [
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });


        // visitors
        var userData = JSON.parse($('#topUsers').text());
        ctx = document.getElementById('chartUsers').getContext('2d');
        var chartUsers = new Chart(ctx, {
            type: 'line',
            data: {
                labels: userData.time,
                datasets: [{
                    label: 'Broj posjetitelja',
                    data: userData.visitors,
                    borderColor: "#3e95cd",
                    fill: false
                },
                    {
                        label: 'Pregledano stranica',
                        data: userData.pageViews,
                        borderColor: "#c45850",
                        fill: false
                    }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

    </script>
@stop