@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('invoice.datatables', ValidationType::PAYMENT) }}",
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'flag', name: 'flag'},
                  {data: 'name', name: 'name'},
                  {data: 'created_at', name: 'created_at'},
                  {data: 'invoice_number', name: 'invoice_number'},
                  {data: 'payment_expired_date', name: 'payment_expired_date'},
                  {data: 'status', name: 'status'},
                  {
                      data: 'action', 
                      name: 'action', 
                      orderable: true, 
                      searchable: true
                  },
              ],
              columnDefs:[
               {
                    targets: 6,
                    className: "text-center",
               },
               {
                    targets: 7,
                    className: "text-center",
               },
              ]
          });
    })
  </script>
@endpush

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


@section('content')
{{ Breadcrumbs::render('agenda.invoice.index',$data) }}
<div class="card">
  <div class="card-body">
  	 <table class="table table-bordered" id="membership-table">
          <thead>
            <tr>
              <th>No</th>
              <th>Tipe Pembayaran</th>
              <th>Nama</th>
              <th>Tanggal Daftar</th>
              <th>No. Invoice</th>
              <th>Invoice Expired</th>
              <th>Status Pembayaran</th>
              <th width="150px">Action</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
      </table>  
  </div>
</div>
@endsection