@extends('manager::layouts.master')

@section("breadcumbs")
  @include('manager::partials.breadcrumb', ['pages' => ['Dashboard']])
@stop

@section('content')
    <div class="page-header">

        @include('manager::partials.messages')

        @if( config("analytics.view_id"))

        <div class="container-fluid">
          <div class="row">
            <div class="col-12">
                <h3>Últimos 30 dias de acessos</h3>
            </div>
          </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4 col-xs-6 mt-2 mb-1">
                    <div class="card">
                        <div class="seo-fact sbg1">
                            <div class="p-4 d-flex justify-content-between align-items-center">
                                <div class="seofct-icon"><i class="fa fa-users"></i> Visitantes</div>
                                <h2>@isset( $visitorsAndPageviews->rows[0] ) {{ $visitorsAndPageviews->rows[0][0] }} @else - @endif</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-xs-6 mt-2 mb-1">
                    <div class="card">
                        <div class="seo-fact sbg2">
                            <div class="p-4 d-flex justify-content-between align-items-center">
                                <div class="seofct-icon"><i class="fa fa-eye"></i> Visualizações</div>
                                <h2>@isset( $visitorsAndPageviews->rows[0] ) {{ $visitorsAndPageviews->rows[0][1] }} @else - @endif</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-xs-6 mt-2 mb-1">
                    <div class="card">
                        <div class="seo-fact sbg4">
                            <div class="p-4 d-flex justify-content-between align-items-center">
                                <div class="seofct-icon"><i class="fa fa-clock-o"></i> Tempo Médio</div>
                                <h2>@if( $averageTime ) {{ $averageTime->m }}:{{ $averageTime->s }} @else - @endif</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          <div class="row">
            <!-- sales area start -->
            <div class="col-xl-68 col-ml-7 col-lg-8 mt-5">
                <div class="card">
                    <div>
                        <h4 class="header-title">Visitantes X Páginas Visitadas</h4>
                        <div id="visitorsAndPages" style="height: 413px"></div>
                    </div>
                </div>
            </div>
            <!-- sales area end -->

            <!-- Advertising area start -->
            <div class="col-xl-4 col-ml-5 col-lg-4 mt-5">
                <div class="card h-full">
                    <div>
                        <h4 class="header-title">Dispositivos</h4>
                        <canvas id="devicesChart" height="233"></canvas>
                    </div>
                </div>
            </div>
          </div>
          <!-- Advertising area end -->

          <div class="row">
            <div class="col-xl-12 mt-5">
                <div class="card">
                    <div>
                        <h4 class="header-title">Páginas mais acessadas</h4>

                            <table class="table table-bordered table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Pos.</th>
                                        <th>Titulo</th>
                                        <th>URL</th>
                                        <th width="100">Views</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($mostVisited as $key => $row)
                                        <tr>
                                          <td>{{ $key +1  }}</td>
                                          <td>{{ $row['pageTitle']}}</td>
                                          <td>{{ $row['url']}}</td>
                                          <td>{{ $row['pageViews']}}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table><!-- .table -->
                    </div>
                </div>
            </div>
          </div>

        </div>
        @else

          <div class="pull-left">
              <h2>{{ config('manager.title') }} <small>{{ config('manager.subtitle') }}</small></h2>
          </div>

          <div class="pull-right">
              @if (! is_null(config('manager.routes.home')))
                  <a href="{{ route(config('manager.routes.home')) }}" class="btn btn-primary btn-lg" target="_blank">
                      {{ trans('manager::home.link') }} &nbsp; <i class="glyphicon glyphicon-arrow-right"></i>
                  </a>
              @endif
          </div>

          <div class="clearfix"></div>

          <div class="alert alert-warning" role="alert">
              <strong>Aviso!</strong> Configure a conta do Analytics nas configurações do manager para exibir os painéis.
          </div>
        @endif

    </div><!-- .page-header -->


@stop


