@extends('layouts.admin')

@section('content')

<div class="row">
        

    <div class="col-sm-6 col-lg-3">
        <div class="card text-white bg-primary">
            <div class="card-body pb-0">
                <div class="btn-group float-right">
                    {{-- <button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="icon-settings"></i>
                    </button> --}}
                    {{-- <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Action</a>
                    </div> --}}
                </div>
                <div class="text-value">{{ number_format($data['traffic']['views']['month'], 0, ',', ',') }}</div>
                <div>Total Page Views Past Month</div>
            </div>
            <div class="chart-wrapper mt-3 mx-3" style="height:70px;">
                <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;" class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                    </div>
                </div>
                <canvas id="card-chart1" class="chart chartjs-render-monitor" height="70" style="display: block; width: 211px; height: 70px;" width="211"></canvas>
                <div id="card-chart1-tooltip" class="chartjs-tooltip top" style="opacity: 0; left: 156.508px; top: 130.111px;">
                    <div class="tooltip-header">
                        <div class="tooltip-header-item">May</div>
                    </div>
                    <div class="tooltip-body">
                        <div class="tooltip-body-item"><span class="tooltip-body-item-color" style="background-color: rgb(0, 165, 224);"></span><span class="tooltip-body-item-label">My First dataset</span><span class="tooltip-body-item-value">51</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-lg-3">
        <div class="card text-white bg-info">
            <div class="card-body pb-0">
                {{-- <button type="button" class="btn btn-transparent p-0 float-right">
                <i class="icon-location-pin"></i>
                </button> --}}
                <div class="text-value">{{ number_format($data['traffic']['visitors']['month'], 0, ',', ',') }}</div>
                <div>Total Visitors Past Month</div>
            </div>
            <div class="chart-wrapper mt-3 mx-3" style="height:70px;">
                <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;" class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                    </div>
                </div>
                <canvas id="card-chart2" class="chart chartjs-render-monitor" height="70" style="display: block; width: 211px; height: 70px;" width="211"></canvas>
                <div id="card-chart2-tooltip" class="chartjs-tooltip top bottom" style="opacity: 0; left: 156.508px; top: 96.6279px;">
                    <div class="tooltip-header">
                        <div class="tooltip-header-item">May</div>
                    </div>
                    <div class="tooltip-body">
                        <div class="tooltip-body-item"><span class="tooltip-body-item-color" style="background-color: rgb(38, 203, 253);"></span><span class="tooltip-body-item-label">My First dataset</span><span class="tooltip-body-item-value">34</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    

    <div class="col-sm-6 col-lg-3">
        <div class="card text-white bg-danger">
            <div class="card-body pb-0">
                <div class="btn-group float-right">
                    <button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="icon-settings"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="/admin/forms">View</a>
                    </div>
                </div>
                <div class="text-value">{{ $data['formSubmissionTotal']['week'] }}</div>
                <div>Enquiries this week</div>
            </div>
            <div class="chart-wrapper mt-3 mx-3" style="height:70px;">
                <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;" class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                </div>
            </div>
            <canvas id="card-chart4" class="chart chartjs-render-monitor" height="70" style="display: block; width: 327px; height: 70px;" width="327"></canvas>
                <div id="card-chart4-tooltip" class="chartjs-tooltip top bottom" style="opacity: 0; left: 129px; top: 151.6px;">
                    <div class="tooltip-header">
                        <div class="tooltip-header-item">June</div>
                    </div>
                    <div class="tooltip-body">
                        <div class="tooltip-body-item">
                            <span class="tooltip-body-item-color" style="background-color: rgba(230, 230, 230, 0.2);"></span>
                            <span class="tooltip-body-item-label">My First dataset</span>
                            <span class="tooltip-body-item-value">12</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        


    <div class="col-sm-6 col-lg-3">
        <div class="card text-white bg-warning">
            <div class="card-body pb-0">
                <div class="btn-group float-right">
                    <button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="icon-settings"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">View</a>
                    </div>
                </div>
                <div class="text-value">{{ $data['formSubmissionTotal']['month'] }}</div>
                <div>Enquiries last 30 days</div>
            </div>
            <div class="chart-wrapper mt-3" style="height:70px;">
                <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;" class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                    </div>
                </div>
                <canvas id="card-chart3" class="chart chartjs-render-monitor" height="70" style="display: block; width: 359px; height: 70px;" width="359"></canvas>
                <div id="card-chart3-tooltip" class="chartjs-tooltip bottom" style="opacity: 0; left: 300px; top: 151.6px;">
                    <div class="tooltip-header">
                        <div class="tooltip-header-item">June</div>
                    </div>
                    <div class="tooltip-body">
                        <div class="tooltip-body-item"><span class="tooltip-body-item-color" style="background-color: rgba(230, 230, 230, 0.2);"></span><span class="tooltip-body-item-label">My First dataset</span><span class="tooltip-body-item-value">12</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    


