@extends('layouts.master')

@section('title', 'Roles')

@section('links')
<style>
   #users-table{
            width:100% !important;
   }
</style>
          
@endsection



@section('content')


<div class="br-mainpanel">
    <div class="br-pageheader pd-y-15 pd-l-20">
      <nav class="breadcrumb pd-0 mg-0 tx-12">
        <a class="breadcrumb-item" href="#">Evm</a>
        <!--          <a class="breadcrumb-item" href="#">Admins</a>-->
        <span class="breadcrumb-item active">Role Management</span>
      </nav>
    </div><!-- br-pageheader -->
    <div class="pd-x-20 pd-sm-x-30 pd-t-20 pd-sm-t-30">
      <h4 class="tx-gray-800 mg-b-5">Roles's</h4>
      <!--        <p class="mg-b-0">DataTables is a plug-in for the jQuery Javascript library.</p>-->
    </div>
    
 

    <div class="br-pagebody">
        <div class="row">
            
        <div class="col-lg-6">
      <div class="br-section-wrapper">
          <div class="card-header">
           <h6>Add Role</h6>
         

          </div>
          <div class="card-body">
          {!! Form::open(['route' => 'roles.store','role' => 'form', 'class'=>'role-form','id' => 'role-form','data-table-alter' => 'role-table']) !!}
											@include('roles._form',['style'=>'float: right;margin:-16px;'])
										{!! Form::close() !!}
          </div> 
        
          </div>


          </div>
          <div class="col-lg-6"> 
          <div class="br-section-wrapper">
      
          <table class="table display responsive nowrap" id="users-table">
												<thead>
                        <tr>
              <th class="wd-15p">Sno.</th>
                <th class="wd-15p">Role</th>

               
                <th class="wd-10p">Action</th>


                
              </tr>
												</thead>
												<tbody>
												</tbody>
											</table>
                      </div>
            
        
      </div><!-- br-section-wrapper -->
     
        
         
       
    </div>        
    </div><!-- br-pagebody -->
    
  
@endsection
 

@section('scripts')
<script>
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: 'roles/lists',
        columns: [
            
            {data: 'rownum'},
            {data: 'name'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
           
        ]
    });
    </script>



@endsection