@section('scripts')
  @parent

  <!-- start chart js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  <!-- start highcharts js -->
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
  <!-- start amcharts -->
  <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  <script src="https://www.amcharts.com/lib/3/ammap.js"></script>
  <script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
  <script src="https://www.amcharts.com/lib/3/serial.js"></script>
  <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
  <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
  <!-- all line chart activation -->
  <script src="{{ asset('packages/manager/themes/strdash/assets/js/line-chart.js') }}"></script>
  <!-- all pie chart -->
  <script src="{{ asset('packages/manager/themes/strdash/assets/js/pie-chart.js') }}"></script>
  <!-- all bar chart -->
  <script src="{{ asset('packages/manager/themes/strdash/assets/js/bar-chart.js') }}"></script>
  <!-- all map chart -->
  <script src="{{ asset('packages/manager/themes/strdash/assets/js/maps.js') }}"></script>

  <script>

  @if( config("analytics.view_id"))
  @php
    $deviceLabels = [];
    $deviceValues = [];
    foreach( $browsers->rows as $row){
      $deviceLabels[] = '"'.$row[0].'"';
      $deviceValues[] = $row[1];
    }
  @endphp

  if ($('#devicesChart').length) {
      var ctx = document.getElementById("devicesChart").getContext('2d');
      var chart = new Chart(ctx, {
          // The type of chart we want to create
          type: 'doughnut',
          // The data for our dataset
          data: {
              labels: [{!! implode(',', $deviceLabels) !!}],
              datasets: [{
                  backgroundColor: [
                      "#8919FE",
                      "#12C498",
                      "#F8CB3F",
                      "#E36D68"
                  ],
                  borderColor: '#fff',
                  data: [{{ implode(",", $deviceValues )}}],
              }]
          },
          // Configuration options go here
          options: {
              legend: {
                  display: true
              },
              animation: {
                  easing: "easeInOutBack"
              }
          }
      });
  }


  /*-------------- 11 line chart amchart start ------------*/
  if ($('#visitorsAndPages').length) {

      var chart = AmCharts.makeChart("visitorsAndPages", {
          "type": "serial",
          "theme": "light",
          "dataDateFormat": "DD/MM/YYYY",
          "precision": 2,
          "valueAxes": [],
          "graphs": [{
              "id": "g1",
              "valueAxis": "v2",
              "bullet": "round",
              "bulletBorderAlpha": 1,
              "bulletColor": "#FFFFFF",
              "bulletSize": 5,
              "hideBulletsCount": 50,
              "lineThickness": 2,
              "lineColor": "#4d4dfd",
              "type": "smoothedLine",
              "title": "Visitas",
              "useLineColorForBulletBorder": true,
              "valueField": "visitas",
              "balloonText": "[[title]]<br /><small style='font-size: 130%'>[[value]]</small>"
          }, {
              "id": "g2",
              "valueAxis": "v2",
              "bullet": "round",
              "bulletBorderAlpha": 1,
              "bulletColor": "#FFFFFF",
              "bulletSize": 5,
              "hideBulletsCount": 50,
              "lineThickness": 2,
              "lineColor": "#05b085",
              "type": "smoothedLine",
              "dashLength": 5,
              "title": "Pageviews",
              "useLineColorForBulletBorder": true,
              "valueField": "pageviews",
              "balloonText": "[[title]]<br /><small style='font-size: 130%'>[[value]]</small>"
          }],
          "chartCursor": {
              "pan": true,
              "valueLineEnabled": true,
              "valueLineBalloonEnabled": true,
              "cursorAlpha": 0,
              "valueLineAlpha": 0.2
          },
          "categoryField": "date",
          "categoryAxis": {
              "parseDates": true,
              "dashLength": 1,
              "minorGridEnabled": true,
              "color": "#5C6DF4"
          },
          "legend": {
              "useGraphSettings": true,
              "position": "top"
          },
          "balloon": {
              "borderThickness": 1,
              "shadowAlpha": 0
          },
          "export": {
              "enabled": false
          },
          "dataProvider": [
            @foreach( $visitorsByDay->rows as $row)
            {
              "date": "{{ substr($row[0],6,2) }}/{{ substr($row[0],4,2) }}/{{ substr($row[0],0,4) }}",
              "visitas": {{ $row[1] }},
              "pageviews": {{ $row[2] }}
          },
          @endforeach
        ]
      });
  }

  @endif
  </script>


@stop