<div class="card">
    <div class="card-header">
        Traffic Overview - Last 7 Days
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-6">
                <div class="row">
                <div class="col-sm-6">
                    <div class="callout callout-info">
                        <small class="text-muted">New Visitors</small>
                        <br>
                        <strong class="h4">{{ number_format($data['traffic']['users']['new'], 0, ',', ',') }}</strong>
                         
                        <div class="chart-wrapper">
                            <canvas id="sparkline-chart-1" width="100" height="30"></canvas>
                        </div>
                    </div>
                </div>
                <!--/.col-->
                <div class="col-sm-6">
                    <div class="callout callout-danger">
                        <small class="text-muted">Returning Visitors</small>
                        <br>
                        <strong class="h4">{{ number_format($data['traffic']['users']['returning'], 0, ',', ',') }}</strong>
                        <div class="chart-wrapper">
                            <canvas id="sparkline-chart-2" width="100" height="30"></canvas>
                        </div>
                    </div>
                </div>
                <!--/.col-->
                </div>
                <!--/.row-->
                <hr class="mt-0">
                
                <h5>Referrals</h5>
                
                @foreach($data['traffic']['social']['referral'] as $network) 
                    @php 
                    
                        $percentage = 100 / $data['traffic']['social']['total'] * ($network['sessions'] ?? 0);
                    
                    @endphp
                    <div class="progress-group">
                        <div class="progress-group-header align-items-end">
                            <div>{{ $network['sessionSource'] ?? '' }}</div>
                            <div class="ml-auto font-weight-bold mr-2">{{ $network['sessions'] ?? 0 }} </div>
                            <div class="text-muted small">{{ round($percentage, 2) }}%</div>
                        </div>
                        <div class="progress-group-bars">
                            <div class="progress progress-xs">
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $percentage }}%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>

                @endforeach
               
            </div>
            <!--/.col-->
            <div class="col-sm-6">
                <div class="row">
                <div class="col-sm-6">
                    <div class="callout callout-warning">
                        <small class="text-muted">Page Views</small>
                        <br>
                        <strong class="h4">{{ number_format($data['traffic']['views']['week'], 0, ',', ',') }}</strong>
                        <div class="chart-wrapper">
                            <canvas id="sparkline-chart-3" width="100" height="30"></canvas>
                        </div>
                    </div>
                </div>
                <!--/.col-->
                <div class="col-sm-6">
                    <div class="callout callout-success">
                        <small class="text-muted">Organic</small>
                        <br>
                        <strong class="h4">{{ $data['traffic']['source']['organic'] }}</strong>
                        <div class="chart-wrapper">
                            <canvas id="sparkline-chart-4" width="100" height="30"></canvas>
                        </div>
                    </div>
                </div>
                <!--/.col-->
                </div>
                <!--/.row-->
                <hr class="mt-0">
                
                <div class="row">
                    <div class="col-sm-6">
                        <h5>Top Pages</h5>
                    </div>
                    <div class="col-sm-6 text-right">
                        Hits
                    </div>
                </div>
                

                @foreach($data['traffic']['pages']['top'] as $page) 
                
                <div class="progress-group">
                    <div class="progress-group-header align-items-end">
                        <div><a href="{{ isset($page['fullPageUrl']) ? 'https://' . $page['fullPageUrl'] : '#' }}">{{ $page['pageTitle'] ?? '' }}</a></div>
                        <div class="ml-auto font-weight-bold mr-2">{{ $page['screenPageViews'] ?? 0 }}</div>
                    </div>

                </div>

                @endforeach

            </div>
            <!--/.col-->
        </div>
        <!--/.row-->
    </div>
</div>

{{-- 
    <div class="card">
        <div class="card-header">
            <strong>Visitors/Views for the Last 7 Days</strong>
            <div class="card-header-actions">
                <a href="http://www.chartjs.org" class="card-header-action" target="_blank">
                    <small class="text-muted">docs</small>
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="chart-wrapper">
                <canvas id="myChart"></canvas>
            </div>
        </div>
    </div>

 --}}

    <div class="card d-none d-md-flex">
        <div class="card-header">
            <strong>Most Visited Pages (last 7 days)</strong>
            <div class="card-header-actions">
                <a href="http://www.chartjs.org" class="card-header-action" target="_blank">
                    <small class="text-muted">docs</small>
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="chart-wrapper">
                <canvas id="myChart2"></canvas>
            </div>
        </div>
    </div>


