@extends('layouts.admin')

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      
    </div>
    <div class="col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Roles</h4>
          <a href="{{ route('users.roles.add') }}" class="btn btn-primary btn-round pull-right ml-auto">Add role<div class="ripple-container"></div></a>
        </div>
        <div class="card-body table-responsive">
          @if ( session('message') )
            <div class="alert alert-success bg-gradient-success">
              {{ session('message') }}
            </div>
          @endif
          <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
            <thead class="text-primary">
              <th>ID</th>
              <th>Name</th>
              <th>Slug</th>
              <th></th>
            </thead>
            <tbody>
              @foreach($roles as $key=>$value)
                <tr>
                  <td>{{$key+1}}</td>
                  <td>{{$value->name}}</td>
                  <td>{{$value->slug}}</td>
                  <td>
                    <a class="btn btn-warning btn-sm" href="{{ route('users.roles.edit', ['id'=>$value->id]) }}">Edit</a>
                    <a class="btn btn-danger btn-sm" href="{{ route('users.roles.delete', ['id'=>$value->id]) }}" onclick="return confirm_delete()">Delete</a>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
    </div>

  </div>
</div>
@endsection 

@section('style')
  <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endsection

@section('script')

    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
      
      $(document).ready(function() {
        $('#dataTable').DataTable({
          columnDefs: [ { orderable: false, targets: [3] } ],
        });
      });

    </script>

@endsection