@extends('admin.layouts.master')

@section('content')
  @if (\App\Models\SystemConfig::isGgoogleAnalyticReady())
    <div class="box">
      <div class="nav-tabs-custom" style="box-shadow: none;">
        <ul class="nav nav-tabs nav-justified">
          <li class="active">
            <a href="#visitors_tab" data-toggle="tab">
              <i class="fa fa-users hidden-sm"></i>&nbsp;
              {{ trans('app.visitors') }}
            </a>
          </li>
          <li>
            <a href="#referrals_tab" data-toggle="tab">
              <i class="fa fa-anchor hidden-sm"></i>&nbsp;
              {{ trans('app.top_referrals') }}
            </a>
          </li>
          <li>
            <a href="#behavior_tab" data-toggle="tab">
              <i class="fa fa-compass hidden-sm"></i>&nbsp;
              {{ trans('app.behavior') }}
            </a>
          </li>
        </ul>
        <!-- /.nav .nav-tabs -->

        <div class="tab-content">
          <div class="tab-pane active" id="visitors_tab">
            <div>{!! $chartVisitors->container() !!}</div>
          </div>
          <!-- /.tab-pane -->

          <div class="tab-pane" id="referrals_tab">
            <div>{!! $chartReferrers->container() !!}</div>
          </div>
          <!-- /.tab-pane -->

          <div class="tab-pane" id="behavior_tab">
            <div class="row">
              <div class="col-sm-6 nopadding-right">
                {!! $chartVisitorTypes->container() !!}
              </div>
              <div class="col-sm-6 nopadding-left">
                {!! $chartDevices->container() !!}
              </div>
            </div>
          </div> <!-- /.tab-pane -->
        </div> <!-- /.tab-content -->
      </div> <!-- /.nav-tabs-custom -->

      <div class="box-footer clearfix text-muted">
        <i class="fa fa-info-circle"></i> {{ trans('app.latest_months', ['months' => config('charts.google_analytic.period')]) }}
        {{ trans('app.data_from_google') . '. You can change this value from config/charts.php page.' }}
      </div>
    </div> <!-- /.box -->
  @endif

  <div class="box">
    <div class="box-header with-border">
      <h3 class="box-title">{{ trans('app.visitors') }}</h3>
      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
      </div>
    </div> <!-- /.box-header -->
    <div class="box-body">
      <table class="table table-hover" id="all-visitors-table">
        <thead>
          <tr>
            <th>{{ trans('app.flag') }}</th>
            <th>{{ trans('app.ip') }}</th>
            <th>{{ trans('app.hits') }}</th>
            <th>{{ trans('app.page_views') }}</th>
            <th>{{ trans('app.last_visits') }}</th>
            <th>&nbsp;</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div> <!-- /.box-body -->
  </div> <!-- /.box -->
@endsection

@section('page-script')
  @if (\App\Models\SystemConfig::isGgoogleAnalyticReady())
    @include('plugins.chart')

    {!! $chartVisitors->script() !!}
    {!! $chartReferrers->script() !!}
    {!! $chartVisitorTypes->script() !!}
    {!! $chartDevices->script() !!}
  @endif

  <script type="text/javascript">
    $('#all-visitors-table').DataTable({
      // "aaSorting": [],
      "aaSorting": [
        [1, "desc"]
      ],
      "iDisplayLength": {{ getPaginationValue() }},
      "processing": true,
      "serverSide": true,
      "ajax": "{{ route('admin.report.visitors.getMore') }}",
      "columns": [{
          'data': 'flag',
          'name': 'flag',
          'searchable': false
        },
        {
          'data': 'ip',
          'name': 'ip'
        },
        {
          'data': 'hits',
          'name': 'hits',
          'searchable': false
        },
        {
          'data': 'page_views',
          'name': 'page_views',
          'searchable': false
        },
        {
          'data': 'last_visits',
          'name': 'last_visits',
          'searchable': false
        },
        {
          'data': 'option',
          'name': 'option',
          'orderable': false,
          'searchable': false,
          'exportable': false,
          'printable': false
        }
      ],
      "oLanguage": {
        "sInfo": "_START_ to _END_ of _TOTAL_ entries",
        "sLengthMenu": "Show _MENU_",
        "sSearch": "",
        "sEmptyTable": "No data found!",
        "oPaginate": {
          "sNext": '<i class="fa fa-hand-o-right"></i>',
          "sPrevious": '<i class="fa fa-hand-o-left"></i>',
        },
      },
      "aoColumnDefs": [{
        "bSortable": false,
        "aTargets": [-1]
      }],
      "lengthMenu": [
        [10, 25, 50, -1],
        ['10 rows', '25 rows', '50 rows', 'Show all']
      ], // page length options
      dom: 'Bfrtip',
      buttons: [
        'pageLength', 'copy', 'csv', 'excel', 'pdf', 'print'
      ]
    });
  </script>
@endsection