@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <style>
        .call-audio {
            display:none;
        }
    </style>
    <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">
                        <!-- Begin Friendslist -->
                        @include('call_rails.sidebar', ['page' => 'Call Log'])
                        <!-- 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">
                                        <div class="d-flex flex-xl-row flex-lg-row flex-md-row flex-column align-items-center">
                                            <div class="col-xl-4 d-flex justify-content-xl-start justify-content-lg-start justify-content-md-start justify-content-center">
                                                <div class="discussion-name">Call Log</div>
                                            </div>
                                            @if(\Illuminate\Support\Facades\Auth::user()->company->company_type == 2)
                                                <div class="col-xl-4"></div>
                                            @endif
                                            <div class="col-xl-3">
                                                <input class="form-control datepicker float-right" type="text" value="@if (\Illuminate\Support\Facades\Session::has('date_range')){{\Illuminate\Support\Facades\Session::get('date_range')}}@endif">
                                            </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>
                                    <div class="card-body d-flex flex-column no-padding">
                                        <div class="">
                                            {{--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 Log</h3>
                                                        </div>
                                                        <div class="padding-top-10">
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered table-hover mb-0" id="callLogTable">
                                                                    <thead>
                                                                    <tr>
                                                                        <th>Tracking #</th>
                                                                        <th>Caller</th>
                                                                        <th>Source</th>
                                                                        <th>Source Detail</th>
                                                                        <th>Audio</th>
                                                                        <th>Metrics</th>
                                                                        <th>Receiving #</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    @if (isset($data->calls))
                                                                        @foreach ($data->calls as $index => $call)
                                                                            <tr>
                                                                                <td>{{$call->tracking_phone_number}}</td>
                                                                                <td><span class="text-blue">{{$call->customer_name}}</span>
                                                                                    <br/>{{$call->customer_phone_number}}
                                                                                    <br/>{{$call->customer_city}}, {{$call->customer_country}}</td>
                                                                                <td>{{$call->utm_source}}</td>
                                                                                <td>{{$call->formatted_tracking_source}}</td>
                                                                                <td>
                                                                                    <a onclick='javascript: showRecording("{{$call->id}}", "{{$call->recording}}")' style="cursor: pointer">play</a>
                                                                                    <div id="{{$call->id}}" class="call-audio">

                                                                                    </div>
                                                                                <br/>{{gmdate("i:s", $call->recording_duration)}} mins</td>
                                                                                <td>{{date('Y-m-d', strtotime($call->start_time))}}
                                                                                <br/><span class="text-blue"><i class="la la-clock-o"></i> {{date('h:i a', strtotime($call->start_time))}}</span>
                                                                                <br/>@if($call->answered) <span class="text-success">answered</span> @else <span class="text-danger">not answered</span> @endif</td>
                                                                                <td>{{$call->business_phone_number}}</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')
    <div id="tracking-numbers" class="modal fade">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Tracking Numbers List</h4>
                    <button type="button" class="close" data-dismiss="modal" onclick="javascript: hideTrackingNumbers()">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <div class="modal-body">
                    <iframe src="https://app.callrail.com/v2/a/171472856/calls/516125824/recording?access_key=67e668fe447f37c8565b"></iframe>
                </div>
            </div>
        </div>
    </div>
@stop
@section('page_scripts')
    @include('call_rails.calljs')
    <script>
        $(function(){
            var groupColumn = 1;
            var table = $('#callLogTable').DataTable({
                "order": [[ groupColumn, 'desc' ]],
            });
        });

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

            $.ajax({
                type: 'POST',
                url: '{{route('call_rails.get_recording')}}',
                data: {"recording": recording},
                dataType: 'json',
                success: function(resp) {
                    $('#'+call_id).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_id).show();
                },
                error: function() {
                    $('#'+call_id).append(`No recording available`);
                    $('#'+call_id).show();
                }
            });

        }
    </script>

    <!--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>
@stop