@extends('layouts.app')
@section('content')
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12">
<h2 class="page-title">Create Role</h2>
<div class="card shadow">
<div class="card-body">
<form action="{{ route('roles.store') }}" method="POST">
@csrf
<div class="form-group">
<label for="name">Role Name</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<label for="permissions" class="form-label">Assign Permissions</label>
<table class="table table-striped">
<thead>
<th scope="col" width="1%"><input type="checkbox" name="all_permission"></th>
<th scope="col" width="20%">Name</th>
<th scope="col" width="1%">Guard</th>
</thead>
@foreach ($permissions as $permission)
<tr>
<td>
<input type="checkbox" name="permission[{{ $permission->name }}]"
value="{{ $permission->name }}" class='permission'>
</td>
<td>{{ $permission->name }}</td>
<td>{{ $permission->guard_name }}</td>
</tr>
@endforeach
</table>
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('bottom_script')
<script type="text/javascript">
$(document).ready(function() {
$('[name="all_permission"]').on('click', function() {
if($(this).is(':checked')) {
$.each($('.permission'), function() {
$(this).prop('checked',true);
});
} else {
$.each($('.permission'), function() {
$(this).prop('checked',false);
});
}
});
});
</script>
@endsection