@extends('layouts.app')

@section('title', 'TLD Agent Activity')

@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 Activity 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 & Time</label>
                                <input type="datetime-local" id="activity-start-date" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-muted mb-1">End Date & Time</label>
                                <input type="datetime-local" id="activity-end-date" class="form-control form-control-sm">
                            </div>
                            <div class="col-md-4 d-flex gap-2">
                                <button id="activity-date-filter" class="btn btn-sm btn-primary flex-grow-1">Filter</button>
                                <button id="activity-date-clear"
                                    class="btn btn-sm btn-outline-secondary flex-grow-1">Clear</button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="tld-agent-activity-datatable"
                                class="table table-bordered dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        <th>Agent Log ID</th>
                                        <th>Name</th>
                                        <th>User</th>
                                        <th>User Group</th>
                                        <th>Event</th>
                                        <th>Time</th>
                                        <th>Direction</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 agentActivityUrl = "{{ route('tld-agent-activity.datatable') }}";

        $(function() {
            $('#tld-agent-activity-datatable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: agentActivityUrl,
                    data: function(d) {
                        d.start_date = $('#activity-start-date').val();
                        d.end_date = $('#activity-end-date').val();
                    }
                },
                columns: [{
                        data: 'agent_log_id',
                        name: 'agent_log_id',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'name',
                        name: 'name',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'user',
                        name: 'user',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'user_group',
                        name: 'user_group',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'event',
                        name: 'event',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'event_time',
                        name: 'event_time',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'direction',
                        name: 'direction',
                        orderable: true,
                        searchable: true
                    },
                ],
                order: [
                    [6, 'desc']
                ],
            });

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

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