@extends('layout.master')

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

@section('content')

    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-content">
                        <div class="card-header">
                             <h1>Activity Trail</h1>
                        </div>
                        <div class="card-body card-dashboard">
                            @include('inc.messages')
                            <table class="table table-bordered datatable" id="datatable" style="z-index: 3;">
                                <thead>
                                    <tr role="row" class="bg-primary white">
                                        <th class="border-primary border-darken-1">Date / Time</th>
                                        <th class="border-primary border-darken-1">User</th>
                                        <th class="border-primary border-darken-1">Role</th>
                                        <th class="border-primary border-darken-1">Action</th>
                                        <th class="border-primary border-darken-1">Details</th>
                                        <th class="border-primary border-darken-1">IP</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/extensions/toastr.css')}}">
    <style type="text/css">
        table.dataTable { font-size: 12px; }
        table.dataTable thead tr th { padding-left: 0.5em; white-space: normal; word-wrap: break-word; }
    </style>
@endsection

@section('js')
    <script src="{{asset('app-assets/vendors/js/extensions/toastr.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/datatable_buttons.js')}}" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var table = $('.datatable').DataTable({
                dom: '<"d-inline-block"l><"pull-right"B>tipr',
                buttons: [
                    {
                        extend: 'excel',
                        title: 'Activity Trail',
                        className: 'btn btn-primary',
                        text: '<i class="la la-file-excel-o"></i> Excel',
                    }, 'reset'
                ],
                scrollX: false, scrollY: '500px',
                lengthMenu: [[50, 100, 500, 1000, -1], [50, 100, 500, 1000, 'All']],
                pageLength: 50,
                pagingType: 'full_numbers',
                processing: true,
                language: { processing: data_table_loader },
                serverSide: true,
                ajax: '{{ route('activity.report.list') }}',
                rowId: 'id',
                order: [[0, 'desc']],
                columns: [
                    {data: 'created_at', name: 'created_at', class: 'align-middle text-center'},
                    {data: 'user_name', name: 'user_name', class: 'align-middle text-center'},
                    {data: 'user_role', name: 'user_role', class: 'align-middle text-center'},
                    {data: 'action', name: 'action', class: 'align-middle text-center'},
                    {data: 'description', name: 'description', class: 'align-middle'},
                    {data: 'ip', name: 'ip', class: 'align-middle text-center'},
                ]
            });
        });
    </script>
@endsection