@extends('admin.layouts.app')

@section('content')

        <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Account Details
        </h1>

        <div class="row">
            <div class="col-xs-12">
                <div class="app-buttons-wrap">

                    @include('admin.account.top_action_bar')

                    <a href="{{route('admin_edit_account',['id' => $account->id])}}" class="btn btn-app">
                        <i class="fa fa-pencil-square-o"></i> Edit Account
                    </a>

                    <a href="{{route('admin_tracking_code',['id' => $account->id])}}" class="btn btn-app">
                        <i class="fa fa-code"></i> Tracking Code
                    </a>

                    <a href="{{route('all_tracking_data',['id' => $account->id])}}" class="btn btn-app">
                        <i class="fa fa-line-chart"></i> All Tracking Data
                    </a>

                    <a href="{{route('admin_set_goal',['id' => $account->id])}}" class="btn btn-app">
                        <i class="fa fa-futbol-o" aria-hidden="true"></i> Set Goals
                    </a>

                    <a href="{{route('admin_account_goals',['id' => $account->id])}}" class="btn btn-app">
                        <i class="fa fa-trophy"></i> Available Goals
                    </a>

                </div>
            </div>
        </div>

        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="#">Admin</li>
            <li class="active">Account Details</li>
        </ol>
    </section>



    <!-- Main content -->
    <section class="content">
        <!-- Small boxes (Stat box) -->

        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Monthly Recap Report</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-times"></i></button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-12">
                                <p class="text-center">
                                    <strong>Traffic: 1 {{date('M')}}, {{date('Y')}} - {{date('t')}} {{date('M')}}, {{date('Y')}}</strong>
                                </p>

                                <div class="chart">
                                    <!-- Sales Chart Canvas -->
                                    <canvas id="salesChart" style="height: 180px;"></canvas>
                                </div>
                                <!-- /.chart-responsive -->
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- ./box-body -->
                    <div class="box-footer">

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

        <!-- Main row -->
        <div class="row">
            <!-- Left col -->
            <div class="col-md-6">
                <!-- TABLE: LATEST ORDERS -->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Top Referrers</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-times"></i></button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table no-margin">
                                <thead>
                                <tr>
                                    <th>Referrer URL</th>
                                    <th>Count</th>
                                    <th>Percentage</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($top_referrers as $data)
                                    <tr>
                                        <td>{{$data->referrer}}</td>
                                        <td>{{$data->ref_total}}</td>
                                        <td>{{number_format((float)($data->ref_total / $report_sum * 100), 2, '.', '')}}%</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer clearfix">

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

            <!-- Right col -->
            <div class="col-md-6">
                <!-- TABLE: LATEST ORDERS -->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Top Visitor Locations</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-times"></i></button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table no-margin">
                                <thead>
                                <tr>
                                    <th>Visitor Location</th>
                                    <th>Count</th>
                                    <th>Percentage</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($top_locations as $data)
                                    <tr>
                                        <td>{{$data->city_name}}</td>
                                        <td>{{$data->city_total}}</td>
                                        <td>{{number_format((float)($data->city_total / $report_sum * 100), 2, '.', '')}}%</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer clearfix">

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

        </div>


        <!-- Main row -->
        <div class="row">
            <!-- Left col -->
            <div class="col-md-6">
                <!-- TABLE: LATEST ORDERS -->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Top Browsers</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-times"></i></button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table no-margin">
                                <thead>
                                <tr>
                                    <th>Browser</th>
                                    <th>Count</th>
                                    <th>Percentage</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($top_browsers as $data)
                                    <tr>
                                        <td>{{$data->browser}}</td>
                                        <td>{{$data->browser_total}}</td>
                                        <td>{{number_format((float)($data->browser_total / $report_sum * 100), 2, '.', '')}}%</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer clearfix">

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

            <!-- Right col -->
            <div class="col-md-6">
                <!-- TABLE: LATEST ORDERS -->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Top Operating Systems</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-times"></i></button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table no-margin">
                                <thead>
                                <tr>
                                    <th>Operating System</th>
                                    <th>Count</th>
                                    <th>Percentage</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($top_os as $data)
                                    <tr>
                                        <td>{{$data->operating_system}}</td>
                                        <td>{{$data->os_total}}</td>
                                        <td>{{number_format((float)($data->os_total / $report_sum * 100), 2, '.', '')}}%</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer clearfix">

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

        </div>

        <!-- Main row -->
        <div class="row">
            <!-- Left col -->
            <div class="col-md-12">
                <!-- TABLE: LATEST ORDERS -->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Top Pages</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-times"></i></button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table no-margin">
                                <thead>
                                <tr>
                                    <th>Page URL</th>
                                    <th>Count</th>
                                    <th>Percentage</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($top_pages as $data)
                                    <tr>
                                        <td>{{$data->actual_path}}</td>
                                        <td>{{$data->path_total}}</td>
                                        <td>{{number_format((float)($data->path_total / $report_sum * 100), 2, '.', '')}}%</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer clearfix">

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

        </div>

    </section>
    <!-- /.content -->



