@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;">Client Management</h1>
            <div class="mobile">
                <form name="export" action="{{ URL::route('admin.clients.export') }}" method="POST" autocomplete="off">
                    {{ csrf_field() }}
                    <button type="submit" class="margin-top-10 btn knowmad_btn_blue knowmad_btn width_fitContent">Export
                        All</button>
                </form>

                <form name="newCliientReport" action="{{ URL::route('admin.client.newClientReport') }}" method="POST" autocomplete="off">
                    {{ csrf_field() }}
                    <button type="submit" class="margin-top-10 btn knowmad_btn_blue knowmad_btn">New Client Report</button>
                </form>
                <form name="unverified" action="{{ URL::route('admin.client.unverified') }}" method="POST" autocomplete="off">
                    {{ csrf_field() }}
                    <button type="submit" class="margin-top-10 btn knowmad_btn_blue knowmad_btn" style="width: fit-content;">Delete Unverified Clients</button>
                </form>
            </div>
            <div class="row margin-top-10" style="width: 100%">
                <div class="col-md-10 push-top table-responsive">
                    {!! $dataTable->table([
                        'id' => 'client-management-table',
                        'class' => 'table table-striped dt-responsive table-hover',
                        'style' => 'width: 100%;'
                        ]) !!}
                
                </div>
                <div class="col-md-2" id="client-management-form-section">
                    <h3 class="filter-header">Filter</h3>
                    <form name="search" method="POST" autocomplete="off">
                        {{ csrf_field() }}
                        <strong> Status </strong>
                        <p>
                            <select name="status" id="status" class="form-control">
                                <option value="None" id="statusDropdown" name="statusDropdown" >Any Status</option>
                                <option value="Approved" id="active" name="active" >Approved</option>
                                <option value="Inactive" id="inactive" name="inactive" >Inactive</option>
                                <option value="Blocked" id="blocked" name="blocked" >Blocked</option>
                            </select>
                        </p>
                        <button type="submit" class="btn knowmad_btn_blue knowmad_btn" style="width:95px">Search</button>

                    </form>
                    <div class="hide_on_mobile">
                        <form name="export" action="{{ URL::route('admin.clients.export') }}" method="POST" autocomplete="off">
                            {{ csrf_field() }}
                            <button type="submit" class="mt-2 btn knowmad_btn_blue knowmad_btn ">Export
                                All</button>
                        </form>

                        <form name="newCliientReport" action="{{ URL::route('admin.client.newClientReport') }}" method="POST" autocomplete="off">
                            {{ csrf_field() }}
                            <button type="submit" class="mt-2 btn knowmad_btn_blue knowmad_btn">New Client
                                Report</button>
                        </form>

                        <form name="unverified" action="{{ URL::route('admin.client.unverified') }}" method="POST" autocomplete="off">
                            {{ csrf_field() }}
                            <button type="submit" class="mt-2 btn knowmad_btn_blue knowmad_btn" style="width: fit-content;">Delete Unverified Clients</button>
                        </form>
                    </div>

                </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>
      $('#client-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["client-management-table"].draw();
        });

        $('.delete-btn').on('click', function(e) {
            // e.preventDefault();
            confirm('Are you sure you want to delete?');
        })
    
        // var oTable = $('.table').DataTable({
        //     processing: true,
        //     serverSide: true,
        //     responsive: true,
        //     ajax: {
        //         url: '{!! route('ajax.get.clients') !!}',
        //         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: 'email',
        //             name: 'email'
        //         },
        //         // NOTE add new column here
        //         {
        //             data: 'registered_on',
        //             name: 'registered_on'
        //         },
        //         {
        //             data: 'amount',
        //             render: $.fn.dataTable.render.number(',', '.', 2),
        //             name: 'amount'
        //         },
        //         {
        //             data: 'company_name',
        //             name: 'company_name'
        //         },
        //         {
        //             data: 'action',
        //             name: 'action',
        //             orderable: false,
        //             searchable: false
        //         },
        //         {
        //             data: 'status',
        //             name: 'status'
        //         }
        //     ]
        // });

    
</script>
{!! $dataTable->scripts() !!}
@endpush