@extends('layouts.app')
{{-- page title --}}
@section('title','Data Pembayaran')

{{-- vendor styles --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/datatables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/toastr.css')}}">
@endsection
{{-- page styles --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/plugins/extensions/toastr.css')}}">
@endsection

@section('content')

<style>
  .DTFC_Cloned thead {
    background: white;
  }

  .DTFC_Cloned tbody {
    background: white;
  }

</style>
<!-- Pengguna start -->
<section id="basic-datatable">
  <div class="card">
    <div class="card-content">
      <div class="card-body card-dashboard">

      <h3>Data Pembayaran</h3>

        <div class="table-responsive">
          <table class="table table-sm table-ssr nowrap">
            <tfoot style="display: table-row-group">
              <th>Id</th>
              <th>Tahun Pelajaran</th>
              <th>No. VA</th>
              <th>NIK</th>
              <th>Nama Siswa</th>
              <th>Kelas</th>
              <th>Bulan</th>
              <th>Note</th>
              <th>Jumlah Transaksi</th>
              <th>Jumlah Bayar</th>
              <th>Status</th>
            </tfoot>
            <thead>
              <tr>
                  <th>Id</th>
                  <th>Tahun Pelajaran</th>
                  <th>No. VA</th>
                  <th>NIK</th>
                  <th>Nama Siswa</th>
                  <th>Kelas</th>
                  <th>Bulan</th>
                  <th>Note</th>
                  <th>Jumlah Transaksi</th>
                  <th>Jumlah Bayar</th>
                  <th>Status</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/toastr.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/datatables.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}"></script>
@endsection

@section('page-scripts')
<script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>

<script>
  @if (Session::get('status') == 200)
    $(document).ready(function(){
      toastr.success('Data has been saved', 'Success', { "progressBar": true, "showDuration": 500, "closeButton": true })
    });
  @endif

  $(document).ready(function () {

    const params = {
      "url": "{{ url('/keuangan/payments') }}",
      "columns": [

          { "data": "virtuals__id", "visible": false },
          { "data": "virtuals__study_year" },
          { "data": "virtuals__no_virtual" },
          { "data": "virtuals__nik" },
          { "data": "virtuals__name_student" },
          { "data": "virtuals__room" },
          { "data": "virtuals__month" },
          { "data": "virtuals__note" },
          { "data": "virtuals__transaction" },
          { "data": "virtuals__jumlah_pay" },
          { "data": "virtuals__status_payment" },
      ]
    }

    dataTableServerSide(params)
  })

  // Confirmation Delete
  $(document).on('click', '.btn-delete', function (e) {
    e.preventDefault();

    const params = {
      "url": "{{ url('/keuangan/payments/') }}",
      "id": $(this).attr('data-id'),
      "tr": $(this).parent("td").parent('tr')
    }

    confirmDelete(params)
  })

</script>
@endsection