@include ('js_vars')
<script>
    function dateToYMD(date) {
        var d = date.getDate();
        var m = date.getMonth() + 1; //Month from 0 to 11
        var y = date.getFullYear();
        return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
    }

    var dates = [];

    var visitors = {
        label: 'Visitors',
        data: []
    };

    var views = {
        label: 'Page Views',
        data: []
    };


    for (var index in analytics) {
        dates.push(analytics[index].date)
        visitors.data.push(analytics[index].activeUsers)
        views.data.push(analytics[index].screenPageViews)
    }

    
    if(typeof(document.getElementById('myChart')) != "undefined" && document.getElementById('myChart') != null){
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: dates,
                datasets: [
                    {
                        label: visitors.label,
                        backgroundColor: 'rgba(32, 168, 216, 0.2)',
                        borderColor: 'rgba(32, 168, 216 0.3)',
                        data: visitors.data,
                    },
                    {
                        label: views.label,
                        backgroundColor: 'rgb(32, 168, 216, 0.2)',
                        borderColor: 'rgb(32, 168, 216 0.3)',
                        data: views.data,
                    },
                ]
            },

            // Configuration options go here
            options: {}
        });

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx)
    }

</script>


{{-- TEST --}}
<script>
    function dateToYMD(date) {
        var d = date.getDate();
        var m = date.getMonth() + 1; //Month from 0 to 11
        var y = date.getFullYear();
        return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
    }

    var pages = [];

    var Page = {
        label: 'Page',
        data: []
    };

    var views = {
        label: 'Page Views',
        data: []
    };


    for (var index in analytics2) {
        pages.push(analytics2[index].pageTitle)
        Page.data.push(analytics2[index].pageTitle)
        views.data.push(analytics2[index].screenPageViews)
    }

    var ctx2 = document.getElementById('myChart2').getContext('2d');
    var chart = new Chart(ctx2, {
        // The type of chart we want to create
        type: 'bar',

        // The data for our dataset
        data: {
            labels: pages,
            datasets: [
                {
                    label: views.label,
                    backgroundColor: 'rgb(32, 168, 216, 0.2)',
                    borderColor: 'rgb(45, 45, 180, 0.3)',
                    data: views.data,
                },
            ]
        },

        // Configuration options go here
        options: {}
    });









Chart.defaults.global.pointHitDetectionRadius = 1;
Chart.defaults.global.tooltips.enabled = false;
Chart.defaults.global.tooltips.mode = 'index';
Chart.defaults.global.tooltips.position = 'nearest';
// Chart.defaults.global.tooltips.custom = CustomTooltips; // eslint-disable-next-line no-unused-vars

var cardChart1 = new Chart($('#card-chart1'), {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: getStyle('--primary'),
      borderColor: 'rgba(255,255,255,.55)',
      data: [65, 59, 84, 84, 51, 55, 40]
    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
          display: false,
          min: 35,
          max: 89
        }
      }]
    },
    elements: {
      line: {
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); // eslint-disable-next-line no-unused-vars

var cardChart2 = new Chart($('#card-chart2'), {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: getStyle('--info'),
      borderColor: 'rgba(255,255,255,.55)',
      data: [1, 18, 9, 17, 34, 22, 11]
    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
          display: false,
          min: -4,
          max: 39
        }
      }]
    },
    elements: {
      line: {
        tension: 0.00001,
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); // eslint-disable-next-line no-unused-vars

var cardChart3 = new Chart($('#card-chart3'), {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgba(255,255,255,.2)',
      borderColor: 'rgba(255,255,255,.55)',
      data: [78, 81, 80, 45, 34, 12, 40]
    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        display: false
      }]
    },
    elements: {
      line: {
        borderWidth: 2
      },
      point: {
        radius: 0,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); // eslint-disable-next-line no-unused-vars

var cardChart4 = new Chart($('#card-chart4'), {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgba(255,255,255,.2)',
      borderColor: 'rgba(255,255,255,.55)',
      data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82]
    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: false,
        barPercentage: 0.6
      }],
      yAxes: [{
        display: false
      }]
    }
  }
}); // eslint-disable-next-line no-unused-vars





</script>

@endsection