@extends('admin.layouts.app')

@section('header_extra')
        <!-- Date Picker -->
<link rel="stylesheet" href="{{URL::asset('assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css')}}">
@endsection

@section('content')

        <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            {{$account->account_name}}
        </h1>

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

                    @include('admin.account.top_action_bar')

                    <a href="{{route('admin_account_goals',['id' => $account->id])}}" class="btn btn-app">
                        <i class="fa fa-arrow-left"></i> Back to 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">Show Goal</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <!-- left column -->
            <div class="col-md-6">
                <!-- general form elements -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Goal Info</h3>
                    </div>
                    <!-- /.box-header -->

                    <div class="box-body">
                        <p><strong>Account Name:</strong> {{$account->account_name}}</p>
                        <p><strong>Domain Name:</strong> {{$account->domain}}</p>
                        <p><strong>Goal Name:</strong> {{$goal->goal_name}}</p>
                        <p><strong>Start Date:</strong> {{ \Carbon\Carbon::parse($goal->goal_start_date)->format('j F, Y') }}</p>
                        <p><strong>End Date:</strong> {{ \Carbon\Carbon::parse($goal->goal_end_date)->format('j F, Y') }}</p>
                        <p><strong>Status:</strong> <span class="label {{ $goal->goal_status == 1 ? 'bg-green' : 'bg-gray' }} text-center table-status-field">{{ $goal->goal_status == 1 ? "Active" : "Disabled" }}</span></p>
                        <p><strong>Goal Type:</strong> {{$goal->goal_type}}</p>
                        <p><strong>Goal Track:</strong> {{$goal->goal_track}}</p>
                    </div>

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

            </div>
            <!--/.col (left) -->

            <!-- right column -->
            <div class="col-md-6">

                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Actions</h3>
                    </div>
                    <!-- /.box-header -->

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

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

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

            </div>
            <!--/.col (right) -->

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


        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Goal 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">
                                <div class="chart">
                                    <!-- Sales Chart Canvas -->
                                    <canvas id="canvas" style="height: 300px;"></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->goal_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->goal_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->goal_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->goal_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>



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

</div>

@endsection

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

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

            var MONTHS = [@foreach($daily_counts as $row) {!! "'" . \Carbon\Carbon::parse($row->tracking_date)->format('j M Y') . "'," !!} @endforeach];
            var config = {
                type: 'line',
                data: {
                    labels: [@foreach($daily_counts as $row) {!! "'" . \Carbon\Carbon::parse($row->tracking_date)->format('j M Y') . "'," !!} @endforeach],
                    datasets: [{
                        label: "{{$goal->goal_name}}",
                        backgroundColor: 'rgb(54, 162, 235)',
                        borderColor: 'rgb(54, 162, 235)',
                        data: [ @foreach($daily_counts as $row) {{$row->total . ','}} @endforeach ],
                        fill: false,
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: ''
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        x: {
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Month'
                            }
                        },
                        y: {
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Value'
                            }
                        }
                    }
                }
            };

            window.onload = function() {
                var ctx = document.getElementById('canvas').getContext('2d');
                window.myLine = new Chart(ctx, config);
            };

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

@endsection