@extends('layouts.basic')

@section('content')
    <div class="container-fluid">
      <div class="page-title">
        <div class="row">
          <div class="col-6">
            <h3>Roles & Permission </h3>
          </div>
          <div class="col-6">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
              <li class="breadcrumb-item"><a href="{{ route('roles.index') }}">Roles</a></li>
              <li class="breadcrumb-item active">Roles-List</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
          <div class="card">
            
            <div class="card-body">
              <div >
                @can('role-create')
                <a class="btn btn-success m-r-15" href="{{ route('roles.create') }}"> Create New Role </a>
                @endcan
                {{-- <br> --}}
              </div>
              <br>
                @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    <p>{{ $message }}</p>
                </div>
              @endif
              <table class="table table-bordered" id="roles_table">
                <thead>
                <tr class="table table-secondary">
                   <th>No</th>
                   <th>Name</th>
                   <th width="280px">Action</th>
                </tr>
              </thead>
                  @foreach ($roles as $key => $role)
                  <tbody>
                  <tr>
                      <td>{{ ++$i }}</td>
                      <td>{{ $role->name }}</td>
                      <td>
                          <a class="btn btn-info" href="{{ route('roles.show',$role->id) }}"><i class="bi bi-eye-fill"></i></a>
                          @can('role-edit')
                              <a class="btn btn-primary" href="{{ route('roles.edit',$role->id) }}"><i class="bi bi-pencil-square"></i></a>
                          @endcan
                          @can('role-delete')
                          <form method="POST" action="{{ route('roles.destroy', $role->id) }}" style="display:inline">
                            @method('DELETE')
                            @csrf
                            <button type="submit" class="btn btn-danger" onclick="return confirmDelete(this)">
                                <i class="bi bi-trash-fill"></i>
                            </button>
                        </form>
                        
                        @endcan


                      </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
              
              {{-- {!! $roles->render() !!} --}}
            </div>
          </div>
        </div>
      </div>
    </div>

@endsection

@section('script')
<script>
$('#roles_table').DataTable( {
  responsive: true,
  ordering: false,
  } );


  
</script>
<script>
  function confirmDelete(formElement) {
      if (confirm('Are you sure you want to delete this role?')) {
          // If the user clicks "OK," proceed with the form submission
          formElement.submit();
          return true;
      } else {
          // If the user clicks "Cancel," prevent the form submission
          return false;
      }
  }
  </script>
  

@endsection