@extends('layouts.app')
@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">

<div class="m-2">
    <div class="tab-content" id="v-pills-tabContent" style="width: 100%;">
        <div class="tab-pane fade show active" id="v-pills-providers" role="tabpanel" aria-labelledby="v-pills-providers-tab">
            <h1 style="text-align: center;">Credit Management</h1>
            <div class="row mt-5">
                <div class="col-md-10 table-responsive">
                    {!! 
                        $dataTable->table([
                            'id' => 'credit-management-table',
                            'class' => 'table table-striped dt-responsive table-hover',
                            'style' => 'width: 100%;'
                        ]) 
                        
                    !!}
                </div>
                <div class="col-md-2">

                    <form name="export" action="{{ URL::route('admin.credit.export') }}" method="POST" autocomplete="off">
                        {{ csrf_field() }}
                        <button type="submit" class="btn knowmad_btn_blue knowmad_btn width_fitContent">Export All</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--container-->
@endsection
@push('footer_js')
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap.min.js"></script>
<script>
        $('#credit-management-table')
            .on('preXhr.dt', function(e, settings, data) {
                
                // data.status = $('#status').val();
             
        });

        $('form[name="search"]').on('submit', function(e) {
            // oTable.draw();
            e.preventDefault();
            window.LaravelDataTables["credit-management-table"].draw();
        });

        $('.delete-btn').on('click', function(e) {
            e.preventDefault();
            confirm('Are you sure you want to delete?');
        })
    // $(function() {
    //     var oTable = $('.table').DataTable({
    //         processing: true,
    //         serverSide: true,
    //         responsive: true,
    //         ajax: {
    //             url: '{!! route('ajax.get.credit') !!}',
    //             data: function(d) {
    //                 d.status = $('select[name=status]').val();
    //             }
    //         },
    //         columns: [{
    //                 data: 'id',
    //                 name: 'id'
    //             },
    //             {
    //                 data: 'username',
    //                 name: 'username'
    //             },
    //             {
    //                 data: 'full_name',
    //                 name: 'full_name'
    //             },
    //             {
    //                 data: 'amount',
    //                 render: $.fn.dataTable.render.number(',', '.', 2),
    //                 name: 'amount'
    //             },
    //             {
    //                 data: 'action',
    //                 name: 'action',
    //                 orderable: false,
    //                 searchable: false
    //             }
    //         ]
    //     });

    //     $('form[name="search"]').on('submit', function(e) {
    //         oTable.draw();
    //         e.preventDefault();
    //     });

    //     $('.delete-btn').on('click', function(e) {
    //         e.preventDefault();
    //         confirm('Are you sure you want to delete?');
    //     })
    // });
</script>
{!! $dataTable->scripts() !!}
@endpush