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

@section('title', 'Analytics Dashboard')
{{-- container or container-full. Default: container-full --}}
@section('content-width-class', 'container-full')
@section('breadcrumbs')
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="d-flex align-items-center">
        <div class="mr-auto">

        </div>

    </div>
</div>
@endsection
@section('content')
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-6">
            <h3>Traffic overview</h3>
            <p>Track your site’s traffic over time</p>
        </div>
        <div class="col-3"></div>
        <div class="col-3">
            <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">
        <div class="col-6">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <a href="javascript:void(0);" class="box-link">
                        <div class="box custom_border">
                            <div class="box-header with-border text-center ">
                                <h4 class="box-title">{{__('Site sessions') }}</h4>
                                <div>
                                    <b class="font-size-20">{{$siteSession}}</b>
                                </div>
                            </div>
                            <!-- /.box-body -->

                            <!-- /.box-footer-->
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <a href="javascript:void(0);" class="box-link">
                        <div class="box custom_border">
                            <div class="box-header with-border text-center ">
                                <h4 class="box-title">{{__('Unique visitors') }}</h4>
                                <div>
                                    <b class="font-size-20">{{$allUsers}}</b>
                                </div>
                            </div>
                            <!-- /.box-body -->

                            <!-- /.box-footer-->
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <a href="javascript:void(0);" class="box-link">
                        <div class="box custom_border">
                            <div class="box-header with-border text-center ">
                                <h4 class="box-title">{{__('Avg. session duration') }}</h4>
                                <div>
                                    <b class="font-size-20">{{$avgSession}}</b>
                                </div>
                            </div>
                            <!-- /.box-body -->

                            <!-- /.box-footer-->
                        </div>
                    </a>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="box">
                        <div class="box-header">
                            <h4>New vs Returning visitors</h4>
                        </div>
                        <div class="box-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="box">
                        <div class="box-header">
                            <h4>Sessions by device</h4>
                        </div>
                        <div class="box-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="box mt-5">
                        <div class="box-header">
                            <h4>Sessions by country</h4>
                        </div>
                        <div class="box-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-6">
            <div class="box">
                <div class="box-header">
                    <h4>Top traffic sources by sessions</h4>
                </div>
                <div class="box-body">
                    <div class="table-responsive su_tables">

                        <table class="table table-bordered table-striped" 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" data-show-columns-toggle-all="true" 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-time-out="2000">
                            <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="box mt-5">
                <div class="box-header">
                    <h4>Top pages by sessions</h4>
                </div>
                <div class="box-body">
                    <div class="table-responsive su_tables">

                        <table class="table table-bordered table-striped" id="bstable" data-toggle="table" data-show-export="false" data-show-columns="false" data-show-toggle="false" data-show-search-clear-button="false" data-show-columns-toggle-all="true" 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-time-out="2000">
                            <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="box mt-5">
                <div class="box-header">
                    <h4>Top browsers</h4>
                </div>
                <div class="box-body">
                    <div class="table-responsive su_tables">

                        <table class="table table-bordered table-striped" id="top_browsers" data-toggle="table" data-show-export="false" data-show-columns="false" data-show-toggle="false" data-show-search-clear-button="false" data-show-columns-toggle-all="true" 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-time-out="2000">
                            <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/Chart.min.js") }}"></script>
<script src="{{ asset("backend/js/jquery-jvectormap-2.0.5.min.js") }}"></script>
<script src="{{ asset("backend/js/jquery-jvectormap-world-mill.js") }}"></script>
<script type="text/javascript" src="{{ asset("backend/js/google-analytics.js") }}"></script>
@endpush