</div>

@endsection

@section('footer_extra')
    <!-- ChartJS -->
    <script src="{{URL::asset('assets/bower_components/chart.js/Chart.js')}}"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            // -----------------------
            // - MONTHLY SALES CHART -
            // -----------------------

            // Get context with jQuery - using jQuery's .get() method.
            var salesChartCanvas = $('#salesChart').get(0).getContext('2d');
            // This will get the first returned node in the jQuery collection.
            var salesChart       = new Chart(salesChartCanvas);

            var salesChartData = {
                labels  : [ @foreach($daily_counts as $row) {{ \Carbon\Carbon::parse($row->tracking_date)->format('j') . ',' }} @endforeach ],
                datasets: [
                    {
                        label               : 'Traffic',
                        fillColor           : 'rgba(60,141,188,0.9)',
                        strokeColor         : 'rgba(60,141,188,0.8)',
                        pointColor          : '#3b8bba',
                        pointStrokeColor    : 'rgba(60,141,188,1)',
                        pointHighlightFill  : '#fff',
                        pointHighlightStroke: 'rgba(60,141,188,1)',
                        data                : [ @foreach($daily_counts as $row) {{$row->total . ','}} @endforeach ]
                    }
                ]
            };

            var salesChartOptions = {
                // Boolean - If we should show the scale at all
                showScale               : true,
                // Boolean - Whether grid lines are shown across the chart
                scaleShowGridLines      : false,
                // String - Colour of the grid lines
                scaleGridLineColor      : 'rgba(0,0,0,.05)',
                // Number - Width of the grid lines
                scaleGridLineWidth      : 1,
                // Boolean - Whether to show horizontal lines (except X axis)
                scaleShowHorizontalLines: true,
                // Boolean - Whether to show vertical lines (except Y axis)
                scaleShowVerticalLines  : true,
                // Boolean - Whether the line is curved between points
                bezierCurve             : true,
                // Number - Tension of the bezier curve between points
                bezierCurveTension      : 0.3,
                // Boolean - Whether to show a dot for each point
                pointDot                : false,
                // Number - Radius of each point dot in pixels
                pointDotRadius          : 4,
                // Number - Pixel width of point dot stroke
                pointDotStrokeWidth     : 1,
                // Number - amount extra to add to the radius to cater for hit detection outside the drawn point
                pointHitDetectionRadius : 20,
                // Boolean - Whether to show a stroke for datasets
                datasetStroke           : true,
                // Number - Pixel width of dataset stroke
                datasetStrokeWidth      : 2,
                // Boolean - Whether to fill the dataset with a color
                datasetFill             : true,
                // String - A legend template
                legendTemplate          : '<ul class=\'<%=name.toLowerCase()%>-legend\'><% for (var i=0; i<datasets.length; i++){%><li><span style=\'background-color:<%=datasets[i].lineColor%>\'></span><%=datasets[i].label%></li><%}%></ul>',
                // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                maintainAspectRatio     : true,
                // Boolean - whether to make the chart responsive to window resizing
                responsive              : true
            };

            // Create the line chart
            salesChart.Line(salesChartData, salesChartOptions);

            // ---------------------------
            // - END MONTHLY TRAFFIC CHART -
            // ---------------------------
        });
    </script>

@endsection