@section('title')
    Painel de Controlo
@stop

@section('content-header')
    Painel de Controlo
@stop

@section('content')
    @if (Auth::user()->hasPermissionTo(['log_google_analytics']))
        <div class="row">
            <div class="col-sm-8">
                @include('admin.dashboard.partials.visits_graph')
            </div>
            <div class="col-md-4">
                @include('admin.website.visits.partials.top_pages')
            </div>
        </div>
        @include('admin.website.visits.partials.panel')
    @endif

@endsection

@section('scripts')

    <script>
        $(document).ready(function() {

            var analyticsChartData = {
                labels: [{!! @$analyticsGraphData['labels'] !!}],
                datasets: [{
                    label: 'Visitas',
                    data: [{{ @$analyticsGraphData['visits'] }}],
                    backgroundColor: [{!! $analyticsGraphData['background'] !!}],
                    borderWidth: 1
                }]
            }

            var analyticsChartOptions = {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                }
            }

            var analyticsChart = $("#analyticsChart");
            var analyticsChart = new Chart(analyticsChart, {
                type: 'bar',
                data: analyticsChartData,
                options: analyticsChartOptions
            });
        });
    </script>
    @can('log_google_analytics')
        <script>
            $(document).ready(function() {

                var analyticsChartData = {
                    labels: [{!! @$analyticsGraphData['labels'] !!}],
                    datasets: [{
                        label: 'Visitas',
                        data: [{{ @$analyticsGraphData['visits'] }}],
                        backgroundColor: [{!! $analyticsGraphData['background'] !!}],
                        borderWidth: 1
                    }]
                }

                var analyticsChartOptions = {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    legend: {
                        display: false
                    }
                }

                var analyticsChart = $("#analyticsChart");
                var analyticsChart = new Chart(analyticsChart, {
                    type: 'bar',
                    data: analyticsChartData,
                    options: analyticsChartOptions
                });
            });


            /**
             * Change graph filter
             */
            $(document).on('change', 'select[name=filter-analytics]', function() {

                var url = "{{ route('admin.dashboard') }}?tab={{ $tab }}";
                var start = $(this).val();

                if (start != 'custom') {
                    $('#filter-analytics-search').hide()
                    url = URL.updateParameter(url, 'filter', start);
                    url = URL.updateParameter(url, 'start', start);
                    window.location = url;
                } else {
                    $('#filter-analytics-search').show()
                    $('input[name=start],input[name=end]').val('');
                }
            });

            /*
             * Graph custom filter
             */
            $(document).on('click', '#submit-filter-analytics', function(e) {
                e.preventDefault();
                var url = "{{ route('admin.dashboard') }}?tab={{ $tab }}";
                var filter = $('select[name=filter-analytics]').val();
                var start = $('input[name=start]').val();
                url = URL.updateParameter(url, 'filter', filter);
                url = URL.updateParameter(url, 'start', start);
                if ("{{ $tab }}" == "monthly") {
                    var end = $('input[name=end]').val();
                    url = URL.updateParameter(url, 'end', end);
                }
                window.location = url;
            })

            /**
             * Datatable for top pages
             */
            $('#datatable-top-pages').DataTable({
                dom: "<'row'<'col-sm-12'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12'p>>",
                pageLength: 8,
                processing: false,
                serverSide: false,
                stateSave: false,
                oLanguage: {
                    "sProcessing": "A processar...",
                    "sLoadingRecords": "A carregar...",
                    "sLengthMenu": "Ver _MENU_",
                    "sZeroRecords": "Não foram encontrados resultados",
                    "sEmptyTable": "Não existem registos para apresentar.",
                    "sSearch": "<i class='fa fa-search text-muted'></i>",
                    "oPaginate": {
                        "sFirst": "<i class='fa fa-angle-double-left'></i>",
                        "sPrevious": "<i class='fa fa-angle-left'></i>",
                        "sNext": "<i class='fa fa-angle-right'></i>",
                        "sLast": "<i class='fa fa-angle-double-right'></i>",
                    }
                },
                data: {!! $topPages !!},
                order: [
                    [2, "desc"]
                ],
                columns: [{
                        data: 'pos',
                        orderable: false
                    },
                    {
                        data: 'url'
                    },
                    {
                        data: 'pageViews',
                        class: 'text-right'
                    },
                ],
            });

            /**
             * Active filter
             */
            $(document).on('click', '.active-analytics-filter', function(e) {
                e.preventDefault();
                loadAnalyticsContent($('.analytics-menu .active a').attr('href'))
            });

            $(document).on('click', '.load-analytics', function(e) {
                e.preventDefault();

                var $this = $(this);
                var url = $this.attr('href');

                $('.load-analytics').parent().removeClass('active');
                $this.parent().addClass('active');

                loadAnalyticsContent(url);
            })


            function loadAnalyticsContent(url) {

                var start = $('.analytics-result [name=start]').val();
                var end = $('.analytics-result [name=end]').val();

                if (start > end) {
                    tmp = start;
                    start = end;
                    end = tmp;
                }

                $('#datatable-analytics-result tbody').html(
                    '<tr><td><i class="fa fa-spin fa-circle-o-notch"></i> A carregar...</td></tr>')

                $('#datatable-analytics-result_paginate').remove();

                $.post(url, {
                    startDate: start,
                    endDate: end
                }, function(data) {

                    $('.analytics-result').html(data.html)

                    $('.datepicker').datepicker(Init.datepicker());

                    $('#datatable-analytics-result').DataTable({
                        dom: "<'row'<'col-sm-12'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12'p>>",
                        pageLength: 10,
                        processing: false,
                        serverSide: false,
                        stateSave: false,
                        order: [
                            [1, "desc"]
                        ],
                        data: data.data,
                    });
                }).fail(function() {
                    $('#datatable-analytics-result tbody').html(
                        '<tr><td class="text-red"><i class="fa fa-exclamation-circle"></i> Erro ao obter informação do Google.</td></tr>'
                    )
                });
            }
        </script>
    @endcan

@stop