@include('master.header')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">{{$config['title']}}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                @foreach($config['breadcrumbs'] ?? array() as $item)
                                <li class="breadcrumb-item"><a
                                        href="{{ $item['url'] ?? '#' }}">{{ $item['title'] ?? '' }}</a></li>
                                @endforeach
                            </ol>
                        </div>

                    </div>
                </div>
            </div>

            
          <div class="row">
            <div class="col-sm-12 col-lg-12">
              <div class="card">
                <div class="card-header justify-content-between">
                  <div class="header-title">
                    <div class="row">
                      <div class="col-sm-6 col-lg-6">
                        <h4 class="card-title">Data Roles </h4>
                      </div>
                      <div class="col-sm-6 col-lg-6">
                        <a href="{{ route('roles.create') }}" class="btn btn-primary float-end">
                          <i class="bx bx-plus"></i> Tambah
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table id="dt" class="table table-bordered w-100">
                      <thead>
                      <tr>
                        <th>Nama</th>
                        <th class="text-center">Aksi</th>
                      </tr>
                      </thead>
                      <tbody></tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>

            
        </div> 
    </div>
@include('master.footer')
<script>
      $(document).ready(function () {
        $('#dt').dataTable({

          responsive: true,
          serverSide: true,
          processing: true,
          lengthMenu: [
                [ 10, 25, 50, -1 ],
                [ '10', '25', '50', 'All' ]
            ],
          ajax: {
            url: `{{ route('roles.index') }}`
          },
          columns: [
            {
              data: 'name',
              name: 'name'
            },
            {
              data: 'action',
              name: 'action',
              className: "text-center",
              orderable: false,
              searchable: false
            },
          ],
          rowCallback : function(row, data) {
            let api = this.api();
            $(row).find('.btn-delete').click(function(){
              let pk = $(this).data('id'),
                url = `{{ route("roles.index") }}/` + pk;
              Swal.fire({
                title   : "Anda Yakin ?",
                text    : "Data tidak dapat dikembalikan setelah di hapus!",
                icon    : "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Ya, Hapus!",
                cancelButtonText: "Tidak, Batalkan",
              }).then((result) => {
                if (result.value) {
                  $.ajax({
                    url: url,
                    type: "DELETE",
                    data: {
                      _token  : '{{ csrf_token() }}',
                      _method : 'DELETE'
                    },
                    error   : function(response){
                      toastr.error(response, 'Failed !');
                    },
                    success : function(response) {
                      if (response.status === "success") {
                        toastr.success(response.message, 'Success !');
                        api.draw();
                      } else {
                        toastr.error((response.message ? response.message : "Please complete your form"), 'Failed !');
                      }
                    }
                  });
                }
              });
            });
          }
        });
      });
    </script>
   </body>
</html>