@extends('dashboard.layout.layout')

@section('content')
  <div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
      <div class="content-header row">
      </div>
      <div class="content-body pb-2 pt-4">
        <!-- users list start -->
        <section class="app-user-list">

          <form method="POST" action="{{ route('roles.update', $role->id) }}">
            @method('patch')
            @csrf
            <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' {{ in_array($permission->name, $rolePermissions) ? 'checked' : '' }}>
                  </td>
                  <td>{{ $permission->name }}</td>
                  <td>{{ $permission->guard_name }}</td>
                </tr>
              @endforeach
            </table>

            <button type="submit" class="btn btn-primary">Save changes</button>
            <a href="{{ route('roles.index') }}" class="btn btn-default">Back</a>
          </form>
        </section>
        <!-- users list ends -->

      </div>
    </div>
  </div>
  <!-- END: Content-->
@endsection

@section('scripts')
  <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