@extends('layouts.admin')

    @push('styles')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('storage/css/datatable/datatables.min.css') }}">
    <style type="text/css">
    select{
        border: 1px solid #ddd !important;
        background: transparent !important;
    }
    input[type='search']{
        border: 1px solid #ddd !important;
        background: transparent !important;
    }    
    </style>
    @endpush

    @push('scripts')

    <!-- DataTables -->
    <script src="{{ asset('storage/js/datatable/datatables.min.js') }}"></script>

    <script>
    $(function () {

        $('#clients').DataTable({
            ajax: {
                url: "{{ action('Admin\AdminJobController@dataTable') }}",
                type: "POST",
                data: {
                    _token:  $('meta[name="csrf-token"]').attr('content')
                }
            },
            "columnDefs": [{
                "defaultContent": ""
            }],
            "order": [[ 0, "asc" ]],
            responsive: true,
            processing: true,
            "serverSide": true,
            "lengthMenu": [[50, 100, 250, 500], [50, 100, 250, 500]],
            "dom": '<"top"l>rt<"bottom"Bp><"clear">',
            "pagingType": "full_numbers",
            pageLength: 100,
            columns: [
                { data: "name"},
                { data: "client"},
                { data: "companyname"},
                { data: "apin"},
                { data: "trustee"},
                { data: "jobcount"}
            ],
            buttons: [
            {
                extend: 'excelHtml5',
                text:'Export as Excel',
                exportOptions: {
                    orthogonal: 'export',
                    columns: ':visible'
                }
            },
    
            ]            
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

    });
    </script>

    @endpush

@section('content')
    

    <div class="card card-default">
        <div class="card-body collapse show custom-card-bg">
            
        <table id="clients" class="table table-striped table-bordered zero-configuration">
          <thead>
            <tr>
              <th>Name</th>
              <th>Client</th>
              <th>Company Name</th>
              <th>APIN</th>
              <th>Trustee</th>
              <th>Job Count</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>

        </div>
    </div>

@endsection