@extends('template.master')

@section('page_styles')
{{--CUSTOM STYLES HERE--}}
    <style>
        .sidebar2 {
            background: #f2f3f8 !important;
        }

        .call-bg {
            background-color: #388aed;
            text-align: center !important;
        }

        .call-audio {
            color: white;
        }
        /*loader*/
        .loading{position:fixed;z-index:999;height:2em;width:2em;overflow:visible;margin:auto;top:0;left:0;bottom:0;right:0}.loading:before{content:'';display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.3)}.loading:not(:required){font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.loading:not(:required):after{content:'';display:block;font-size:10px;width:1em;height:1em;margin-top:-.5em;-webkit-animation:spinner 1.5s infinite linear;-moz-animation:spinner 1.5s infinite linear;-ms-animation:spinner 1.5s infinite linear;-o-animation:spinner 1.5s infinite linear;animation:spinner 1.5s infinite linear;border-radius:.5em;-webkit-box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.5) -1.5em 0 0 0,rgba(0,0,0,.5) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0;box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.75) -1.5em 0 0 0,rgba(0,0,0,.75) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
    </style>
<link rel="stylesheet" href="{{asset('css/layout/callrail.css')}}">
@stop

@section('content')

<div class="container-fluid p-0 chat">
    <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('contact_form.sidebar')
        </div>

        {{--content--}}
        <div class="col-xl-10 col-lg-10 col-md-12 d-flex ">
            <div class="card w-100 ">
                <div class="card w-100 ">
                    <!-- Begin Tab -->
                    <div class="">
                        <div>
                            <div class="card-header">
                                <div class="d-flex flex-xl-row flex-lg-row flex-md-row flex-column align-items-center">
                                    <div class="@if (\Illuminate\Support\Facades\Auth::user()->company->company_type == 1) col-xl-4 @else col-xl-7 @endif d-flex justify-content-xl-start justify-content-lg-start justify-content-md-start justify-content-center">
                                        <div class="discussion-name page-header-title text-gradient-02">Calls</div>
                                    </div>
                                    <div class="@if (\Illuminate\Support\Facades\Auth::user()->company->company_type == 1) col-xl-3 @else col-xl-4 @endif">
                                        <input class="form-control datepicker" type="text" value="@if (session()->has('date_range')){{session()->get('date_range')}}@endif">
{{--                                        <input class="form-control datepicker" type="text" value="">--}}
                                    </div>
                                    @if (\Illuminate\Support\Facades\Auth::user()->company->company_type == 1)
                                        <div class="col-xl-4">
                                            <div class="float-right">
                                                <select class="form-control" id="company">
                                                    <option>Please select</option>
                                                    @foreach ($companies as $company)
                                                        @if ($company->status === 'active')
                                                            <option value="{{$company->company_id}}" @if (Session::has('company') && Session::get('company') === $company->company_id) selected @endif>{{$company->name}}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-xl-1">
                                        <button class="btn" onclick="javascript: filter()">Filter</button>
                                    </div>
                                </div>
                            </div>
                            @if(!empty($data))
                            <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">
                                                <div class="widget-header bordered no-actions d-flex align-items-center">
                                                    <div class="col-8"></div>
{{--                                                    <div class="col-4">--}}
{{--                                                        @if (\Illuminate\Support\Facades\Session::has('date_from'))--}}
{{--                                                            <span class="badge-text info pull-right"><i class="la la-calendar-check-o"></i>--}}
{{--                                                                {{\Illuminate\Support\Facades\Session::get('date_from')}} ---}}
{{--                                                                {{\Illuminate\Support\Facades\Session::get('date_to')}}--}}
{{--                                                                </span>--}}
{{--                                                        @endif--}}
{{--                                                    </div>--}}
                                                </div>
                                                <!-- Begin Widget Body -->
                                                <div class="widget-body">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                            <div class="widget widget-25 has-shadow">
                                                                <!-- Begin Widget Header -->
                                                                <div class="widget-header no-actions d-flex align-items-center">
                                                                    <h2>Overview</h2>
                                                                </div>
                                                                <!-- End Widget Header -->
                                                                <div class="widget-body">
                                                                    <div class="row m-0 align-items-center">
                                                                        <div class="col-xl-12 text-center">
                                                                            <div class="current-weather">
                                                                                <div class="weather-report">Total Calls</div>
                                                                                <div class="temperature">{{$total_data['total']}}</div>
                                                                                <div class="condition mt-2 mb-5">
                                                                                    <i class="la la-phone"></i>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-xl-6 col-6 text-center">
                                                                            <div class="weather-next-day">
                                                                                <div class="day">Total Duration</div>
                                                                                <i class="la la-clock-o"></i>
                                                                                <div class="temp mt-2">
                                                                                    {{gmdate("i:s", $total_data['total_duration'])}} mins
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-xl-6 col-6 text-center">
                                                                            <div class="weather-next-day">
                                                                                <div class="day">Avg Duration</div>
                                                                                <i class="la la-history"></i>
                                                                                <div class="temp mt-2">
                                                                                    {{gmdate("i:s", $total_data['avg_duration'])}} mins
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-9 no-padding ">
                                                            <div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    {{--table--}}
                                    <div class="row">
                                        <div class="col-md-7">
                                            <div class="widget has-shadow">
                                                <div class="widget-header bordered no-actions d-flex align-items-center">
                                                    <h4>Calls</h4>
                                                </div>
                                                <div class="widget-body">
                                                    <div id="list-group">
                                                    <ul class="messages-list list-group w-100 list-scroll auto-scroll">
                                                        @if(!empty($data))
                                                            @foreach($data as $date => $calls)
                                                                @foreach ($calls as $call)
                                                                <li class="list-group-item">
                                                                    <a data-toggle="tab" href="#call-{{ $call->id }}" style="width: 100%;">
                                                                        <div class="media">
                                                                            <div class="media-body align-self-center">
                                                                                <div class="username">
                                                                                    <h4 id="caller_name_{{$call->id}}">{{ ucwords(strtolower($call->customer_name)) }}</h4>
                                                                                </div>
                                                                                <div class="msg">
                                                                                    <p onclick='javascript: showRecording("{{$call->id}}", "{{$call->recording}}")'>
                                                                                        <i class="la la-phone"></i>
                                                                                        &nbsp;
                                                                                        Call from {{ $call->customer_phone_number }}
                                                                                        @if (!is_null($call->recording_duration) && $call->recording_duration) (Duration:  {{gmdate("i:s", $call->recording_duration)}} mins ) @else : No recording available @endif

                                                                                    </p>
                                                                                </div>
                                                                                {{--<div id="{{$call->id}}" class="call-audio">

                                                                                </div>--}}
                                                                            </div>
                                                                            <div class="float-right media-right align-self-center">
                                                                                <span class="date-send" id="call_date_{{$call->id}}">
                                                                                    {{ date('F d, Y', strtotime($call->start_time)) }}
                                                                                    <br />
                                                                                    {{ date('h:iA', strtotime($call->start_time)) }}
                                                                                </span>
                                                                                <span class="badge-rounded info mx-auto"></span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                @endforeach
                                                            @endforeach
                                                        @else
                                                            <li class="list-group-item">No data found.</li>
                                                        @endif
                                                    </ul>
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-5 padding-top-25 padding-left-25 call-bg" id="col-recording">
                                            <div class="loading" style="display:none;">Loading&#8230;</div>
                                            <div id="" class="call-audio" style="background-color: #388aed">
                                                <h2 class="text-white p-20">
                                                    Select a recording on the call list to review a call.
                                                </h2>
                                                <img src="{{asset('img/larrow2.png')}}" align="left" style="text-align:left;width: 25%;"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @else
                                @include('no_data', [
                                              'nd_title' => 'No Available CallRail Data',
                                              'nd_subtitle' => 'Please contact our team for further assistance.'
                                   ])
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>


