@extends('layouts.admin')
@section('title', 'Edit Role Permissions')
@section('page-title', 'Edit Role – ' . $role->name)
@section('content')
<div class="max-w-3xl">
    <form action="{{ route('roles.update', $role) }}" method="POST" class="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        @csrf
        @method('PUT')
        <div>
            <h2 class="text-base font-semibold text-slate-900">Role details</h2>
            <p class="mt-1 text-sm text-slate-600">
                Assign which permissions this role should have. Users with this role will automatically get these permissions.
            </p>
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700">Role name</label>
            <p class="mt-1 text-sm font-semibold text-slate-900">{{ $role->name }}</p>
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Permissions</label>
            <div class="grid gap-3 sm:grid-cols-2">
                @foreach($permissions as $permission)
                <label class="flex items-start gap-2 text-sm text-slate-700">
                    <input
                        type="checkbox"
                        name="permissions[]"
                        value="{{ $permission->name }}"
                        class="mt-1 h-4 w-4 rounded border-slate-300 text-slate-800 focus:ring-slate-500"
                        {{ $role->hasPermissionTo($permission->name) ? 'checked' : '' }}
                    >
                    <span>{{ $permission->name }}</span>
                </label>
                @endforeach
            </div>
            @error('permissions')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        </div>
        <div class="flex gap-3">
            <button type="submit" class="btn-primary">Save changes</button>
            <a href="{{ route('roles.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection