@extends('layouts.master')
@push('styles')
<link rel="stylesheet" href="{{ asset("backend/css/chart.css") }}"  type="text/css">
<link rel="stylesheet" href="{{ asset("backend/css/jquery-jvectormap-2.0.5.css") }}"  type="text/css">
@endpush

@section('title', 'Analytics Dashboard')
{{-- container or container-full. Default: container-full --}}
@section('content-width-class', 'container-full')
@section('breadcrumb-text')
    <div>
        <h3>{{ __('Traffic overview') }}</h3>
        <p class="m-0">{{ __('Track your site’s traffic over time')}}</p>
    </div>
@endsection
@section('content')
    <!-- Main content -->
    <section class="content">
        <div class="row mb-3">
            <div class="col-lg-6 col-xs-12"></div>
            <div class="col-lg-3 col-xs-12"></div>
            <div class="col-lg-3 col-xs-12">
                <div id="reportrange" class="daterange-input">
                    <i class="ion-ios-calendar-outline"></i>&nbsp;
                    <span></span> <i class="ion-ios-arrow-down float-right"></i>
                </div>
            </div>
        </div>
        <div class="row mt-xs-20">
            <div class="col-lg-6 col-xs-12">
                <div class="row">
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="card card-icon mb-4">
                            <div class="card-body text-center py-2">
                                <h5 class="text-muted mt-2 mb-2">{{__('Site Sessions') }}</h5>
                                <p class="text-primary text-24 line-height-1 m-0">{{ $siteSession }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="card card-icon mb-4">
                            <div class="card-body text-center py-2">
                                <h5 class="text-muted mt-2 mb-2">{{__('Unique visitors') }}</h5>
                                <p class="text-primary text-24 line-height-1 m-0">{{ $allUsers }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="card card-icon mb-4">
                            <div class="card-body text-center py-2">
                                <h5 class="text-muted mt-2 mb-2">{{__('Avg. session duration') }}</h5>
                                <p class="text-primary text-24 line-height-1 m-0">{{ $avgSession }}</p>
                            </div>
                        </div>
                    </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="float-start card-title m-0">{{ __('New vs Returning visitors')}}</h3>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex flex-wrap align-items-center">
                                        <div class="doughnut-wrapper width-50-per">
                                          <canvas id="doughnutChart1" width="100" height="100"></canvas>
                                          <div class="total-count">{{ __('Visitors')}} <span id="visitors"></span></div>
                                        </div>
                                        <div id="doughnut-chart-legend" class="chart-legend pl-4"></div>
                                      </div>
                                </div>
                                <!--end card-body-->
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="float-start card-title m-0">{{__('Sessions by device')}}</h3>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex flex-wrap align-items-center">
                                        <div class="doughnut-wrapper width-50-per">
                                          <canvas id="doughnutChart2" width="100" height="100"></canvas>
                                          <div class="total-count">{{ __('Visitors')}} <span id="device"></span></div>
                                        </div>
                                        <div id="doughnut-chart-legend2" class="chart-legend pl-4"></div>
                                      </div>
                                </div>
                                <!--end card-body-->
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="card mt-5">
                                <div class="card-header">
                                    <h3 class="float-start card-title m-0">{{ __('Sessions by country')}}</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div id="visitors-map" class="visitors-map"></div>
                                        </div>
                                        <div class="col-md-4">
                                            <h6 class="font-weight-bold">{{ __('Countries')}}</h6>
                                            <ul class="progress-list">
                                                @if($topCountry)
                                                    @foreach($topCountry as $country)
                                                    @php
                                                        $count1 = $count2 = 0;
                                                        if($siteSession != 0){
                                                            $count1 = $country[1] / $siteSession;
                                                            $count2 = $count1 * 100;
                                                        }
                                                        $valuenow = number_format($count2, 0);
                                                    @endphp
                                                    <li>
                                                        <div class="progress-info">
                                                            <p>{{$country[0]}}  <i class="ion-ios-arrow-right"></i></p>
                                                            <span>{{$country[1]}}</span>
                                                        </div>
                                                        <div class="progress">
                                                        <div class="progress-bar" role="progressbar" aria-valuenow="{{$valuenow}}" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </li>
                                                    @endforeach
                                                @endif
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--end card-body-->
                            </div>
                        </div>
                </div>
            </div>
            <div class="col-lg-6 col-xs-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="float-start card-title m-0">{{ __('Top traffic sources by sessions')}}</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive su_tables">

                            <table class="table table-bordered" id="traffif_by_session" data-toggle="table"
                            data-show-export="false" data-show-columns="false" data-show-toggle="false"
                            data-show-search-clear-button = "false" table-for="traffif_by_session"
                                data-show-columns-toggle-all="false"
                                data-pagination="true" data-total-field="count" data-sortable="true" data-data-field="items"
                                data-filter-control="true" data-export-options='{"fileName": "{{ config('app.name')." - Logs - ".date('d/m/Y-H:m:s')}}"}' data-toolbar="#custom_toolbar" data-search-on-enter-key="true">
                                <thead>
                                    <tr>
                                        <th data-field="search_engine"  data-filter-control="input" data-sortable="true">{{__('Search Engine') }}
                                        </th>
                                        <th data-field="log_name" data-filter-control="input" data-sortable="true">
                                            {{__('Total') }}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if($topSearchEngine)
                                        @foreach($topSearchEngine as $search)
                                            <tr>
                                                <td>{{$search[0]}}</td>
                                                <td>{{$search[1]}}</td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>

                <div class="card mt-5">
                    <div class="card-header">
                        <h3 class="float-start card-title m-0">{{ __('Top pages by sessions')}}</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive su_tables">

                            <table class="table table-bordered" id="bstable" data-toggle="table"
                            data-show-export="false" data-show-columns="false" data-show-toggle="false"
                            data-show-search-clear-button = "false" table-for="top_session"
                                data-show-columns-toggle-all="false"
                                data-pagination="true" data-total-field="count" data-sortable="true" data-data-field="items"
                                data-filter-control="true" data-export-options='{"fileName": "{{ config('app.name')." - Logs - ".date('d/m/Y-H:m:s')}}"}' data-toolbar="#custom_toolbar" data-search-on-enter-key="true">
                                <thead>
                                    <tr>
                                        <th data-field="created_at"  data-filter-control="input" data-sortable="true">{{__('Date') }}</th>
                                        <th data-field="visitors"  data-filter-control="input" data-sortable="true">{{__('Visitors') }}</th>
                                        <th data-field="pages_title"  data-filter-control="input" data-sortable="true">{{__('Page Title') }}</th>
                                        <th data-field="pages_view" data-filter-control="input" data-sortable="true">{{__('Page View') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($topPages as $page)
                                        <tr>
                                            <td>{{date("d-m-Y", strtotime($page['date']))}}</td>
                                            <td>{{$page['visitors']}}</td>
                                            <td>{{$page['pageTitle']}}</td>
                                            <td>{{$page['pageViews']}}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>

                <div class="card mt-5">
                    <div class="card-header">
                        <h3 class="float-start card-title m-0">{{ __('Top browsers')}}</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive su_tables">

                            <table class="table table-bordered" id="top_browsers" data-toggle="table"
                            data-show-export="false" data-show-columns="false" data-show-toggle="false"
                            data-show-search-clear-button = "false" table-for="top_browsers"
                                data-show-columns-toggle-all="false"
                                data-pagination="true" data-total-field="count" data-sortable="true" data-data-field="items"
                                data-filter-control="true" data-export-options='{"fileName": "{{ config('app.name')." - Logs - ".date('d/m/Y-H:m:s')}}"}' data-toolbar="#custom_toolbar">
                                <thead>
                                    <tr>
                                        <th data-field="browser"  data-filter-control="input" data-sortable="true">{{__('Browser') }}</th>
                                        <th data-field="visitors"  data-filter-control="input" data-sortable="true">{{__('Visitors') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($topBrowsers as $browser)
                                        <tr>
                                            <td>{{$browser['browser']}}</td>
                                            <td>{{$browser['sessions']}}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>

            </div>

        </div>
    </section>
    <!-- /.content -->
<input type="hidden" id="new-user" value="{{$newUser}}">
<input type="hidden" id="return-user" value="{{$returnUser}}">
<input type="hidden" id="deviceDesktop" value="{{$deviceDesktop}}">
<input type="hidden" id="deviceMobile" value="{{$deviceMobile}}">
<input type="hidden" id="deviceTablet" value="{{$deviceTablet}}">
<input type="hidden" id="displayStartDate" value="{{$displayStartDate}}">
<input type="hidden" id="displayEndDate" value="{{$displayEndDate}}">
<input type="hidden" id="showStartDate" value="{{$showStartDate}}">
<input type="hidden" id="showEndDate" value="{{$showEndDate}}">
@endsection
@push('scripts')
<script>
    let vectorData = @json($jsonCountry);
</script>
<script src="{{ asset('backend/js/pages-js/google-analytics/Chart.min.js') }}"></script>
<script src="{{ asset('backend/js/pages-js/google-analytics/jquery-jvectormap-2.0.5.min.js') }}"></script>
<script src="{{ asset('backend/js/pages-js/google-analytics/jquery-jvectormap-world-mill.js') }}"></script>
<script type="text/javascript" src="{{ asset('backend/js/pages-js/google-analytics/google-analytics.js') }}"></script>
@endpush