@extends('template.master')

@section('page_styles')

    <link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">

@stop

@section('content')
    <div class="container-fluid account-page">
        <!-- Begin Page Header-->
        <div class="row">
            <div class="page-header">
                <div class="d-flex align-items-center">
                    <h2 class="page-header-title">Performance Reporting</h2>
                    <div>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('pr.view') }}"><i class="ti ti-home"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{ route('pr.view') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Performance Reporting</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Page Header -->

        @if(isset($message))

            <div class="d-flex justify-content-between payment-page-container">
                <div class="row" style="width: 100%;">

                    <div class="col-md-3">
                        {{ $message }}
                    </div>
                </div>
            </div>
        @else


            <div class="row" style="width: 100%;">
                <div class="col-md-12">
                    <center>
                        <div class="form-group">
                            <div class="btn-group" role="group" aria-label="Buttons Group">
                                <a href="{{ route('pr.view', ['index']) }}" class="btn btn-primary mb-2">Performance Reporting</a>
                                <a href="#" class="btn btn-secondary mb-2">Positive Momentum</a>
                                <a href="{{ route('pr.view', ['traffic']) }}" class="btn btn-primary mb-2">Site Traffic</a>
                                <a href="{{ route('pr.view', ['exposure']) }}" class="btn btn-primary mb-2">Site Exposure</a>
                            </div>
                        </div>
                    </center>
                </div> 
            </div>

            <br/>

            <div class="row" style="width: 100%;">
                <div class="col-md-12">
                    <div class="alert alert-shadow alert-lg" role="alert">
                        <i class="la la-rocket mr-2"></i>
                        <strong style="font-weight: bold; font-size: 1.5em">{{ $account->site_url }}</strong>
                        &nbsp; 

                        <select class="form-control" id="report_date" onchange="javascript: reload()" style="width: 200px; float: right;">
                            @foreach($all_date as $k => $d)
                                @if($k != 0)
                                    <option value="{{$d->report_date}}" @if($d->report_date == date('Y-m', strtotime($date['start_date']))) selected="selected" @endif >{{ date('M Y', strtotime($d->report_date)) }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <br/>

            <div class="d-flex justify-content-between payment-page-container">

                <div class="row" style="width: 100%;">

                    <div class="col-md-3">

                        <div class="widget has-shadow" style="padding: 5% 0 5% 0;">
                            
                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <div class="widget widget-16 has-shadow">
                                    <div class="widget-body">
                                        <div class="row">
                                            <div class="col-xl-12 d-flex flex-column justify-content-center align-items-center">
                                                <div class="counter">{{ $data->positive_momemntum->total_visits }}</div>
                                                <div class="total-views">Total Visits</div>
                                                @php 
                                                    $rate = 0;
                                                    $color = 'yellow';
                                                    $icon = '';
                                                    $old = json_decode($old_data->positive_momemntum);
                                                    if($data->positive_momemntum->total_visits > $old->total_visits)
                                                    {
                                                        $color = 'green';
                                                        $icon = 'la-arrow-up';
                                                        $rate = number_format($data->positive_momemntum->total_visits / $old->total_visits, 2);
                                                    }
                                                    else if($data->positive_momemntum->total_visits < $old->total_visits)
                                                    {
                                                        $color = 'red';
                                                        $icon = 'la-arrow-down';
                                                        $rate = number_format($old->total_visits / $data->positive_momemntum->total_visits, 2);
                                                    }
                                                @endphp
                                                <span class="text-{{ $color }}"><i class="la {{ $icon }}"></i>&nbsp;{{ $rate }}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <div class="widget widget-16 has-shadow">
                                    <div class="widget-body">
                                        <div class="row">
                                            <div class="col-xl-12 d-flex flex-column justify-content-center align-items-center">
                                                <div class="counter">{{ $data->positive_momemntum->unique_page_views }}</div>
                                                <div class="total-views">Unique Page Views</div>
                                                @php 
                                                    $rate = 0;
                                                    $color = 'yellow';
                                                    $icon = '';
                                                    $old = json_decode($old_data->positive_momemntum);
                                                    if($data->positive_momemntum->unique_page_views > $old->unique_page_views)
                                                    {
                                                        $color = 'green';
                                                        $icon = 'la-arrow-up';
                                                        $rate = number_format($data->positive_momemntum->unique_page_views / $old->unique_page_views, 2);
                                                    }
                                                    else if($data->positive_momemntum->unique_page_views < $old->unique_page_views)
                                                    {
                                                        $color = 'red';
                                                        $icon = 'la-arrow-down';
                                                        $rate = number_format($old->unique_page_views / $data->positive_momemntum->unique_page_views, 2);
                                                    }
                                                @endphp
                                                <span class="text-{{ $color }}"><i class="la {{ $icon }}"></i>&nbsp;{{ $rate }}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <div class="widget widget-16 has-shadow">
                                    <div class="widget-body">
                                        <div class="row">
                                            <div class="col-xl-12 d-flex flex-column justify-content-center align-items-center">
                                                <div class="counter">{{ $data->positive_momemntum->new_visits }}</div>
                                                <div class="total-views">New Visits</div>
                                                @php 
                                                    $rate = 0;
                                                    $color = 'yellow';
                                                    $icon = '';
                                                    $old = json_decode($old_data->positive_momemntum);
                                                    if($data->positive_momemntum->new_visits > $old->new_visits)
                                                    {
                                                        $color = 'green';
                                                        $icon = 'la-arrow-up';
                                                        $rate = number_format($data->positive_momemntum->new_visits / $old->new_visits, 2);
                                                    }
                                                    else if($data->positive_momemntum->new_visits < $old->new_visits)
                                                    {
                                                        $color = 'red';
                                                        $icon = 'la-arrow-down';
                                                        $rate = number_format($old->new_visits / $data->positive_momemntum->new_visits, 2);
                                                    }
                                                @endphp
                                                <span class="text-{{ $color }}"><i class="la {{ $icon }}"></i>&nbsp;{{ $rate }}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="row">

                            <div class="col-md-12">
                                <div class="widget has-shadow">
                                    <div class="widget-header bordered no-actions d-flex align-items-center">
                                        <h4>Browser</h4>
                                    </div>
                                    <div class="widget-body">
                                        <div class="chart">
                                            <canvas id="browser-canvas"></canvas>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                    </div>


                    <div class="col-md-3">

                        <div class="widget has-shadow" style="padding: 5% 0 5% 0;">
                                
                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <div class="widget widget-16 has-shadow">
                                    <div class="widget-body">
                                        <div class="row">
                                            <div class="col-xl-12 d-flex flex-column justify-content-center align-items-center">
                                                <div class="counter">{{ $data->positive_momemntum->page_views }}</div>
                                                <div class="total-views">Page Views</div>
                                                @php 
                                                    $rate = 0;
                                                    $color = 'yellow';
                                                    $icon = '';
                                                    $old = json_decode($old_data->positive_momemntum);
                                                    if($data->positive_momemntum->page_views > $old->page_views)
                                                    {
                                                        $color = 'green';
                                                        $icon = 'la-arrow-up';
                                                        $rate = number_format($data->positive_momemntum->page_views / $old->page_views, 2);
                                                    }
                                                    else if($data->positive_momemntum->page_views < $old->page_views)
                                                    {
                                                        $color = 'red';
                                                        $icon = 'la-arrow-down';
                                                        $rate = number_format($old->page_views / $data->positive_momemntum->page_views, 2);
                                                    }
                                                @endphp
                                                <span class="text-{{ $color }}"><i class="la {{ $icon }}"></i>&nbsp;{{ $rate }}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <div class="widget widget-16 has-shadow">
                                    <div class="widget-body">
                                        <div class="row">
                                            <div class="col-xl-12 d-flex flex-column justify-content-center align-items-center">
                                                <div class="counter">{{ number_format($data->positive_momemntum->traffic->avg_page_load, 2) }}</div>
                                                <div class="total-views">Avg Page Load</div>
                                                @php 
                                                    $rate = 0;
                                                    $color = 'yellow';
                                                    $icon = '';
                                                    $old = json_decode($old_data->positive_momemntum);
                                                    if($data->positive_momemntum->traffic->avg_page_load > $old->traffic->avg_page_load)
                                                    {
                                                        $color = 'green';
                                                        $icon = 'la-arrow-up';
                                                        $rate = number_format($data->positive_momemntum->traffic->avg_page_load / $old->traffic->avg_page_load, 2);
                                                    }
                                                    else if($data->positive_momemntum->traffic->avg_page_load < $old->traffic->avg_page_load)
                                                    {
                                                        $color = 'red';
                                                        $icon = 'la-arrow-down';
                                                        $rate = number_format($old->traffic->avg_page_load / $data->positive_momemntum->traffic->avg_page_load, 2);
                                                    }
                                                @endphp
                                                <span class="text-{{ $color }}"><i class="la {{ $icon }}"></i>&nbsp;{{ $rate }}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <div class="widget widget-16 has-shadow">
                                    <div class="widget-body">
                                        <div class="row">
                                            <div class="col-xl-12 d-flex flex-column justify-content-center align-items-center">
                                                <div class="counter">{{ number_format($data->positive_momemntum->traffic->avg_time_on_page, 2) }}</div>
                                                <div class="total-views">Avg Time On Page</div>
                                                @php 
                                                    $rate = 0;
                                                    $color = 'yellow';
                                                    $icon = '';
                                                    $old = json_decode($old_data->positive_momemntum);
                                                    if($data->positive_momemntum->traffic->avg_time_on_page > $old->traffic->avg_time_on_page)
                                                    {
                                                        $color = 'green';
                                                        $icon = 'la-arrow-up';
                                                        $rate = number_format($data->positive_momemntum->traffic->avg_time_on_page / $old->traffic->avg_time_on_page, 2);
                                                    }
                                                    else if($data->positive_momemntum->traffic->avg_time_on_page < $old->traffic->avg_time_on_page)
                                                    {
                                                        $color = 'red';
                                                        $icon = 'la-arrow-down';
                                                        $rate = number_format($old->traffic->avg_time_on_page / $data->positive_momemntum->traffic->avg_time_on_page, 2);
                                                    }
                                                @endphp
                                                <span class="text-{{ $color }}"><i class="la {{ $icon }}"></i>&nbsp;{{ $rate }}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <br/>

                    <div class="col-md-12">

                        <div class="widget has-shadow">
                            <div class="widget-header bordered no-actions d-flex align-items-center">
                                <h4>Channel Grouping Data</h4>
                            </div>
                            <div class="widget-body">
                                <div class="chart" style="height:100%;width: 100%;">
                                    <canvas id="pr-canvas" style="height:100%;width: 100%;"></canvas>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        @endif

    </div>

@stop

@section('page_modals')

@stop
@section('page_scripts')

    <script src="{{ asset('assets/vendors/js/progress/circle-progress.min.js')}}"></script>

    <script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>
    
    <script>
        
        $(document).ready(function() {

        });

        function reload()
        {
            var date = $('#report_date').val();
            location.href = '{{ route('pr.view', ['positive_momentum']) }}?date='+date;
        }

        @if(!isset($message) && !empty($channelGroup['Direct']))

            var ctx = document.getElementById("pr-canvas").getContext('2d');

            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [
                            @foreach($channelGroup['Direct'] as $key => $value)
                                "{{ $key }}",
                            @endforeach
                        ],
                    datasets: [

                        @php $ctr = 0; @endphp
                        @foreach($channelGroup as $key => $value)

                            @php
                                switch ($ctr) {
                                    case 0: $color = '#e76c90'; break;
                                    case 1: $color = '#5d5386'; break;
                                    case 2: $color = '#dde1e9'; break;
                                    case 3: $color = '#ff4d4d'; break;
                                    case 4: $color = '#ffbf00'; break;
                                    case 5: $color = '#ffff00'; break;
                                    case 6: $color = '#80ff00'; break;
                                    case 7: $color = '#0080ff'; break;
                                    case 8: $color = '#8000ff'; break;
                                    case 9: $color = '#ff00bf'; break;
                                }
                                $ctr += 1;
                            @endphp
                        {
                            label: "{{ $key }}",
                            borderColor: "{{ $color }}",
                            pointBackgroundColor: "{{ $color }}",
                            pointHoverBorderColor: "{{ $color }}",
                            pointHoverBackgroundColor: "{{ $color }}",
                            pointBorderColor: "#fff",
                            pointBorderWidth: 3,
                            pointRadius: 6,
                            fill: true,
                            backgroundColor: "transparent",
                            borderWidth: 3,
                            data: [
                                @foreach($value as $k => $v)
                                    {{ $v }},
                                @endforeach
                            ]
                        },

                        @endforeach
                    ]
                },
                options: {
                    legend: {
                        display: false
                    },
                    tooltips: {
                        backgroundColor: 'rgba(47, 49, 66, 0.8)',
                        titleFontSize: 13,
                        titleFontColor: '#fff',
                        caretSize: 0,
                        cornerRadius: 4,
                        xPadding: 10,
                        displayColors: false,
                        yPadding: 10
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                display: true,
                                beginAtZero: true
                            },
                            gridLines: {
                                drawBorder: true,
                                display: true
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                drawBorder: true,
                                display: true
                            },
                            ticks: {
                                display: true
                            }
                        }]
                    }
                }
            });

            var ctx = document.getElementById("browser-canvas").getContext('2d');
        
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["{{ $date['start_date'] . ' - ' . $date['end_date'] }}"],
                    datasets: [{
                        label: "Google",
                        data: [{{ $data->positive_momemntum->google }}],
                        borderColor: "#fff",
                        backgroundColor: "rgba(93, 83, 134, 0.85)",
                        hoverBackgroundColor: "#5d5386"
                    }, {
                        label: "Bing",
                        data: [{{ $data->positive_momemntum->bing }}],
                        borderColor: "#fff",
                        backgroundColor: "#e4e8f0",
                        hoverBackgroundColor: "#dde1e9"
                    }, {
                        label: "Yahoo",
                        data: [{{ $data->positive_momemntum->yahoo }}],
                        borderColor: "#fff",
                        backgroundColor: "#ff8080",
                        hoverBackgroundColor: "#ff4d4d"
                    }]  
                },
                options: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            fontColor: "#2e3451",
                            usePointStyle: true,
                            fontSize: 13
                        }
                    },
                    tooltips: {
                        backgroundColor: 'rgba(47, 49, 66, 0.8)',
                        titleFontSize: 13,
                        titleFontColor: '#fff',
                        caretSize: 0,
                        cornerRadius: 4,
                        xPadding: 10,
                        displayColors: false,
                        yPadding: 10
                    },
                    scales: {
                        xAxes: [{
                            stacked: false,
                            gridLines: {
                                drawBorder: true,
                                display: true
                            },
                            ticks: {
                                display: true
                            }
                        }],
                        yAxes: [{
                            stacked: false,
                            gridLines: {
                                drawBorder: true,
                                display: true
                            },
                            ticks: {
                                display: true
                            }
                        }]
                    }   
                }
            });

        @endif

    </script>
@stop