<x-layout bodyClass="g-sidenav-show  bg-gray-200">

  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="payments"
  >
  </x-navbars.sidebar_triage>

  <main
    class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
  >

    <!-- Navbar -->
    <x-navbars.navs.auth
      titlePage="Payments"
      role="{{ $request->user()->role }}"
      firstName="{{ $request->user()->name }}"
    >
    </x-navbars.navs.auth>
    <!-- End Navbar -->

    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-12">
          <div class="card my-4">

            <div class="card-header position-relative mt-n4 z-index-2 mx-3 p-0">
              <div
                class="d-flex justify-content-between align-items-center bg-gradient-primary shadow-primary border-radius-lg pb-3 pl-3 pr-3 pt-4"
              >
                <h4 class="text-capitalize ps-3 text-white">
                  Payment Infos table
                </h4>
                <div class="pe-3">
                  <a
                    class="btn bg-gradient-secondary"
                    type="button"
                    href="{{ route('adminCreatePayment') }}"
                  >
                    <i class="material-icons">add_circle_outline</i>
                    New Payment Info
                  </a>
                </div>
              </div>
            </div>

            <div class="card-body px-0 pb-2">
              <div class="table-responsive p-0">
                <div style="padding: 0rem 3rem 1rem 3rem">
                  <div>
                    <table
                      class="align-items-center table-striped table-bordered mb-0 table table"
                      id="users-table"
                    >
                      <thead>
                        <tr>
                          <th
                            class="text-uppercase text-secondary text-xxs font-weight-bolder text-center"
                          >
                            id
                          </th>
                          <th
                            class="text-uppercase text-secondary text-xxs font-weight-bolder ps-1"
                          >
                            from
                          </th>
                          <th
                            class="text-uppercase text-secondary text-xxs font-weight-bolder ps-1"
                          >
                            subject
                          </th>
                          <th
                            class="text-uppercase text-secondary text-xxs font-weight-bolder ps-1"
                          >
                            amount
                          </th>
                          <th
                            class="text-uppercase text-secondary text-xxs font-weight-bolder ps-1"
                            style="max-width: 50px;"
                          >
                            action
                          </th>
                        </tr>
                      </thead>
                    </table>

                  </div>
                </div>

              </div>

            </div>

          </div>

        </div>
      </div>

      <x-footers.auth></x-footers.auth>
    </div>

  </main>

</x-layout>

<script>
  $(function() {
    $('#users-table').DataTable({
      processing: true,
      serverSide: true,
      ajax: '{{ route('dtGetPayments') }}',
      columns: [{
          data: 'id'
        },
        {
          data: 'student'
        },
        {
          data: 'subject'
        },
        {
          data: 'amount'
        },
        {
          data: 'action',
          searchable: false
        }
      ],
      columnDefs: [{
          "targets": 0, // index of the "Name" column (0-based)
          "render": function(data, type, row, meta) {
            return '<h6 class="mb-0 text-sm text-center">' + data +
              '</h6>';
          }
        },
        {
          "targets": 1, // index of the "Name" column (0-based)
          "render": function(data, type, row, meta) {
            return '<span>' + JSON.stringify(data) + '</span>';
          }
        },
        {
          targets: -1,
          // visible: false,
          data: null,
          "render": function(data, type, row, meta) {

            return `
  <form action="/payments/${row.id}" method="Post" style="max-height: 2rem;">
    <a class="btn btn-secondary btn-sm" href="/payments/${row.id}">
        <span class="btn-text">view</span>
    </a>

    <a class="btn btn-secondary btn-sm" href="/payments/${row.id}/edit">
        <span class="btn-text">edit</span>
    </a>

    @csrf
    @method('DELETE')
    <button class="btn btn-danger btn-sm">
        <span class="btn-text">delete</span>
    </button>
  </form>
  `;
          }
        },
      ]

    });
  });
</script>
