@extends('layouts.app')

@section('title', 'Audit')
@section('audit', 'm-menu__item--active')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__body">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <span class="m-portlet__head-icon m--hide">
                                    <i class="la la-gear"></i>
                                </span>
                                <h3 class="m-portlet__head-text">Audit</h3>
                            </div>
                        </div>
                    </div>
                    <div class="datatable">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered" id="audit_table" style="overflow-x: auto !important;width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th>I/C</th>
                                        <th>Nama</th>
                                        <th>Data Lama</th>
                                        <th>Data Baru</th>
                                        <th>Dikemaskini Oleh</th>
                                        <th>Tarikh Kemaskini</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<script>
    $(document).ready(function() {
        var i = 1;
        $('#audit_table').dataTable({
            scrollX: true,
            processing: true,
            paging: true,
            pageLength: 15,
            lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
            serverSide: true,
            ajax: {
                url:'{{ url('list-audit') }}'
            },
            searching: false,
            order: [],
            language: {
                emptyTable: "Tiada Data"
            },
            columns: [
                { data: 'ic', name: 'ic' },
                { data: 'nama', name: 'nama' },
                { data: 'data_lama', name: 'data_lama' },
                { data: 'data_baru', name: 'data_baru' },
                { data: 'dikemaskini_oleh', name: 'dikemaskini_oleh' },
                { data: 'tarikh_kemaskini', name: 'updated_at' }
            ],
        });
    });
</script>

@endsection