@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.invoice.datatables') }}",
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'flag', name: 'flag'},
                  {data: 'name', name: 'name'},
                  {data: 'company', name: 'company'},
                  {data: 'payment_date', name: 'payment_date'},
                  {data: 'invoice_number', name: 'invoice_number'},
                  {data: 'total', name: 'total'},
                  {data: 'payment_expired_date', name: 'payment_expired_date'},
                  {data: 'status', name: 'status'},
                  {
                      data: 'action', 
                      name: 'action', 
                      orderable: true, 
                      searchable: true
                  },
                  {data: 'note', name: 'note'},
              ],
              columnDefs:[
              {
                    targets: 1,
                    className: "text-center",
               },
               {
                    targets: 6,
                    className: "text-right",
               },
               {
                    targets: 8,
                    className: "text-center",
               },
               {
                    targets: 9,
                    className: "text-center",
               },
              ]
          });
    })
  </script>
@endpush

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


@section('content')
{{ Breadcrumbs::render('membership.invoice.list') }}
<div class="card">
  <div class="card-body table-responsive">
  	 <table class="table table-bordered" id="membership-table">
          <thead>
            <tr>
              <th>No</th>
              <th>Kategori Pembayaran</th>
              <th>Nama</th>
              <th>Perusahaan</th>
              <th>Tanggal</th>
              <th>Invoice</th>
              <th>Nilai Rupiah</th>
              <th>Tanggal Kadaluarsa</th>
              <th>Status Transfer</th>
              <th width="150px">Action</th>
              <th>Keterangan</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
      </table>  
  </div>
</div>
@endsection