@extends('layout.masters')
@section('content')
<div id="page-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-12">
        <div class="main-container border" style="margin-top : 50px;">
          <div class="col-sm-12 col-md-6 ">
            <h4>Role Details</h4>
          </div>
            <div class="col-sm-12 col-md-6">
              <div class="align-right" style="text-align : right">
                <a href="{{url('add-role')}}" class="btn btn-formSubmit" type="button">Create Role</a>
              </div>
            </div>
          <table id="roles" class="table table-striped table-bordered" style="width:100%">
            <thead>
              <tr>
                <th>Role name</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              @foreach($roles as $role)
                  <tr>
                    <td>{{$role->role_name}}</td>
                    <td>
                      <div class="action-button-container">
                        <a class="btn btn-warning btn-xs" type="button"  href="{{url('edit-role', $role->role_id)}}"><span class="fa fa-pencil"></span>Edit</a>
                        <a class="btn btn-danger btn-xs delete" type="button" data-toggle="modal" data-id='{{$role->role_id}}' data-route='delete-role' data-target="#customModal"><span class="fa fa-close"></span>Delete</a>
                      </div>
                    </td>
                  </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#roles').DataTable();
  });
</script>
@endsection