@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-bordered " id="auditsTable">
                                        <thead style="background-color: #61ba6d;">
                                            <tr>
                                                <th scope="col">S/N</th>
                                                <th scope="col">Model</th>
                                                <th scope="col">Action</th>
                                                <th scope="col">User</th>
                                                <th scope="col">Time</th>
                                                <th scope="col">Old Values</th>
                                                <th scope="col">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,
                ajax: {
                    url: '{{ route('audits.get-audits') }}',
                    data: function(d) {
                        // d.index_type  = $('select[name=index_type]').val();
                        // d.index_no = $('input[name=index_no]').val();
                        // d.surname  = $('input[name=surname]').val();
                        // d.gender   = $('input[name=gender]').val();
                        // d.All      = $('select[name=All]').val();
                        // d.program = $('select[name=program]').val();

                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'audit.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