@extends('layouts.main_layout')
@section('title', $label)
@push('styles')
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
@endpush
@push('scripts')
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#membership-table').DataTable({
              processing: true,
              serverSide: true,
              ajax: "{{ route('membership.datatables',ValidationType::COMPLETENESS) }}",
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  // {data: 'flag', name: 'flag'},
                  {data: 'name', name: 'name'},
                  {data: 'card_number', name: 'card_number'},
                  {data: 'start_date_member', name: 'start_date_member'},
                  {data: 'info_completeness', name: 'info_completeness'},
                  {data: 'status', name: 'status'},
                  {
                      data: 'action', 
                      name: 'action', 
                      orderable: true, 
                      searchable: true
                  },
              ],
              columnDefs:[
               {
                    targets: 6,
                    className: "text-center",
               },
               {
                    targets: 5,
                    className: "text-center",
               },
              ]
          });
    })
  </script>
@endpush

@section('icon-breadcrumbs',$icon)


@section('content')
{{ Breadcrumbs::render('membership.completeness') }}
<div class="card">
  <div class="card-body table-responsive">
      <table class="table table-bordered" id="membership-table">
          <thead>
            <tr>
              <th>No</th>
              <th>Nama</th>
              <th>ID Member</th>
              <th>Tanggal Jadi Member</th>
              <th>Kelengkapan yang didapat</th>
              <th>Status Kelengkapan</th>
              <th width="150px">Action</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
      </table>  
  </div>
</div>
@endsection