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

{{-- 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 Al-Qur'an</h3>


        <div class="table-responsive">
          <table class="table table-sm table-ssr nowrap">
            <tfoot style="display: table-row-group">
              <th>Id</th>
              <th>NIK</th>
              <th>Name</th>
              <th>Kelas</th>
              <th>Juz</th>
              <th>Surah</th>
              <th>Musrif</th>
              <th>Unit</th>
              <th>Action</th>
            </tfoot>
            <thead>
              <tr>
                    <th>Id</th>
                    <th>NIK</th>
                    <th>Name</th>
                    <th>Kelas</th>
                    <th>Juz</th>
                    <th>Surah</th>
                    <th>Musrif</th>
                    <th>Unit</th>
                    <th>Action</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('/kesiswaan/qurans') }}",
      "columns": [
        { "data": "qurans__id", "visible": false },
        { "data": "qurans__nik" },
        { "data": "qurans__name_student" },
        { "data": "qurans__room_id" },
        { "data": "jz__juz" },
        { "data": "surt__name" },
        { "data": "qurans__musrif" },
        { "data": "sc__name" },
        { "data": "action", "searchable": false, "orderable": false }
      ]
    }

    dataTableServerSide(params)
  })

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

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

    confirmDelete(params)
  })


</script>
@endsection