{/* Header */}

Nuevo Rol

Crea un nuevo rol y asigna permisos

{/* Form */}

{/* Información básica */} Información del Rol Completa los datos básicos del rol

Nombre del rol * setData('name', e.target.value)} placeholder="Ej: Administrador, Editor, etc." className={errors.name ? 'border-red-500' : ''} /> {errors.name && (

{errors.name}

)}

Guard setData('guard_name', e.target.value)} placeholder="web" className={errors.guard_name ? 'border-red-500' : ''} /> {errors.guard_name && (

{errors.guard_name}

)}

Descripción

setData('description', e.target.value)}
                                        placeholder="Describe las responsabilidades de este rol (opcional)"
                                        rows={3}
                                        className={errors.description ? 'border-red-500' : ''}
                                    />
                                    {errors.description && (
                                        <p className="text-sm text-red-600 dark:text-red-400">
                                            {errors.description}
                                        </p>
                                    )}
                                </div>
                            </CardContent>
                        </Card>

{/* Permisos */}
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-emerald-700 dark:text-emerald-400 flex items-center gap-2">
                                    <Key className="w-5 h-5" />
                                    Permisos
                                </CardTitle>
                                <CardDescription>
                                    Selecciona los permisos que tendrá este rol
                                </CardDescription>
                            </CardHeader>
                            <CardContent>
                                {Object.keys(groupedPermissions).length > 0 ? (
                                    <div className="space-y-6">
                                        {Object.entries(groupedPermissions).map(([category, categoryPermissions]) => (
                                            <div key={category} className="space-y-3">
                                                <h4 className="font-medium text-slate-900 dark:text-white text-sm">
                                                    {category}
                                                </h4>
                                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                                                    {categoryPermissions.map((permission) => (
                                                        <div key={permission.id} className="flex items-center space-x-2 p-3 border rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800">
                                                            <Checkbox
                                                                id={`permission-${permission.id}`}
                                                                checked={data.permissions.includes(permission.id)}
                                                                onCheckedChange={(checked: boolean) =>
                                                                    handlePermissionChange(permission.id, checked)
                                                                }
                                                            />
                                                            <div className="flex-1 min-w-0">
                                                                <Label
                                                                    htmlFor={`permission-${permission.id}`}
                                                                    className="text-sm font-medium text-slate-900 dark:text-white cursor-pointer"
                                                                >
                                                                    {permission.name}
                                                                </Label>
                                                                {permission.description && (
                                                                    <p className="text-xs text-muted-foreground mt-1">
                                                                        {permission.description}
                                                                    </p>
                                                                )}
                                                            </div>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                ) : (
                                    <p className="text-sm text-muted-foreground">
                                        No hay permisos disponibles para asignar.
                                    </p>
                                )}
                                {errors.permissions && (
                                    <p className="text-sm text-red-600 dark:text-red-400 mt-2">
                                        {errors.permissions}
                                    </p>
                                )}
                            </CardContent>
                        </Card>

<div className="flex gap-3">
                            <Button
                                type="submit"
                                disabled={processing}
                                className="bg-emerald-600 hover:bg-emerald-700"
                            >
                                <Save className="w-4 h-4 mr-2" />
                                {processing ? 'Guardando...' : 'Guardar Rol'}
                            </Button>
                            <Button variant="outline" asChild>
                                <Link href="/roles">
                                    Cancelar
                                </Link>
                            </Button>
                        </div>
                    </form>
                </div>
            </div>
        </AppLayout>
    );
}