@extends('layouts.app')

@section('content')

<div class="row">
    {!! $filter_area !!}
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="card collapsible">
            <div id="dashboard_tickets" class="header card-inside-title">

                <h2 class="pointer">
                    Outbound Calls
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
            </div>
            <div class="body panel-content">
                <div class="table-responsive col-lg-12 col-md-12 col-sm-12">
                    <table class="table users table-sortable data-table">
                        <Thead>
                            <tr>
                                <th class="th-sort-asc">Time</th>
                                <th>Ext.</th>
                                <th>Agent Name</th>
                                <th>Number</th>
                                <th>T. Duration</th>
                                <th>TalkTime</th>
                                <th>RingTime</th>
                                <th>Disp.</th>
                                <th>Dialed Thru</th>
                                @can('reporting.survey_outbound')
                                <th>Survey</th>
                                @endcan
                                <th>Actions</th>
                            </tr>
                        </Thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
@push('scripts')
    <script type="text/javascript">
    @php
        $conds_combined             = 'daterange='.implode(' - ',$conds).'&did_ext='.$did_ext.'&user_ext='.$user_ext;
    @endphp
    
    $(function () {
        $('input[name="daterange"]').daterangepicker({
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 1,
            locale: {
                format: 'YYYY-MM-DD HH:mm:ss'
            }
        });
        var table = $('.data-table').DataTable({
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            ajax: "{{ route('reporting.ccoutbound').'?' }}{!! $conds_combined !!}",
            columns: [
                {data: 'call_time', name: 'call_time'},
                {data: 'agent_ext', name: 'agent_ext'},
                {data: 'agent_name', name: 'agent_name', searchable: false},
                {data: 'called_number', name: 'called_number'},
                {
                    data: 'duration',
                    name: 'duration',
                    searchable: false,
                    render: function (duration) {
                        var date = new Date(null);
                        date.setSeconds(duration);
                        return date.toISOString().substr(11, 8);
                    }
                },
                {
                    data: 'talktime',
                    name: 'talktime',
                    searchable: false,
                    render: function (talktime) {
                        var date = new Date(null);
                        date.setSeconds(talktime);
                        return date.toISOString().substr(11, 8);
                    }
                },
                {
                    data: 'ringtime',
                    name: 'ringtime',
                    searchable: false,
                    render: function (ringtime) {
                        var date = new Date(null);
                        date.setSeconds(ringtime);
                        return date.toISOString().substr(11, 8);
                    }
                },
                {data: 'disposition', name: 'disposition'},
                {data: 'src', name: 'src'},
                @can('reporting.survey_outbound')
                {data: 'survey', name: 'survey', orderable: false, searchable: false},
                @endcan
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ],
            buttons: [
                'copy',
                {
                    text: 'Export All',
                    action: function ( e, dt, button, config ) {
                        var searchValue = table.search();
                        var url = 'outbound/excelReport?{!! $conds_combined !!}&search=' + encodeURIComponent(searchValue);
                        fetch(url)
                        .then(response => {
                            // console.log(response);
                            if (response.ok) {
                                response.blob().then(blob => {
                                    const url = window.URL.createObjectURL(blob);
                                    const a = document.createElement('a');
                                    a.href = url;
                                    a.download = 'report.xlsx';
                                    a.click();
                                    window.URL.revokeObjectURL(url);
                                });
                            } else {
                                console.error('Error:', response.status);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                        // window.location = 'outbound/excelReport?{!! $conds_combined !!}';
                    }
                }
            ]
        });
    });
    </script>
    <script>
        function outDone(event,id){
            var url = 'outDone/'+id;
            fetch(url)
            .then(response => {
                if (response) {
                    console.log(response);
                    $(event.target).removeClass('btn-primary').addClass('btn-success');
                } else {
                    console.error('Error:', response.status);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
        console.log('outbound-calls-only');
    </script>
@endpush

{{-- Summarize button handler (shared with the other listing) --}}
@include('reporting::partial.summarize_js')