@extends('admin.layouts.app')

@section('title', 'Activity Logs')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Activity Logs</h3>
        </div>
        <div class="card-body">
            <table id="activity-logs-table" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Admin</th>
                        <th>Action</th>
                        <th>IP Address</th>
                        <th>User Agent</th>
                        <th>Date</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
@endpush

@push('scripts')
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script>
        $(function() {
            $('#activity-logs-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.activity_logs.getData') }}",
                columns: [{
                        data: 'admin_name',
                        name: 'admin_name'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'ip_address',
                        name: 'ip_address'
                    },
                    {
                        data: 'user_agent',
                        name: 'user_agent'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data) {
                            return moment(data).format('YYYY-MM-DD HH:mm:ss');
                        }
                    }
                ],
                order: [
                    [4, 'desc']
                ],
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
                }
            });
        });
    </script>
@endpush