@extends('layout.base')

@section('content')
    <div class="card card-flush">
        <!--begin::Card header-->
        <div class="card-header">
            <!--begin::Card title-->
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Activity Log</h3>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-stripped" id="datatable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Action By</th>
                            <th>IP Address</th>
                            <th>Activity</th>
                            <th>Logged At</th>
                            <th>URL</th>
                            <th>Method</th>
                            <th>User Agent</th>
                            <th>Referrer</th>
                            <th>Role</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const CompactUrls = {
            _datatable: "{{ route('activity-log.datatable') }}",
        }
    </script>

    <script>
        $(function () {
            const datatable = $("#datatable").DataTable({
                "scrollY": true,
                "scrollX": true,
                "scrollCollapse": true,
                serverSide: true,
                processing: true,
                ajax: {
                    url: CompactUrls._datatable,
                },
                ordering: [],
                columns: [
                    { data: "DT_RowIndex", name: "DT_RowIndex", searchable: false, orderable: false},
                    { data: "action_by", name: "action_by"},
                    { data: "ip_address", name: "ip_address"},
                    { data: "activity", name: "activity"},
                    { data: "logged_at", name: "logged_at"},
                    { data: "url", name: "url"},
                    { data: "method", name: "method"},
                    { data: "user_agent", name: "user_agent"},
                    { data: "referrer", name: "referrer"},
                    { data: "role", name: "role"},
                    { data: "latitude", name: "latitude"},
                    { data: "longitude", name: "longitude"},
                ]
            });
        });
    </script>
@endsection