@stop

@section('page_modals')

@include('template.footer_scripts')

@stop

@section('page_scripts')

    <script src="{{ asset('assets/js/app/mail/mail.min.js') }}"></script>
    <script src="{{asset('assets/vendors/js/datepicker/daterangepicker.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 type="text/javascript">
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Call Statistics'
            },
            xAxis: {
                categories: [
                    @foreach($graph_by_date as $date => $calls)
                    "{{date('M d', strtotime($date))}}",
                    @endforeach
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Calls'
                }
            },
            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: '# of Calls',
                data: [
                    @foreach($graph_by_date as $date => $calls)
                        {{count($calls)}},
                    @endforeach
                ],
                color: '#388AED'

            }]
        });

        function showRecording (call_id, recording) {
            $('.call-audio').html('');
            $('.audios').remove();
            $('#'+call_id).html('');
            $('.loading').show();

            $.ajax({
                type: 'POST',
                url: '{{route('call_rails.get_recording')}}',
                data: {"recording": recording},
                dataType: 'json',
                success: function(resp) {
                    $('.loading').hide();
                    $('#col-recording').addClass('call-bg');
                    $('.call-audio').html('');
                    $('.call-audio').append(`
                        <audio class="audios" id="audio-${call_id}"
                            controls
                            controlsList="nodownload"
                            src="${resp.url}">
                            Your browser does not support the
                            <code>audio</code> element.
                        </audio>
                        `);
                    $('.call-audio').append(`<br/><br/><h6 style="color:#f7fbf9">`+ $('#call_date_'+call_id).text() +`</h6><p style='color:white'><i class="la la-phone"></i>&nbsp;Call from <b>` + $(`#caller_name_${call_id}`).text() + '</b></p>');
                    //$('#'+call_id).show();
                },
                error: function() {
                    $('.loading').hide();
                    $('.call-audio').append(`No recording available`);
                    //$('#'+call_id).show();
                }
            });

        }
    </script>
@stop