@extends('layouts.app')

@section('title', 'Agent CPA Report')

@section('page-specific-style')
    <link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Agent CPA Report</h4>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row gx-2 align-items-end mb-3">
                            <div class="col-md-4">
                                <label class="form-label text-muted mb-1">Start Date</label>
                                <input type="date" id="cpa-start-date" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-muted mb-1">End Date</label>
                                <input type="date" id="cpa-end-date" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-4 d-flex gap-2">
                                <button id="cpa-date-filter" class="btn btn-sm btn-primary flex-grow-1">Filter</button>
                                <button id="cpa-date-clear"
                                    class="btn btn-sm btn-outline-secondary flex-grow-1">Clear</button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="tld-agent-cpa-datatable" class="table table-bordered dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Agent</th>
                                        <th>Average Talk Time</th>
                                        <th>Sale Talk Time / Sale</th>
                                        <th>Call Talk Time</th>
                                        <th>Call Talk Time / Sale</th>
                                        <th>Inbounds</th>
                                        <th>Close / Calls (%)</th>
                                        <th>Outbounds</th>
                                        <th>Calls</th>
                                        <th>Sales</th>
                                        <th>Call / Sale</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-specific-script')
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>

    <script>
        const cpaDatatableUrl = "{{ route('tld-agent-cpa-report.datatable') }}";

        const formatDecimalValue = (value) => {
            if (value === null || value === undefined || value === '') {
                return '';
            }

            const numeric = Number(value);
            if (!Number.isFinite(numeric)) {
                return value;
            }

            return numeric.toFixed(2).replace(/\.?0+$/, '');
        };

        const formatDurationValue = (value) => {
            if (value === null || value === undefined || value === '') {
                return '';
            }

            const numeric = Number(value);
            if (!Number.isFinite(numeric)) {
                return value;
            }

            const totalSeconds = Math.round(numeric);
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;

            const pad = (value) => String(value).padStart(2, '0');

            return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
        };

        $(function() {
            $('#tld-agent-cpa-datatable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: cpaDatatableUrl,
                    data: function(d) {
                        d.start_date = $('#cpa-start-date').val();
                        d.end_date = $('#cpa-end-date').val();
                    }
                },
                columns: [{
                        data: 'report_date',
                        name: 'report_date',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'name',
                        name: 'name',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'average_call_length',
                        name: 'average_call_length',
                        orderable: true,
                        searchable: true,
                        render: function(data) {
                            return formatDurationValue(data);
                        }
                    },
                    {
                        data: 'average_sales_length',
                        name: 'average_sales_length',
                        orderable: true,
                        searchable: true,
                        render: function(data) {
                            return formatDurationValue(data);
                        }
                    },
                    {
                        data: 'total_call_length',
                        name: 'total_call_length',
                        orderable: true,
                        searchable: true,
                        render: function(data) {
                            return formatDurationValue(data);
                        }
                    },
                    {
                        data: 'average_sales_call_length',
                        name: 'average_sales_call_length',
                        orderable: true,
                        searchable: true,
                        render: function(data) {
                            return formatDurationValue(data);
                        }
                    },
                    {
                        data: 'inbound_calls',
                        name: 'inbound_calls',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'closing_calls',
                        name: 'closing_calls',
                        orderable: true,
                        searchable: true,
                        render: function(data) {
                            return formatDecimalValue(data);
                        }
                    },
                    {
                        data: 'outbound_calls',
                        name: 'outbound_calls',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'total_calls',
                        name: 'total_calls',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'sales',
                        name: 'sales',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'calls_per_sale',
                        name: 'calls_per_sale',
                        orderable: true,
                        searchable: true,
                        render: function(data) {
                            return formatDecimalValue(data);
                        }
                    },
                ],
                order: [
                    [0, 'desc']
                ],
            });

            $('#cpa-date-filter').on('click', function() {
                $('#tld-agent-cpa-datatable').DataTable().ajax.reload();
            });

            $('#cpa-date-clear').on('click', function() {
                $('#cpa-start-date').val('');
                $('#cpa-end-date').val('');
                $('#tld-agent-cpa-datatable').DataTable().ajax.reload();
            });
        });
    </script>
@endsection