@extends('dashboard.base')

@section('content')


<div class="container-fluid">
  <div class="fade-in">
    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
              <h4 class="m-0">Roles</h4>
              <a class="btn btn-primary ml-3" href="{{ route('roles.create') }}"><span class="cil-plus"></span> Add new role</a>
            </div>
            <div class="card-body">
                <div class="table-responsive table-responsive-sm">
                    <table id="table" class="table table-striped table-bordered datatable">
                        <thead>
                            <tr>
                                <th width="10%">No</th>
                                <th width="30%">Name</th>
                                <th width="10%">Hierarchy</th>
                                <th width="30%">Permissions</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@section('javascript')
<script>
    $(document).ready(function() {
      var table = $('#table').DataTable({
          "processing": true,
          "serverSide" : true,
          "language": {
            processing: '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>'
          },
          ajax: {
            url: "{{ route('roles.index') }}",
            type: "GET"
          },
          columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'name', name: 'name'},
            {data: 'hierarchy', name: 'hierarchy'},
            {data: 'permissions', name: 'permissions'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
        });
    } );
    $('#table').on('click', '.form-delete', function(e){
        e.preventDefault();
        var form = $(this);
        $('#confirm').modal()
            .on('click', '#delete-btn', function(){
                form.submit();
            });
    });
</script>
@endsection