@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')}}">

@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">
                        @include('call_rails.sidebar', ['page' => 'Call Source'])
                    </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' => 'Call Source'])
                                    </div>
                                    <div class="card-body d-flex flex-column no-padding">
                                        <div class="">
                                            <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>

                                            {{--table--}}
                                            <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 site-bg" style="">
                                                            <h3 class="text-white">Call by Source</h3>
                                                        </div>
                                                        <div class="padding-top-10">
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered table-callrail mb-0 table-hover w-100" id="sourceTable">
                                                                    <thead>
                                                                    <tr>
                                                                        <th>Source</th>
                                                                        <th>Total calls</th>
                                                                        <th>Unique callers</th>
                                                                        <th>Average Duration</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    @if(isset($data->grouped_results))
                                                                        @foreach ($data->grouped_results as $call)
                                                                            <tr>
                                                                                <td>{{$call->key}}</td>
                                                                                <td>{{$call->total_calls}}</td>
                                                                                <td>{{$call->first_time_callers}}</td>
                                                                                <td>{{$call->formatted_average_duration}}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    @endif
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </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(){
            var groupColumn = 1;
            var table = $('#sourceTable').DataTable({
                "order": [[ groupColumn, 'desc' ]],
            });
        });
    </script>
    <script>
        $(function(){
            Highcharts.chart('chart-container', {

                title: {
                    text: 'Call Timeline'
                },

                subtitle: {
                    text: 'Source: callrail.com'
                },

                xAxis: {
                    type: 'datetime'
                },

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

                plotOptions: {
                    series: {
                        pointStart: Date.UTC({{date('Y', strtotime($dates[0]))}}, {{date('n', strtotime($dates[0])) - 1}}, {{date('j', strtotime($dates[0]))}}),
                        pointInterval: 7 * 24 * 3600 * 1000
                    }
                },

                series: [
                    @foreach ($highcharts_data as $source => $data)
                    {
                        name: "{{$source}}",
                        data: [
                            @foreach($data as $date => $total)
                            {{$total}},
                            @endforeach
                        ]
                    },
                    @endforeach

                ],

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

            });

        });
    </script>
@stop