@extends('layouts.admin')
@section('title', 'Profile')
@section('content')

    <section class="content-header">
        <h1>Profile</h1>
    </section>

    <section class="content">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">List Profile</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="profile_table" style="overflow-x: auto !important;width: 100% !important;">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>IC</th>
                            <th>Email</th>
                            <th>Tel Bimbit</th>
                            <th>BSH Status</th>
                            <th>eKasih Status</th>
                            <th>LHDN Status</th>
                            <th>Registered User</th>
                            <th>Registered Date</th>
                            <th>Email Verified Date</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() {
            $('#profile_table').dataTable({
                scrollX: true,
                processing: true,
                paging: true,
                pageLength: 20,
                lengthChange: false,
                serverSide: true,
                ajax: {
                    url:'{{ url('superadmin/profile/list') }}'
                },
                searching: false,
                language: {
                    emptyTable: "Tiada Data"
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'nama', name: 'nama' },
                    { data: 'ic', name: 'ic' },
                    { data: 'email', name: 'email' },
                    { data: 'tel_bimbit', name: 'ipr' },
                    { data: 'bsh_status', name: 'bsh_status' },
                    { data: 'ekasih_status', name: 'ekasih_status' },
                    { data: 'lhdn_status', name: 'lhdn_status' },
                    { data: 'registered_user', name: 'registered_user' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'verified_date', name: 'verified_date' },
                    // { 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() {
                        $('#profile_table').dataTable().fnDestroy();
                        $('#profile_table').dataTable({});
                        $('#profile_table').dataTable().fnDestroy();
                        $('#profile_table').dataTable({
                            scrollX: true,
                            processing: true,
                            paging: true,
                            pageLength: 20,
                            lengthChange: false,
                            serverSide: true,
                            ajax: {
                                url:'{{ url('superadmin/profile/list') }}',
                                data:{ q }
                            },
                            searching: false,
                            language: {
                                emptyTable: "Tiada Data"
                            },
                            columns: [
                                { data: 'id', name: 'id' },
                                { data: 'nama', name: 'nama' },
                                { data: 'ic', name: 'ic' },
                                { data: 'email', name: 'email' },
                                { data: 'tel_bimbit', name: 'ipr' },
                                { data: 'bsh_status', name: 'bsh_status' },
                                { data: 'ekasih_status', name: 'ekasih_status' },
                                { data: 'lhdn_status', name: 'lhdn_status' },
                                { data: 'registered_user', name: 'registered_user' },
                                { data: 'created_at', name: 'created_at' },
                                { data: 'verified_date', name: 'verified_date' },
                                // { data: 'action', name: 'action', orderable: false, searchable: false }
                            ],
                        });
                    }, ms);
                }
            });
        });

    </script>

@endsection