@extends('layouts.dashboard')


@section('title-content')
    <title>{{ config('app.name') }} | Audits Index</title>
@endsection

@section('content')
    <div class="content">
        <div class="boxpane">
            <div class="boxpane-header">
                <h2 class="blue"><i class="fa-fw fa fa-dashboard"></i>
                    Audits Dashboard
                </h2>

                <div class="boxpane-icon">
                    <ul class="btn-tasks">
                        <li class="dropdown">
                            <a data-toggle="dropdown" href="#">
                                <i class="icon fa fa-tasks" data-placement="left" title="{{ 'Actions' }}"></i>
                            </a>

                        </li>
                    </ul>
                </div>
            </div>
            <div class="boxpane-content">
                <div class="row">
                    <div class="col-md-12">
                        <p class="introtext">

                            AUDIT Summary
                        </p>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table  table-responsive-sm table-bordered table-striped" id="auditsTable"
                                        width="100%">
                                        <thead style="background-color: #61ba6d;">
                                            <tr>
                                                <th class="text-center">S/N</th>
                                                <th>Model</th>
                                                <th>Action</th>
                                                <th>User</th>
                                                <th>Time</th>
                                                {{-- <th>Old Values</th>
                                            <th>New Values</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('assets/dashboard/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/dataTables.bootstrap4.min.js') }}"></script>
    <!-- X-editable Plugin -->
    <script src="{{ asset('assets/plugins/moment/moment.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('assets/plugins/x-editable/bootstrap3-editable/js/bootstrap-editable.min.js') }}"></script>


    <script type="text/javascript">
        // $('#index_type').select2({
        //     minimumResultsForSearch: -1,
        //     placeholder: 'Select Level Index',
        // });
        // $('#srs,#sps,#acs,#dvs,#ras,#gender,#program').select2({
        //     minimumResultsForSearch: -1,
        //     // placeholder: 'Select SRS',
        // });
        $(document).ready(function() {
            let auditsTable = $('#auditsTable').DataTable({
                processing: true,
                serverSide: true,
                autoWidth: false,
                // responsive:true,
                ajax: '{{ route('audits.get-audits') }}',
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'id'
                    },
                    {
                        data: 'auditable_type',
                        name: 'auditable_type'
                    },
                    {
                        data: 'event',
                        name: 'event'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    // {data: 'old_values', name: 'old_values'},
                    // {data: 'new_values', name: 'new_values'},
                ]
            });
            // $('#filter-form').on('submit', function (e) {
            //     auditsTable.draw();
            //     e.preventDefault();
            // });
        });
    </script>
@endsection