@extends('admin.main')
@section('title', 'Reports')
@section('breadcrumb')
    {{-- <li class="breadcrumb-item"><a href="#">Home</a></li> --}}
    <li class="breadcrumb-item active">Reports</li>
@endsection
@section('content')
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Data Report</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="data-user-report" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>NO</th>
                            <th>Nama</th>
                            <th>Subject</th>
                            <th>Message</th>
                            <th>Created at</th>
                            {{-- <th>Action</th> --}}
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->

    <script>
        $(document).ready(function() {

            loadData();

            $(document).on('click', '#btnEdit', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                hitApi(
                    '/admin/user-roles/get-data?id=' + id,
                    'get', {},
                    function(response) {
                        if (!$.isEmptyObject(response.data)) {
                            var item = response.data[0];
                            var form = $('.form-modal-edit');
                            form.find('input[name=id]').val(item.id);
                            form.find('input[name=role]').val(item.role);
                            form.find('textarea[name=description]').val(item.description);
                        } else {}
                    }
                );
            });

        })

        function loadData() {
            showData(
                '#data-user-report',
                '/admin/user-reports/get-data',
                [{
                        data: 'no'
                    },
                    {
                        data: 'user.name'
                    },
                    {
                        data: 'subject'
                    },
                    {
                        data: 'message'
                    },
                    {
                        data: 'created_at_format'
                    },
                    // {
                    //     data: 'id'
                    // },
                ],
                // [{
                //     targets: 5,
                //     data: 'id',
                //     render: function(data, type, row) {
                //         var button = '<a href="" id="btnEdit" data-id="' + row.id +
                //             '" data-toggle="modal" data-target="#modalEdit" class="btn btn-warning btn-sm"><i class="fas fa-edit"></i>&nbsp;Edit</a>';
                //         return button;
                //     }
                // }]
                // ,
            );
        }
    </script>
@endsection