@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="{{asset('assets/css/datatables/datatables.min.css')}}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{asset('css/layout/callrail.css')}}">
    <link rel="stylesheet" href="{{ asset('css/pages/gmb.css') }}">
    <link rel="stylesheet" href="{{ asset('css/pages/gmb.view.css') }}">
@stop

@section('content')
    <div class="container-fluid p-0 chat">
        <div class="row m-0">
            <div class="col-xl-12 p-0">
                <!-- Begin Widget -->
                <div class="row m-0 widget no-bg">
                    <!-- Begin Friends Sidebar -->
                    <div class="col-xl-2 col-lg-3 col-md-12 p-0" id="sidebar">
                        <!-- Begin Friendslist -->
                        @include('call_rails.sidebar', ['page' => 'Dashboard'])
                        <!-- End Friendslist -->
                    </div>
                    <!-- End Friends Sidebar -->
                    <!-- Begin Messages -->
                    <div class="col-xl-10 col-lg-10 col-md-12 d-flex ">
                        <!-- Begin Card -->
                        <div class="card w-100 ">
                            <!-- Begin Tab -->
                            <div class="">
                                <div>
                                    <div class="card-header">
                                        @include('call_rails.filter', ['_title' => 'Dashboard'])
                                    </div>

                                    <div class="card-body d-flex flex-column no-padding">
                                        @if (empty($data))
                                            @include('no_data', [
                                                       'nd_title' => 'No Available CallRail Data',
                                                       'nd_subtitle' => 'Please contact our team for further assistance.'
                                            ])
                                        @else
                                        <div class="">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    {{----}}
                                                    {{----}}
                                                                                                        <div class="row border  inside-row ">
                                                    @foreach($_overview_data as $_od_title => $_od)
                                                        <div style="" class="col-md-4 justify-content-start text-center box-stats">
                                                            <div class="widget-box">
                                                                <div class="widget-box-in stats-widget-in">
                                                                    <h2 class="font-weight-bold">
                                                                        {{$_od}}
                                                                    </h2><br>
                                                                    <b>{{$_od_title}}</b>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                    </div>
                                                    {{----}}
                                                    {{----}}

                                                </div>
                                            </div>
                                            <div class="cleafix"><br /></div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="widget widget-09 has-shadow">
                                                        <!-- Begin Widget Body -->
                                                        <div class="widget-body">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-12 no-padding border border-dark">
                                                                    <div id="chart-container" style="width: 100%; height: 300px; margin: 0 auto"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="cleafix"><br /></div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="widget widget-09 has-shadow">
                                                        <!-- Begin Widget Body -->
                                                        <div class="widget-body">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-12 no-padding border border-dark">
                                                                    <div id="pie-by-source-container" style="width: 100%; height: 300px; margin: 0 auto"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="widget widget-09 has-shadow">
                                                        <!-- Begin Widget Body -->
                                                        <div class="widget-body">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-12 no-padding border border-dark">
                                                                    <div id="pie-average-container" style="width: 100%; height: 300px; margin: 0 auto"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="widget widget-09 has-shadow">
                                                        <!-- Begin Widget Body -->
                                                        <div class="widget-body">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-12 no-padding border border-dark">
                                                                    <div id="new-repeat-container" style="width: 100%; height: 300px; margin: 0 auto"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Card -->
                    </div>
                </div>
                <!-- End Widget -->
            </div>
            <!-- End Col -->
        </div>
        <!-- End Row -->
    </div>
@stop

@section('page_modals')

@stop
@section('page_scripts')


    <!--CUSTOM SCRIPTS-->
    <script src="{{asset('assets/vendors/js/datatables/datatables.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/jszip.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/buttons.html5.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/pdfmake.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/vfs_fonts.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/buttons.print.min.js')}}"></script>
    <script src="{{asset('assets/js/components/tables/tables.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datepicker/daterangepicker.js')}}"></script>

    {{--    <script src="{{asset('assets/js/components/wizard/form-wizard.min.js')}}"></script>--}}
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>

    @include('call_rails.calljs')
    <script>

        $(function(){
            Highcharts.chart('chart-container', {

                title: {
                    text: 'Call Timeline @if(isset($week_data['week_1st']) && isset($week_data['week_last']) && !is_array($week_data['week_1st']) && !is_array($week_data['week_last'])) {{$week_data['week_1st']}} to {{$week_data['week_last']}} @endif'
                },
                credits: {
                  enabled: false
                },
                subtitle: {
                    text: 'Source: callrail.com'
                },

                xAxis: {
                    type: 'datetime'
                },

                yAxis: {
                    title: {
                        text: 'Calls'
                    },
                    tickInterval: 5,
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },

                plotOptions: {
                    series: {
                        @if (isset($data_by_time_series) && !empty($data_by_time_series))
                        pointStart: Date.UTC({{date('Y', strtotime($data_by_time_series[0]->date))}}, {{date('n', strtotime($data_by_time_series[0]->date))-1}}, {{date('d', strtotime($data_by_time_series[0]->date))}}),
                        pointInterval: 24 * 3600 * 1000
                        @endif
                    }
                },

                series: [{
                    name: 'Calls',
                    data:
                        [
                            @if (isset($data_by_time_series) && !empty($data_by_time_series))
                                @foreach ($data_by_time_series as $series)
                                    {{$series->total_calls}},
                                @endforeach
                            @endif
                        ]
                }, {
                    name: 'Unique Calls',
                    data:
                        [
                            @if (isset($data_by_time_series) && !empty($data_by_time_series))
                                @foreach ($data_by_time_series as $series)
                                   {{$series->first_time_callers}},
                                @endforeach
                            @endif
                        ]
                }],

                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }

            });

            Highcharts.chart('pie-by-source-container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },credits: {
                    enabled: false
                },
                title: {
                    text: 'Call by Source'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '{point.percentage:.1f} %'
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    name: 'Percent',
                    colorByPoint: true,
                    data: [
                        @if (isset($data->grouped_results))
                            @foreach ($data->grouped_results as $index => $call)
                            {
                                name: "{{$call->key}}",
                                y: {{$call->total_calls}},
                            },
                            @endforeach
                        @endif
                    ]
                }]
            });

            Highcharts.chart('pie-average-container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },credits: {
                    enabled: false
                },
                title: {
                    text: 'Average Call Duration by Source'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y}mins</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                    }
                },
                series: [{
                    name: 'Minutes',
                    colorByPoint: true,
                    data: [
                        @if (isset($data->grouped_results))
                            @foreach ($data->grouped_results as $index => $call)
                            {
                                name: "{{$call->key}}",
                                y: {{$call->average_duration}},
                            },
                            @endforeach
                        @endif
                    ]
                }]
            });

            Highcharts.chart('new-repeat-container', {
                chart: {
                    type: 'column'
                },credits: {
                    enabled: false
                },
                title: {
                    text: 'New vs Repeat'
                },
                subtitle: {
                    text: 'Source: callrail.com'
                },
                xAxis: {
                    categories: [
                        'New',
                        'Repeat',
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Calls (new vs repeat)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Calls',
                    data: [{{$new_vs_repeat['new']}}, {{$new_vs_repeat['repeat']}}]

                }]
            });
        });
    </script>
@stop