@extends('admin.layouts.app')

@section('title', 'Edit Role')
@section('page-title', 'Edit Role: ' . $role->name)

@section('content')
<form method="POST" action="{{ route('admin.roles.update', $role) }}" class="mx-auto max-w-5xl">
    @csrf
    @method('PUT')

    <!-- Role Name Input -->
    <div class="mb-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-soft dark:border-slate-800 dark:bg-slate-900">
        <div class="max-w-md">
            <label for="name" class="block text-sm font-semibold text-slate-900 dark:text-white mb-2">Role Name</label>
            <input type="text" name="name" id="name" value="{{ old('name', $role->name) }}" required
                   @if(in_array($role->name, ['Super Admin', 'Admin', 'Staff'], true)) readonly @endif
                   class="w-full px-4 py-2.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent @if(in_array($role->name, ['Super Admin', 'Admin', 'Staff'], true)) opacity-60 cursor-not-allowed @endif">
            @if(in_array($role->name, ['Super Admin', 'Admin', 'Staff'], true))
                <p class="mt-2 text-xs text-amber-600"><i class="fa-solid fa-circle-info mr-1"></i> System-critical role names cannot be renamed.</p>
            @endif
            @error('name')
                <p class="mt-2 text-xs text-rose-600">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <!-- Permissions Checklist -->
    <div class="mb-4">
        <h2 class="text-base font-bold text-slate-900 dark:text-white">Assign Permissions</h2>
        <p class="text-xs text-slate-500 mt-1">Select the granular permissions to grant to this role.</p>
    </div>

    @foreach($groupedPermissions as $groupName => $perms)
        <div class="mb-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-soft dark:border-slate-800 dark:bg-slate-900">
            <h3 class="mb-4 text-sm font-bold text-slate-900 dark:text-white border-b border-slate-100 pb-2 dark:border-slate-800">{{ $groupName }} Management</h3>
            <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
                @foreach($perms as $perm)
                    <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-100 p-3 hover:border-emerald-300 dark:border-slate-800/60 dark:hover:border-emerald-500/50">
                        <input type="checkbox" name="permissions[]" value="{{ $perm->name }}" 
                               {{ in_array($perm->name, $rolePermissions, true) ? 'checked' : '' }}
                               class="mt-1 h-4 w-4 rounded text-emerald-600 focus:ring-emerald-500">
                        <span class="text-xs font-semibold text-slate-700 dark:text-slate-300">{{ $perm->name }}</span>
                    </label>
                @endforeach
            </div>
        </div>
    @endforeach

    <!-- Form Footer -->
    <div class="mt-8 flex justify-end gap-3 border-t border-slate-200 pt-6 dark:border-slate-800">
        <a href="{{ route('admin.roles.index') }}" class="btn-danger">
            <i class="fa-solid fa-xmark mr-2"></i>Cancel
        </a>
        <button class="btn-primary bg-emerald-600 hover:bg-emerald-700 text-white" type="submit">
            <i class="fa-solid fa-floppy-disk mr-2"></i>Save Changes
        </button>
    </div>
</form>
@endsection