@extends('dashboard.layout.partials.dashboard')

@section('content')
<div class="form-group row">
  <div class="col-sm-12">
    @if ($errors->any())
    <div class="alert " style="background-color:rgb(153, 51, 0); color:white">
      <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
    @endif
  </div>
  <div class="col-sm-12">
    @if (session()->has('message'))
    <div class="alert alert-success">
      {{session('message')}}
    </div>
    @endif
  </div>
  <div class="col-sm-12">
    @if (session()->has('hasError'))
    <div class="alert alert-danger">
      {{session('hasError')}}
    </div>
    @endif
  </div>
</div>



<div class="card shadow">
    
      <div class="card-header bg-color">
        <div class="row">
        <div class="col ">
          <h3 class="text">Roles </h3>
        </div>
        <div class="col d-flex justify-content-end ">
          <a class="btn btn-secondary btn-sm" href="{{route('roles.create')}}">Add Role</a>
        </div>
        </div>
      </div>
      
     <div class="card-body">
      <div class="table-responsive">
        <table class="table table-striped myTable">
          <thead>
            <tr>
              <th> Name </th>
              <th> Created at </th>
              <th> Edit </th>
              <th> Delete </th>
            </tr>
          </thead>
          <tbody>
            @foreach($role as $roles)
            <tr>
              <td class="py-1">
                {{$roles->role_name ? $roles->role_name : ''}}
              </td>
              <td> {{$roles->created_at ? $roles->created_at : ''}} </td>
              <td>
                <a class="btn btn-sm btn-inverse-success" href="{{route('roles.edit',$roles->id)}}">Edit</a>
              </td>
              <td> <a class="btn btn-sm btn-inverse-danger" href="{{url('roles/delete',$roles->id)}}">Delete</a>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
</div>
  
   
  

@endsection

@section('javascript')

<script>
  //data-table work
  $(document).ready(function() {
    $('.myTable').DataTable();
//     $('.myTable').DataTable({
//     dom: 'Bfrtip',
//     buttons: [
//         'copy', 'excel', 'pdf', 'csv'
//     ]
// } );
// $('.myTable').DataTable( {
//     dom: 'Bfrtip',
//     buttons: [
//         {
//             extend: 'csv',
//             text: 'Download Excel File'
//         }
//     ]
// } );
  });
</script>
<style>
    .bg-color{
        background-color:white;
        padding-top:20px;
    }
    .text{
        font-size: 24px; 
        font-family: "Arial", sans-serif; 
    font-weight: bold;
    color:black;
    font-family: "Arial", sans-serif; 
    }
</style>
@endsection