@extends('layouts.admin')
@section('title', 'eKasih')
@section('ekasih', 'active')
@section('ekasih_list', 'active')
@section('content')

    <section class="content-header">
        <h1>eKasih Receipients</h1>
    </section>

    <section class="content">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">List eKasih</h3>
            </div>
            <div class="box-body">
                <div class="row" style="margin-bottom: 10px">
                    <div class="col-lg-12">
                        <div style="text-align: right;">
                            <label>
                                <input type="text" class="form-control" placeholder="Search..." id="generalSearch">
                            </label>
                        </div>
                    </div>
                </div>
                <table class="table table-striped" id="users_table" style="overflow-x: auto !important;width: 100% !important;">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>IC</th>
                            <th>Name</th>
                            <th>Year Received</th>
                            <!-- <th>Permission</th> -->
                            <!-- <th>Ipr</th> -->
                            <!-- <th>Dun</th> -->
                            <!-- <th>Status</th> -->
                            <!-- <th>Email Verified</th> -->
                            <th>Created At</th>
                            <!-- <th>Options</th> -->
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </section>

@endsection

@section('footerScripts')
    <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 src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#users_table').dataTable({
                scrollX: true,
                processing: true,
                paging: true,
                pageLength: 20,
                lengthChange: false,
                serverSide: true,
                ajax: {
                    url:'{{ url('superadmin/ekasih/list') }}'
                },
                searching: false,
                language: {
                    emptyTable: "Tiada Data"
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'ic_ekasih', name: 'ic_ekasih' },
                    { data: 'nama_ekasih', name: 'nama_ekasih' },
                    { data: 'tahun_ekasih', name: 'tahun_ekasih' },
                    // { data: 'permissions', name: 'permissions' },
                    // { data: 'ipr', name: 'ipr' },
                    // { data: 'status', name: 'status' },
                    // { data: 'email_verified_at', name: 'email_verified_at' },
                    { data: 'created_at', name: 'created_at' },
                    // { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
            });

            var timer;
            $("#generalSearch").on("keyup", function() {
                clearTimeout(timer);
                var ms = 2000;
                
                var q = $(this).val();

                if (q.length > 2 || q.length == 0) {
                    timer = setTimeout(function() {
                        $('#users_table').dataTable().fnDestroy();
                        $('#users_table').dataTable({});
                        $('#users_table').dataTable().fnDestroy();
                        $('#users_table').dataTable({
                            scrollX: true,
                            processing: true,
                            paging: true,
                            pageLength: 20,
                            lengthChange: false,
                            serverSide: true,
                            ajax: {
                                url:'{{ url('superadmin/ekasih/list') }}',
                                data:{ q }
                            },
                            searching: false,
                            language: {
                                emptyTable: "Tiada Data"
                            },
                            columns: [
                                { data: 'id', name: 'id' },
                                { data: 'ic_ekasih', name: 'ic_ekasih' },
                                { data: 'nama_ekasih', name: 'nama_ekasih' },
                                { data: 'tahun_ekasih', name: 'tahun_ekasih' },
                                // { data: 'permissions', name: 'permissions' },
                                // { data: 'ipr', name: 'ipr' },
                                // { data: 'status', name: 'status' },
                                // { data: 'email_verified_at', name: 'email_verified_at' },
                                { data: 'created_at', name: 'created_at' },
                                // { data: 'action', name: 'action', orderable: false, searchable: false }
                            ],
                        });
                    }, ms);
                }
            });
        });

    </script>

@endsection